@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/dist/DataTable/FilterChips.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import ClearAllIcon from "@mui/icons-material/ClearAll";
+import ScrollableRow from "../ui/layout/ScrollableRow.js";
+import Tag from "../ui/labels/Tag.js";
+function FilterChips({ chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0, texts }) {
+  const { t } = useToolkitTranslation("table", texts);
+  const chips = chipConfig.filter((chipDeclaration) => chipDeclaration.isActive(filters[chipDeclaration.key])).flatMap((chipDeclaration) => chipDeclaration.chipsFor(filters[chipDeclaration.key], onSetFilter));
+  const activeCount = chips.length + quickActiveCount;
+  if (activeCount === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1.5, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { px: 0.25, alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: t("chips.applied", { count: activeCount }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          color: "error",
+          startIcon: /* @__PURE__ */ jsx(ClearAllIcon, { fontSize: "small" }),
+          onClick: onClearAll,
+          sx: { flexShrink: 0 },
+          children: t("chips.clearAll")
+        }
+      )
+    ] }),
+    chips.length > 0 && /* @__PURE__ */ jsx(ScrollableRow, { children: chips.map(({ id, label, onDelete }) => /* @__PURE__ */ jsx(Tag, { label, color: "primary", onDelete, sx: { flex: "0 0 auto" } }, id)) })
+  ] });
+}
+export {
+  FilterChips as default
+};
+//# sourceMappingURL=FilterChips.js.map

package/dist/DataTable/FilterChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.js","sources":["../../src/DataTable/FilterChips.jsx"],"sourcesContent":["// Los filtros activos, a la vista y desarmables de a uno.\n//\n// Un filtro que solo se ve como un icono encendido en el encabezado se olvida: alguien filtra, se va al detalle,\n// regresa y lee el total como si fuera el de todo. Por eso los filtros puestos se dicen con todas sus letras arriba de\n// la tabla.\n//\n// Van en UNA tira que se desliza (ScrollableRow), no envolviéndose en renglones que empujan la tabla fuera de la\n// pantalla. La cuenta y \"Limpiar todo\" van en su propio renglón, arriba, para no tener que deslizar hasta encontrarlo.\n// Sin filtros activos no se pinta nada (ni el hueco).\n//\n// Los accesos rápidos cuentan aunque no tengan chip aquí: su propio chip encendido ya dice qué está elegido.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ClearAllIcon from '@mui/icons-material/ClearAll';\n\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\nimport Tag from '@/ui/labels/Tag.jsx';\n\n/**\n * @param {object} props\n * @param {Array<object>} props.chipConfig lo que arma buildChipConfig\n * @param {object} props.filters\n * @param {(field: string, value: unknown) => void} props.onSetFilter\n * @param {() => void} props.onClearAll\n * @param {number} [props.quickActiveCount] accesos rápidos puestos que no tienen chip aquí\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function FilterChips({chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0, texts}) {\n    const {t} = useToolkitTranslation('table', texts);\n    const chips = chipConfig\n        .filter((chipDeclaration) => chipDeclaration.isActive(filters[chipDeclaration.key]))\n        .flatMap((chipDeclaration) => chipDeclaration.chipsFor(filters[chipDeclaration.key], onSetFilter));\n\n    const activeCount = chips.length + quickActiveCount;\n    // guard clause: sin filtros no se pinta nada\n    if (activeCount === 0) {\n        return null;\n    }\n\n    return (\n        <Box sx={{mb: 1.5, minWidth: 0}}>\n            <Stack direction=\"row\" spacing={1} sx={{px: 0.25, alignItems: 'center', justifyContent: 'space-between'}}>\n                <Typography variant=\"caption\" color=\"text.secondary\" noWrap>\n                    {t('chips.applied', {count: activeCount})}\n                </Typography>\n                <Button size=\"small\" color=\"error\" startIcon={<ClearAllIcon fontSize=\"small\" />} onClick={onClearAll}\n                        sx={{flexShrink: 0}}>\n                    {t('chips.clearAll')}\n                </Button>\n            </Stack>\n\n            {chips.length > 0 && (\n                <ScrollableRow>\n                    {chips.map(({id, label, onDelete}) => (\n                        <Tag key={id} label={label} color=\"primary\" onDelete={onDelete} sx={{flex: '0 0 auto'}} />\n                    ))}\n                </ScrollableRow>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAgCA,SAAwB,YAAY,EAAC,YAAY,SAAS,aAAa,YAAY,mBAAmB,GAAG,SAAQ;AAC7G,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,QAAQ,WACT,OAAO,CAAC,oBAAoB,gBAAgB,SAAS,QAAQ,gBAAgB,GAAG,CAAC,CAAC,EAClF,QAAQ,CAAC,oBAAoB,gBAAgB,SAAS,QAAQ,gBAAgB,GAAG,GAAG,WAAW,CAAC;AAErG,QAAM,cAAc,MAAM,SAAS;AAEnC,MAAI,gBAAgB,GAAG;AACnB,WAAO;AAAA,EACX;AAEA,SACI,qBAAC,OAAI,IAAI,EAAC,IAAI,KAAK,UAAU,KACzB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,IAAI,EAAC,IAAI,MAAM,YAAY,UAAU,gBAAgB,mBACpF,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,QAAM,MACtD,UAAA,EAAE,iBAAiB,EAAC,OAAO,YAAA,CAAY,GAC5C;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UAAO,MAAK;AAAA,UAAQ,OAAM;AAAA,UAAQ,WAAW,oBAAC,cAAA,EAAa,UAAS,QAAA,CAAQ;AAAA,UAAI,SAAS;AAAA,UAClF,IAAI,EAAC,YAAY,EAAA;AAAA,UACpB,YAAE,gBAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB,GACJ;AAAA,IAEC,MAAM,SAAS,KACZ,oBAAC,eAAA,EACI,UAAA,MAAM,IAAI,CAAC,EAAC,IAAI,OAAO,SAAA,0BACnB,KAAA,EAAa,OAAc,OAAM,WAAU,UAAoB,IAAI,EAAC,MAAM,WAAA,KAAjE,EAA8E,CAC3F,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}

