@stackcraftmx/calcita 0.0.0-stage → 0.23.0

package/dist/DataTable/ServerTable.js

@@ -0,0 +1,407 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useEffect } from "react";
+import { useMachine } from "@xstate/react";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import InputAdornment from "@mui/material/InputAdornment";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import SearchIcon from "@mui/icons-material/Search";
+import { DataGrid, GridPagination } from "@mui/x-data-grid";
+import { enUS, esES } from "@mui/x-data-grid/locales";
+import EmptyState from "./EmptyState.js";
+import FilterChips from "./FilterChips.js";
+import GoToPage from "./GoToPage.js";
+import { TableFilterContext } from "./filterContext.js";
+import { tableMachine, buildTableActors } from "./tableMachine.js";
+import { useDebouncedFilter } from "./useDebouncedFilter.js";
+import { useTableState, isFilterActive, FILTER_KINDS } from "./useTableState.js";
+import BarActions from "../appShell/BarActions.js";
+import { BAR_CAPSULE_HEIGHT_PIXELS } from "../appShell/BarCapsule.js";
+import { PHONE_MEDIA_QUERY } from "../appShell/shellSizes.js";
+import { formatNumber } from "../formatting.js";
+import { materialBackgroundOf } from "../theme/glassSurface.js";
+import QuickFilters from "../ui/filters/QuickFilters.js";
+import Tag from "../ui/labels/Tag.js";
+const DATA_GRID_TEXT_BY_LANGUAGE = {
+  es: esES.components.MuiDataGrid.defaultProps.localeText,
+  en: enUS.components.MuiDataGrid.defaultProps.localeText
+};
+function readCspNonce() {
+  if (typeof document === "undefined") {
+    return void 0;
+  }
+  return document.querySelector('meta[property="csp-nonce"]')?.nonce || void 0;
+}
+const ROW_HEIGHT_PIXELS = 36;
+const COLUMN_HEADER_HEIGHT_PIXELS = 39;
+const FOOTER_HEIGHT_PIXELS = 52;
+const GRID_BORDER_PIXELS = 2;
+const HEIGHT_SLACK_PIXELS = 2;
+const DATA_GRID_DENSITY = "compact";
+const SEARCH_BOX_MIN_WIDTH_PIXELS = 400;
+const SEARCH_IN_BAR_WIDTH_PIXELS = 380;
+const STRIPED_ROW_CLASS = "server-table-row--striped";
+const FIXED_CELL_Z_INDEX = 30;
+const FIXED_HEADER_Z_INDEX = 40;
+function fixedColumnSxOf(theme, field) {
+  const { palette } = theme.vars ?? theme;
+  const paper = palette.background.paper;
+  const divider = `1px solid ${palette.divider}`;
+  const ownBandHeader = `.MuiDataGrid-columnHeader[data-fields="|-${field}-|"]`;
+  const isMaterialContent = Boolean(theme.toolkit?.glass?.surfaces);
+  const stickyBackground = { backgroundColor: "inherit", ...isMaterialContent ? materialBackgroundOf(theme, { thick: true }) : { backgroundImage: `linear-gradient(${paper}, ${paper})` } };
+  return {
+    "& :where(.MuiDataGrid-row)": { backgroundColor: isMaterialContent ? "transparent" : paper },
+    [`& .MuiDataGrid-cell[data-field="${field}"]`]: {
+      position: "sticky",
+      left: 0,
+      zIndex: FIXED_CELL_Z_INDEX,
+      borderRight: divider,
+      ...stickyBackground,
+      "&::before": { content: '""', position: "absolute", inset: 0, zIndex: -1, backgroundColor: "inherit" }
+    },
+    [`& :where(.MuiDataGrid-columnHeader[data-field="${field}"], ${ownBandHeader})`]: isMaterialContent ? materialBackgroundOf(theme, { thick: true }) : { backgroundColor: paper },
+    [`& .MuiDataGrid-columnHeader[data-field="${field}"], & ${ownBandHeader}`]: {
+      position: "sticky",
+      left: 0,
+      zIndex: FIXED_HEADER_Z_INDEX,
+      borderRight: divider
+    }
+  };
+}
+const COMPACT_DENSITY_FACTOR = 0.7;
+function QuickFilterRow({ quickFilter, facets, total, filters, isMultiple, setFilter, setFilters }) {
+  const { t } = useToolkitTranslation("table");
+  const facetOptions = facets[quickFilter.facetKey ?? quickFilter.field] ?? [];
+  const orderedOptions = quickFilter.order ? quickFilter.order.map((optionValue) => facetOptions.find((option) => option.value === optionValue) ?? { value: optionValue, total: 0 }) : facetOptions;
+  const currentValue = filters[quickFilter.field];
+  const isOverridden = quickFilter.isOverridden?.(filters) ?? false;
+  let selectedValue = currentValue ?? "";
+  if (isOverridden) {
+    selectedValue = "__overridden__";
+  } else if (isMultiple) {
+    selectedValue = Array.isArray(currentValue) && currentValue.length === 1 ? currentValue[0] : "";
+  }
+  let allCount = facetOptions.reduce((sum, option) => sum + (option.total ?? 0), 0) || total;
+  if (quickFilter.allCountKey && typeof facets[quickFilter.allCountKey] === "number") {
+    allCount = facets[quickFilter.allCountKey];
+  } else if (quickFilter.hideAllCount) {
+    allCount = void 0;
+  }
+  const handleChange = (nextValue) => {
+    const pickedValue = isMultiple ? nextValue ? [nextValue] : [] : nextValue;
+    if (quickFilter.clears) {
+      setFilters({ [quickFilter.field]: pickedValue, ...quickFilter.clears });
+    } else {
+      setFilter(quickFilter.field, pickedValue);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    QuickFilters,
+    {
+      caption: quickFilter.caption,
+      ariaLabel: quickFilter.caption,
+      value: selectedValue,
+      onChange: handleChange,
+      extra: quickFilter.renderExtra?.({ filters, setFilters }),
+      options: [
+        { value: "", label: quickFilter.allLabel ?? t("quickFilters.all"), count: allCount },
+        ...orderedOptions.map((option) => ({
+          value: option.value,
+          label: quickFilter.renderLabel ? quickFilter.renderLabel(option.value) : option.value,
+          count: option.total
+        }))
+      ]
+    }
+  );
+}
+function ServerTable({
+  fetchPage,
+  queryKey,
+  enabled = true,
+  columns,
+  filterKinds = {},
+  filterDefaults = {},
+  chipConfig = [],
+  quickFilters = [],
+  searchField = "contains",
+  searchPlaceholder,
+  searchInBar = false,
+  collapseSearchInBar = true,
+  emptyLabel,
+  countLabel,
+  pageSizeOptions = [10, 25, 50, 100],
+  defaultPageSize = 25,
+  getRowId,
+  prefix,
+  refreshToken,
+  footer,
+  toolbarExtra,
+  header,
+  beforeQuickFilters,
+  columnGroupingModel,
+  getRowClassName,
+  isRowVisible,
+  hideFooterWhenAllRowsFit = false,
+  showGoToPage = false,
+  striped = false,
+  getRowHeight,
+  gridSx,
+  maxGridHeight = null,
+  ariaLabel,
+  fixedColumn
+}) {
+  const { t, language, changeLanguage } = useToolkitTranslation("table");
+  const tableState = useTableState({ prefix, filterDefaults, filterKinds, defaultPageSize });
+  const { filters, sortOrders, page, pageSize } = tableState;
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+  const [searchDraft, setSearchDraft] = useDebouncedFilter(
+    searchField ? filters[searchField] : "",
+    (value) => searchField && tableState.setFilter(searchField, value)
+  );
+  const latestFetchPage = useRef(fetchPage);
+  latestFetchPage.current = fetchPage;
+  const [tableSnapshot, sendToTable] = useMachine(
+    tableMachine.provide({ actors: buildTableActors((params, signal) => latestFetchPage.current(params, signal)) })
+  );
+  const { rows, total, facets, capped, error } = tableSnapshot.context;
+  const visibleRows = useMemo(() => isRowVisible ? rows.filter(isRowVisible) : rows, [rows, isRowVisible]);
+  const isLoading = tableSnapshot.matches("loading") || tableSnapshot.matches("idle");
+  const requestParams = { filters, sortOrders, page, pageSize };
+  const requestFingerprint = JSON.stringify({ queryKey, enabled, refreshToken, ...requestParams });
+  useEffect(() => {
+    if (!queryKey || !enabled) {
+      return;
+    }
+    sendToTable({ type: "FETCH", params: requestParams });
+  }, [requestFingerprint]);
+  const toggleSort = (column) => {
+    const currentSort = sortOrders.find((sortOrder) => sortOrder.column === column);
+    if (!currentSort) {
+      tableState.setSort([{ column, direction: "desc" }]);
+    } else if (currentSort.direction === "desc") {
+      tableState.setSort([{ column, direction: "asc" }]);
+    } else {
+      tableState.setSort([]);
+    }
+  };
+  const hasActiveFilters = Object.entries(filters).some(([field, value]) => field !== searchField && isFilterActive(filterKinds[field], value));
+  const quickActiveCount = quickFilters.filter((quickFilter) => !chipConfig.some((chipDeclaration) => chipDeclaration.key === quickFilter.field) && JSON.stringify(filters[quickFilter.field] ?? "") !== JSON.stringify(filterDefaults[quickFilter.field] ?? "")).length;
+  const tableFilterValue = useMemo(() => ({
+    filters,
+    setFilter: tableState.setFilter,
+    clearFilter: tableState.clearFilter,
+    sortOrders,
+    toggleSort,
+    clearSort: () => tableState.setSort([]),
+    facets
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [filters, sortOrders, facets]);
+  let placeholderRowCount = 0;
+  if (visibleRows.length === 0) {
+    placeholderRowCount = isLoading ? Math.min(pageSize, 8) : 3;
+  }
+  let rowsHeight = placeholderRowCount * ROW_HEIGHT_PIXELS;
+  for (const row of visibleRows) {
+    const requestedRowHeight = getRowHeight?.({ id: getRowId ? getRowId(row) : row.id, model: row, densityFactor: COMPACT_DENSITY_FACTOR });
+    rowsHeight += typeof requestedRowHeight === "number" ? requestedRowHeight : ROW_HEIGHT_PIXELS;
+  }
+  const headerHeight = columnGroupingModel ? 2 * COLUMN_HEADER_HEIGHT_PIXELS : COLUMN_HEADER_HEIGHT_PIXELS;
+  const isFooterHidden = hideFooterWhenAllRowsFit && page === 0 && total <= pageSize;
+  const footerHeight = isFooterHidden ? 0 : FOOTER_HEIGHT_PIXELS + GRID_BORDER_PIXELS;
+  const contentHeight = headerHeight + rowsHeight + footerHeight + HEIGHT_SLACK_PIXELS;
+  const gridHeight = maxGridHeight ? Math.min(contentHeight, maxGridHeight) : contentHeight;
+  const gridText = DATA_GRID_TEXT_BY_LANGUAGE[language] ?? DATA_GRID_TEXT_BY_LANGUAGE.es;
+  const formattedTotal = formatNumber(total);
+  const countText = countLabel ? countLabel(total) : t("count.records", { count: total, total: formattedTotal });
+  const searchText = searchPlaceholder ?? t("search.placeholder");
+  const isSearchCompact = searchInBar && collapseSearchInBar && !isSearchFocused && !searchDraft;
+  const searchBox = searchField && /* @__PURE__ */ jsx(
+    TextField,
+    {
+      type: "search",
+      size: "small",
+      value: searchDraft,
+      onChange: (event) => setSearchDraft(event.target.value),
+      onFocus: () => setIsSearchFocused(true),
+      onBlur: () => setIsSearchFocused(false),
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          setSearchDraft("");
+          event.currentTarget.querySelector("input")?.blur();
+        }
+      },
+      placeholder: searchText,
+      sx: { minWidth: { xs: 0, md: SEARCH_BOX_MIN_WIDTH_PIXELS } },
+      slotProps: {
+        input: { startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small" }) }) },
+        htmlInput: { "aria-label": searchText }
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(TableFilterContext, { value: tableFilterValue, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", md: "row" }, spacing: 2, sx: { mb: 1.5, alignItems: { md: "center" } }, children: [
+      searchBox && !searchInBar && searchBox,
+      searchBox && searchInBar && /* @__PURE__ */ jsx(
+        BarActions,
+        {
+          label: searchText,
+          bare: true,
+          order: 0,
+          sx: (theme) => ({
+            // en el teléfono flota arriba junto a las demás cápsulas. Su lugar SIEMPRE ocupa lo libre del
+            // renglón y la caja va pegada a la derecha: así se abre de derecha a izquierda y regresa igual
+            // (el ancho pasa de 48 px a 100 % con transición). OJO: antes el lugar brincaba de golpe
+            // (flex-grow no se anima) y la caja crecía de izquierda a derecha; se veía muy mal. El hueco de
+            // la izquierda deja pasar el dedo a lo de abajo; solo la caja lo recibe
+            [PHONE_MEDIA_QUERY]: {
+              flexGrow: 1,
+              minWidth: 0,
+              justifyContent: "flex-end",
+              pointerEvents: "none",
+              "& .MuiTextField-root": { pointerEvents: "auto" }
+            },
+            "& .MuiTextField-root": {
+              width: isSearchCompact ? BAR_CAPSULE_HEIGHT_PIXELS : SEARCH_IN_BAR_WIDTH_PIXELS,
+              minWidth: 0,
+              transition: theme.transitions.create("width", { duration: theme.transitions.duration.short }),
+              "@media (prefers-reduced-motion: reduce)": { transition: "none" },
+              [PHONE_MEDIA_QUERY]: { width: isSearchCompact ? BAR_CAPSULE_HEIGHT_PIXELS : "100%" }
+            },
+            "& .MuiFormControl-root .MuiInputBase-root.MuiOutlinedInput-root": {
+              height: BAR_CAPSULE_HEIGHT_PIXELS,
+              borderRadius: "999px",
+              cursor: isSearchCompact ? "pointer" : "text"
+            },
+            "& .MuiInputAdornment-root": { pointerEvents: "none" },
+            "& input::placeholder": { opacity: isSearchCompact ? 0 : void 0 }
+          }),
+          children: searchBox
+        }
+      ),
+      header ? /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: header({ countText: capped ? t("count.capped", { total: formattedTotal }) : countText, total, capped }) }) : (
+        // NOTA: el extra va pegado al conteo y no empujado a la orilla (ml: 'auto'): en escritorio quedaba a todo
+        // el ancho de distancia y no se leía como parte de la misma tabla (caso del selector de año)
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, useFlexGap: true, sx: { flexGrow: 1, alignItems: "center", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", role: "status", "aria-live": "polite", children: capped ? t("count.capped", { total: formattedTotal }) : countText }),
+            capped && /* @__PURE__ */ jsx(Tag, { label: t("count.cappedTag"), color: "warning", tooltip: t("count.cappedTooltip") })
+          ] }),
+          toolbarExtra
+        ] })
+      )
+    ] }),
+    beforeQuickFilters,
+    quickFilters.map((quickFilter) => /* @__PURE__ */ jsx(
+      QuickFilterRow,
+      {
+        quickFilter,
+        facets,
+        total,
+        filters,
+        isMultiple: filterKinds[quickFilter.field] === FILTER_KINDS.multiSelect,
+        setFilter: tableState.setFilter,
+        setFilters: tableState.setFilters
+      },
+      quickFilter.field
+    )),
+    /* @__PURE__ */ jsx(
+      FilterChips,
+      {
+        chipConfig,
+        filters,
+        quickActiveCount,
+        onSetFilter: tableState.setFilter,
+        onClearAll: tableState.clearAll
+      }
+    ),
+    error && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        severity: "error",
+        role: "alert",
+        sx: { mb: 1 },
+        action: /* @__PURE__ */ jsx(Button, { color: "inherit", size: "small", onClick: () => sendToTable({ type: "FETCH", params: requestParams }), children: t("common:actions.retry") }),
+        children: error.message ?? t("error.generic")
+      }
+    ),
+    /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: { width: "100%", minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        rows: visibleRows,
+        columns,
+        columnGroupingModel,
+        getRowId,
+        getRowClassName: (params) => [
+          getRowClassName?.(params),
+          striped && params.indexRelativeToCurrentPage % 2 === 1 ? STRIPED_ROW_CLASS : ""
+        ].filter(Boolean).join(" "),
+        getRowHeight,
+        "aria-label": ariaLabel,
+        nonce: readCspNonce(),
+        loading: isLoading,
+        paginationMode: "server",
+        sortingMode: "server",
+        filterMode: "server",
+        rowCount: total,
+        paginationModel: { page, pageSize },
+        onPaginationModelChange: (paginationModel) => {
+          if (paginationModel.pageSize !== pageSize) {
+            tableState.setPageSize(paginationModel.pageSize);
+          } else {
+            tableState.setPage(paginationModel.page);
+          }
+        },
+        pageSizeOptions,
+        hideFooter: isFooterHidden,
+        disableColumnMenu: true,
+        disableRowSelectionOnClick: true,
+        disableVirtualization: Boolean(fixedColumn),
+        density: DATA_GRID_DENSITY,
+        localeText: { ...gridText, noRowsLabel: emptyLabel ?? t("empty.default") },
+        slotProps: {
+          // con filas ya pintadas, barra delgada arriba sin tapar lo que se lee; con la tabla vacía, esqueleto
+          loadingOverlay: { variant: "linear-progress", noRowsVariant: "skeleton" }
+        },
+        slots: {
+          // "ir a la página N" (solo si se pide) pegado a la paginación: ahí lo busca quien ya está leyendo
+          // "51-75 de 1,234". Sin él, la paginación de siempre del DataGrid
+          ...showGoToPage && {
+            pagination: () => /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx(GoToPage, { page, pageCount: Math.ceil(total / pageSize) || 1, onChange: tableState.setPage }),
+              /* @__PURE__ */ jsx(GridPagination, {})
+            ] })
+          },
+          noResultsOverlay: () => /* @__PURE__ */ jsx(EmptyState, { filtered: true, label: emptyLabel, onClearFilters: tableState.clearAll }),
+          noRowsOverlay: () => /* @__PURE__ */ jsx(EmptyState, { filtered: hasActiveFilters, label: emptyLabel, onClearFilters: tableState.clearAll })
+        },
+        sx: [{
+          // IMPORTANTE: el alto va en la raíz del DataGrid y no en la caja de afuera: las variables
+          // --DataGrid-hasScrollX y --DataGrid-scrollbarSize solo existen en la raíz. Cuando las columnas no
+          // caben (historial a 390 px) la barra horizontal ocupa su alto dentro de la tabla y, sin sumarlo, los
+          // renglones se desplazaban 13 px por dentro. Con barras superpuestas (teléfono, trackpad) mide 0
+          height: `calc(${gridHeight}px + var(--DataGrid-hasScrollX, 0) * var(--DataGrid-scrollbarSize, 0px))`,
+          border: 0,
+          // todo centrado verticalmente: el texto suelto se pegaba arriba y los chips quedaban a media altura
+          "& .MuiDataGrid-cell": { display: "flex", alignItems: "center" },
+          "& .MuiDataGrid-columnHeader": { alignItems: "center" },
+          // cebra: el color del hover del tema
+          [`& .${STRIPED_ROW_CLASS}`]: { bgcolor: "action.hover" },
+          [`& .${STRIPED_ROW_CLASS}:hover`]: { bgcolor: "action.selected" },
+          ...gridSx
+        }, (theme) => fixedColumn ? fixedColumnSxOf(theme, fixedColumn) : {}]
+      }
+    ) }),
+    footer?.({ total, capped })
+  ] });
+}
+export {
+  ServerTable as default
+};
+//# sourceMappingURL=ServerTable.js.map

