@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/data-table.js

@@ -0,0 +1,895 @@
+"use client";
+import * as React from "react";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { CircleAlert, ChevronDown, ChevronRight, Ellipsis, Eraser, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { matchesColumnFilterValue, normalizeFilterToken } from "../lib/column-filter-value.js";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { ControlButton } from "./control-button.js";
+import { Badge } from "./badge.js";
+import { FilterQueryBar } from "./filter-query-bar.js";
+import { parseFilterQuery, serializeFilterQuery } from "./filter-query-grammar.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
+import { DropdownMenuItems } from "./primitives/dropdown-menu-items.js";
+import { Input } from "./input.js";
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const CLEAR_FILTER_ARIA_LABEL = "Limpiar filtro";
+const ACTIVE_EXCLUSIONS_SR_LABEL = "Filtros de exclusión activos";
+const HIDE_EXCLUDE_FILTERS_ARIA_LABEL = "Ocultar filtros de exclusión";
+const EMPTY_EXCLUDE_FILTER_ERROR_MESSAGE = "Ingresá un texto para excluir.";
+const DUPLICATE_EXCLUDE_FILTER_ERROR_MESSAGE = "Esa exclusión ya está activa.";
+const EXCLUDED_ROWS_SUMMARY_LABEL = "Total excluidas";
+const CLEAR_ALL_EXCLUSIONS_ARIA_LABEL = "Quitar todas las exclusiones";
+const CLEAR_ALL_EXCLUSIONS_FROM_INPUT_ARIA_LABEL = "Limpiar filtros excluidos";
+const REVERSE_FILTER_PENDING_MESSAGE = "Estás escribiendo una exclusión. Presioná Enter para aplicarla.";
+/** Filters a column with the structured values the query bar writes, or plain text. */
+const columnFilterValueFn = (row, columnId, filterValue) => matchesColumnFilterValue(row.getValue(columnId), filterValue);
+/** Mirrors TanStack's column id resolution: explicit id, else the accessor key with dots as `_`. */
+function getColumnDefId(column) {
+	if (column.id) return column.id;
+	const accessorKey = column.accessorKey;
+	return typeof accessorKey === "string" ? accessorKey.replaceAll(".", "_") : undefined;
+}
+/**
+* Gives the columns targeted by query qualifiers a filter that understands the query bar's
+* structured values. TanStack would otherwise infer one from the data (`inNumberRange` for
+* numbers, which crashes on an object). A consumer's own `filterFn` always wins.
+*/
+function withQueryFilterFns(columns, targetedColumnIds) {
+	if (targetedColumnIds.size === 0) return columns;
+	return columns.map((column) => {
+		if ("columns" in column && column.columns) {
+			return {
+				...column,
+				columns: withQueryFilterFns(column.columns, targetedColumnIds)
+			};
+		}
+		const columnId = getColumnDefId(column);
+		if (column.filterFn != null || columnId == null || !targetedColumnIds.has(columnId)) {
+			return column;
+		}
+		return {
+			...column,
+			filterFn: columnFilterValueFn
+		};
+	});
+}
+function getTableFilterValue(filterValue, showExcludeFilterToggle) {
+	const normalizedFilterValue = filterValue.trimStart();
+	if (showExcludeFilterToggle && normalizedFilterValue.startsWith("-")) {
+		return "";
+	}
+	return filterValue;
+}
+function areColumnFiltersEqual(leftFilters, rightFilters) {
+	if (leftFilters.length !== rightFilters.length) {
+		return false;
+	}
+	return leftFilters.every((leftFilter, index) => leftFilter.id === rightFilters[index]?.id && leftFilter.value === rightFilters[index]?.value);
+}
+function areStringArraysEqual(leftValues, rightValues) {
+	if (leftValues.length !== rightValues.length) {
+		return false;
+	}
+	return leftValues.every((value, index) => value === rightValues[index]);
+}
+function areColumnFilterValuesEqual(leftValue, rightValue) {
+	if (leftValue.kind !== rightValue.kind) {
+		return false;
+	}
+	if (leftValue.kind === "numberRange" && rightValue.kind === "numberRange") {
+		return leftValue.min === rightValue.min && leftValue.max === rightValue.max;
+	}
+	if (leftValue.kind === "yearMonthRange" && rightValue.kind === "yearMonthRange") {
+		return leftValue.mode === rightValue.mode && leftValue.min === rightValue.min && leftValue.max === rightValue.max;
+	}
+	if (leftValue.kind === "enum" && rightValue.kind === "enum") {
+		return leftValue.value === rightValue.value;
+	}
+	if (leftValue.kind === "presence" && rightValue.kind === "presence") {
+		return leftValue.value === rightValue.value;
+	}
+	return false;
+}
+function areAdvancedFilterMapsEqual(leftMap, rightMap) {
+	const leftKeys = Object.keys(leftMap);
+	const rightKeys = Object.keys(rightMap);
+	if (leftKeys.length !== rightKeys.length) {
+		return false;
+	}
+	return leftKeys.every((key) => {
+		const rightValue = rightMap[key];
+		return rightValue != null && areColumnFilterValuesEqual(leftMap[key], rightValue);
+	});
+}
+export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel = "Filtrar", filterPlaceholder = "Filtrar...", filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle = false, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder = "Excluir por descripción", excludeFilterLabel = "Filtro de exclusión", excludeFilterToggleLabel = "Mostrar filtros de exclusión", excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle = false, columnVisibilityButtonLabel = "Columnas", columnVisibilityMenuLabel = "Mostrar columnas", columnVisibilityMenuExtraItems, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel = "Mostrar todas", deselectAllColumnsLabel = "Ocultar todas", hideableColumnsDefaultVisibility }) {
+	const [uncontrolledSorting, setUncontrolledSorting] = React.useState([]);
+	const [columnFilters, setColumnFilters] = React.useState([]);
+	const [uncontrolledFilterValue, setUncontrolledFilterValue] = React.useState("");
+	const [filterQueryDraft, setFilterQueryDraft] = React.useState("");
+	// Filtros estructurados de la última query parseada. Se preservan para que la
+	// re-sincronización canónica (al perder foco) NO descarte los qualifiers sin
+	// columna (textMatch/folder) ni los negados, que no viven en
+	// `advancedFiltersAppliedByColumn` y quedarían como filtros activos invisibles.
+	const [appliedFiltersDraft, setAppliedFiltersDraft] = React.useState([]);
+	const [isQueryFilterFocused, setIsQueryFilterFocused] = React.useState(false);
+	const [uncontrolledExcludeFilterValues, setUncontrolledExcludeFilterValues] = React.useState([]);
+	const [excludeFilterInputValue, setExcludeFilterInputValue] = React.useState("");
+	const [excludeFilterErrorMessage, setExcludeFilterErrorMessage] = React.useState(null);
+	const [isExcludeFilterInputVisible, setIsExcludeFilterInputVisible] = React.useState(false);
+	const [uncontrolledColumnVisibility, setUncontrolledColumnVisibility] = React.useState({});
+	const [advancedFiltersAppliedByColumn, setAdvancedFiltersAppliedByColumn] = React.useState({});
+	const sorting = controlledSorting ?? uncontrolledSorting;
+	const columnVisibility = controlledColumnVisibility ?? uncontrolledColumnVisibility;
+	const shouldShowQueryFilter = queryFilterConfig != null;
+	const isFilterValueControlled = controlledFilterValue != null;
+	const isExcludeFilterValuesControlled = controlledExcludeFilterValues != null;
+	const resolvedFilterValue = isFilterValueControlled ? controlledFilterValue : uncontrolledFilterValue;
+	const resolvedExcludeFilterValues = isExcludeFilterValuesControlled ? controlledExcludeFilterValues : uncontrolledExcludeFilterValues;
+	const hasActiveExcludeFilterValues = resolvedExcludeFilterValues.length > 0;
+	const tableFilterValue = getTableFilterValue(resolvedFilterValue, showExcludeFilterToggle);
+	const hasPendingReverseFilter = showExcludeFilterToggle && resolvedFilterValue.trimStart().startsWith("-");
+	const advancedFilterColumnIds = React.useMemo(() => {
+		const columnIds = new Set();
+		for (const queryQualifier of queryFilterConfig ?? []) {
+			if (queryQualifier.columnId) {
+				columnIds.add(queryQualifier.columnId);
+			}
+		}
+		return columnIds;
+	}, [queryFilterConfig]);
+	const handleExcludeFilterValuesChange = React.useCallback((nextExcludeFilterValues) => {
+		if (!isExcludeFilterValuesControlled) {
+			setUncontrolledExcludeFilterValues(nextExcludeFilterValues);
+		}
+		onExcludeFilterValuesChange?.(nextExcludeFilterValues);
+	}, [isExcludeFilterValuesControlled, onExcludeFilterValuesChange]);
+	// La barra de query es la fuente de verdad mientras se tipea: parsea el texto
+	// y escribe en los mismos canales que usan los controles clásicos (descripción,
+	// exclusiones y avanzados), de modo que ambas vistas queden sincronizadas.
+	const handleQueryFilterChange = React.useCallback((nextQuery) => {
+		// Update urgente: mantiene el input y el dropdown de sugerencias
+		// respondiendo de inmediato a cada tecla.
+		setFilterQueryDraft(nextQuery);
+		if (!queryFilterConfig) {
+			return;
+		}
+		const parsedQuery = parseFilterQuery(nextQuery, queryFilterConfig);
+		// El re-filtrado vuelve a renderizar toda la tabla (celdas con popovers,
+		// tooltips y menús por fila), lo que bloquearía el commit del dropdown si
+		// corriera urgente. Se difiere como transición de baja prioridad para que
+		// el tipeo y las sugerencias no se cuelguen.
+		React.startTransition(() => {
+			// Cada canal se actualiza solo si cambió. Propagar valores iguales
+			// (p. ej. una lista de exclusiones vacía nueva en cada tecla) dispararía
+			// re-cálculos de memos y un re-render extra de todas las filas sin
+			// ningún cambio observable.
+			if (parsedQuery.descriptionFilter !== resolvedFilterValue) {
+				if (!isFilterValueControlled) {
+					setUncontrolledFilterValue(parsedQuery.descriptionFilter);
+				}
+				onFilterValueChange?.(parsedQuery.descriptionFilter);
+			}
+			if (!areStringArraysEqual(parsedQuery.excludedDescriptionFilters, resolvedExcludeFilterValues)) {
+				handleExcludeFilterValuesChange(parsedQuery.excludedDescriptionFilters);
+			}
+			if (!areAdvancedFilterMapsEqual(parsedQuery.advancedFiltersByColumn, advancedFiltersAppliedByColumn)) {
+				setAdvancedFiltersAppliedByColumn(parsedQuery.advancedFiltersByColumn);
+			}
+			setAppliedFiltersDraft(parsedQuery.appliedFilters);
+			onAppliedFiltersChange?.(parsedQuery.appliedFilters);
+		});
+	}, [
+		advancedFiltersAppliedByColumn,
+		handleExcludeFilterValuesChange,
+		isFilterValueControlled,
+		onAppliedFiltersChange,
+		onFilterValueChange,
+		queryFilterConfig,
+		resolvedExcludeFilterValues,
+		resolvedFilterValue
+	]);
+	// Forma canónica de los filtros activos, para reflejarlos en la barra de query.
+	// Se serializa desde los filtros aplicados id-backed (no desde el texto de la
+	// barra), de modo que un filtro de carpeta apunte siempre por `folderId`: si la
+	// carpeta se renombra, su slug se re-deriva del nombre nuevo; si desaparece, el
+	// filtro se descarta. Definida antes del efecto de reparse para que este pueda
+	// re-propagar la forma id-backed cuando cambia la config.
+	const canonicalQueryFromFilters = React.useMemo(() => {
+		if (!queryFilterConfig) {
+			return "";
+		}
+		return serializeFilterQuery({
+			advancedFiltersByColumn: advancedFiltersAppliedByColumn,
+			appliedFilters: appliedFiltersDraft,
+			descriptionFilter: tableFilterValue,
+			excludedDescriptionFilters: resolvedExcludeFilterValues,
+			invalidTokens: []
+		}, queryFilterConfig);
+	}, [
+		advancedFiltersAppliedByColumn,
+		appliedFiltersDraft,
+		queryFilterConfig,
+		resolvedExcludeFilterValues,
+		tableFilterValue
+	]);
+	// Firma estructural de la config de qualifiers: dispara la reconciliación solo
+	// cuando su CONTENIDO cambia (no en cada render con una referencia de array
+	// nueva), evitando re-propagar la forma canónica mientras el usuario tipea.
+	const queryFilterConfigSignature = React.useMemo(() => queryFilterConfig ? JSON.stringify(queryFilterConfig) : "", [queryFilterConfig]);
+	const previousQueryFilterConfigSignatureRef = React.useRef(null);
+	// Si la config de qualifiers cambia (p. ej. se renombra una carpeta y su opción
+	// pasa de `carpeta:hogar` a `carpeta:casa`, o se borra y desaparece), se
+	// re-propaga la forma canónica id-backed contra la NUEVA config en vez de
+	// re-parsear el texto con el slug viejo. Así un filtro de carpeta seleccionado
+	// sobrevive a renames y colisiones de slug (se vuelve a serializar por
+	// `folderId`), mientras que un filtro realmente huérfano (cuyo `folderId` ya no
+	// existe) se descarta del predicado en vez de seguir filtrando de forma
+	// invisible.
+	React.useEffect(() => {
+		const previousSignature = previousQueryFilterConfigSignatureRef.current;
+		previousQueryFilterConfigSignatureRef.current = queryFilterConfigSignature;
+		// Primer render o config sin contenido: nada que reconciliar todavía.
+		if (previousSignature === null) {
+			return;
+		}
+		if (!queryFilterConfig || !filterQueryDraft || previousSignature === queryFilterConfigSignature) {
+			return;
+		}
+		handleQueryFilterChange(canonicalQueryFromFilters);
+		// Solo debe re-correr cuando cambia el contenido de la config; el resto de los
+		// valores se leen como estado actual y no como disparadores para no re-parsear
+		// en cada tecla.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [queryFilterConfigSignature]);
+	// Reemplaza los filtros de carpeta de la barra por un único `carpeta:<id>` (o
+	// ninguno si `folderId` es `null`), preservando el resto. Lo usa el consumidor
+	// al clickear un chip de carpeta, para que la barra sea la única fuente de
+	// verdad y no queden filtros de carpeta inconsistentes.
+	const setSingleFolderFilter = React.useCallback((folderId) => {
+		if (!queryFilterConfig) {
+			return;
+		}
+		const folderQualifierKey = queryFilterConfig.find((config) => config.kind === "folder")?.key;
+		if (!folderQualifierKey) {
+			return;
+		}
+		const parsedQuery = parseFilterQuery(filterQueryDraft, queryFilterConfig);
+		// Limpia TODO filtro que apunte a la key de carpeta —tanto `carpeta:<id>`
+		// (kind "folder") como la presencia `tiene:carpeta`/`no:carpeta`—, para que
+		// el chip sea la única fuente de verdad y no queden filtros contradictorios
+		// (p. ej. `no:carpeta` + `carpeta:hogar`, que oculta todas las filas).
+		const nonFolderFilters = parsedQuery.appliedFilters.filter((appliedFilter) => appliedFilter.value.kind !== "folder" && appliedFilter.key !== folderQualifierKey);
+		const nextAppliedFilters = folderId == null ? nonFolderFilters : [...nonFolderFilters, {
+			key: folderQualifierKey,
+			negated: false,
+			value: {
+				folderId,
+				kind: "folder"
+			}
+		}];
+		handleQueryFilterChange(serializeFilterQuery({
+			...parsedQuery,
+			appliedFilters: nextAppliedFilters
+		}, queryFilterConfig));
+	}, [
+		filterQueryDraft,
+		handleQueryFilterChange,
+		queryFilterConfig
+	]);
+	React.useEffect(() => {
+		if (!queryFilterControlsRef) {
+			return;
+		}
+		queryFilterControlsRef.current = {
+			getQueryText: () => filterQueryDraft,
+			setQueryText: handleQueryFilterChange,
+			setSingleFolderFilter
+		};
+		return () => {
+			queryFilterControlsRef.current = null;
+		};
+	}, [
+		filterQueryDraft,
+		handleQueryFilterChange,
+		queryFilterControlsRef,
+		setSingleFolderFilter
+	]);
+	const addExcludeFilterValue = React.useCallback((rawExcludeFilterValue, options = {}) => {
+		const normalizedCandidate = normalizeFilterToken(rawExcludeFilterValue);
+		if (!normalizedCandidate) {
+			setExcludeFilterErrorMessage(EMPTY_EXCLUDE_FILTER_ERROR_MESSAGE);
+			return false;
+		}
+		const hasDuplicateExcludeFilter = resolvedExcludeFilterValues.some((excludeFilterValue) => normalizeFilterToken(excludeFilterValue) === normalizedCandidate);
+		if (hasDuplicateExcludeFilter) {
+			setExcludeFilterErrorMessage(DUPLICATE_EXCLUDE_FILTER_ERROR_MESSAGE);
+			return false;
+		}
+		handleExcludeFilterValuesChange([...resolvedExcludeFilterValues, rawExcludeFilterValue.trim()]);
+		if (options.clearExcludeInputValue ?? true) {
+			setExcludeFilterInputValue("");
+		}
+		setExcludeFilterErrorMessage(null);
+		return true;
+	}, [handleExcludeFilterValuesChange, resolvedExcludeFilterValues]);
+	const removeExcludeFilterValue = React.useCallback((excludeFilterValueToRemove) => {
+		handleExcludeFilterValuesChange(resolvedExcludeFilterValues.filter((excludeFilterValue) => excludeFilterValue !== excludeFilterValueToRemove));
+	}, [handleExcludeFilterValuesChange, resolvedExcludeFilterValues]);
+	const handleClearAllExcludeFilters = React.useCallback(() => {
+		handleExcludeFilterValuesChange([]);
+		setExcludeFilterInputValue("");
+		setExcludeFilterErrorMessage(null);
+	}, [handleExcludeFilterValuesChange]);
+	const handleSortingChange = React.useCallback((updater) => {
+		const nextSorting = typeof updater === "function" ? updater(sorting) : updater;
+		if (controlledSorting == null) {
+			setUncontrolledSorting(nextSorting);
+		}
+		onSortingChange?.(nextSorting);
+	}, [
+		controlledSorting,
+		onSortingChange,
+		sorting
+	]);
+	const handleColumnVisibilityChange = React.useCallback((updater) => {
+		if (controlledColumnVisibility == null) {
+			setUncontrolledColumnVisibility(updater);
+		}
+		onColumnVisibilityChange?.(updater);
+	}, [controlledColumnVisibility, onColumnVisibilityChange]);
+	// TanStack Table manages internal reactive state through this hook.
+	const tableColumns = React.useMemo(() => withQueryFilterFns(columns, advancedFilterColumnIds), [columns, advancedFilterColumnIds]);
+	const table = useReactTable({
+		columns: tableColumns,
+		data,
+		// La tabla no pagina (no hay `getPaginationRowModel`). Con el auto-reset por
+		// defecto, cada cambio de filtro dispara `resetPageIndex` → `setPagination`,
+		// que vuelve a renderizar y re-dispara el reset en bucle: "Maximum update
+		// depth exceeded" y la página colgada al tipear. Se desactivan los
+		// auto-resets porque no hay estado de paginado/expansión que reiniciar.
+		autoResetPageIndex: false,
+		autoResetExpanded: false,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		onColumnFiltersChange: setColumnFilters,
+		onSortingChange: handleSortingChange,
+		onColumnVisibilityChange: handleColumnVisibilityChange,
+		state: {
+			columnFilters,
+			columnVisibility,
+			sorting
+		}
+	});
+	const hideableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+	const getHideableColumnDefaultVisibility = React.useCallback((columnId) => hideableColumnsDefaultVisibility?.[columnId] ?? true, [hideableColumnsDefaultVisibility]);
+	const areHideableColumnsAtDefaultVisibility = hideableColumns.every((column) => column.getIsVisible() === getHideableColumnDefaultVisibility(column.id));
+	const areSomeHideableColumnsVisible = hideableColumns.some((column) => column.getIsVisible());
+	const shouldShowColumnVisibilityToggle = showColumnVisibilityToggle && hideableColumns.length > 0;
+	const hasModifiedColumnVisibility = shouldShowColumnVisibilityToggle && !areHideableColumnsAtDefaultVisibility;
+	const hasToolbarChanges = hasModifiedColumnVisibility;
+	const shouldShowToolbarActions = shouldShowColumnVisibilityToggle || toolbarActions != null;
+	const shouldShowToolbar = shouldShowQueryFilter || Boolean(filterColumnId) || shouldShowToolbarActions;
+	const filterColumn = filterColumnId ? table.getColumn(filterColumnId) : undefined;
+	const activeSortingEntry = sorting.find((sortingEntry) => !sortingBadgeIgnoredColumnIds?.has(sortingEntry.id));
+	const activeSortingColumn = activeSortingEntry ? table.getColumn(activeSortingEntry.id) : undefined;
+	const activeSortingColumnMeta = activeSortingColumn?.columnDef.meta;
+	const activeSortingColumnLabel = (activeSortingEntry ? sortingBadgeLabelOverrides?.[activeSortingEntry.id] : undefined) ?? activeSortingColumnMeta?.label ?? (typeof activeSortingColumn?.columnDef.header === "string" ? activeSortingColumn.columnDef.header : activeSortingEntry?.id);
+	const shouldShowSortingBadge = activeSortingEntry != null && activeSortingColumnLabel != null;
+	const activeSortingDirectionSymbol = activeSortingEntry?.desc ? "↓" : "↑";
+	const activeSortingDirectionLabel = activeSortingEntry?.desc ? "descendente" : "ascendente";
+	const footerGroups = table.getFooterGroups();
+	const hasFooterContent = footerGroups.some((footerGroup) => footerGroup.headers.some((footer) => !footer.isPlaceholder && footer.column.columnDef.footer != null));
+	const handleResetSorting = React.useCallback(() => {
+		handleSortingChange([]);
+	}, [handleSortingChange]);
+	const handleClearMainFilter = React.useCallback(() => {
+		if (!isFilterValueControlled) {
+			setUncontrolledFilterValue("");
+		}
+		onFilterValueChange?.("");
+		filterColumn?.setFilterValue("");
+	}, [
+		filterColumn,
+		isFilterValueControlled,
+		onFilterValueChange
+	]);
+	React.useEffect(() => {
+		if (!filterColumn) {
+			return;
+		}
+		const currentFilterValue = String(filterColumn.getFilterValue() ?? "");
+		if (currentFilterValue === tableFilterValue) {
+			return;
+		}
+		filterColumn.setFilterValue(tableFilterValue);
+	}, [filterColumn, tableFilterValue]);
+	// Mientras la barra está enfocada, el usuario es la fuente de verdad y no se
+	// pisa su texto; al perder el foco (o al editar los controles clásicos) la
+	// barra se re-sincroniza con la forma canónica de los filtros activos.
+	React.useEffect(() => {
+		if (!queryFilterConfig || isQueryFilterFocused) {
+			return;
+		}
+		setFilterQueryDraft((previousDraft) => previousDraft === canonicalQueryFromFilters ? previousDraft : canonicalQueryFromFilters);
+	}, [
+		canonicalQueryFromFilters,
+		isQueryFilterFocused,
+		queryFilterConfig
+	]);
+	React.useEffect(() => {
+		if (advancedFilterColumnIds.size === 0 && Object.keys(advancedFiltersAppliedByColumn).length === 0) {
+			return;
+		}
+		setColumnFilters((previousColumnFilters) => {
+			const nextColumnFilters = previousColumnFilters.filter((columnFilter) => !advancedFilterColumnIds.has(columnFilter.id));
+			for (const [columnId, filterValue] of Object.entries(advancedFiltersAppliedByColumn)) {
+				nextColumnFilters.push({
+					id: columnId,
+					value: filterValue
+				});
+			}
+			if (areColumnFiltersEqual(previousColumnFilters, nextColumnFilters)) {
+				return previousColumnFilters;
+			}
+			return nextColumnFilters;
+		});
+	}, [advancedFilterColumnIds, advancedFiltersAppliedByColumn]);
+	React.useEffect(() => {
+		onVisibleRowsChange?.(table.getRowModel().rows.map((row) => row.original));
+	}, [
+		columnFilters,
+		columnVisibility,
+		data,
+		onVisibleRowsChange,
+		sorting,
+		table
+	]);
+	const sortingBadgeNode = shouldShowSortingBadge ? /* @__PURE__ */ _jsxs(Badge, {
+		"aria-live": "polite",
+		className: "inline-flex w-fit items-center gap-1.5",
+		tone: "neutral",
+		children: [
+			/* @__PURE__ */ _jsx("span", { children: `Ordenado por: ${activeSortingColumnLabel} ${activeSortingDirectionSymbol}` }),
+			/* @__PURE__ */ _jsx("span", {
+				className: "sr-only",
+				children: `Orden ${activeSortingDirectionLabel}`
+			}),
+			/* @__PURE__ */ _jsx("button", {
+				"aria-label": "Quitar orden",
+				className: "inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				onClick: handleResetSorting,
+				type: "button",
+				children: /* @__PURE__ */ _jsx(X, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			})
+		]
+	}) : null;
+	const filterExtraContentNode = filterExtraContent ? /* @__PURE__ */ _jsx("div", {
+		className: "grid gap-1",
+		children: filterExtraContent
+	}) : null;
+	const tableRowModelRows = table.getRowModel().rows;
+	const visibleLeafColumnsCount = table.getVisibleLeafColumns().length;
+	// El cuerpo de la tabla es la parte más cara de renderizar (cientos de celdas
+	// con popovers, tooltips y menús). Se memoiza para que los cambios de estado
+	// locales del toolbar —el draft de la barra de query, el foco, los inputs de
+	// filtros— no vuelvan a renderizar todas las filas. Solo se recalcula cuando
+	// cambia el row model (datos/filtros/orden), la visibilidad de columnas o los
+	// callbacks de fila. Sin esto, cada tecla disparaba varios re-render completos
+	// del cuerpo y colgaba la página. Se sigue el patrón de memoización de
+	// TanStack: no se depende de la identidad de `table`, que cambia en cada render.
+	const tableBodyRows = React.useMemo(() => {
+		// Con agrupado activo, el conteo por grupo se calcula sobre el row model
+		// visible (post filtros/orden) para que el encabezado refleje lo que se ve.
+		const groupRowCounts = new Map();
+		if (rowGroups) {
+			for (const row of tableRowModelRows) {
+				const groupKey = rowGroups.getGroupKey(row.original);
+				groupRowCounts.set(groupKey, (groupRowCounts.get(groupKey) ?? 0) + 1);
+			}
+		}
+		// Partición por grupo: garantiza un único bloque por clave aunque el row
+		// model llegue intercalado (orden manual, sorting sin la columna fantasma,
+		// etc.). El orden interno de cada grupo respeta el row model; el orden de
+		// los grupos usa getGroupSortValue (del primer row) o la primera aparición.
+		let rowsToRender = tableRowModelRows;
+		if (rowGroups) {
+			const rowsByGroupKey = new Map();
+			for (const row of tableRowModelRows) {
+				const groupKey = rowGroups.getGroupKey(row.original);
+				const groupRows = rowsByGroupKey.get(groupKey);
+				if (groupRows) {
+					groupRows.push(row);
+				} else {
+					rowsByGroupKey.set(groupKey, [row]);
+				}
+			}
+			const groupEntries = [...rowsByGroupKey.values()];
+			const getGroupSortValue = rowGroups.getGroupSortValue;
+			if (getGroupSortValue) {
+				groupEntries.sort((leftRows, rightRows) => {
+					const leftValue = getGroupSortValue(leftRows[0].original);
+					const rightValue = getGroupSortValue(rightRows[0].original);
+					if (leftValue === rightValue) {
+						return 0;
+					}
+					return leftValue < rightValue ? -1 : 1;
+				});
+			}
+			rowsToRender = groupEntries.flat();
+		}
+		const renderedRows = [];
+		let previousGroupKey = null;
+		for (const row of rowsToRender) {
+			if (rowGroups) {
+				const groupKey = rowGroups.getGroupKey(row.original);
+				const isGroupCollapsed = rowGroups.collapsedGroupKeys?.has(groupKey) ?? false;
+				if (groupKey !== previousGroupKey) {
+					const groupHeaderContent = rowGroups.renderGroupHeader(groupKey, groupRowCounts.get(groupKey) ?? 0);
+					const handleGroupToggle = rowGroups.onGroupToggle;
+					renderedRows.push(/* @__PURE__ */ _jsx(TableRow, {
+						className: "hover:bg-transparent",
+						"data-slot": "table-group-header-row",
+						children: /* @__PURE__ */ _jsx(TableCell, {
+							className: "bg-muted/40",
+							colSpan: Math.max(visibleLeafColumnsCount, 1),
+							children: handleGroupToggle ? /* @__PURE__ */ _jsxs("button", {
+								"aria-expanded": !isGroupCollapsed,
+								className: "flex w-full items-center gap-1.5 text-left",
+								onClick: () => handleGroupToggle(groupKey),
+								type: "button",
+								children: [/* @__PURE__ */ _jsx(MotionSlot, {
+									kind: "rotate",
+									children: /* @__PURE__ */ _jsx(ChevronRight, {
+										"aria-hidden": "true",
+										className: cn("size-4 shrink-0", !isGroupCollapsed && "rotate-90")
+									})
+								}), groupHeaderContent]
+							}) : groupHeaderContent
+						})
+					}, `group-header-${groupKey}-${row.id}`));
+					previousGroupKey = groupKey;
+				}
+				// Grupo colapsado: solo queda el encabezado; sus filas no se renderizan.
+				if (isGroupCollapsed) {
+					continue;
+				}
+			}
+			const rowClassName = getRowClassName?.(row.original);
+			renderedRows.push(/* @__PURE__ */ _jsx(TableRow, {
+				className: rowClassName,
+				children: row.getVisibleCells().map((cell) => {
+					const columnMeta = cell.column.columnDef.meta;
+					const handleCellClick = onCellClick && columnMeta?.isClickable ? (event) => {
+						onCellClick(event, row.original, cell.column.id);
+					} : undefined;
+					return /* @__PURE__ */ _jsx(TableCell, {
+						className: columnMeta?.cellClassName,
+						"data-label": columnMeta?.label,
+						onClick: handleCellClick,
+						children: flexRender(cell.column.columnDef.cell, cell.getContext())
+					}, cell.id);
+				})
+			}, row.id));
+		}
+		return renderedRows;
+		// `columnVisibility` se incluye a propósito: alterna qué celdas devuelve
+		// `row.getVisibleCells()` sin cambiar la referencia de `tableRowModelRows`,
+		// por lo que es necesaria para invalidar la memo al mostrar/ocultar columnas
+		// aunque el linter no la vea referenciada léxicamente.
+		// `emptyMessage` se mantiene FUERA de esta memo a propósito: cambia al pasar
+		// de "sin filtro" a "con filtro" y, si estuviera acá, invalidaría la memo y
+		// re-renderizaría todas las filas en la primera tecla aunque no cambien.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		columnVisibility,
+		getRowClassName,
+		onCellClick,
+		rowGroups,
+		tableRowModelRows,
+		visibleLeafColumnsCount
+	]);
+	const tableBodyContent = tableBodyRows.length ? tableBodyRows : /* @__PURE__ */ _jsx(TableRow, { children: /* @__PURE__ */ _jsx(TableCell, {
+		className: "h-24 text-center",
+		colSpan: Math.max(visibleLeafColumnsCount, 1),
+		children: emptyMessage
+	}) });
+	return /* @__PURE__ */ _jsxs("div", {
+		className: "grid gap-4",
+		children: [shouldShowToolbar ? /* @__PURE__ */ _jsxs("div", {
+			className: "grid gap-2",
+			children: [shouldShowQueryFilter ? /* @__PURE__ */ _jsx(FilterQueryBar, {
+				ariaLabel: queryFilterLabel,
+				configs: queryFilterConfig,
+				onFocusChange: setIsQueryFilterFocused,
+				onValueChange: handleQueryFilterChange,
+				placeholder: queryFilterPlaceholder,
+				trailingAction: queryFilterTrailingAction,
+				value: filterQueryDraft
+			}) : null, /* @__PURE__ */ _jsxs("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [filterColumnId ? /* @__PURE__ */ _jsxs("div", {
+					className: "grid w-full max-w-sm gap-2",
+					children: [
+						!shouldShowQueryFilter ? /* @__PURE__ */ _jsxs(_Fragment, { children: [
+							/* @__PURE__ */ _jsxs("div", {
+								className: "relative w-full",
+								children: [/* @__PURE__ */ _jsx(Input, {
+									"aria-label": filterLabel,
+									className: `w-full pr-16 ${hasPendingReverseFilter ? "text-red-400" : ""}`,
+									onChange: (event) => {
+										const nextFilterValue = event.target.value;
+										if (!isFilterValueControlled) {
+											setUncontrolledFilterValue(nextFilterValue);
+										}
+										onFilterValueChange?.(nextFilterValue);
+										filterColumn?.setFilterValue(getTableFilterValue(nextFilterValue, showExcludeFilterToggle));
+									},
+									onKeyDown: (event) => {
+										if (event.key !== "Enter") {
+											return;
+										}
+										const trimmedResolvedFilterValue = resolvedFilterValue.trimStart();
+										if (!showExcludeFilterToggle || !trimmedResolvedFilterValue.startsWith("-")) {
+											return;
+										}
+										event.preventDefault();
+										const excludeFilterCandidate = trimmedResolvedFilterValue.slice(1);
+										const wasExcludeFilterAdded = addExcludeFilterValue(excludeFilterCandidate, { clearExcludeInputValue: false });
+										if (wasExcludeFilterAdded) {
+											handleClearMainFilter();
+										}
+									},
+									placeholder: filterPlaceholder,
+									type: "text",
+									value: resolvedFilterValue
+								}), /* @__PURE__ */ _jsxs("div", {
+									className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5",
+									children: [resolvedFilterValue ? /* @__PURE__ */ _jsx(ControlButton, {
+										"aria-label": CLEAR_FILTER_ARIA_LABEL,
+										className: "active:-translate-y-0",
+										onClick: handleClearMainFilter,
+										size: "icon-xs",
+										type: "button",
+										variant: "ghost",
+										children: /* @__PURE__ */ _jsx(X, { "aria-hidden": "true" })
+									}) : null, showExcludeFilterToggle ? /* @__PURE__ */ _jsxs(ControlButton, {
+										"aria-expanded": isExcludeFilterInputVisible,
+										"aria-label": isExcludeFilterInputVisible ? HIDE_EXCLUDE_FILTERS_ARIA_LABEL : excludeFilterToggleLabel,
+										className: "relative",
+										onClick: () => {
+											setIsExcludeFilterInputVisible((previousState) => {
+												const nextState = !previousState;
+												if (!nextState) {
+													setExcludeFilterInputValue("");
+													setExcludeFilterErrorMessage(null);
+												}
+												return nextState;
+											});
+										},
+										size: "icon-xs",
+										type: "button",
+										variant: "ghost",
+										children: [/* @__PURE__ */ _jsx(Ellipsis, { "aria-hidden": "true" }), hasActiveExcludeFilterValues ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+											"aria-hidden": "true",
+											className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive ring-2 ring-background"
+										}), /* @__PURE__ */ _jsx("span", {
+											className: "sr-only",
+											children: ACTIVE_EXCLUSIONS_SR_LABEL
+										})] }) : null]
+									}) : null]
+								})]
+							}),
+							showExcludeFilterToggle && isExcludeFilterInputVisible ? /* @__PURE__ */ _jsxs("div", {
+								className: "grid gap-1",
+								children: [/* @__PURE__ */ _jsxs("div", {
+									className: "flex items-center gap-1",
+									children: [/* @__PURE__ */ _jsx(Input, {
+										"aria-invalid": excludeFilterErrorMessage != null,
+										"aria-label": excludeFilterLabel,
+										onChange: (event) => {
+											setExcludeFilterInputValue(event.target.value);
+											if (excludeFilterErrorMessage != null) {
+												setExcludeFilterErrorMessage(null);
+											}
+										},
+										onKeyDown: (event) => {
+											if (event.key !== "Enter") {
+												return;
+											}
+											event.preventDefault();
+											addExcludeFilterValue(excludeFilterInputValue);
+										},
+										placeholder: excludeFilterPlaceholder,
+										type: "text",
+										value: excludeFilterInputValue
+									}), /* @__PURE__ */ _jsx(ControlButton, {
+										"aria-label": CLEAR_ALL_EXCLUSIONS_FROM_INPUT_ARIA_LABEL,
+										className: "shrink-0",
+										disabled: !hasActiveExcludeFilterValues,
+										onClick: handleClearAllExcludeFilters,
+										size: "icon-xs",
+										type: "button",
+										variant: "ghost",
+										children: /* @__PURE__ */ _jsx(Eraser, { "aria-hidden": "true" })
+									})]
+								}), excludeFilterErrorMessage ? /* @__PURE__ */ _jsx("p", {
+									"aria-live": "polite",
+									className: "text-sm text-destructive",
+									children: excludeFilterErrorMessage
+								}) : null]
+							}) : null,
+							hasPendingReverseFilter ? /* @__PURE__ */ _jsxs("div", {
+								"aria-live": "polite",
+								className: "rounded-md border border-border/80 bg-muted/40 px-3 py-2 text-muted-foreground",
+								role: "status",
+								children: [/* @__PURE__ */ _jsxs("div", {
+									className: "flex items-center gap-2 text-sm font-medium text-foreground/80",
+									children: [/* @__PURE__ */ _jsx(CircleAlert, {
+										"aria-hidden": "true",
+										className: "size-4"
+									}), /* @__PURE__ */ _jsx("span", { children: "Exclusión pendiente" })]
+								}), /* @__PURE__ */ _jsx("p", {
+									className: "mt-1 text-xs",
+									children: REVERSE_FILTER_PENDING_MESSAGE
+								})]
+							}) : null
+						] }) : null,
+						showExcludeFilterToggle && resolvedExcludeFilterValues.length > 0 ? /* @__PURE__ */ _jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [excludeFilterUniqueRowsCount != null ? /* @__PURE__ */ _jsxs(Badge, {
+								"aria-label": `Total de filas excluidas únicas: ${excludeFilterUniqueRowsCount}`,
+								className: "inline-flex h-6 items-center gap-1.5 px-2.5",
+								tone: "danger",
+								children: [
+									/* @__PURE__ */ _jsx("span", { children: `${EXCLUDED_ROWS_SUMMARY_LABEL}:` }),
+									/* @__PURE__ */ _jsx("span", {
+										className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-medium",
+										children: excludeFilterUniqueRowsCount
+									}),
+									/* @__PURE__ */ _jsx("button", {
+										"aria-label": CLEAR_ALL_EXCLUSIONS_ARIA_LABEL,
+										className: "inline-flex size-4 items-center justify-center rounded-sm text-destructive transition-colors hover:bg-destructive/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40",
+										onClick: handleClearAllExcludeFilters,
+										type: "button",
+										children: /* @__PURE__ */ _jsx(X, {
+											"aria-hidden": "true",
+											className: "size-3"
+										})
+									})
+								]
+							}) : null, resolvedExcludeFilterValues.map((excludeFilterValue) => {
+								const excludedRowsCount = excludeFilterRowsCountByValue?.[excludeFilterValue];
+								return /* @__PURE__ */ _jsxs(Badge, {
+									className: "inline-flex h-6 items-center gap-1.5 px-2.5",
+									tone: "danger",
+									children: [
+										/* @__PURE__ */ _jsx("span", { children: `− ${excludeFilterValue}` }),
+										excludedRowsCount != null ? /* @__PURE__ */ _jsx("span", {
+											"aria-label": `Filas excluidas por ${excludeFilterValue}: ${excludedRowsCount}`,
+											className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-medium",
+											children: excludedRowsCount
+										}) : null,
+										/* @__PURE__ */ _jsx("button", {
+											"aria-label": `Quitar exclusión ${excludeFilterValue}`,
+											className: "inline-flex size-4 items-center justify-center rounded-sm text-destructive transition-colors hover:bg-destructive/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40",
+											onClick: () => removeExcludeFilterValue(excludeFilterValue),
+											type: "button",
+											children: /* @__PURE__ */ _jsx(X, {
+												"aria-hidden": "true",
+												className: "size-3"
+											})
+										})
+									]
+								}, excludeFilterValue);
+							})]
+						}) : null,
+						sortingBadgeNode,
+						filterExtraContentNode
+					]
+				}) : null, shouldShowToolbarActions ? /* @__PURE__ */ _jsxs("div", {
+					className: "ml-auto flex flex-wrap items-center gap-2",
+					children: [toolbarActions, shouldShowColumnVisibilityToggle ? /* @__PURE__ */ _jsxs(DropdownMenu, { children: [/* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ _jsxs(ControlButton, {
+							"aria-label": columnVisibilityButtonLabel,
+							className: "relative aria-expanded:*:data-[slot=data-table-columns-chevron]:rotate-180",
+							type: "button",
+							variant: "outline",
+							children: [
+								columnVisibilityButtonLabel,
+								/* @__PURE__ */ _jsx(MotionSlot, {
+									kind: "rotate",
+									children: /* @__PURE__ */ _jsx(ChevronDown, {
+										"aria-hidden": "true",
+										"data-slot": "data-table-columns-chevron"
+									})
+								}),
+								hasToolbarChanges ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+									"aria-hidden": "true",
+									className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive ring-2 ring-background"
+								}), /* @__PURE__ */ _jsx("span", {
+									className: "sr-only",
+									children: "Columnas modificadas"
+								})] }) : null
+							]
+						})
+					}), /* @__PURE__ */ _jsxs(DropdownMenuContent, {
+						align: "end",
+						children: [
+							columnVisibilityMenuExtraItems?.length ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(DropdownMenuItems, { items: columnVisibilityMenuExtraItems }), /* @__PURE__ */ _jsx(DropdownMenuSeparator, {})] }) : null,
+							/* @__PURE__ */ _jsx(DropdownMenuLabel, { children: columnVisibilityMenuLabel }),
+							/* @__PURE__ */ _jsx(DropdownMenuItem, {
+								disabled: areHideableColumnsAtDefaultVisibility,
+								onSelect: (event) => {
+									event.preventDefault();
+									hideableColumns.forEach((column) => {
+										column.toggleVisibility(getHideableColumnDefaultVisibility(column.id));
+									});
+								},
+								children: selectAllColumnsLabel
+							}),
+							/* @__PURE__ */ _jsx(DropdownMenuItem, {
+								disabled: !areSomeHideableColumnsVisible,
+								onSelect: (event) => {
+									event.preventDefault();
+									hideableColumns.forEach((column) => {
+										column.toggleVisibility(false);
+									});
+								},
+								children: deselectAllColumnsLabel
+							}),
+							/* @__PURE__ */ _jsx(DropdownMenuSeparator, {}),
+							hideableColumns.map((column) => {
+								const columnMeta = column.columnDef.meta;
+								const isColumnVisible = column.getIsVisible();
+								const label = columnMeta?.label ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
+								return /* @__PURE__ */ _jsxs(DropdownMenuCheckboxItem, {
+									checked: isColumnVisible,
+									onSelect: (event) => {
+										event.preventDefault();
+									},
+									onCheckedChange: (nextVisible) => {
+										column.toggleVisibility(Boolean(nextVisible));
+									},
+									children: [label, !isColumnVisible ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+										"aria-hidden": "true",
+										className: "absolute right-2 top-1.5 size-2 rounded-full bg-destructive ring-2 ring-background"
+									}), /* @__PURE__ */ _jsx("span", {
+										className: "sr-only",
+										children: "Columna deseleccionada"
+									})] }) : null]
+								}, column.id);
+							})
+						]
+					})] }) : null]
+				}) : null]
+			})]
+		}) : null, /* @__PURE__ */ _jsx("div", {
+			className: "relative w-full overflow-x-auto",
+			children: /* @__PURE__ */ _jsxs(Table, { children: [
+				/* @__PURE__ */ _jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ _jsx(TableRow, { children: headerGroup.headers.map((header) => {
+					const columnMeta = header.column.columnDef.meta;
+					return /* @__PURE__ */ _jsx(TableHead, {
+						className: columnMeta?.headerClassName,
+						onClick: columnMeta?.onHeaderClick,
+						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+					}, header.id);
+				}) }, headerGroup.id)) }),
+				/* @__PURE__ */ _jsx(TableBody, { children: tableBodyContent }),
+				hasFooterContent ? /* @__PURE__ */ _jsx(TableFooter, { children: footerGroups.map((footerGroup) => /* @__PURE__ */ _jsx(TableRow, {
+					className: "hover:bg-transparent",
+					children: footerGroup.headers.map((footer) => /* @__PURE__ */ _jsx(TableCell, {
+						"data-label": footer.column.columnDef.meta?.label,
+						children: footer.isPlaceholder ? null : flexRender(footer.column.columnDef.footer, footer.getContext())
+					}, footer.id))
+				}, footerGroup.id)) }) : null
+			] })
+		})]
+	});
+}