package/dist/DataTable/GoToPage.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import Autocomplete from "@mui/material/Autocomplete";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useFormatters } from "../toolkit/useFormatters.js";
+const RENDER_LIMIT = 100;
+function filterPages(pageNumbers, { inputValue }) {
+  const typedText = inputValue.trim();
+  if (!typedText) {
+    return pageNumbers.slice(0, RENDER_LIMIT);
+  }
+  const startingWith = pageNumbers.filter((pageNumber) => String(pageNumber).startsWith(typedText));
+  const containing = pageNumbers.filter((pageNumber) => !String(pageNumber).startsWith(typedText) && String(pageNumber).includes(typedText));
+  return [...startingWith, ...containing].slice(0, RENDER_LIMIT);
+}
+function GoToPage({ page, pageCount, onChange, texts }) {
+  const { t } = useToolkitTranslation("table", texts);
+  const { formatNumber } = useFormatters();
+  if (pageCount <= 1) {
+    return null;
+  }
+  const pageNumbers = Array.from({ length: pageCount }, (unused, position) => position + 1);
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.75, sx: { alignItems: "baseline" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: t("goToPage.page") }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        size: "small",
+        disableClearable: true,
+        openOnFocus: true,
+        autoHighlight: true,
+        options: pageNumbers,
+        filterOptions: filterPages,
+        value: page + 1,
+        isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
+        getOptionLabel: (option) => String(option),
+        onChange: (event, selectedPageNumber) => {
+          if (selectedPageNumber !== null && selectedPageNumber - 1 !== page) {
+            onChange(selectedPageNumber - 1);
+          }
+        },
+        sx: { width: 78, "& .MuiAutocomplete-endAdornment": { right: 0 } },
+        slotProps: { listbox: { sx: { maxHeight: 240 } } },
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          {
+            ...params,
+            variant: "standard",
+            slotProps: { htmlInput: { ...params.inputProps, inputMode: "numeric", "aria-label": t("goToPage.ariaLabel") } }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: t("goToPage.of", { count: pageCount, total: formatNumber(pageCount) }) })
+  ] });
+}
+export {
+  GoToPage as default
+};
+//# sourceMappingURL=GoToPage.js.map