package/dist/DataTable/ServerTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerTable.js","sources":["../../src/DataTable/ServerTable.jsx"],"sourcesContent":["// La tabla: pagina, filtra y ordena EN EL SERVIDOR (contrato {filters, sortOrders, page, pageSize} → {rows, total, facets}).\n//\n// Cada cambio de filtro, orden o página es una consulta nueva contra el conjunto COMPLETO y el total que se muestra\n// es el real. Traer todo y filtrar en el navegador mentiría en cuanto el conjunto no quepa en una página.\n//\n// Contrato de fetchPage:\n//   fetchPage({filters, sortOrders, page, pageSize}, signal) → Promise<{rows, total, facets?, capped?}>\n//   - rows: cada fila con su id del SERVIDOR (getRowId). Fabricarlo en el front colisiona y el DataGrid conserva\n//     filas de la consulta anterior;\n//   - facets: {campo: [{value, total}]} contadas SIN el filtro de ese campo (lo hace el servidor), para que la\n//     selección múltiple siga siendo posible;\n//   - capped: el total es \"al menos esto\".\n//\n// Piezas: useTableState (URL con nuqs y prefijo) · tableMachine (XState: carga, error y respuestas rezagadas) ·\n// columns.jsx (encabezados con orden y filtro) · FilterChips · QuickFilters · GoToPage · EmptyState.\n//\n// Con @mui/x-data-grid 8 (compatible con MUI 7).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useMemo, useRef, useState} from 'react';\nimport {useMachine} from '@xstate/react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport SearchIcon from '@mui/icons-material/Search';\nimport {DataGrid, GridPagination} from '@mui/x-data-grid';\nimport {enUS as dataGridEnglish, esES as dataGridSpanish} from '@mui/x-data-grid/locales';\n\nimport EmptyState from '@/DataTable/EmptyState.jsx';\nimport FilterChips from '@/DataTable/FilterChips.jsx';\nimport GoToPage from '@/DataTable/GoToPage.jsx';\nimport {TableFilterContext} from '@/DataTable/filterContext.js';\nimport {buildTableActors, tableMachine} from '@/DataTable/tableMachine.js';\nimport {useDebouncedFilter} from '@/DataTable/useDebouncedFilter.js';\nimport {FILTER_KINDS, isFilterActive, useTableState} from '@/DataTable/useTableState.js';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {BAR_CAPSULE_HEIGHT_PIXELS} from '@/appShell/BarCapsule.jsx';\nimport {PHONE_MEDIA_QUERY} from '@/appShell/shellSizes.js';\nimport {formatNumber} from '@/formatting.js';\nimport {materialBackgroundOf} from '@/theme/glassSurface.js';\nimport QuickFilters from '@/ui/filters/QuickFilters.jsx';\nimport Tag from '@/ui/labels/Tag.jsx';\n\n// OJO: los textos del DataGrid van como PROP (localeText) y no solo en el tema: el grid resuelve sus defaults en\n// inglés y le ganan a los defaultProps del tema\nconst DATA_GRID_TEXT_BY_LANGUAGE = {\n    es: dataGridSpanish.components.MuiDataGrid.defaultProps.localeText,\n    en: dataGridEnglish.components.MuiDataGrid.defaultProps.localeText,\n};\n\n/**\n * Nonce de la CSP de la página, si la aplicación usa CSP y lo pone en <meta property=\"csp-nonce\">.\n *\n * IMPORTANTE: el DataGrid 8 inserta un <style> con sus variables CSS (bordes, fondos, espaciado). Sin el nonce la CSP lo\n * bloquea (\"style-src-elem\") y la tabla se pinta sin sus variables. OJO: el navegador esconde el valor del atributo\n * (getAttribute regresa \"\"); se lee con la propiedad .nonce, igual que el caché de emotion con nonce.\n *\n * @returns {string|undefined}\n */\nfunction readCspNonce() {\n    // pintando en el servidor (Next.js) no hay documento: ahí el nonce lo pone quien arma el HTML\n    if (typeof document === 'undefined') {\n        return undefined;\n    }\n\n    return document.querySelector('meta[property=\"csp-nonce\"]')?.nonce || undefined;\n}\n\n// Densidad compacta en todas las tablas: el espaciado por omisión desperdicia renglones. Son los altos que pinta el DataGrid 8 con density=\"compact\": la base de 52 px del renglón y de 56 px del\n// encabezado por el factor 0.7, redondeados hacia abajo. El pie (paginación) no cambia con la densidad.\n// OJO: si se cambia la densidad, estos números se vuelven a medir en Chrome; con ellos se calcula el alto del contenedor\n// y un número viejo deja hueco blanco abajo o una barra de desplazamiento sin necesidad\nconst ROW_HEIGHT_PIXELS = 36;\nconst COLUMN_HEADER_HEIGHT_PIXELS = 39;\nconst FOOTER_HEIGHT_PIXELS = 52;\n// líneas del borde del encabezado y del pie\nconst GRID_BORDER_PIXELS = 2;\n// holgura de alto de la tabla: debajo del último renglón queda este hueco, así que va lo más chico que aguanta.\n// OJO: con el alto exacto, el redondeo de subpíxeles hace que el DataGrid crea que hay scroll vertical, reserve el ancho de\n// la barra y aparezca un scroll lateral de 5 px. Lo vigila e2e/tests/upload-control.spec.js (la tabla no se desliza de lado)\nconst HEIGHT_SLACK_PIXELS = 2;\nconst DATA_GRID_DENSITY = 'compact';\n// ancho de la caja de búsqueda en escritorio: cabe un texto de ayuda como «Buscar por pedido, cliente o producto…».\n// OJO: con 280 se cortaba («…cliente o pro»); en el teléfono la caja toma todo el ancho\nconst SEARCH_BOX_MIN_WIDTH_PIXELS = 400;\n// en la barra de la app (searchInBar) un poco más angosta: comparte el renglón con el título y las cápsulas\nconst SEARCH_IN_BAR_WIDTH_PIXELS = 380;\nconst STRIPED_ROW_CLASS = 'server-table-row--striped';\n\n\n// a qué altura van la celda y el encabezado fijos: los mismos que usa el DataGrid de paga para sus columnas fijas. El\n// encabezado va arriba de la raya que separa columnas (30); con menos, la raya de las otras columnas lo cruzaba al deslizar\nconst FIXED_CELL_Z_INDEX = 30;\nconst FIXED_HEADER_Z_INDEX = 40;\n\n/**\n * Estilos que dejan pegada a la izquierda una columna al deslizar la tabla de lado (en el teléfono y en una ventana angosta),\n * igual que fixedSelectColumn de mui-datatables. Fijar columnas en MUI X es de DataGridPro (de paga); por dentro Pro usa\n * position sticky en la celda, y eso mismo se hace aquí, también con su banda del encabezado cuando la banda es solo suya\n * (p. ej. una banda PERIODO de una sola columna).\n *\n * OJO, trampas pagadas:\n *   - el DataGrid gratuito solo dibuja las columnas que se ven (virtualización) y al deslizar mucho a la derecha quitaba del\n *     DOM a la columna fija, que desaparecía. Un margen de columnas extra (columnBufferPx) no alcanzó: con columna fija la\n *     tabla va con disableVirtualization y dibuja todo, que en nuestras tablas son menos de quince columnas y una página;\n *   - la celda fija necesita fondo SÓLIDO o se ve lo que pasa por debajo. Toma el color de su renglón (inherit), pero hay\n *     renglones con color transparente (una banda de color, la cebra, el resaltado del mouse): ahí se asomaban las\n *     cifras de las otras columnas. Por eso el fondo va en dos capas: abajo el papel, sólido (backgroundImage, que se pinta\n *     encima del color propio de la celda), y encima el color del renglón en un ::before detrás del texto (zIndex -1 dentro\n *     de la celda). Se ve igual que el renglón y no transparenta.\n * El renglón lleva el fondo del papel con :where(), que no suma especificidad: así los renglones que la página pinta de otro\n * color le siguen ganando. Los colores salen de la paleta del tema (de sus variables CSS si el tema las usa) para que\n * cambien con el modo oscuro.\n *\n * Con el contenido de material del tema de vidrio (createToolkitTheme({glass: {surfaces: true}})) la tabla no lleva fondo\n * propio: los renglones van transparentes y la celda pegada lleva el mismo material esmerilado, que tapa lo que pasa por\n * debajo sin verse como una columna blanca (así se veía con el papel sólido).\n *\n * @param {object} theme tema de MUI\n * @param {string} field campo de la columna que se queda fija\n * @returns {object} estilos para el sx del DataGrid\n */\nfunction fixedColumnSxOf(theme, field) {\n    // un tema con variables CSS (cssVariables) las trae en theme.vars; el tema por omisión de MUI, solo en theme.palette\n    const {palette} = theme.vars ?? theme;\n    const paper = palette.background.paper;\n    const divider = `1px solid ${palette.divider}`;\n    // la banda del encabezado que lleva solo a esta columna: el DataGrid la marca con sus campos entre |- y -|\n    const ownBandHeader = `.MuiDataGrid-columnHeader[data-fields=\"|-${field}-|\"]`;\n    const isMaterialContent = Boolean(theme.toolkit?.glass?.surfaces);\n    // abajo la capa (el papel o el material) y encima el color del renglón (el ::before)\n    const stickyBackground = {backgroundColor: 'inherit', ...(isMaterialContent ? materialBackgroundOf(theme, {thick: true}) : {backgroundImage: `linear-gradient(${paper}, ${paper})`})};\n\n    return {\n        '& :where(.MuiDataGrid-row)': {backgroundColor: isMaterialContent ? 'transparent' : paper},\n        [`& .MuiDataGrid-cell[data-field=\"${field}\"]`]: {\n            position: 'sticky', left: 0, zIndex: FIXED_CELL_Z_INDEX, borderRight: divider,\n            ...stickyBackground,\n            '&::before': {content: '\"\"', position: 'absolute', inset: 0, zIndex: -1, backgroundColor: 'inherit'},\n        },\n        [`& :where(.MuiDataGrid-columnHeader[data-field=\"${field}\"], ${ownBandHeader})`]: isMaterialContent ? materialBackgroundOf(theme, {thick: true}) : {backgroundColor: paper},\n        [`& .MuiDataGrid-columnHeader[data-field=\"${field}\"], & ${ownBandHeader}`]: {\n            position: 'sticky', left: 0, zIndex: FIXED_HEADER_Z_INDEX, borderRight: divider,\n        },\n    };\n}\nconst COMPACT_DENSITY_FACTOR = 0.7;\n\n/** Una tira de accesos rápidos sobre un campo de la tabla, alimentada por su faceta. */\nfunction QuickFilterRow({quickFilter, facets, total, filters, isMultiple, setFilter, setFilters}) {\n    const {t} = useToolkitTranslation('table');\n    const facetOptions = facets[quickFilter.facetKey ?? quickFilter.field] ?? [];\n    const orderedOptions = quickFilter.order\n        ? quickFilter.order.map((optionValue) => facetOptions.find((option) => option.value === optionValue) ?? {value: optionValue, total: 0})\n        : facetOptions;\n\n    // en un filtro múltiple el chip activo es la opción cuando es la ÚNICA elegida: con varias puestas desde la columna\n    // ningún chip miente estando encendido\n    const currentValue = filters[quickFilter.field];\n    // si otro control del mismo \"qué\" está puesto (un rango de fechas), ningún chip se enciende\n    const isOverridden = quickFilter.isOverridden?.(filters) ?? false;\n    let selectedValue = currentValue ?? '';\n    if (isOverridden) {\n        selectedValue = '__overridden__';\n    } else if (isMultiple) {\n        selectedValue = Array.isArray(currentValue) && currentValue.length === 1 ? currentValue[0] : '';\n    }\n\n    // el conteo de \"Todas\" es la suma de la faceta (el resultado SIN este filtro), no el de la página actual; cuando las\n    // opciones se traslapan la suma mentiría: el total lo da el servidor en allCountKey o, si no lo da, no se pinta\n    // conteo (hideAllCount) antes que pintar uno falso\n    let allCount = facetOptions.reduce((sum, option) => sum + (option.total ?? 0), 0) || total;\n    if (quickFilter.allCountKey && typeof facets[quickFilter.allCountKey] === 'number') {\n        allCount = facets[quickFilter.allCountKey];\n    } else if (quickFilter.hideAllCount) {\n        allCount = undefined;\n    }\n\n    const handleChange = (nextValue) => {\n        const pickedValue = isMultiple ? (nextValue ? [nextValue] : []) : nextValue;\n        // elegir un chip limpia los controles que compiten con él\n        if (quickFilter.clears) {\n            setFilters({[quickFilter.field]: pickedValue, ...quickFilter.clears});\n        } else {\n            setFilter(quickFilter.field, pickedValue);\n        }\n    };\n\n    return (\n        <QuickFilters\n            caption={quickFilter.caption}\n            ariaLabel={quickFilter.caption}\n            value={selectedValue}\n            onChange={handleChange}\n            extra={quickFilter.renderExtra?.({filters, setFilters})}\n            options={[\n                {value: '', label: quickFilter.allLabel ?? t('quickFilters.all'), count: allCount},\n                ...orderedOptions.map((option) => ({\n                    value: option.value,\n                    label: quickFilter.renderLabel ? quickFilter.renderLabel(option.value) : option.value,\n                    count: option.total,\n                })),\n            ]}\n        />\n    );\n}\n\n/**\n * @param {object} props\n * @param {(params: {filters: Record<string, any>, sortOrders: Array<{column: string, direction: 'asc'|'desc'}>, page: number, pageSize: number}, signal: AbortSignal) => Promise<{rows: any[], total: number, facets?: Record<string, Array<{value: any, total: number}>>, capped?: boolean}>} props.fetchPage\n *     page cuenta desde 0; toServerTableParams lo convierte a la query del API\n * @param {string} props.queryKey cambia cuando cambia el CONJUNTO (no los filtros): dispara recarga\n * @param {boolean} [props.enabled] false mientras la sección está oculta: una tabla que nadie ve no consulta\n * @param {Array<object>} props.columns textColumn / facetColumn / detailColumn o columnas del DataGrid\n * @param {Record<string, string>} [props.filterKinds]\n * @param {Record<string, unknown>} [props.filterDefaults]\n * @param {Array<object>} [props.chipConfig] buildChipConfig\n * @param {Array<object>} [props.quickFilters] {field, facetKey, caption, allLabel, renderLabel, order, clears,\n *     isOverridden, renderExtra, allCountKey, hideAllCount}\n * @param {string|null} [props.searchField] filtro de texto que se saca a la barra; null quita la caja\n * @param {string} [props.searchPlaceholder]\n * @param {boolean} [props.searchInBar] la caja de búsqueda va arriba, en la barra de la app (BarActions): en escritorio,\n *     como el buscador de una ventana de macOS; en el teléfono con cápsulas flota arriba con las demás; sin cápsulas se\n *     queda aquí. Por omisión no\n * @param {boolean} [props.collapseSearchInBar] en la barra, sin usar se encoge a la lupa y se estira al picarla; por\n *     omisión sí (false: siempre abierta)\n * @param {string} [props.emptyLabel]\n * @param {(total: number) => string} [props.countLabel] \"12 pedidos\"; por defecto \"12 registros\"\n * @param {number[]} [props.pageSizeOptions]\n * @param {number} [props.defaultPageSize]\n * @param {(row: any) => string|number} [props.getRowId]\n * @param {string} [props.prefix] estado en la URL con este prefijo (nuqs); sin él, en memoria\n * @param {unknown} [props.refreshToken] cambia para volver a consultar la misma página (después de una acción)\n * @param {(summary: {total: number, capped: boolean}) => import('react').ReactNode} [props.footer]\n * @param {import('react').ReactNode} [props.toolbarExtra] a la derecha del conteo (p. ej. el selector de año)\n * @param {(summary: {countText: string, total: number, capped: boolean}) => import('react').ReactNode} [props.header] reemplaza\n *     el renglón del conteo: la página pinta título, conteo y controles en uno solo. countText ya viene traducido y con\n *     el tope\n * @param {import('react').ReactNode} [props.beforeQuickFilters] arriba de los accesos rápidos (p. ej. las pestañas de producto)\n * @param {Array<object>} [props.columnGroupingModel] bandas que agrupan columnas bajo un nombre, arriba de sus\n *     encabezados (columnGroupingModel del DataGrid). Con ellas el encabezado mide un renglón más\n * @param {(params: any) => string} [props.getRowClassName]\n * @param {(row: any) => boolean} [props.isRowVisible] cuáles renglones de la página se pintan; los demás se esconden\n *     SIN volver a consultar (p. ej. plegar un grupo de renglones). Sin ella se pintan todos. OJO: va con useCallback;\n *     una función nueva en cada pintada haría filtrar la página cada vez\n * @param {boolean} [props.striped] renglones alternos (cebra) con el color de hover del tema; al pasar el cursor se usa\n *     el de «seleccionado» para que el renglón bajo el cursor se siga distinguiendo\n * @param {(params: any) => number|'auto'|null} [props.getRowHeight]\n * @param {boolean} [props.hideFooterWhenAllRowsFit] esconde el pie (el paginador) mientras todo lo que hay cabe en la\n *     página; si un día no cabe, el pie vuelve solo. Para tablas que casi nunca pasan de una página\n * @param {boolean} [props.showGoToPage] «Ir a página N» junto al paginador; por omisión escondido (con las flechas basta en\n *     casi todas las tablas). Para listas de muchas páginas que se recorren por número\n * @param {object} [props.gridSx] estilos extra del DataGrid (clases de renglón)\n * @param {number} [props.maxGridHeight] alto máximo del contenedor; sin él la tabla crece con sus renglones (default)\n * @param {string} [props.ariaLabel] nombre de la tabla para lectores de pantalla\n * @param {string} [props.fixedColumn] campo de la columna que se queda pegada a la izquierda al deslizar de lado (como\n *     fixedSelectColumn de mui-datatables)\n */\nexport default function ServerTable({\n    fetchPage,\n    queryKey,\n    enabled = true,\n    columns,\n    filterKinds = {},\n    filterDefaults = {},\n    chipConfig = [],\n    quickFilters = [],\n    searchField = 'contains',\n    searchPlaceholder,\n    searchInBar = false,\n    collapseSearchInBar = true,\n    emptyLabel,\n    countLabel,\n    pageSizeOptions = [10, 25, 50, 100],\n    defaultPageSize = 25,\n    getRowId,\n    prefix,\n    refreshToken,\n    footer,\n    toolbarExtra,\n    header,\n    beforeQuickFilters,\n    columnGroupingModel,\n    getRowClassName,\n    isRowVisible,\n    hideFooterWhenAllRowsFit = false,\n    showGoToPage = false,\n    striped = false,\n    getRowHeight,\n    gridSx,\n    maxGridHeight = null,\n    ariaLabel,\n    fixedColumn,\n}) {\n    const {t, language, changeLanguage} = useToolkitTranslation('table');\n    const tableState = useTableState({prefix, filterDefaults, filterKinds, defaultPageSize});\n    const {filters, sortOrders, page, pageSize} = tableState;\n\n    // la caja de búsqueda rebota: se escribe sin latencia y al servidor va una consulta cuando se deja de teclear\n    // si la caja de búsqueda tiene el foco (en la barra, con el foco se estira)\n    const [isSearchFocused, setIsSearchFocused] = useState(false);\n    const [searchDraft, setSearchDraft] = useDebouncedFilter(\n        searchField ? filters[searchField] : '',\n        (value) => searchField && tableState.setFilter(searchField, value),\n    );\n\n    // NOTA: fetchPage suele ser una función nueva en cada render; la máquina siempre llama a la más reciente\n    const latestFetchPage = useRef(fetchPage);\n    latestFetchPage.current = fetchPage;\n    const [tableSnapshot, sendToTable] = useMachine(\n        tableMachine.provide({actors: buildTableActors((params, signal) => latestFetchPage.current(params, signal))}),\n    );\n    const {rows, total, facets, capped, error} = tableSnapshot.context;\n    // lo que se pinta: la página completa o, si la pantalla esconde renglones (un grupo plegado), solo los que deja ver.\n    // Con memoria: un arreglo nuevo en cada pintada haría que el DataGrid volviera a procesar todos sus renglones\n    const visibleRows = useMemo(() => (isRowVisible ? rows.filter(isRowVisible) : rows), [rows, isRowVisible]);\n    const isLoading = tableSnapshot.matches('loading') || tableSnapshot.matches('idle');\n\n    const requestParams = {filters, sortOrders, page, pageSize};\n    const requestFingerprint = JSON.stringify({queryKey, enabled, refreshToken, ...requestParams});\n\n    // IMPORTANTE: UN solo efecto dispara la consulta. Varios useEffect pidiendo lo mismo es como nacen las consultas\n    // duplicadas\n    useEffect(() => {\n        if (!queryKey || !enabled) {\n            return;\n        }\n        sendToTable({type: 'FETCH', params: requestParams});\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [requestFingerprint]);\n\n    const toggleSort = (column) => {\n        const currentSort = sortOrders.find((sortOrder) => sortOrder.column === column);\n        if (!currentSort) {\n            tableState.setSort([{column, direction: 'desc'}]);\n        } else if (currentSort.direction === 'desc') {\n            tableState.setSort([{column, direction: 'asc'}]);\n        } else {\n            // tercer clic: regresa al orden por defecto del servidor\n            tableState.setSort([]);\n        }\n    };\n\n    // el texto de la caja de búsqueda no cuenta como filtro oculto: se está viendo en su propia caja\n    const hasActiveFilters = Object.entries(filters)\n        .some(([field, value]) => field !== searchField && isFilterActive(filterKinds[field], value));\n\n    // un acceso rápido está \"puesto\" cuando se aleja de su default; los que además tienen chip ya se cuentan ahí\n    const quickActiveCount = quickFilters.filter((quickFilter) => !chipConfig.some((chipDeclaration) => chipDeclaration.key === quickFilter.field)\n        && JSON.stringify(filters[quickFilter.field] ?? '') !== JSON.stringify(filterDefaults[quickFilter.field] ?? '')).length;\n\n    const tableFilterValue = useMemo(() => ({\n        filters,\n        setFilter: tableState.setFilter,\n        clearFilter: tableState.clearFilter,\n        sortOrders,\n        toggleSort,\n        clearSort: () => tableState.setSort([]),\n        facets,\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }), [filters, sortOrders, facets]);\n\n    // alto según lo que hay: una tabla de 3 organizaciones no deja 500 px en blanco. Sin renglones reservamos lugar para el\n    // esqueleto de carga (hasta 8) o para el aviso de tabla vacía (3); con renglones, ni un pixel de hueco abajo\n    let placeholderRowCount = 0;\n    if (visibleRows.length === 0) {\n        placeholderRowCount = isLoading ? Math.min(pageSize, 8) : 3;\n    }\n    // OJO: el alto se suma renglón por renglón con el alto que pide la pantalla (getRowHeight; p. ej. un renglón de\n    // resumen más alto que los demás). Con un solo alto para todos, la tabla quedaba con hueco blanco o\n    // con barra de desplazamiento sin necesidad\n    let rowsHeight = placeholderRowCount * ROW_HEIGHT_PIXELS;\n    for (const row of visibleRows) {\n        const requestedRowHeight = getRowHeight?.({id: getRowId ? getRowId(row) : row.id, model: row, densityFactor: COMPACT_DENSITY_FACTOR});\n        rowsHeight += typeof requestedRowHeight === 'number' ? requestedRowHeight : ROW_HEIGHT_PIXELS;\n    }\n    // la tabla crece con los renglones de la página y NO tiene scroll vertical propio (un solo scroll, el\n    // de la página). La paginación del servidor ya acota cuántos renglones hay; maxGridHeight queda solo para quien\n    // de verdad necesite un tope (un diálogo con altura fija)\n    // con bandas el encabezado son dos renglones del mismo alto: el de las bandas y el de las columnas\n    const headerHeight = columnGroupingModel ? 2 * COLUMN_HEADER_HEIGHT_PIXELS : COLUMN_HEADER_HEIGHT_PIXELS;\n    // sin paginador que usar no hay pie: todo lo que hay ya está a la vista en la primera página\n    const isFooterHidden = hideFooterWhenAllRowsFit && page === 0 && total <= pageSize;\n    // el pie mide su alto más las líneas de borde; sin pie no hay ni lo uno ni lo otro\n    const footerHeight = isFooterHidden ? 0 : FOOTER_HEIGHT_PIXELS + GRID_BORDER_PIXELS;\n    const contentHeight = headerHeight + rowsHeight + footerHeight + HEIGHT_SLACK_PIXELS;\n    const gridHeight = maxGridHeight ? Math.min(contentHeight, maxGridHeight) : contentHeight;\n\n    const gridText = DATA_GRID_TEXT_BY_LANGUAGE[language] ?? DATA_GRID_TEXT_BY_LANGUAGE.es;\n    const formattedTotal = formatNumber(total);\n    const countText = countLabel ? countLabel(total) : t('count.records', {count: total, total: formattedTotal});\n\n    const searchText = searchPlaceholder ?? t('search.placeholder');\n    // en la barra, chica cuando no se usa: ni tiene el foco ni tiene texto\n    const isSearchCompact = searchInBar && collapseSearchInBar && !isSearchFocused && !searchDraft;\n    const searchBox = searchField && (\n        <TextField\n            type=\"search\"\n            size=\"small\"\n            value={searchDraft}\n            onChange={(event) => setSearchDraft(event.target.value)}\n            onFocus={() => setIsSearchFocused(true)}\n            onBlur={() => setIsSearchFocused(false)}\n            // Escape borra lo escrito y suelta la caja (en la barra, regresa a la lupa)\n            onKeyDown={(event) => {\n                if (event.key === 'Escape') {\n                    setSearchDraft('');\n                    event.currentTarget.querySelector('input')?.blur();\n                }\n            }}\n            placeholder={searchText}\n            sx={{minWidth: {xs: 0, md: SEARCH_BOX_MIN_WIDTH_PIXELS}}}\n            slotProps={{\n                input: {startAdornment: <InputAdornment position=\"start\"><SearchIcon fontSize=\"small\" /></InputAdornment>},\n                htmlInput: {'aria-label': searchText},\n            }}\n        />\n    );\n\n    return (\n        <TableFilterContext value={tableFilterValue}>\n            <Stack direction={{xs: 'column', md: 'row'}} spacing={2} sx={{mb: 1.5, alignItems: {md: 'center'}}}>\n                {searchBox && !searchInBar && searchBox}\n                {/* en la barra: el buscador ya es su propia cápsula (bare), del alto y la forma de las demás y más angosto.\n                    OJO: la barra es un Paper y el tema le pone al campo el radio de «campo dentro de tarjeta», con el lente\n                    (body[data-glass-lens] .MuiPaper-root …) aún más específica: por eso las tres clases (con menos salía con\n                    esquinas de 12 px y no en cápsula; medido en Chrome) */}\n                {/* sin usar se encoge a la lupa (collapseSearchInBar), como el buscador de las ventanas de macOS; al picarla o\n                    llegar con Tab se estira, y con texto se queda abierta. La lupa no atrapa el clic: lo deja pasar a la caja,\n                    que es la que se enfoca (si no, picar la lupa no hacía nada) */}\n                {searchBox && searchInBar && (\n                    <BarActions label={searchText} bare order={0}\n                                sx={(theme) => ({\n                                    // en el teléfono flota arriba junto a las demás cápsulas. Su lugar SIEMPRE ocupa lo libre del\n                                    // renglón y la caja va pegada a la derecha: así se abre de derecha a izquierda y regresa igual\n                                    // (el ancho pasa de 48 px a 100 % con transición). OJO: antes el lugar brincaba de golpe\n                                    // (flex-grow no se anima) y la caja crecía de izquierda a derecha; se veía muy mal. El hueco de\n                                    // la izquierda deja pasar el dedo a lo de abajo; solo la caja lo recibe\n                                    [PHONE_MEDIA_QUERY]: {\n                                        flexGrow: 1, minWidth: 0, justifyContent: 'flex-end', pointerEvents: 'none',\n                                        '& .MuiTextField-root': {pointerEvents: 'auto'},\n                                    },\n                                    '& .MuiTextField-root': {\n                                        width: isSearchCompact ? BAR_CAPSULE_HEIGHT_PIXELS : SEARCH_IN_BAR_WIDTH_PIXELS,\n                                        minWidth: 0,\n                                        transition: theme.transitions.create('width', {duration: theme.transitions.duration.short}),\n                                        '@media (prefers-reduced-motion: reduce)': {transition: 'none'},\n                                        [PHONE_MEDIA_QUERY]: {width: isSearchCompact ? BAR_CAPSULE_HEIGHT_PIXELS : '100%'},\n                                    },\n                                    '& .MuiFormControl-root .MuiInputBase-root.MuiOutlinedInput-root': {\n                                        height: BAR_CAPSULE_HEIGHT_PIXELS, borderRadius: '999px', cursor: isSearchCompact ? 'pointer' : 'text',\n                                    },\n                                    '& .MuiInputAdornment-root': {pointerEvents: 'none'},\n                                    '& input::placeholder': {opacity: isSearchCompact ? 0 : undefined},\n                                })}>\n                        {searchBox}\n                    </BarActions>\n                )}\n                {header ? (\n                    <Box sx={{flexGrow: 1, minWidth: 0}}>\n                        {header({countText: capped ? t('count.capped', {total: formattedTotal}) : countText, total, capped})}\n                    </Box>\n                ) : (\n                    // NOTA: el extra va pegado al conteo y no empujado a la orilla (ml: 'auto'): en escritorio quedaba a todo\n                    // el ancho de distancia y no se leía como parte de la misma tabla (caso del selector de año)\n                    <Stack direction=\"row\" spacing={2} useFlexGap sx={{flexGrow: 1, alignItems: 'center', flexWrap: 'wrap'}}>\n                        <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center'}}>\n                            <Typography variant=\"body2\" color=\"text.secondary\" role=\"status\" aria-live=\"polite\">\n                                {capped ? t('count.capped', {total: formattedTotal}) : countText}\n                            </Typography>\n                            {capped && <Tag label={t('count.cappedTag')} color=\"warning\" tooltip={t('count.cappedTooltip')} />}\n                        </Stack>\n                        {toolbarExtra}\n                    </Stack>\n                )}\n            </Stack>\n\n            {beforeQuickFilters}\n\n            {quickFilters.map((quickFilter) => (\n                <QuickFilterRow key={quickFilter.field} quickFilter={quickFilter} facets={facets} total={total} filters={filters}\n                                isMultiple={filterKinds[quickFilter.field] === FILTER_KINDS.multiSelect}\n                                setFilter={tableState.setFilter} setFilters={tableState.setFilters} />\n            ))}\n\n            <FilterChips chipConfig={chipConfig} filters={filters} quickActiveCount={quickActiveCount}\n                         onSetFilter={tableState.setFilter} onClearAll={tableState.clearAll} />\n\n            {error && (\n                <Alert severity=\"error\" role=\"alert\" sx={{mb: 1}}\n                       action={(\n                           <Button color=\"inherit\" size=\"small\" onClick={() => sendToTable({type: 'FETCH', params: requestParams})}>\n                               {t('common:actions.retry')}\n                           </Button>\n                       )}>\n                    {error.message ?? t('error.generic')}\n                </Alert>\n            )}\n\n            {/* minWidth 0: dentro de un flex o grid el DataGrid no empuja la página; en el teléfono la tabla se desliza\n                de lado DENTRO de su tarjeta y la página no */}\n            <Paper variant=\"outlined\" sx={{width: '100%', minWidth: 0, overflow: 'hidden'}}>\n                <DataGrid\n                    rows={visibleRows}\n                    columns={columns}\n                    columnGroupingModel={columnGroupingModel}\n                    getRowId={getRowId}\n                    getRowClassName={(params) => [\n                        getRowClassName?.(params),\n                        striped && params.indexRelativeToCurrentPage % 2 === 1 ? STRIPED_ROW_CLASS : '',\n                    ].filter(Boolean).join(' ')}\n                    getRowHeight={getRowHeight}\n                    aria-label={ariaLabel}\n                    nonce={readCspNonce()}\n                    loading={isLoading}\n                    // IMPORTANTE: paginación y orden del servidor; el DataGrid no reordena ni recorta nada solo\n                    paginationMode=\"server\"\n                    sortingMode=\"server\"\n                    filterMode=\"server\"\n                    rowCount={total}\n                    paginationModel={{page, pageSize}}\n                    onPaginationModelChange={(paginationModel) => {\n                        if (paginationModel.pageSize !== pageSize) {\n                            tableState.setPageSize(paginationModel.pageSize);\n                        } else {\n                            tableState.setPage(paginationModel.page);\n                        }\n                    }}\n                    pageSizeOptions={pageSizeOptions}\n                    hideFooter={isFooterHidden}\n                    disableColumnMenu\n                    disableRowSelectionOnClick\n                    // con columna fija se dibuja todo: si no, la fija desaparecería al deslizar a la derecha (fixedColumnSxOf)\n                    disableVirtualization={Boolean(fixedColumn)}\n                    density={DATA_GRID_DENSITY}\n                    localeText={{...gridText, noRowsLabel: emptyLabel ?? t('empty.default')}}\n                    slotProps={{\n                        // con filas ya pintadas, barra delgada arriba sin tapar lo que se lee; con la tabla vacía, esqueleto\n                        loadingOverlay: {variant: 'linear-progress', noRowsVariant: 'skeleton'},\n                    }}\n                    slots={{\n                        // \"ir a la página N\" (solo si se pide) pegado a la paginación: ahí lo busca quien ya está leyendo\n                        // \"51-75 de 1,234\". Sin él, la paginación de siempre del DataGrid\n                        ...(showGoToPage && {\n                            pagination: () => (\n                                <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center'}}>\n                                    <GoToPage page={page} pageCount={Math.ceil(total / pageSize) || 1} onChange={tableState.setPage} />\n                                    <GridPagination />\n                                </Stack>\n                            ),\n                        }),\n                        noResultsOverlay: () => <EmptyState filtered label={emptyLabel} onClearFilters={tableState.clearAll} />,\n                        noRowsOverlay: () => <EmptyState filtered={hasActiveFilters} label={emptyLabel} onClearFilters={tableState.clearAll} />,\n                    }}\n                    sx={[{\n                        // IMPORTANTE: el alto va en la raíz del DataGrid y no en la caja de afuera: las variables\n                        // --DataGrid-hasScrollX y --DataGrid-scrollbarSize solo existen en la raíz. Cuando las columnas no\n                        // caben (historial a 390 px) la barra horizontal ocupa su alto dentro de la tabla y, sin sumarlo, los\n                        // renglones se desplazaban 13 px por dentro. Con barras superpuestas (teléfono, trackpad) mide 0\n                        height: `calc(${gridHeight}px + var(--DataGrid-hasScrollX, 0) * var(--DataGrid-scrollbarSize, 0px))`,\n                        border: 0,\n                        // todo centrado verticalmente: el texto suelto se pegaba arriba y los chips quedaban a media altura\n                        '& .MuiDataGrid-cell': {display: 'flex', alignItems: 'center'},\n                        '& .MuiDataGrid-columnHeader': {alignItems: 'center'},\n                        // cebra: el color del hover del tema\n                        [`& .${STRIPED_ROW_CLASS}`]: {bgcolor: 'action.hover'},\n                        [`& .${STRIPED_ROW_CLASS}:hover`]: {bgcolor: 'action.selected'},\n                        ...gridSx,\n                    }, (theme) => (fixedColumn ? fixedColumnSxOf(theme, fixedColumn) : {})]}\n                />\n            </Paper>\n\n            {footer?.({total, capped})}\n        </TableFilterContext>\n    );\n}\n"],"names":["dataGridSpanish","dataGridEnglish"],"mappings":"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"}

