@proef/common-ui 2.2.6 → 2.5.0

package/dist/esm/legacy/components/molecules/DataTable/DataTable.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef, useLayoutEffect, Fragment } from "react";
 import { FilterChips } from "../../../../v1/primitives/display/FilterChips/FilterChips.js";
 import { Pagination } from "../../../../v1/components/data/Pagination/Pagination.js";
@@ -37,7 +37,9 @@ const DEFAULT_LABELS = {
   clearGroups: "Clear grouping",
   perPage: "Per page",
   selectAll: "(Select all)",
-  selectAllResults: "(Select results)"
+  selectAllResults: "(Select results)",
+  cancel: "Cancel",
+  confirm: "Confirm"
 };
 const Funnel = ({ size = 12, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }) });
 const Layers = ({ size = 11, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
@@ -46,6 +48,20 @@ const Layers = ({ size = 11, className }) => /* @__PURE__ */ jsxs("svg", { xmlns
 ] });
 const Caret = ({ size = 11, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
 const Spinner = ({ size = 16, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: `animate-spin ${className ?? ""}`, "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+const MOBILE_QUERY = "(max-width: 639px)";
+function useEcraEstreito() {
+  const ler = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_QUERY).matches;
+  const [estreito, setEstreito] = useState(ler);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(MOBILE_QUERY);
+    const mudar = () => setEstreito(mq.matches);
+    mudar();
+    mq.addEventListener?.("change", mudar);
+    return () => mq.removeEventListener?.("change", mudar);
+  }, []);
+  return estreito;
+}
 const EMPTY = "—";
 const MAX_OPCOES_FILTRO = 50;
 const DEFAULT_STICKY_WIDTH = 160;
@@ -136,14 +152,18 @@ function valorParaIntervalo(row, col) {
   const v = rawValue(row, col);
   return col.sortType === "date" ? timestampDeData(v) : Number(v);
 }
+function csvValue(row, col) {
+  const v = rawValue(row, col);
+  if (v == null) return "";
+  if (typeof v === "number") return Number.isInteger(v) ? String(v) : String(v).replace(".", ",");
+  return v === "[object Object]" ? "" : v;
+}
 function toCsv(columns, rows) {
-  const esc = (v) => {
-    const s = v == null ? "" : String(v);
-    return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
-  };
-  const head = columns.map((c) => esc(c.label)).join(",");
-  const body = rows.map((r) => columns.map((c) => esc(rawValue(r, c))).join(",")).join("\n");
-  return `${head}
+  const esc = (s) => /[";\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+  const cols = columns.filter((c) => rows.some((r) => csvValue(r, c) !== ""));
+  const head = cols.map((c) => esc(c.label)).join(";");
+  const body = rows.map((r) => cols.map((c) => esc(csvValue(r, c))).join(";")).join("\r\n");
+  return `${head}\r
 ${body}`;
 }
 const ordenarRotulos = (a, b) => a === EMPTY ? 1 : b === EMPTY ? -1 : COLLATOR.compare(a, b);
@@ -219,9 +239,11 @@ function DataTable({
   onGroupByChange,
   onSortChange,
   onColumnFiltersChange,
-  scrollAffordance = false
+  scrollAffordance = false,
+  mobileCards = true
 }) {
   const L = { ...DEFAULT_LABELS, ...labels };
+  const estreito = useEcraEstreito();
   const [larguras, setLarguras] = useState(() => {
     if (!storageKey) return {};
     try {
@@ -308,6 +330,10 @@ function DataTable({
   const [selectedKeys, setSelectedKeys] = useState(() => new Set(selecaoInicial ?? []));
   const [openFilter, setOpenFilter] = useState(null);
   const [filterSearch, setFilterSearch] = useState("");
+  const [rascunho, setRascunho] = useState(null);
+  useEffect(() => {
+    setRascunho(null);
+  }, [openFilter]);
   const filterRefs = useRef(/* @__PURE__ */ new Map());
   const popupRef = useRef(null);
   const [popupPos, setPopupPos] = useState(null);
@@ -666,8 +692,17 @@ function DataTable({
     if (!allData) onDataNeeded?.();
     setSort((s) => s?.key === key ? s.dir === 1 ? { key, dir: -1 } : null : { key, dir: 1 });
   };
-  const selecaoDaColuna = (key) => new Set(columnFilters[key] ?? (modoExcel ? openFilterOptions : []));
-  const aplicarSelecao = (key, sel) => mudarFiltrosCol((prev) => {
+  const selecaoDaColuna = (key) => new Set(rascunho?.key === key ? rascunho.sel : columnFilters[key] ?? (modoExcel ? openFilterOptions : []));
+  const aplicarSelecao = (key, sel) => setRascunho({ key, sel });
+  const confirmarSelecao = (key) => {
+    if (rascunho?.key === key) {
+      if (!allData) onDataNeeded?.();
+      gravarSelecao(key, rascunho.sel);
+    }
+    setOpenFilter(null);
+    setFilterSearch("");
+  };
+  const gravarSelecao = (key, sel) => mudarFiltrosCol((prev) => {
     const proximo = { ...prev };
     if (modoExcel && sel.size === openFilterOptions.length) delete proximo[key];
     else proximo[key] = sel;
@@ -703,6 +738,7 @@ function DataTable({
     });
   };
   const clearColumnFilter = (key) => {
+    setRascunho(null);
     mudarFiltrosCol((prev) => {
       const n = { ...prev };
       delete n[key];
@@ -724,8 +760,9 @@ function DataTable({
   };
   const temFiltro = (key) => (modoExcel ? columnFilters[key] !== void 0 : (columnFilters[key]?.size ?? 0) > 0) || temIntervalo(key);
   const handleExport = () => {
-    if (onExport) return onExport(sorted);
-    const csv = toCsv(columns, sorted);
+    const linhas = allData && !isClientMode ? ordenar(filtrar(allData)) : sorted;
+    if (onExport) return onExport(linhas);
+    const csv = toCsv(columns, linhas);
     const blob = new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8;" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -789,7 +826,7 @@ function DataTable({
   const renderPopup = (coluna, key, listas) => {
     const col = key === coluna.key ? coluna : void 0;
     const { opts, total: totalOpcoes } = opcoesVisiveis;
-    const sel = columnFilters[key];
+    const sel = rascunho?.key === key ? rascunho.sel : columnFilters[key];
     const isFiltered = temFiltro(key);
     const podeOrdenar = !!sortFromFilter && !!col && col.sortable !== false;
     const eData = col?.sortType === "date";
@@ -898,6 +935,12 @@ function DataTable({
                   autoFocus: true,
                   value: filterSearch,
                   onChange: (e) => setFilterSearch(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      confirmarSelecao(key);
+                    }
+                  },
                   placeholder: L.search,
                   className: "w-full bg-slate-50 dark:bg-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-700 rounded-lg px-2 py-1.5 text-xs outline-none focus:border-proef-blue dark:focus:border-proef-turquoise mb-2"
                 }
@@ -951,14 +994,38 @@ function DataTable({
                 })
               ] }),
               totalOpcoes > opts.length && /* @__PURE__ */ jsx("p", { className: "text-[10.5px] text-slate-400 text-center pt-2", children: L.moreOptions.replace("{shown}", String(opts.length)).replace("{total}", String(totalOpcoes)) }),
-              isFiltered && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => clearColumnFilter(key),
-                  className: "appearance-none bg-transparent border-0 border-t border-slate-100 dark:border-slate-800 cursor-pointer w-full mt-2 pt-2 text-[10px] font-black uppercase tracking-wider text-red-400 hover:text-red-500",
-                  children: L.clear
-                }
-              )
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2 pt-2 border-t border-slate-100 dark:border-slate-800", children: [
+                isFiltered && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => clearColumnFilter(key),
+                    className: "appearance-none bg-transparent border-0 cursor-pointer text-[10px] font-black uppercase tracking-wider text-red-400 hover:text-red-500",
+                    children: L.clear
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setOpenFilter(null);
+                      setFilterSearch("");
+                    },
+                    className: "appearance-none bg-transparent border-0 cursor-pointer ml-auto text-[10px] font-black uppercase tracking-wider text-slate-400 hover:text-slate-600 dark:hover:text-slate-200",
+                    children: L.cancel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => confirmarSelecao(key),
+                    className: "appearance-none border-0 cursor-pointer rounded-lg bg-proef-navy dark:bg-proef-turquoise px-3 py-1.5 text-[10px] font-black uppercase tracking-wider text-white dark:text-proef-navy hover:bg-proef-blue dark:hover:opacity-90",
+                    children: L.confirm
+                  }
+                )
+              ] })
             ] })
           ]
         }
@@ -1080,19 +1147,86 @@ function DataTable({
       !recolhido && (no.filhos.length > 0 ? renderGrupos(no.filhos, nivel + 1) : no.items.map((row) => renderLinha(row, indicePorLinha.get(row) ?? 0)))
     ] }, no.path);
   });
+  const renderCartoes = () => {
+    const vazio = /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: EMPTY });
+    const conteudo = (row, c) => c.render ? c.render(row) : rawValue(row, c) ?? vazio;
+    const [principal, ...resto] = columns;
+    const campos = resto.filter((c) => c.label);
+    const semValor = (row, c) => {
+      if (!c.value && !(c.key in row)) return false;
+      const v = rawValue(row, c);
+      return v === null || v === "";
+    };
+    const acoes = resto.filter((c) => !c.label);
+    const aviso = (texto) => /* @__PURE__ */ jsx("div", { className: "py-12 text-center text-sm text-slate-400", children: texto });
+    return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-[13px] dark:text-slate-200", children: isLoading || aEsperarDataset ? aviso(
+      /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Spinner, { size: 16, className: "text-proef-blue dark:text-proef-turquoise" }),
+        L.loading
+      ] })
+    ) : sorted.length === 0 ? aviso(
+      /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        emptyIcon && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-2", children: emptyIcon }),
+        /* @__PURE__ */ jsx("p", { className: "m-0", children: L.empty }),
+        emptySubLabel && /* @__PURE__ */ jsx("p", { className: "m-0 text-xs mt-1", children: emptySubLabel })
+      ] })
+    ) : /* @__PURE__ */ jsx("ul", { className: "m-0 list-none p-0 divide-y divide-slate-100 dark:divide-slate-800", children: pageData.map((row, i) => {
+      const k = chaveDe(row, i);
+      const marcada = selectable && selectedKeys.has(k);
+      const selecionavel = !!selectable && podeSelecionar(row);
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          onClick: () => onRowClick?.(row),
+          className: `px-3 py-3 space-y-1.5 ${onRowClick ? "cursor-pointer active:bg-slate-100 dark:active:bg-slate-800" : ""} ${marcada ? "bg-proef-turquoise/5" : ""} ${rowClassName?.(row) ?? ""}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              selectable && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "checkbox",
+                  "aria-checked": !!marcada,
+                  "aria-disabled": !selecionavel || void 0,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (selecionavel) alternarLinha(k);
+                  },
+                  className: `mt-0.5 w-4 h-4 shrink-0 flex items-center justify-center border rounded ${marcada ? "bg-proef-navy dark:bg-proef-turquoise border-proef-navy dark:border-proef-turquoise text-white dark:text-proef-navy" : "border-slate-300 dark:border-slate-600"} ${selecionavel ? "" : "opacity-40"}`,
+                  children: marcada && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
+                }
+              ),
+              principal && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 font-semibold break-words", children: conteudo(row, principal) }),
+              acoes.length > 0 && /* @__PURE__ */ jsx("div", { className: "-my-1 flex shrink-0 items-center gap-1", onClick: (e) => e.stopPropagation(), children: acoes.map((c) => /* @__PURE__ */ jsx(Fragment, { children: conteudo(row, c) }, c.key)) })
+            ] }),
+            campos.filter((c) => !semValor(row, c)).map((c) => /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400 pt-px", children: c.label }),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 text-right break-words", children: conteudo(row, c) })
+            ] }, c.key))
+          ]
+        },
+        k
+      );
+    }) }) });
+  };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-2.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: isLoading ? "" : L.results.replace("{count}", String(totalResultados)) }),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-2.5 max-sm:[&>div>:has(input[type=search])]:order-first max-sm:[&>div>:has(input[type=search])]:w-full", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500 dark:text-slate-400 max-sm:mr-auto", children: isLoading ? "" : L.results.replace("{count}", String(totalResultados)) }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2 max-sm:contents", children: [
         extraToolbar,