package/dist/DataTable/GoToPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoToPage.js","sources":["../../src/DataTable/GoToPage.jsx"],"sourcesContent":["// \"Ir a la página N\", como un selector con búsqueda.\n//\n// Con cientos de páginas, llegar a la 137 a punta de flechita no es navegar. Un Autocomplete dice las tres cosas sin\n// explicarlas: se abre y se ve la lista, se teclea y se filtra, se elige y ya.\n//\n// Tres detalles:\n//   1. la lista se recorta a RENDER_LIMIT opciones en el DOM; lo demás se alcanza tecleando;\n//   2. filtra por PREFIJO primero (teclear 13 da 13, 130, 131...) y luego por \"contiene\";\n//   3. con una sola página no se pinta: sería un control que no lleva a ningún lado.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\n\n// tope del DOM, no de la navegación\nconst RENDER_LIMIT = 100;\n\nfunction filterPages(pageNumbers, {inputValue}) {\n    const typedText = inputValue.trim();\n    if (!typedText) {\n        return pageNumbers.slice(0, RENDER_LIMIT);\n    }\n    const startingWith = pageNumbers.filter((pageNumber) => String(pageNumber).startsWith(typedText));\n    const containing = pageNumbers.filter((pageNumber) => !String(pageNumber).startsWith(typedText) && String(pageNumber).includes(typedText));\n    return [...startingWith, ...containing].slice(0, RENDER_LIMIT);\n}\n\n/**\n * @param {object} props\n * @param {number} props.page cuenta desde 0\n * @param {number} props.pageCount\n * @param {(page: number) => void} props.onChange\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function GoToPage({page, pageCount, onChange, texts}) {\n    const {t} = useToolkitTranslation('table', texts);\n    const {formatNumber} = useFormatters();\n\n    // guard clause: con una página no hay a dónde ir\n    if (pageCount <= 1) {\n        return null;\n    }\n\n    // la persona cuenta desde 1 y el estado de la tabla desde 0: la conversión vive AQUÍ y en ningún otro lado\n    const pageNumbers = Array.from({length: pageCount}, (unused, position) => position + 1);\n\n    return (\n        <Stack direction=\"row\" spacing={0.75} sx={{alignItems: 'baseline'}}>\n            <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{t('goToPage.page')}</Typography>\n            <Autocomplete\n                size=\"small\"\n                disableClearable\n                openOnFocus\n                autoHighlight\n                options={pageNumbers}\n                filterOptions={filterPages}\n                value={page + 1}\n                isOptionEqualToValue={(option, selectedValue) => option === selectedValue}\n                getOptionLabel={(option) => String(option)}\n                onChange={(event, selectedPageNumber) => {\n                    if (selectedPageNumber !== null && selectedPageNumber - 1 !== page) {\n                        onChange(selectedPageNumber - 1);\n                    }\n                }}\n                sx={{width: 78, '& .MuiAutocomplete-endAdornment': {right: 0}}}\n                slotProps={{listbox: {sx: {maxHeight: 240}}}}\n                renderInput={(params) => (\n                    <TextField {...params} variant=\"standard\"\n                               slotProps={{htmlInput: {...params.inputProps, inputMode: 'numeric', 'aria-label': t('goToPage.ariaLabel')}}} />\n                )}\n            />\n            <Typography variant=\"body2\" color=\"text.secondary\" noWrap>\n                {t('goToPage.of', {count: pageCount, total: formatNumber(pageCount)})}\n            </Typography>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,eAAe;AAErB,SAAS,YAAY,aAAa,EAAC,cAAa;AAC5C,QAAM,YAAY,WAAW,KAAA;AAC7B,MAAI,CAAC,WAAW;AACZ,WAAO,YAAY,MAAM,GAAG,YAAY;AAAA,EAC5C;AACA,QAAM,eAAe,YAAY,OAAO,CAAC,eAAe,OAAO,UAAU,EAAE,WAAW,SAAS,CAAC;AAChG,QAAM,aAAa,YAAY,OAAO,CAAC,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,SAAS,KAAK,OAAO,UAAU,EAAE,SAAS,SAAS,CAAC;AACzI,SAAO,CAAC,GAAG,cAAc,GAAG,UAAU,EAAE,MAAM,GAAG,YAAY;AACjE;AASA,SAAwB,SAAS,EAAC,MAAM,WAAW,UAAU,SAAQ;AACjE,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,EAAC,aAAA,IAAgB,cAAA;AAGvB,MAAI,aAAa,GAAG;AAChB,WAAO;AAAA,EACX;AAGA,QAAM,cAAc,MAAM,KAAK,EAAC,QAAQ,UAAA,GAAY,CAAC,QAAQ,aAAa,WAAW,CAAC;AAEtF,SACI,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,MAAM,IAAI,EAAC,YAAY,WAAA,GACnD,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,QAAM,MAAE,UAAA,EAAE,eAAe,EAAA,CAAE;AAAA,IAC9E;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,kBAAgB;AAAA,QAChB,aAAW;AAAA,QACX,eAAa;AAAA,QACb,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO,OAAO;AAAA,QACd,sBAAsB,CAAC,QAAQ,kBAAkB,WAAW;AAAA,QAC5D,gBAAgB,CAAC,WAAW,OAAO,MAAM;AAAA,QACzC,UAAU,CAAC,OAAO,uBAAuB;AACrC,cAAI,uBAAuB,QAAQ,qBAAqB,MAAM,MAAM;AAChE,qBAAS,qBAAqB,CAAC;AAAA,UACnC;AAAA,QACJ;AAAA,QACA,IAAI,EAAC,OAAO,IAAI,mCAAmC,EAAC,OAAO,IAAC;AAAA,QAC5D,WAAW,EAAC,SAAS,EAAC,IAAI,EAAC,WAAW,IAAA,IAAI;AAAA,QAC1C,aAAa,CAAC,WACV;AAAA,UAAC;AAAA,UAAA;AAAA,YAAW,GAAG;AAAA,YAAQ,SAAQ;AAAA,YACpB,WAAW,EAAC,WAAW,EAAC,GAAG,OAAO,YAAY,WAAW,WAAW,cAAc,EAAE,oBAAoB,IAAC;AAAA,UAAC;AAAA,QAAA;AAAA,MAAG;AAAA,IAAA;AAAA,wBAG/H,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,QAAM,MACpD,UAAA,EAAE,eAAe,EAAC,OAAO,WAAW,OAAO,aAAa,SAAS,EAAA,CAAE,EAAA,CACxE;AAAA,EAAA,GACJ;AAER;"}

