@proef/common-ui 0.0.0-stage → 2.2.1

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

@@ -0,0 +1,1259 @@
+import { jsx, jsxs } 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";
+import { createPortal } from "react-dom";
+const DEFAULT_LABELS = {
+  total: "Total",
+  scrollRegion: "Tabela (deslizar na horizontal)",
+  results: "{count} results",
+  resizeColumn: "Drag to resize · double-click to reset",
+  export: "Export",
+  loading: "Loading…",
+  empty: "No data",
+  error: "Failed to load",
+  search: "Search…",
+  clear: "Clear",
+  clearAll: "Clear all",
+  noOptions: "No options",
+  selected: "{count} sel.",
+  moreOptions: "Showing {shown} of {total} — refine your search",
+  loadingOptions: "Loading options from all pages…",
+  min: "From",
+  max: "To",
+  from: "From",
+  to: "To",
+  page: "Page {page}/{pages}",
+  prev: "Prev",
+  next: "Next",
+  sortAsc: "Sort ascending",
+  sortDesc: "Sort descending",
+  sortOldest: "Oldest first",
+  sortNewest: "Newest first",
+  sortSmallest: "Smallest first",
+  sortLargest: "Largest first",
+  groupBy: "Group by {label}",
+  ungroup: "Remove grouping by {label}",
+  clearGroups: "Clear grouping",
+  perPage: "Per page",
+  selectAll: "(Select all)",
+  selectAllResults: "(Select results)"
+};
+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: [
+  /* @__PURE__ */ jsx("path", { d: "m12 2 9 5-9 5-9-5 9-5z" }),
+  /* @__PURE__ */ jsx("path", { d: "m3 17 9 5 9-5M3 12l9 5 9-5" })
+] });
+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 EMPTY = "—";
+const MAX_OPCOES_FILTRO = 50;
+const DEFAULT_STICKY_WIDTH = 160;
+const COLLATOR = new Intl.Collator(void 0, { numeric: true });
+function rawValue(row, col) {
+  if (col.value) {
+    const v2 = col.value(row);
+    return v2 == null ? null : v2;
+  }
+  const v = row[col.key];
+  if (v == null) return null;
+  if (typeof v === "number" || typeof v === "string") return v;
+  return String(v);
+}
+const normalizarRotulo = (v) => v == null || v === "" ? EMPTY : String(v);
+function filterKey(row, col) {
+  return normalizarRotulo(rawValue(row, col));
+}
+function temValor(row, col) {
+  if (col.filterValues) return col.filterValues(row).some((v) => v != null && v !== "");
+  return rawValue(row, col) !== null;
+}
+function lerFiltrosGuardados(columns, f) {
+  return Object.fromEntries(
+    Object.entries(f).map(([k, v]) => {
+      const data = columns.find((c) => c.key === k)?.sortType === "date";
+      return [k, new Set(data ? v.map(rotuloDeData) : v)];
+    })
+  );
+}
+function chaveDosFiltros(f) {
+  return JSON.stringify(
+    Object.entries(f).map(([k, v]) => [k, [...v].sort()]).sort()
+  );
+}
+function timestampDeData(v) {
+  if (v == null || v === "") return NaN;
+  if (v instanceof Date) return v.getTime();
+  if (typeof v === "number") return Number.isFinite(v) ? v : NaN;
+  const s = String(v).trim();
+  const m = /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})/.exec(s);
+  if (m) return Date.UTC(Number(m[3]), Number(m[2]) - 1, Number(m[1]));
+  const t = new Date(s).getTime();
+  return Number.isNaN(t) ? NaN : t;
+}
+const doisDigitos = (n) => String(n).padStart(2, "0");
+const RX_CHAVE_DIA = /^(\d{4})-(\d{2})-(\d{2})$/;
+function chaveDia(v) {
+  if (v == null || v === "") return null;
+  if (typeof v === "string") {
+    const s = v.trim();
+    const pt = /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})/.exec(s);
+    if (pt) return `${pt[3]}-${doisDigitos(pt[2])}-${doisDigitos(pt[1])}`;
+    if (RX_CHAVE_DIA.test(s)) return s;
+  }
+  const t = timestampDeData(v);
+  if (!Number.isFinite(t)) return null;
+  const d = new Date(t);
+  return `${d.getFullYear()}-${doisDigitos(d.getMonth() + 1)}-${doisDigitos(d.getDate())}`;
+}
+function rotuloDeData(v) {
+  if (v == null || v === "") return EMPTY;
+  return chaveDia(v) ?? String(v);
+}
+function diaVisivel(v) {
+  const m = RX_CHAVE_DIA.exec(v);
+  return m ? `${m[3]}/${m[2]}/${m[1]}` : v;
+}
+function ordenarDias(a, b) {
+  if (a === EMPTY) return 1;
+  if (b === EMPTY) return -1;
+  const da = RX_CHAVE_DIA.test(a);
+  const db = RX_CHAVE_DIA.test(b);
+  if (da && db) return a < b ? 1 : a > b ? -1 : 0;
+  if (da) return -1;
+  if (db) return 1;
+  return COLLATOR.compare(a, b);
+}
+function compare(a, b, type) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (type === "number") return Number(a) - Number(b);
+  if (type === "date") return timestampDeData(a) - timestampDeData(b);
+  return COLLATOR.compare(String(a), String(b));
+}
+function valorParaIntervalo(row, col) {
+  const v = rawValue(row, col);
+  return col.sortType === "date" ? timestampDeData(v) : Number(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}
+${body}`;
+}
+const ordenarRotulos = (a, b) => a === EMPTY ? 1 : b === EMPTY ? -1 : COLLATOR.compare(a, b);
+const SEM_CRUZAMENTO = [];
+const escaparRegex = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function pesquisaCuringa(q) {
+  let fonte = "";
+  let literal = "";
+  let temCuringa = false;
+  for (let i = 0; i < q.length; i++) {
+    const c = q[i];
+    const seguinte = q[i + 1];
+    if (c === "~" && (seguinte === "*" || seguinte === "?" || seguinte === "~")) {
+      fonte += escaparRegex(seguinte);
+      literal += seguinte;
+      i++;
+      continue;
+    }
+    if (c === "*" || c === "?") {
+      fonte += c === "*" ? ".*" : ".";
+      literal += c;
+      temCuringa = true;
+      continue;
+    }
+    fonte += escaparRegex(c);
+    literal += c;
+  }
+  if (!temCuringa) return (v) => v.includes(literal);
+  const rx = new RegExp(`^${fonte}$`);
+  return (v) => rx.test(v);
+}
+function DataTable({
+  columns,
+  data,
+  allData,
+  onDataNeeded,
+  isAllDataLoading,
+  alwaysClient,
+  totalCount,
+  onClientModeChange,
+  rowKey,
+  onRowClick,
+  onRowDoubleClick,
+  rowClassName,
+  onVisibleRowsChange,
+  isLoading,
+  isError,
+  maxHeight = "70vh",
+  pageSize,
+  pageSizeOptions,
+  selectable,
+  onSelectionChange,
+  isRowSelectable,
+  initialSelectedKeys,
+  clearSelectionTrigger,
+  storageKey,
+  defaultMaxColumnWidth = 360,
+  resizableColumns = true,
+  sortFromFilter = true,
+  filterMode = "excel",
+  defaultSortKey,
+  defaultSortDir,
+  viewRef,
+  exportFileName,
+  onExport,
+  extraToolbar,
+  emptySubLabel,
+  emptyIcon,
+  labels,
+  totalRow = false,
+  defaultGroupBy,
+  groupBy,
+  onGroupByChange,
+  onSortChange,
+  onColumnFiltersChange,
+  scrollAffordance = false
+}) {
+  const L = { ...DEFAULT_LABELS, ...labels };
+  const [larguras, setLarguras] = useState(() => {
+    if (!storageKey) return {};
+    try {
+      return JSON.parse(localStorage.getItem(`dt_widths_${storageKey}`) ?? "{}");
+    } catch {
+      return {};
+    }
+  });
+  useEffect(() => {
+    if (!storageKey) return;
+    try {
+      localStorage.setItem(`dt_widths_${storageKey}`, JSON.stringify(larguras));
+    } catch {
+    }
+  }, [larguras, storageKey]);
+  const larguraMax = (c) => larguras[c.key] ?? c.maxWidth ?? (defaultMaxColumnWidth > 0 ? defaultMaxColumnWidth : void 0);
+  const iniciarResize = (e, key) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const th = e.currentTarget.parentElement;
+    const x0 = e.clientX;
+    const w0 = th?.getBoundingClientRect().width ?? 120;
+    const mover = (ev) => setLarguras((l) => ({ ...l, [key]: Math.max(60, Math.round(w0 + ev.clientX - x0)) }));
+    const parar = () => {
+      window.removeEventListener("mousemove", mover);
+      window.removeEventListener("mouseup", parar);
+      document.body.style.cursor = "";
+    };
+    document.body.style.cursor = "col-resize";
+    window.addEventListener("mousemove", mover);
+    window.addEventListener("mouseup", parar);
+  };
+  const reporLargura = (key) => setLarguras((l) => {
+    const n = { ...l };
+    delete n[key];
+    return n;
+  });
+  const lerSessao = (sufixo) => {
+    if (!storageKey) return void 0;
+    try {
+      const raw = sessionStorage.getItem(`dt_${sufixo}_${storageKey}`);
+      return raw === null ? void 0 : JSON.parse(raw);
+    } catch {
+      return void 0;
+    }
+  };
+  const [sort, setSort] = useState(() => {
+    const guardada = lerSessao("sort");
+    if (guardada !== void 0) return guardada && columns.some((c) => c.key === guardada.key) ? guardada : null;
+    return defaultSortKey ? { key: defaultSortKey, dir: defaultSortDir === "desc" ? -1 : 1 } : null;
+  });
+  const [columnFilters, setColumnFilters] = useState(() => {
+    if (!storageKey) return {};
+    try {
+      const raw = sessionStorage.getItem(`dt_filters_${storageKey}`);
+      if (!raw) return {};
+      return lerFiltrosGuardados(columns, JSON.parse(raw));
+    } catch {
+      return {};
+    }
+  });
+  const [rangeFilters, setRangeFilters] = useState(() => {
+    if (!storageKey) return {};
+    try {
+      const raw = sessionStorage.getItem(`dt_ranges_${storageKey}`);
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  });
+  const [groupByInterno, setGroupByInterno] = useState(
+    () => (lerSessao("group") ?? defaultGroupBy ?? []).filter((k) => columns.some((c) => c.key === k))
+  );
+  const grupoControlado = groupBy !== void 0;
+  const chaveGrupoExterno = groupBy?.join("\0");
+  const chaveColunas = columns.map((c) => c.key).join("\0");
+  const groupByKeys = useMemo(
+    () => grupoControlado ? groupBy.filter((k) => columns.some((c) => c.key === k)) : groupByInterno,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [grupoControlado, chaveGrupoExterno, groupByInterno, chaveColunas]
+  );
+  const [collapsedGroups, setCollapsedGroups] = useState(/* @__PURE__ */ new Set());
+  const selecaoInicial = initialSelectedKeys ? Array.from(initialSelectedKeys, String) : null;
+  const [selectedKeys, setSelectedKeys] = useState(() => new Set(selecaoInicial ?? []));
+  const [openFilter, setOpenFilter] = useState(null);
+  const [filterSearch, setFilterSearch] = useState("");
+  const filterRefs = useRef(/* @__PURE__ */ new Map());
+  const popupRef = useRef(null);
+  const [popupPos, setPopupPos] = useState(null);
+  const isGrouped = groupByKeys.length > 0;
+  const funilAberto = openFilter ? columns.find((c) => c.key === openFilter || c.extraFilters?.some((f) => f.key === openFilter))?.key ?? openFilter : null;
+  useEffect(() => {
+    if (!storageKey) return;
+    const serializavel = Object.fromEntries(Object.entries(columnFilters).map(([k, v]) => [k, Array.from(v)]));
+    try {
+      sessionStorage.setItem(`dt_filters_${storageKey}`, JSON.stringify(serializavel));
+      sessionStorage.setItem(`dt_ranges_${storageKey}`, JSON.stringify(rangeFilters));
+      sessionStorage.setItem(`dt_sort_${storageKey}`, JSON.stringify(sort));
+      if (!grupoControlado) sessionStorage.setItem(`dt_group_${storageKey}`, JSON.stringify(groupByKeys));
+    } catch {
+    }
+  }, [columnFilters, rangeFilters, sort, groupByKeys, grupoControlado, storageKey]);
+  useLayoutEffect(() => {
+    if (!funilAberto) {
+      setPopupPos(null);
+      return;
+    }
+    const recalcular = () => {
+      const el = filterRefs.current.get(funilAberto);
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const largura = Math.min(288, window.innerWidth * 0.8);
+      const left = Math.max(8, Math.min(r.left, window.innerWidth - largura - 8));
+      setPopupPos({ top: r.bottom + 6, left });
+    };
+    recalcular();
+    window.addEventListener("scroll", recalcular, true);
+    window.addEventListener("resize", recalcular);
+    return () => {
+      window.removeEventListener("scroll", recalcular, true);
+      window.removeEventListener("resize", recalcular);
+    };
+  }, [funilAberto]);
+  useEffect(() => {
+    const onDown = (e) => {
+      if (!funilAberto) return;
+      const alvo = e.target;
+      const botao = filterRefs.current.get(funilAberto);
+      if (botao?.contains(alvo) || popupRef.current?.contains(alvo)) return;
+      setOpenFilter(null);
+      setFilterSearch("");
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [funilAberto]);
+  const resolverValor = (key) => {
+    const col = columns.find((c) => c.key === key);
+    if (col) return (row) => rawValue(row, col);
+    for (const c of columns) {
+      const ef = c.extraFilters?.find((f) => f.key === key);
+      if (ef) return ef.value;
+    }
+    return void 0;
+  };
+  const rotuloDe = (fn, row) => normalizarRotulo(fn(row));
+  const eColunaData = (key) => columns.find((c) => c.key === key)?.sortType === "date";
+  const resolverRotulos = (key) => {
+    const col = columns.find((c) => c.key === key);
+    const normalizar = col?.sortType === "date" ? rotuloDeData : (v) => normalizarRotulo(v);
+    if (col?.filterValues) {
+      const fv = col.filterValues;
+      return (row) => {
+        const vs = Array.from(new Set(fv(row).map(normalizar)));
+        return vs.length > 0 ? vs : [EMPTY];
+      };
+    }
+    if (col?.sortType === "date") {
+      const ler = col.value ?? ((row) => row[col.key]);
+      return (row) => [rotuloDeData(ler(row))];
+    }
+    const fn = resolverValor(key);
+    return fn ? (row) => [rotuloDe(fn, row)] : void 0;
+  };
+  const rotuloVisivel = (key, v) => eColunaData(key) ? diaVisivel(v) : v;
+  const passaFiltro = (key, sel) => {
+    const col = columns.find((c) => c.key === key);
+    if (col?.filterValues || col?.sortType === "date") {
+      const rotulos = resolverRotulos(key);
+      return (row) => rotulos(row).some((v) => sel.has(v));
+    }
+    const fn = resolverValor(key);
+    return fn ? (row) => sel.has(rotuloDe(fn, row)) : void 0;
+  };
+  const modoExcel = filterMode === "excel";
+  const activeFilters = useMemo(
+    () => Object.entries(columnFilters).filter(([, s]) => s && (modoExcel || s.size > 0)),
+    [columnFilters, modoExcel]
+  );
+  const activeRanges = useMemo(
+    () => Object.entries(rangeFilters).filter(([, r]) => r && (r.min != null || r.max != null)),
+    [rangeFilters]
+  );
+  const hasActiveFilters = activeFilters.length > 0 || activeRanges.length > 0;
+  const isClientMode = !!allData && (!!alwaysClient || hasActiveFilters || !!sort || isGrouped);
+  const effectiveData = isClientMode ? allData : data;
+  useEffect(() => {
+    if (!allData && (hasActiveFilters || sort || isGrouped)) onDataNeeded?.();
+  }, [allData, hasActiveFilters, sort, isGrouped]);
+  useEffect(() => {
+    onClientModeChange?.(isClientMode);
+  }, [isClientMode]);
+  useEffect(() => {
+    if (clearSelectionTrigger === void 0) return;
+    setSelectedKeys(/* @__PURE__ */ new Set());
+  }, [clearSelectionTrigger]);
+  const chaveSelecaoInicial = selecaoInicial ? JSON.stringify([...selecaoInicial].sort()) : null;
+  const selecaoInicialAnterior = useRef(chaveSelecaoInicial);
+  useEffect(() => {
+    if (chaveSelecaoInicial === selecaoInicialAnterior.current) return;
+    selecaoInicialAnterior.current = chaveSelecaoInicial;
+    if (chaveSelecaoInicial !== null) setSelectedKeys(new Set(JSON.parse(chaveSelecaoInicial)));
+  }, [chaveSelecaoInicial]);
+  const mudarFiltrosCol = (proximo) => {
+    const next = proximo(columnFilters);
+    if (chaveDosFiltros(next) === chaveDosFiltros(columnFilters)) return;
+    setColumnFilters(next);
+    if (!selectable) return;
+    setSelectedKeys(/* @__PURE__ */ new Set());
+    onSelectionChange?.(/* @__PURE__ */ new Set());
+  };
+  const avisarOrdenacao = useRef(onSortChange);
+  avisarOrdenacao.current = onSortChange;
+  const ordenacaoAvisada = useRef("null");
+  useEffect(() => {
+    const s = sort ? { key: sort.key, dir: sort.dir === 1 ? "asc" : "desc" } : null;
+    const chave = JSON.stringify(s);
+    if (chave === ordenacaoAvisada.current) return;
+    ordenacaoAvisada.current = chave;
+    avisarOrdenacao.current?.(s);
+  }, [sort]);
+  const avisarFiltros = useRef(onColumnFiltersChange);
+  avisarFiltros.current = onColumnFiltersChange;
+  const filtrosAvisados = useRef(chaveDosFiltros({}));
+  const chaveFiltrosAtivos = chaveDosFiltros(Object.fromEntries(activeFilters));
+  useEffect(() => {
+    if (chaveFiltrosAtivos === filtrosAvisados.current) return;
+    filtrosAvisados.current = chaveFiltrosAtivos;
+    avisarFiltros.current?.(Object.fromEntries(JSON.parse(chaveFiltrosAtivos)));
+  }, [chaveFiltrosAtivos]);
+  const cruzFiltros = modoExcel ? SEM_CRUZAMENTO : activeFilters;
+  const cruzRanges = modoExcel ? SEM_CRUZAMENTO : activeRanges;
+  const distinctValues = (key) => {
+    const rotulosFn = resolverRotulos(key);
+    if (!rotulosFn) return [];
+    let fonte = allData ?? data;
+    for (const [outraKey, escolhidos] of cruzFiltros) {
+      if (outraKey === key) continue;
+      const passa = passaFiltro(outraKey, escolhidos);
+      if (!passa) continue;
+      fonte = fonte.filter(passa);
+    }
+    for (const [outraKey, r] of cruzRanges) {
+      if (outraKey === key) continue;
+      const col = columns.find((c) => c.key === outraKey);
+      if (!col) continue;
+      fonte = fonte.filter((row) => {
+        const n = valorParaIntervalo(row, col);
+        if (!Number.isFinite(n)) return false;
+        if (r.min != null && n < r.min) return false;
+        if (r.max != null && n > r.max) return false;
+        return true;
+      });
+    }
+    const set = /* @__PURE__ */ new Set();
+    fonte.forEach((row) => rotulosFn(row).forEach((v) => set.add(v)));
+    return Array.from(set).sort(eColunaData(key) ? ordenarDias : ordenarRotulos);
+  };
+  const openFilterOptions = useMemo(() => {
+    if (!openFilter) return [];
+    return distinctValues(openFilter);
+  }, [openFilter, data, allData, columns, cruzFiltros, cruzRanges]);
+  const openFilterOptionsLower = useMemo(
+    () => openFilterOptions.map((v) => (openFilter ? rotuloVisivel(openFilter, v) : v).toLowerCase()),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [openFilterOptions]
+  );
+  const opcoesVisiveis = useMemo(() => {
+    const q = filterSearch.toLowerCase();
+    const corresponde = q ? modoExcel ? pesquisaCuringa(q) : (v) => v.includes(q) : null;
+    const opts = [];
+    const correspondentes = [];
+    for (let i = 0; i < openFilterOptions.length; i++) {
+      if (corresponde && !corresponde(openFilterOptionsLower[i])) continue;
+      correspondentes.push(openFilterOptions[i]);
+      if (opts.length < MAX_OPCOES_FILTRO) opts.push(openFilterOptions[i]);
+    }
+    return { opts, total: correspondentes.length, correspondentes };
+  }, [openFilterOptions, openFilterOptionsLower, filterSearch, modoExcel]);
+  const filtrar = (rows) => {
+    if (activeFilters.length === 0 && activeRanges.length === 0) return rows;
+    const predicados = activeFilters.flatMap(([key, sel]) => passaFiltro(key, sel) ?? []);
+    return rows.filter(
+      (row) => predicados.every((passa) => passa(row)) && activeRanges.every(([key, r]) => {
+        const col = columns.find((c) => c.key === key);
+        if (!col) return true;
+        const n = valorParaIntervalo(row, col);
+        if (!Number.isFinite(n)) return false;
+        if (r.min != null && n < r.min) return false;
+        if (r.max != null && n > r.max) return false;
+        return true;
+      })
+    );
+  };
+  const ordenar = (rows) => {
+    if (!sort) return rows;
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col) return rows;
+    return [...rows].sort((a, b) => compare(rawValue(a, col), rawValue(b, col), col.sortType) * sort.dir);
+  };
+  const filtered = useMemo(
+    () => filtrar(effectiveData),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [effectiveData, activeFilters, activeRanges, columns]
+  );
+  const sorted = useMemo(
+    () => ordenar(filtered),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [filtered, sort, columns]
+  );
+  const avisarVisiveis = useRef(onVisibleRowsChange);
+  avisarVisiveis.current = onVisibleRowsChange;
+  useEffect(() => {
+    avisarVisiveis.current?.(sorted);
+  }, [sorted]);
+  const mudarGrupos = (proximo) => {
+    if (!grupoControlado) setGroupByInterno(proximo);
+    onGroupByChange?.(proximo);
+    setCollapsedGroups(/* @__PURE__ */ new Set());
+  };
+  const alternarGrupo = (key) => {
+    if (!allData) onDataNeeded?.();
+    mudarGrupos(groupByKeys.includes(key) ? groupByKeys.filter((k) => k !== key) : [...groupByKeys, key]);
+  };
+  const removerGrupo = (key) => mudarGrupos(groupByKeys.filter((k) => k !== key));
+  const limparGrupos = () => mudarGrupos([]);
+  const alternarColapso = (path) => setCollapsedGroups((prev) => {
+    const n = new Set(prev);
+    if (n.has(path)) n.delete(path);
+    else n.add(path);
+    return n;
+  });
+  const construirGrupos = (items, keys, nivel, pathPai) => {
+    if (nivel >= keys.length) return [];
+    const key = keys[nivel];
+    const col = columns.find((c) => c.key === key);
+    if (!col) return [];
+    const ordemFn = col.groupSortKey;
+    const mapa = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const rotulo = filterKey(item, col);
+      const ordem = ordemFn ? String(ordemFn(item) ?? "") : rotulo;
+      const atual = mapa.get(rotulo);
+      if (atual) atual.items.push(item);
+      else mapa.set(rotulo, { ordem, items: [item] });
+    });
+    return Array.from(mapa.entries()).sort(([ra, a], [rb, b]) => ordemFn ? COLLATOR.compare(a.ordem, b.ordem) : ordenarRotulos(ra, rb)).map(([val, { ordem, items: itensGrupo }]) => {
+      const path = pathPai ? `${pathPai}\0${val}` : val;
+      return { val, ordem, path, items: itensGrupo, filhos: construirGrupos(itensGrupo, keys, nivel + 1, path) };
+    });
+  };
+  const grupos = useMemo(
+    () => isGrouped ? construirGrupos(sorted, groupByKeys, 0, "") : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sorted, groupByKeys, isGrouped, columns]
+  );
+  const [page, setPage] = useState(1);
+  const chavePageSize = storageKey ? `dt_pagesize_${storageKey}` : null;
+  const [pageSizeAtual, setPageSizeAtual] = useState(() => {
+    if (!pageSize || !chavePageSize) return pageSize;
+    try {
+      const guardado = Number(sessionStorage.getItem(chavePageSize));
+      return Number.isFinite(guardado) && guardado > 0 ? guardado : pageSize;
+    } catch {
+      return pageSize;
+    }
+  });
+  const pageSizeProp = useRef(pageSize);
+  useEffect(() => {
+    if (pageSizeProp.current === pageSize) return;
+    pageSizeProp.current = pageSize;
+    setPageSizeAtual(pageSize);
+  }, [pageSize]);
+  const escolherPageSize = (n) => {
+    setPageSizeAtual(n);
+    if (!chavePageSize) return;
+    try {
+      sessionStorage.setItem(chavePageSize, String(n));
+    } catch {
+    }
+  };
+  useEffect(() => {
+    setPage(1);
+  }, [columnFilters, rangeFilters, sort, groupByKeys, pageSizeAtual, isClientMode]);
+  const paginando = !!pageSizeAtual && !isGrouped && (!allData || isClientMode);
+  const totalPages = paginando ? Math.max(1, Math.ceil(sorted.length / pageSizeAtual)) : 1;
+  const currentPage = Math.min(page, totalPages);
+  const pageData = paginando ? sorted.slice((currentPage - 1) * pageSizeAtual, currentPage * pageSizeAtual) : sorted;
+  const chaveDe = (row, i) => String(rowKey ? rowKey(row, i) : i);
+  const indicePorLinha = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    sorted.forEach((r, i) => m.set(r, i));
+    return m;
+  }, [sorted]);
+  const podeSelecionar = (row) => !isRowSelectable || isRowSelectable(row);
+  const visibleKeys = useMemo(
+    () => pageData.flatMap((row, i) => podeSelecionar(row) ? [chaveDe(row, i)] : []),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pageData, rowKey, isRowSelectable]
+  );
+  const alternarLinha = (key) => setSelectedKeys((prev) => {
+    const next = new Set(prev);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    onSelectionChange?.(next);
+    return next;
+  });
+  const alternarTodas = () => setSelectedKeys((prev) => {
+    const todasMarcadas = visibleKeys.length > 0 && visibleKeys.every((k) => prev.has(k));
+    const next = new Set(prev);
+    if (todasMarcadas) visibleKeys.forEach((k) => next.delete(k));
+    else visibleKeys.forEach((k) => next.add(k));
+    onSelectionChange?.(next);
+    return next;
+  });
+  const todasVisiveisMarcadas = visibleKeys.length > 0 && visibleKeys.every((k) => selectedKeys.has(k));
+  const algumaVisivelMarcada = visibleKeys.some((k) => selectedKeys.has(k)) && !todasVisiveisMarcadas;
+  useEffect(() => {
+    if (!viewRef) return;
+    viewRef.current = {
+      apply: (rows) => ordenar(filtrar(rows)),
+      rows: sorted,
+      hasFilters: hasActiveFilters,
+      precisaDataset: hasActiveFilters || !!sort || isGrouped,
+      estado: () => ({
+        columnFilters: Object.fromEntries(activeFilters.map(([k, v]) => [k, [...v]])),
+        rangeFilters: Object.fromEntries(activeRanges),
+        sortKey: sort?.key ?? null,
+        sortDir: sort ? sort.dir === 1 ? "asc" : "desc" : "asc",
+        groupBy: groupByKeys
+      }),
+      repor: (e) => {
+        setColumnFilters(lerFiltrosGuardados(columns, e?.columnFilters ?? {}));
+        setRangeFilters(e?.rangeFilters ?? {});
+        setSort(e?.sortKey ? { key: e.sortKey, dir: e.sortDir === "desc" ? -1 : 1 } : null);
+        mudarGrupos(e?.groupBy ?? []);
+        const precisaTudo = !!e?.sortKey || !!e?.groupBy?.length || Object.keys(e?.columnFilters ?? {}).length > 0 || Object.keys(e?.rangeFilters ?? {}).length > 0;
+        if (precisaTudo && !allData) onDataNeeded?.();
+      }
+    };
+  });
+  const toggleSort = (key) => {
+    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 proximo = { ...prev };
+    if (modoExcel && sel.size === openFilterOptions.length) delete proximo[key];
+    else proximo[key] = sel;
+    return proximo;
+  });
+  const toggleFilterValue = (key, val) => {
+    if (!allData) onDataNeeded?.();
+    const sel = selecaoDaColuna(key);
+    if (sel.has(val)) sel.delete(val);
+    else sel.add(val);
+    aplicarSelecao(key, sel);
+  };
+  const alternarTodos = (key, marcar) => {
+    if (!allData) onDataNeeded?.();
+    const sel = selecaoDaColuna(key);
+    for (const v of opcoesVisiveis.correspondentes) {
+      if (marcar) sel.add(v);
+      else sel.delete(v);
+    }
+    aplicarSelecao(key, sel);
+  };
+  const setRange = (key, campo, valor, tipo) => {
+    if (!allData) onDataNeeded?.();
+    setRangeFilters((prev) => {
+      const atual = { ...prev[key] ?? {} };
+      const n = tipo === "date" ? timestampDeData(valor) + (campo === "max" ? 86399999 : 0) : Number(valor);
+      if (valor === "" || !Number.isFinite(n)) delete atual[campo];
+      else atual[campo] = n;
+      const next = { ...prev };
+      if (atual.min == null && atual.max == null) delete next[key];
+      else next[key] = atual;
+      return next;
+    });
+  };
+  const clearColumnFilter = (key) => {
+    mudarFiltrosCol((prev) => {
+      const n = { ...prev };
+      delete n[key];
+      return n;
+    });
+    setRangeFilters((prev) => {
+      const n = { ...prev };
+      delete n[key];
+      return n;
+    });
+  };
+  const clearAllFilters = () => {
+    mudarFiltrosCol(() => ({}));
+    setRangeFilters({});
+  };
+  const temIntervalo = (key) => {
+    const r = rangeFilters[key];
+    return !!r && (r.min != null || r.max != null);
+  };
+  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 blob = new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${exportFileName}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const alignClass = (a) => a === "right" ? "text-right" : a === "center" ? "text-center" : "text-left";
+  const ePresaAEsquerda = (c) => c.sticky === true || c.sticky === "left";
+  const stickyLeft = useMemo(() => {
+    const offsets = {};
+    let acc = selectable ? 40 : 0;
+    for (const c of columns) {
+      if (!ePresaAEsquerda(c)) continue;
+      offsets[c.key] = acc;
+      acc += c.width ?? DEFAULT_STICKY_WIDTH;
+    }
+    return offsets;
+  }, [columns, selectable]);
+  const stickyRight = useMemo(() => {
+    const offsets = {};
+    let acc = 0;
+    for (let i = columns.length - 1; i >= 0; i--) {
+      const c = columns[i];
+      if (c.sticky !== "right") continue;
+      offsets[c.key] = acc;
+      acc += c.width ?? DEFAULT_STICKY_WIDTH;
+    }
+    return offsets;
+  }, [columns]);
+  const estiloPreso = (c) => {
+    if (ePresaAEsquerda(c)) return { left: stickyLeft[c.key] };
+    if (c.sticky === "right") return { right: stickyRight[c.key] };
+    return void 0;
+  };
+  const nColunas = columns.length + (selectable ? 1 : 0);
+  const totalResultados = totalCount != null && !isClientMode && !hasActiveFilters ? totalCount : sorted.length;
+  const aEsperarDataset = !allData && (!!isAllDataLoading || !!onDataNeeded) && (hasActiveFilters || !!sort || isGrouped);
+  const linhasBase = allData ?? data;
+  const semDados = useMemo(
+    () => new Set(columns.filter((c) => !linhasBase.some((r) => temValor(r, c))).map((c) => c.key)),
+    [columns, linhasBase]
+  );
+  const filtravel = (c) => c.filterable ?? !semDados.has(c.key);
+  const agrupavel = (c) => c.groupable ?? (!semDados.has(c.key) && !c.groupAggregate && (!c.sortType || c.sortType === "text"));
+  const rolarComTeclado = (e) => {
+    if (e.target !== e.currentTarget) return;
+    const el = e.currentTarget;
+    const passo = Math.max(40, Math.round(el.clientWidth * 0.2));
+    if (e.key === "ArrowRight") el.scrollLeft += passo;
+    else if (e.key === "ArrowLeft") el.scrollLeft -= passo;
+    else if (e.key === "Home") el.scrollLeft = 0;
+    else if (e.key === "End") el.scrollLeft = el.scrollWidth;
+    else return;
+    e.preventDefault();
+  };
+  if (isError) {
+    return /* @__PURE__ */ jsx("div", { className: "py-16 text-center text-sm font-bold uppercase tracking-widest text-red-400", children: L.error });
+  }
+  const renderPopup = (coluna, key, listas) => {
+    const col = key === coluna.key ? coluna : void 0;
+    const { opts, total: totalOpcoes } = opcoesVisiveis;
+    const sel = columnFilters[key];
+    const isFiltered = temFiltro(key);
+    const podeOrdenar = !!sortFromFilter && !!col && col.sortable !== false;
+    const eData = col?.sortType === "date";
+    const temRange = !!col && (col.sortType === "number" || eData);
+    const [rotuloAsc, rotuloDesc] = eData ? [L.sortOldest, L.sortNewest] : col?.sortType === "number" ? [L.sortSmallest, L.sortLargest] : [L.sortAsc, L.sortDesc];
+    const [rotuloMin, rotuloMax] = eData ? [L.from, L.to] : [L.min, L.max];
+    const intervalo = rangeFilters[key];
+    const valorCampo = (n, campo) => n == null ? "" : eData ? new Date(campo === "max" ? n - 86399999 : n).toISOString().slice(0, 10) : String(n);
+    return createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: popupRef,
+          style: { position: "fixed", top: popupPos.top, left: popupPos.left },
+          className: "z-[100] w-72 max-w-[80vw] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-2xl rounded-xl overflow-hidden",
+          children: [
+            listas.length > 1 && // Seletor da lista a filtrar: a coluna e cada filtro extra partilham o mesmo funil.
+            /* @__PURE__ */ jsx("div", { className: "px-2 pt-2 pb-2 border-b border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsx("div", { role: "group", "aria-label": coluna.label, className: "flex flex-wrap gap-0.5 p-0.5 rounded-lg bg-slate-100 dark:bg-slate-800", children: listas.map((l) => {
+              const ativa = l.key === key;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": ativa,
+                  onClick: () => {
+                    if (ativa) return;
+                    setOpenFilter(l.key);
+                    setFilterSearch("");
+                  },
+                  className: `appearance-none border-0 cursor-pointer flex-1 min-w-0 inline-flex items-center justify-center gap-1 px-2 py-1 rounded-md text-[10px] font-black uppercase tracking-wider truncate transition-colors ${ativa ? "bg-white dark:bg-slate-900 text-proef-blue dark:text-proef-turquoise shadow-sm" : "bg-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: l.label }),
+                    temFiltro(l.key) && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-1.5 h-1.5 rounded-full bg-proef-turquoise shrink-0" })
+                  ]
+                },
+                l.key
+              );
+            }) }) }),
+            !allData && isAllDataLoading && // As opções à vista ainda são só as de `data`. Dizê-lo é melhor do que deixar
+            // escolher de uma lista incompleta.
+            /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 bg-amber-50 dark:bg-amber-500/10 border-b border-amber-100 dark:border-amber-500/20 text-[10px] text-amber-700 dark:text-amber-300", children: L.loadingOptions }),
+            podeOrdenar && /* @__PURE__ */ jsxs("div", { className: "border-b border-slate-100 dark:border-slate-800 p-1.5 space-y-0.5", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    if (!allData) onDataNeeded?.();
+                    setSort({ key, dir: 1 });
+                  },
+                  className: `appearance-none bg-transparent border-0 cursor-pointer w-full flex items-center gap-2 px-2.5 py-1.5 text-[11px] font-semibold text-left hover:bg-slate-50 dark:hover:bg-slate-800 ${sort?.key === key && sort.dir === 1 ? "text-proef-blue dark:text-proef-turquoise bg-slate-50 dark:bg-slate-800" : "text-slate-600 dark:text-slate-300"}`,
+                  children: [
+                    "▲ ",
+                    rotuloAsc
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    if (!allData) onDataNeeded?.();
+                    setSort({ key, dir: -1 });
+                  },
+                  className: `appearance-none bg-transparent border-0 cursor-pointer w-full flex items-center gap-2 px-2.5 py-1.5 text-[11px] font-semibold text-left hover:bg-slate-50 dark:hover:bg-slate-800 ${sort?.key === key && sort.dir === -1 ? "text-proef-blue dark:text-proef-turquoise bg-slate-50 dark:bg-slate-800" : "text-slate-600 dark:text-slate-300"}`,
+                  children: [
+                    "▼ ",
+                    rotuloDesc
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
+              temRange && // Intervalo antes da lista: numa coluna numérica ou de datas é o que se procura
+              // ("acima de 30 dias", "a partir de julho"), não um valor exato numa lista de dezenas.
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: eData ? "date" : "number",
+                    defaultValue: valorCampo(intervalo?.min, "min"),
+                    onChange: (e) => setRange(key, "min", e.target.value, col.sortType),
+                    placeholder: rotuloMin,
+                    title: rotuloMin,
+                    "aria-label": rotuloMin,
+                    className: "w-1/2 bg-slate-50 dark:bg-slate-800 dark:text-slate-100 dark:[color-scheme:dark] 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"
+                  },
+                  `${key}-min`
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: eData ? "date" : "number",
+                    defaultValue: valorCampo(intervalo?.max, "max"),
+                    onChange: (e) => setRange(key, "max", e.target.value, col.sortType),
+                    placeholder: rotuloMax,
+                    title: rotuloMax,
+                    "aria-label": rotuloMax,
+                    className: "w-1/2 bg-slate-50 dark:bg-slate-800 dark:text-slate-100 dark:[color-scheme:dark] 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"
+                  },
+                  `${key}-max`
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  autoFocus: true,
+                  value: filterSearch,
+                  onChange: (e) => setFilterSearch(e.target.value),
+                  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"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto overflow-x-hidden space-y-0.5", children: [
+                modoExcel && opts.length > 0 && (() => {
+                  const marcados = opcoesVisiveis.correspondentes.filter((v) => sel ? sel.has(v) : true).length;
+                  const todos = marcados === opcoesVisiveis.correspondentes.length;
+                  const alguns = marcados > 0 && !todos;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => alternarTodos(key, !todos),
+                      className: "appearance-none bg-transparent border-0 border-b border-slate-100 dark:border-slate-800 cursor-pointer w-full flex items-center gap-2 px-1.5 py-1 mb-0.5 hover:bg-slate-50 dark:hover:bg-slate-800 text-left normal-case tracking-normal",
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: `w-3.5 h-3.5 flex items-center justify-center border shrink-0 rounded ${todos || alguns ? "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"}`,
+                            children: [
+                              todos && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" }),
+                              alguns && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "–" })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-700 dark:text-slate-200 font-semibold break-words", children: filterSearch ? L.selectAllResults : L.selectAll })
+                      ]
+                    }
+                  );
+                })(),
+                opts.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-400 text-center py-3", children: L.noOptions }) : opts.map((v) => {
+                  const checked = sel ? sel.has(v) : modoExcel;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => toggleFilterValue(key, v),
+                      className: "appearance-none bg-transparent border-0 cursor-pointer w-full flex items-center gap-2 px-1.5 py-1 hover:bg-slate-50 dark:hover:bg-slate-800 text-left normal-case tracking-normal",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `w-3.5 h-3.5 flex items-center justify-center border shrink-0 rounded ${checked ? "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"}`,
+                            children: checked && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-700 dark:text-slate-200 font-normal break-words", children: rotuloVisivel(key, v) })
+                      ]
+                    },
+                    v
+                  );
+                })
+              ] }),
+              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
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      document.body
+    );
+  };
+  const botaoFunil = (c) => {
+    const listas = [...filtravel(c) ? [{ key: c.key, label: c.label }] : [], ...(c.extraFilters ?? []).map((f) => ({ key: f.key, label: f.label }))];
+    if (listas.length === 0) return null;
+    const isOpen = funilAberto === c.key;
+    const isFiltered = listas.some((l) => temFiltro(l.key));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative",
+        ref: (el) => {
+          if (el) filterRefs.current.set(c.key, el);
+          else filterRefs.current.delete(c.key);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                if (!isOpen && !allData) onDataNeeded?.();
+                setOpenFilter(isOpen ? null : listas[0].key);
+                setFilterSearch("");
+              },
+              className: `appearance-none border-0 bg-transparent cursor-pointer p-0.5 transition-colors ${isFiltered || isOpen ? "text-proef-turquoise" : "text-slate-300 dark:text-slate-600 hover:text-slate-500 dark:hover:text-slate-300"}`,
+              title: c.label,
+              "aria-label": c.label,
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsx(Funnel, { size: 11, className: isFiltered ? "fill-current" : "" })
+            }
+          ),
+          isOpen && popupPos && openFilter && renderPopup(c, openFilter, listas)
+        ]
+      },
+      c.key
+    );
+  };
+  const renderLinha = (row, i) => {
+    const k = chaveDe(row, i);
+    const marcada = selectable && selectedKeys.has(k);
+    const selecionavel = !!selectable && podeSelecionar(row);
+    return /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        onClick: () => onRowClick?.(row),
+        onDoubleClick: () => onRowDoubleClick?.(row),
+        className: `group even:bg-slate-50/50 dark:even:bg-slate-800/40 hover:bg-slate-100/70 dark:hover:bg-slate-800/70 transition-colors ${onRowClick || onRowDoubleClick ? "cursor-pointer" : ""} ${marcada ? "bg-proef-turquoise/5" : ""} ${rowClassName?.(row) ?? ""}`,
+        children: [
+          selectable && /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: `px-3 py-2.5 border-b border-slate-100 dark:border-slate-800 w-10 sticky left-0 z-[1] ${i % 2 === 1 ? "bg-slate-50 dark:bg-slate-800" : "bg-white dark:bg-slate-900"} group-hover:bg-slate-100 dark:group-hover:bg-slate-800`,
+              onClick: (e) => {
+                e.stopPropagation();
+                if (selecionavel) alternarLinha(k);
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "checkbox",
+                  "aria-checked": !!marcada,
+                  "aria-disabled": !selecionavel || void 0,
+                  className: `w-4 h-4 flex items-center justify-center border transition-colors 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 hover:border-slate-400 dark:hover:border-slate-500"} ${selecionavel ? "" : "opacity-40 cursor-not-allowed bg-slate-100 dark:bg-slate-800"}`,
+                  children: marcada && /* @__PURE__ */ jsx("span", { className: "text-[9px] leading-none", children: "✓" })
+                }
+              )
+            }
+          ),
+          columns.map((c) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              style: estiloPreso(c),
+              className: `px-3 py-2.5 border-b border-slate-100 dark:border-slate-800 whitespace-nowrap ${alignClass(c.align)} ${c.sticky ? `sticky z-[1] ${c.sticky === "right" ? "border-l border-slate-200 dark:border-slate-700" : ""} ${i % 2 === 1 ? "bg-slate-50 dark:bg-slate-800" : "bg-white dark:bg-slate-900"} group-hover:bg-slate-100 dark:group-hover:bg-slate-800` : ""} ${c.cellClassName ?? ""}`,
+              children: (() => {
+                const conteudo = c.render ? c.render(row) : rawValue(row, c) ?? /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: EMPTY });
+                const max = larguraMax(c);
+                if (!max) return conteudo;
+                const v = rawValue(row, c);
+                const dica = typeof conteudo === "string" || typeof conteudo === "number" ? String(conteudo) : c.sortType !== "date" && v !== null && v !== void 0 ? String(v) : void 0;
+                return /* @__PURE__ */ jsx("div", { className: "overflow-hidden text-ellipsis", style: { maxWidth: max, width: larguras[c.key] }, title: dica, children: conteudo });
+              })()
+            },
+            c.key
+          ))
+        ]
+      },
+      k
+    );
+  };
+  const primeiraComValor = columns.findIndex((c) => !!c.groupAggregate);
+  const colunasComValor = primeiraComValor >= 0 ? columns.slice(primeiraComValor) : [];
+  const colunasRotuloGrupo = primeiraComValor >= 0 ? primeiraComValor + (selectable ? 1 : 0) : nColunas;
+  const renderGrupos = (nos, nivel) => nos.map((no) => {
+    const recolhido = collapsedGroups.has(no.path);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("tr", { className: "bg-slate-50/80 dark:bg-slate-800/60 cursor-pointer select-none", onClick: () => alternarColapso(no.path), children: [
+        /* @__PURE__ */ jsx("td", { colSpan: colunasRotuloGrupo, className: "px-3 py-1.5 border-b border-t border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", style: { paddingLeft: nivel * 16 }, children: [
+          /* @__PURE__ */ jsx(
+            Caret,
+            {
+              size: 11,
+              className: `text-proef-blue/60 dark:text-proef-turquoise/70 transition-transform shrink-0 ${recolhido ? "" : "rotate-90"}`
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-black uppercase tracking-[0.15em] text-proef-blue/70 dark:text-proef-turquoise/80", children: no.val }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 ml-1", children: [
+            "(",
+            no.items.length,
+            ")"
+          ] })
+        ] }) }),
+        colunasComValor.map((c) => /* @__PURE__ */ jsx("td", { className: `px-3 py-1.5 border-b border-t border-slate-100 dark:border-slate-800 whitespace-nowrap text-xs font-bold text-slate-700 dark:text-slate-200 ${alignClass(c.align)}`, children: c.groupAggregate?.(no.items) }, c.key))
+      ] }),
+      !recolhido && (no.filhos.length > 0 ? renderGrupos(no.filhos, nivel + 1) : no.items.map((row) => renderLinha(row, indicePorLinha.get(row) ?? 0)))
+    ] }, no.path);
+  });
+  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: [
+        extraToolbar,
+        exportFileName && sorted.length > 0 && /* @__PURE__ */ jsxs(
+          "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",
+            children: [
+              "⭳ ",
+              L.export
+            ]
+          }
+        )
+      ] })
+    ] }),
+    isGrouped && /* @__PURE__ */ jsx(
+      FilterChips,
+      {
+        className: "mb-2",
+        items: groupByKeys.map((key) => ({
+          key,
+          tone: "group",
+          icon: /* @__PURE__ */ jsx(Layers, { size: 9 }),
+          label: columns.find((c) => c.key === key)?.label ?? key,
+          onRemove: () => removerGrupo(key)
+        })),
+        onClearAll: limparGrupos,
+        clearAllLabel: L.clearGroups
+      }
+    ),
+    (activeFilters.length > 0 || activeRanges.length > 0) && /* @__PURE__ */ jsx(
+      FilterChips,
+      {
+        className: "mb-2",
+        items: [
+          ...activeRanges.map(([key, r]) => {
+            const col = columns.find((c) => c.key === key);
+            const fmt = (v) => v == null ? "" : col?.sortType === "date" ? new Date(v).toLocaleDateString() : String(v);
+            const txt = r.min != null && r.max != null ? `${fmt(r.min)} – ${fmt(r.max)}` : r.min != null ? `≥ ${fmt(r.min)}` : `≤ ${fmt(r.max)}`;
+            return { key: `r-${key}`, label: `${col?.label ?? key}: ${txt}`, onRemove: () => clearColumnFilter(key) };
+          }),
+          ...activeFilters.flatMap(([key, sel]) => {
+            const col = columns.find((c) => c.key === key);
+            const extra = !col ? columns.flatMap((c) => c.extraFilters ?? []).find((f) => f.key === key) : void 0;
+            const chipLabel = col?.label ?? extra?.label ?? key;
+            const arr = Array.from(sel);
+            if (col?.valueChipColors) {
+              const cores = col.valueChipColors;
+              return arr.map((v) => ({
+                key: `${key}:${v}`,
+                label: `${chipLabel}: ${rotuloVisivel(key, v)}`,
+                colorClassName: cores[v],
+                onRemove: () => toggleFilterValue(key, v)
+              }));
+            }
+            const txt = arr.length > 2 || arr.length === 0 ? L.selected.replace("{count}", String(arr.length)) : arr.map((v) => rotuloVisivel(key, v)).join(", ");
+            return [{ key, label: `${chipLabel}: ${txt}`, onRemove: () => clearColumnFilter(key) }];
+          })
+        ],
+        onClearAll: clearAllFilters,
+        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",
+                {
+                  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: () => 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,
+      {
+        className: "mt-2.5",
+        page: currentPage,
+        pages: totalPages,
+        onPageChange: (p) => setPage(Math.min(totalPages, Math.max(1, p))),
+        pageSize: pageSizeAtual,
+        pageSizeOptions,
+        onPageSizeChange: escolherPageSize,
+        labels: { page: L.page, perPage: L.perPage, prev: L.prev, next: L.next }
+      }
+    )
+  ] });
+}
+export {
+  DataTable as default,
+  pesquisaCuringa,
+  timestampDeData
+};
+//# sourceMappingURL=DataTable.js.map