-        exportFileName && sorted.length > 0 && /* @__PURE__ */ jsxs(
+        exportFileName && sorted.length > 0 && // Mesmo aspeto do botão Colunas ao lado (o navy cheio competia com as ações da página).
+        /* @__PURE__ */ jsxs(
           "button",
           {
+            type: "button",
             onClick: handleExport,
-            className: "appearance-none cursor-pointer inline-flex items-center gap-1.5 h-8 px-3.5 rounded-lg border border-proef-navy dark:border-proef-turquoise bg-proef-navy dark:bg-proef-turquoise text-white dark:text-proef-navy hover:bg-proef-blue dark:hover:bg-proef-turquoise/80 text-[11px] font-black uppercase tracking-widest transition-colors",
+            className: "appearance-none cursor-pointer bg-white inline-flex items-center gap-2 h-8 rounded-lg border border-slate-300 px-3 text-xs font-medium text-slate-700 transition hover:bg-slate-50 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700",
             children: [
-              "⭳ ",
-              L.export
+              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", "aria-hidden": true, children: [
+                /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: L.export })
             ]
           }
         )
@@ -1146,95 +1280,98 @@ function DataTable({
         clearAllLabel: L.clearAll
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `overflow-auto rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 ${scrollAffordance ? "outline-none focus-visible:ring-2 focus-visible:ring-proef-blue dark:focus-visible:ring-proef-turquoise" : ""}`,
-        style: { maxHeight },
-        ...scrollAffordance ? { tabIndex: 0, role: "region", "aria-label": L.scrollRegion ?? DEFAULT_LABELS.scrollRegion, onKeyDown: rolarComTeclado } : {},
-        children: /* @__PURE__ */ jsxs("table", { className: "w-full text-[13px] border-collapse dark:text-slate-200", children: [
-          /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-[2]", children: /* @__PURE__ */ jsxs("tr", { children: [
-            selectable && /* @__PURE__ */ jsx("th", { className: "bg-slate-50 dark:bg-slate-800 px-3 py-2.5 border-b border-slate-200 dark:border-slate-700 w-10 sticky left-0 z-[3]", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: alternarTodas,
-                className: `appearance-none cursor-pointer w-4 h-4 flex items-center justify-center border transition-colors rounded ${todasVisiveisMarcadas ? "bg-proef-navy dark:bg-proef-turquoise border-proef-navy dark:border-proef-turquoise text-white dark:text-proef-navy" : algumaVisivelMarcada ? "bg-slate-300 dark:bg-slate-600 border-slate-300 dark:border-slate-600 text-white" : "bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-600 hover:border-slate-400 dark:hover:border-slate-500"}`,
-                children: (todasVisiveisMarcadas || algumaVisivelMarcada) && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
-              }
-            ) }),
-            columns.map((c) => {
-              const podeOrdenar = c.sortable !== false;
-              const podeAgrupar = agrupavel(c);
-              const agrupada = groupByKeys.includes(c.key);
-              return /* @__PURE__ */ jsxs(
-                "th",
+    mobileCards && estreito && !isGrouped ? renderCartoes() : (
+      /* rounded-xl: os mesmos cantos dos cartões da biblioteca (Ui.tsx) e das tabelas dos portais. */
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `overflow-auto rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 ${scrollAffordance ? "outline-none focus-visible:ring-2 focus-visible:ring-proef-blue dark:focus-visible:ring-proef-turquoise" : ""}`,
+          style: { maxHeight },
+          ...scrollAffordance ? { tabIndex: 0, role: "region", "aria-label": L.scrollRegion ?? DEFAULT_LABELS.scrollRegion, onKeyDown: rolarComTeclado } : {},
+          children: /* @__PURE__ */ jsxs("table", { className: "w-full text-[13px] border-collapse dark:text-slate-200", children: [
+            /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-[2]", children: /* @__PURE__ */ jsxs("tr", { children: [
+              selectable && /* @__PURE__ */ jsx("th", { className: "bg-slate-50 dark:bg-slate-800 px-3 py-2.5 border-b border-slate-200 dark:border-slate-700 w-10 sticky left-0 z-[3]", children: /* @__PURE__ */ jsx(
+                "button",
                 {
-                  style: {
-                    ...c.width ? { minWidth: c.width } : {},
-                    ...larguras[c.key] ? { width: larguras[c.key], minWidth: larguras[c.key], maxWidth: larguras[c.key] } : {},
-                    ...estiloPreso(c) ?? {}
-                  },
-                  className: `group/th relative bg-slate-50 dark:bg-slate-800 text-[11.5px] uppercase tracking-wide text-slate-500 dark:text-slate-400 font-semibold px-3 py-2.5 border-b border-slate-200 dark:border-slate-700 whitespace-nowrap select-none ${alignClass(
-                    c.align
-                  )} ${c.sticky ? `sticky z-[3] bg-slate-50 dark:bg-slate-800 ${c.sticky === "right" ? "border-l border-slate-200 dark:border-slate-700" : ""}` : ""} ${c.headerClassName ?? ""}`,
-                  children: [
-                    resizableColumns && // Pega no limite direito: arrastar redimensiona; duplo clique repõe a largura automática
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        role: "separator",
-                        "aria-orientation": "vertical",
-                        title: L.resizeColumn,
-                        onMouseDown: (e) => iniciarResize(e, c.key),
-                        onDoubleClick: () => reporLargura(c.key),
-                        onClick: (e) => e.stopPropagation(),
-                        className: "absolute right-0 top-0 z-[4] h-full w-1.5 cursor-col-resize bg-transparent hover:bg-proef-blue/40 group-hover/th:bg-slate-300/60 dark:group-hover/th:bg-slate-600/60"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                      podeOrdenar ? /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => toggleSort(c.key),
-                          className: "appearance-none bg-transparent border-0 cursor-pointer p-0 uppercase tracking-wide text-slate-500 dark:text-slate-400 hover:text-proef-blue dark:hover:text-proef-turquoise font-semibold",
-                          children: [
-                            c.label,
-                            sort?.key === c.key && /* @__PURE__ */ jsx("span", { className: "ml-1", children: sort.dir === 1 ? "▲" : "▼" })
-                          ]
-                        }
-                      ) : /* @__PURE__ */ jsx("span", { children: c.label }),
-                      podeAgrupar && /* @__PURE__ */ jsx(
-                        "button",
+                  onClick: alternarTodas,
+                  className: `appearance-none cursor-pointer w-4 h-4 flex items-center justify-center border transition-colors rounded ${todasVisiveisMarcadas ? "bg-proef-navy dark:bg-proef-turquoise border-proef-navy dark:border-proef-turquoise text-white dark:text-proef-navy" : algumaVisivelMarcada ? "bg-slate-300 dark:bg-slate-600 border-slate-300 dark:border-slate-600 text-white" : "bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-600 hover:border-slate-400 dark:hover:border-slate-500"}`,
+                  children: (todasVisiveisMarcadas || algumaVisivelMarcada) && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
+                }
+              ) }),
+              columns.map((c) => {
+                const podeOrdenar = c.sortable !== false;
+                const podeAgrupar = agrupavel(c);
+                const agrupada = groupByKeys.includes(c.key);
+                return /* @__PURE__ */ jsxs(
+                  "th",
+                  {
+                    style: {
+                      ...c.width ? { minWidth: c.width } : {},
+                      ...larguras[c.key] ? { width: larguras[c.key], minWidth: larguras[c.key], maxWidth: larguras[c.key] } : {},
+                      ...estiloPreso(c) ?? {}
+                    },
+                    className: `group/th relative bg-slate-50 dark:bg-slate-800 text-[11.5px] uppercase tracking-wide text-slate-500 dark:text-slate-400 font-semibold px-3 py-2.5 border-b border-slate-200 dark:border-slate-700 whitespace-nowrap select-none ${alignClass(
+                      c.align
+                    )} ${c.sticky ? `sticky z-[3] bg-slate-50 dark:bg-slate-800 ${c.sticky === "right" ? "border-l border-slate-200 dark:border-slate-700" : ""}` : ""} ${c.headerClassName ?? ""}`,
+                    children: [
+                      resizableColumns && // Pega no limite direito: arrastar redimensiona; duplo clique repõe a largura automática
+                      /* @__PURE__ */ jsx(
+                        "span",
                         {
-                          onClick: () => alternarGrupo(c.key),
-                          title: (agrupada ? L.ungroup : L.groupBy).replace("{label}", c.label),
-                          className: `appearance-none bg-transparent border-0 cursor-pointer p-0.5 transition-colors ${agrupada ? "text-violet-600 dark:text-violet-300" : "text-slate-300 dark:text-slate-600 hover:text-slate-500 dark:hover:text-slate-300"}`,
-                          children: /* @__PURE__ */ jsx(Layers, { size: 10 })
+                          role: "separator",
+                          "aria-orientation": "vertical",
+                          title: L.resizeColumn,
+                          onMouseDown: (e) => iniciarResize(e, c.key),
+                          onDoubleClick: () => reporLargura(c.key),
+                          onClick: (e) => e.stopPropagation(),
+                          className: "absolute right-0 top-0 z-[4] h-full w-1.5 cursor-col-resize bg-transparent hover:bg-proef-blue/40 group-hover/th:bg-slate-300/60 dark:group-hover/th:bg-slate-600/60"
                         }
                       ),
-                      botaoFunil(c)
-                    ] }),
-                    c.headerExtra && /* @__PURE__ */ jsx("div", { className: "mt-0.5 normal-case font-normal tracking-normal", children: c.headerExtra(filtered) })
-                  ]
-                },
-                c.key
-              );
-            })
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", className: "inline-flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Spinner, { size: 16, className: "text-proef-blue dark:text-proef-turquoise" }),
-            /* @__PURE__ */ jsx("span", { children: L.loading })
-          ] }) }) }) : aEsperarDataset ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: L.loading }) }) : isGrouped ? grupos.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm text-slate-400", children: L.empty }) }) : renderGrupos(grupos, 0) : sorted.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: nColunas, className: "py-16 text-center", children: [
-            emptyIcon && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-2", children: emptyIcon }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-400", children: L.empty }),
-            emptySubLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400 mt-1", children: emptySubLabel })
-          ] }) }) : pageData.map((row, i) => renderLinha(row, i)) }),
-          totalRow && !isLoading && !aEsperarDataset && sorted.length > 0 && /* @__PURE__ */ jsx("tfoot", { className: "sticky bottom-0 z-[2]", children: /* @__PURE__ */ jsxs("tr", { className: "bg-slate-100 dark:bg-slate-800 font-black text-slate-800 dark:text-slate-100", children: [
-            /* @__PURE__ */ jsx("td", { colSpan: colunasRotuloGrupo, className: "px-3 py-2 border-t-2 border-slate-200 dark:border-slate-700 text-[10px] uppercase tracking-widest", children: L.total }),
-            colunasComValor.map((c) => /* @__PURE__ */ jsx("td", { className: `px-3 py-2 border-t-2 border-slate-200 dark:border-slate-700 whitespace-nowrap text-xs ${alignClass(c.align)}`, children: c.groupAggregate?.(sorted) }, c.key))
-          ] }) })
-        ] })
-      }
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                        podeOrdenar ? /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            onClick: () => toggleSort(c.key),
+                            className: "appearance-none bg-transparent border-0 cursor-pointer p-0 uppercase tracking-wide text-slate-500 dark:text-slate-400 hover:text-proef-blue dark:hover:text-proef-turquoise font-semibold",
+                            children: [
+                              c.label,
+                              sort?.key === c.key && /* @__PURE__ */ jsx("span", { className: "ml-1", children: sort.dir === 1 ? "▲" : "▼" })
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { children: c.label }),
+                        podeAgrupar && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => alternarGrupo(c.key),
+                            title: (agrupada ? L.ungroup : L.groupBy).replace("{label}", c.label),
+                            className: `appearance-none bg-transparent border-0 cursor-pointer p-0.5 transition-colors ${agrupada ? "text-violet-600 dark:text-violet-300" : "text-slate-300 dark:text-slate-600 hover:text-slate-500 dark:hover:text-slate-300"}`,
+                            children: /* @__PURE__ */ jsx(Layers, { size: 10 })
+                          }
+                        ),
+                        botaoFunil(c)
+                      ] }),
+                      c.headerExtra && /* @__PURE__ */ jsx("div", { className: "mt-0.5 normal-case font-normal tracking-normal", children: c.headerExtra(filtered) })
+                    ]
+                  },
+                  c.key
+                );
+              })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Spinner, { size: 16, className: "text-proef-blue dark:text-proef-turquoise" }),
+              /* @__PURE__ */ jsx("span", { children: L.loading })
+            ] }) }) }) : aEsperarDataset ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-slate-400", children: L.loading }) }) : isGrouped ? grupos.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: nColunas, className: "py-16 text-center text-sm text-slate-400", children: L.empty }) }) : renderGrupos(grupos, 0) : sorted.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: nColunas, className: "py-16 text-center", children: [
+              emptyIcon && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-2", children: emptyIcon }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-400", children: L.empty }),
+              emptySubLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400 mt-1", children: emptySubLabel })
+            ] }) }) : pageData.map((row, i) => renderLinha(row, i)) }),
+            totalRow && !isLoading && !aEsperarDataset && sorted.length > 0 && /* @__PURE__ */ jsx("tfoot", { className: "sticky bottom-0 z-[2]", children: /* @__PURE__ */ jsxs("tr", { className: "bg-slate-100 dark:bg-slate-800 font-black text-slate-800 dark:text-slate-100", children: [
+              /* @__PURE__ */ jsx("td", { colSpan: colunasRotuloGrupo, className: "px-3 py-2 border-t-2 border-slate-200 dark:border-slate-700 text-[10px] uppercase tracking-widest", children: L.total }),
+              colunasComValor.map((c) => /* @__PURE__ */ jsx("td", { className: `px-3 py-2 border-t-2 border-slate-200 dark:border-slate-700 whitespace-nowrap text-xs ${alignClass(c.align)}`, children: c.groupAggregate?.(sorted) }, c.key))
+            ] }) })
+          ] })
+        }
+      )
     ),
     !isLoading && paginando && (totalPages > 1 || (pageSizeOptions?.length ?? 0) > 0) && /* @__PURE__ */ jsx(
       Pagination,