package/dist/DataTable/buildChipConfig.js

@@ -0,0 +1,27 @@
+function buildChipConfig({ text = [], multiSelect = [] } = {}) {
+  return [
+    // format: cómo se lee el valor en el chip (una fecha viaja como 2026-08-01 y el chip dice "1 ago 2026")
+    ...text.map(({ key, label, format = (value) => value }) => ({
+      key,
+      isActive: (value) => Boolean(value),
+      chipsFor: (value, setFilter) => [{
+        id: key,
+        label: `${label}: ${format(value)}`,
+        onDelete: () => setFilter(key, "")
+      }]
+    })),
+    ...multiSelect.map(({ key, label, itemLabel = (value) => value }) => ({
+      key,
+      isActive: (value) => value?.length > 0,
+      chipsFor: (value, setFilter) => value.map((selectedValue) => ({
+        id: `${key}:${selectedValue}`,
+        label: `${label}: ${itemLabel(selectedValue)}`,
+        onDelete: () => setFilter(key, value.filter((currentValue) => currentValue !== selectedValue))
+      }))
+    }))
+  ];
+}
+export {
+  buildChipConfig
+};
+//# sourceMappingURL=buildChipConfig.js.map

package/dist/DataTable/buildChipConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildChipConfig.js","sources":["../../src/DataTable/buildChipConfig.js"],"sourcesContent":["// Declaración compacta de los chips de filtros activos (FilterChips).\n//\n// Cada valor trae su chip y su ×: un filtro de varios valores no se resume en UN chip (\"estado: 3\") porque para quitar\n// uno solo habría que abrir el filtro de la columna. Así se desarma un filtro en la práctica: de a uno.\n//\n//   text        → un chip; la × lo vacía.\n//   multiSelect → un chip POR VALOR; la × quita ese valor y deja los demás.\n//\n// Las etiquetas llegan YA traducidas (quien declara usa t()); por eso se declara dentro del componente o con una\n// función que recibe t.\n//\n// Función pura, no renderiza: function (regla de la casa).\n\n/**\n * @param {object} declaration\n * @param {Array<{key: string, label: string, format?: (value: string) => string}>} [declaration.text]\n * @param {Array<{key: string, label: string, itemLabel?: (value: string) => string}>} [declaration.multiSelect]\n * @returns {Array<{key: string, isActive: (value: unknown) => boolean, chipsFor: Function}>}\n */\nexport function buildChipConfig({text = [], multiSelect = []} = {}) {\n    return [\n        // format: cómo se lee el valor en el chip (una fecha viaja como 2026-08-01 y el chip dice \"1 ago 2026\")\n        ...text.map(({key, label, format = (value) => value}) => ({\n            key,\n            isActive: (value) => Boolean(value),\n            chipsFor: (value, setFilter) => [{\n                id: key,\n                label: `${label}: ${format(value)}`,\n                onDelete: () => setFilter(key, ''),\n            }],\n        })),\n        ...multiSelect.map(({key, label, itemLabel = (value) => value}) => ({\n            key,\n            isActive: (value) => value?.length > 0,\n            chipsFor: (value, setFilter) => value.map((selectedValue) => ({\n                id: `${key}:${selectedValue}`,\n                label: `${label}: ${itemLabel(selectedValue)}`,\n                onDelete: () => setFilter(key, value.filter((currentValue) => currentValue !== selectedValue)),\n            })),\n        })),\n    ];\n}\n"],"names":[],"mappings":"AAmBO,SAAS,gBAAgB,EAAC,OAAO,CAAA,GAAI,cAAc,CAAA,EAAE,IAAI,IAAI;AAChE,SAAO;AAAA;AAAA,IAEH,GAAG,KAAK,IAAI,CAAC,EAAC,KAAK,OAAO,SAAS,CAAC,UAAU,MAAK,OAAO;AAAA,MACtD;AAAA,MACA,UAAU,CAAC,UAAU,QAAQ,KAAK;AAAA,MAClC,UAAU,CAAC,OAAO,cAAc,CAAC;AAAA,QAC7B,IAAI;AAAA,QACJ,OAAO,GAAG,KAAK,KAAK,OAAO,KAAK,CAAC;AAAA,QACjC,UAAU,MAAM,UAAU,KAAK,EAAE;AAAA,MACjD,CAAa;AAAA,IACb,EAAU;AAAA,IACF,GAAG,YAAY,IAAI,CAAC,EAAC,KAAK,OAAO,YAAY,CAAC,UAAU,MAAK,OAAO;AAAA,MAChE;AAAA,MACA,UAAU,CAAC,UAAU,OAAO,SAAS;AAAA,MACrC,UAAU,CAAC,OAAO,cAAc,MAAM,IAAI,CAAC,mBAAmB;AAAA,QAC1D,IAAI,GAAG,GAAG,IAAI,aAAa;AAAA,QAC3B,OAAO,GAAG,KAAK,KAAK,UAAU,aAAa,CAAC;AAAA,QAC5C,UAAU,MAAM,UAAU,KAAK,MAAM,OAAO,CAAC,iBAAiB,iBAAiB,aAAa,CAAC;AAAA,MAC7G,EAAc;AAAA,IACd,EAAU;AAAA,EACV;AACA;"}