package/dist/DataTable/ServerTable.js

@@ -0,0 +1,477 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useMemo, useEffect, useState, useCallback } 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 "@mui/material/InputAdornment";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import "@mui/icons-material/Search";
+import { GRID_CHECKBOX_SELECTION_COL_DEF, DataGrid, GridPagination, GRID_CHECKBOX_SELECTION_FIELD } 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 { EMPTY_ROW_SELECTION, checkedIdsOf, rowSelectionOf, canSelectAllMatching, selectionAfterCheck } from "./rowSelection.js";
+import { tableMachine, buildTableActors } from "./tableMachine.js";
+import { useDebouncedFilter } from "./useDebouncedFilter.js";
+import { useTableState, isFilterActive, FILTER_KINDS } from "./useTableState.js";
+import BarSearch from "../appShell/BarSearch.js";
+import { PHONE_MEDIA_QUERY } from "../appShell/shellSizes.js";
+import SelectionActions, { selectionFloatsOnPhone, SELECTION_PHONE_LAYOUT } from "../ui/actions/SelectionActions.js";
+import ComponentTexts from "../toolkit/ComponentTexts.js";
+import { useFormatters } from "../toolkit/useFormatters.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 STRIPED_ROW_CLASS = "server-table-row--striped";
+const FIXED_CELL_Z_INDEX = 30;
+const FIXED_HEADER_Z_INDEX = 40;
+const CHECKBOX_COLUMN_WIDTH_PIXELS = GRID_CHECKBOX_SELECTION_COL_DEF.width;
+function fixedColumnSxOf(theme, field, { withCheckboxColumn = false } = {}) {
+  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})` } };
+  const headerBackground = isMaterialContent ? materialBackgroundOf(theme, { thick: true }) : { backgroundColor: paper };
+  const rowColorLayer = { content: '""', position: "absolute", inset: 0, zIndex: -1, backgroundColor: "inherit" };
+  const fixedLeft = withCheckboxColumn ? CHECKBOX_COLUMN_WIDTH_PIXELS : 0;
+  const checkboxCell = `.MuiDataGrid-cell[data-field="${GRID_CHECKBOX_SELECTION_FIELD}"]`;
+  const checkboxHeader = `.MuiDataGrid-columnHeader[data-field="${GRID_CHECKBOX_SELECTION_FIELD}"]`;
+  return {
+    "& :where(.MuiDataGrid-row)": { backgroundColor: isMaterialContent ? "transparent" : paper },
+    [`& .MuiDataGrid-cell[data-field="${field}"]`]: {
+      position: "sticky",
+      left: fixedLeft,
+      zIndex: FIXED_CELL_Z_INDEX,
+      borderRight: divider,
+      ...stickyBackground,
+      "&::before": rowColorLayer
+    },
+    [`& :where(.MuiDataGrid-columnHeader[data-field="${field}"], ${ownBandHeader})`]: headerBackground,
+    [`& .MuiDataGrid-columnHeader[data-field="${field}"], & ${ownBandHeader}`]: {
+      position: "sticky",
+      left: fixedLeft,
+      zIndex: FIXED_HEADER_Z_INDEX,
+      borderRight: divider
+    },
+    ...withCheckboxColumn && {
+      [`& ${checkboxCell}`]: { position: "sticky", left: 0, zIndex: FIXED_CELL_Z_INDEX, ...stickyBackground, "&::before": rowColorLayer },
+      [`& :where(${checkboxHeader})`]: headerBackground,
+      [`& ${checkboxHeader}`]: { position: "sticky", left: 0, zIndex: FIXED_HEADER_Z_INDEX }
+    }
+  };
+}
+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,
+  selectionActions = [],
+  isRowSelectable,
+  allowSelectAllMatching = true,
+  onSelectionChange,
+  selectionPhoneLayout = SELECTION_PHONE_LAYOUT.top,
+  onQueryChange,
+  onLoaded,
+  onLoadError,
+  gridProps,
+  texts
+}) {
+  const { t, language } = useToolkitTranslation("table", texts);
+  const { formatNumber } = useFormatters();
+  const theme = useTheme();
+  const tableState = useTableState({ prefix, filterDefaults, filterKinds, defaultPageSize });
+  const { filters, sortOrders, page, pageSize } = tableState;
+  const [searchDraft, setSearchDraft] = useDebouncedFilter(
+    searchField ? filters[searchField] : "",
+    (value) => searchField && tableState.setFilter(searchField, value)
+  );
+  const latestFetchPage = useRef(fetchPage);
+  latestFetchPage.current = fetchPage;
+  const latestEvents = useRef({ onQueryChange, onLoaded, onLoadError });
+  latestEvents.current = { onQueryChange, onLoaded, onLoadError };
+  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;
+    }
+    latestEvents.current.onQueryChange?.(requestParams);
+    sendToTable({ type: "FETCH", params: requestParams });
+  }, [requestFingerprint]);
+  const isReady = tableSnapshot.matches("ready");
+  useEffect(() => {
+    if (isReady) {
+      latestEvents.current.onLoaded?.({ rows, total, facets, capped });
+    }
+  }, [isReady, rows]);
+  useEffect(() => {
+    if (error) {
+      latestEvents.current.onLoadError?.(error);
+    }
+  }, [error]);
+  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 isSelectable = selectionActions.length > 0 || Boolean(onSelectionChange);
+  const [rowSelection, setRowSelection] = useState(EMPTY_ROW_SELECTION);
+  const idOf = useCallback((row) => getRowId ? getRowId(row) : row.id, [getRowId]);
+  const pageRowsById = useMemo(() => new Map(visibleRows.map((row) => [idOf(row), row])), [visibleRows, idOf]);
+  const selectablePageIds = useMemo(
+    () => visibleRows.filter((row) => !isRowSelectable || isRowSelectable(row)).map(idOf),
+    [visibleRows, isRowSelectable, idOf]
+  );
+  const checkedIds = useMemo(() => checkedIdsOf(rowSelection, selectablePageIds), [rowSelection, selectablePageIds]);
+  const selection = rowSelectionOf(rowSelection, { total, capped, filters });
+  const updateSelection = (nextSelection) => {
+    setRowSelection(nextSelection);
+    onSelectionChange?.(rowSelectionOf(nextSelection, { total, capped, filters }));
+  };
+  const clearSelection = () => updateSelection(EMPTY_ROW_SELECTION);
+  const selectionResetKey = JSON.stringify({ queryKey, filters });
+  const lastSelectionResetKey = useRef(selectionResetKey);
+  useEffect(() => {
+    if (lastSelectionResetKey.current === selectionResetKey) {
+      return;
+    }
+    lastSelectionResetKey.current = selectionResetKey;
+    if (rowSelection !== EMPTY_ROW_SELECTION) {
+      clearSelection();
+    }
+  }, [selectionResetKey]);
+  const handleGridSelectionChange = (model) => {
+    const nextSelection = selectionAfterCheck(rowSelection, model.ids, pageRowsById, selectablePageIds, {
+      allMatchingOnWholePage: allowSelectAllMatching,
+      total,
+      capped
+    });
+    if (nextSelection !== rowSelection) {
+      updateSelection(nextSelection);
+    }
+  };
+  const hasSelection = isSelectable && selection.count > 0;
+  const floatsSelectionOnPhone = selectionFloatsOnPhone(theme);
+  const selectionCountText = selection.isCapped ? t("selection.allMatchingCapped") : t("selection.count", { count: selection.count, total: formatNumber(selection.count) });
+  const selectionHelpers = { clearSelection, refresh: () => sendToTable({ type: "FETCH", params: requestParams }) };
+  const selectionActionItems = selectionActions.map(({ key, label, icon, color, isDisabled, onClick }) => ({
+    key,
+    label,
+    icon,
+    color,
+    disabled: isDisabled?.(selection) ?? false,
+    onClick: () => onClick(selection, selectionHelpers)
+  }));
+  const offersAllMatching = isSelectable && allowSelectAllMatching && canSelectAllMatching(rowSelection, selectablePageIds, { total, capped });
+  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");
+  return /* @__PURE__ */ jsx(ComponentTexts, { namespace: "table", texts, children: /* @__PURE__ */ jsxs(TableFilterContext, { value: tableFilterValue, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", md: "row" }, spacing: 2, sx: { mb: 1.5, alignItems: { md: "center" } }, children: [
+      searchField && /* @__PURE__ */ jsx(BarSearch, { value: searchDraft, onChange: setSearchDraft, placeholder: searchText, inBar: searchInBar, collapsible: collapseSearchInBar }),
+      hasSelection && /* @__PURE__ */ jsx(
+        SelectionActions,
+        {
+          countText: selectionCountText,
+          actions: selectionActionItems,
+          onClear: clearSelection,
+          phoneLayout: selectionPhoneLayout,
+          texts: { selection: { clear: t("selection.clear"), actionsLabel: t("selection.actionsLabel"), summaryLabel: t("selection.summaryLabel") } }
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { sx: {
+        flexGrow: 1,
+        minWidth: 0,
+        display: "flex",
+        ...hasSelection && { display: "none", ...floatsSelectionOnPhone && { [PHONE_MEDIA_QUERY]: { display: "flex" } } }
+      }, children: 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
+      }
+    ),
+    (offersAllMatching || isSelectable && rowSelection.isAllMatching) && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        severity: "info",
+        icon: false,
+        sx: { mb: 1, alignItems: "center" },
+        action: rowSelection.isAllMatching ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            color: "inherit",
+            size: "small",
+            onClick: () => updateSelection({
+              rowsById: new Map(selectablePageIds.map((id) => [id, pageRowsById.get(id)])),
+              isAllMatching: false
+            }),
+            children: t("selection.onlyThisPage")
+          }
+        ) : /* @__PURE__ */ jsx(Button, { color: "inherit", size: "small", onClick: () => updateSelection({ rowsById: /* @__PURE__ */ new Map(), isAllMatching: true }), children: capped ? t("selection.selectAllMatchingCapped") : t("selection.selectAllMatching", { total: formattedTotal }) }),
+        children: rowSelection.isAllMatching ? capped ? t("selection.allMatchingCapped") : t("selection.allMatching", { total: formattedTotal }) : t("selection.pageSelected", { count: selectablePageIds.length })
+      }
+    ),
+    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,
+      {
+        ...gridProps,
+        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,
+        checkboxSelection: isSelectable,
+        rowSelectionModel: isSelectable ? { type: "include", ids: checkedIds } : void 0,
+        onRowSelectionModelChange: isSelectable ? handleGridSelectionChange : void 0,
+        isRowSelectable: isSelectable && isRowSelectable ? (params) => isRowSelectable(params.row) : void 0,
+        keepNonExistentRowsSelected: isSelectable,
+        disableRowSelectionExcludeModel: true,
+        hideFooterSelectedRowCount: 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
+        }, (gridTheme) => fixedColumn ? fixedColumnSxOf(gridTheme, fixedColumn, { withCheckboxColumn: isSelectable }) : {}]
+      }
+    ) }),
+    footer?.({ total, capped })
+  ] }) });
+}
+export {
+  SELECTION_PHONE_LAYOUT,
+  ServerTable as default
+};
+//# sourceMappingURL=ServerTable.js.map