@stackcraftmx/calcita 0.23.0 → 0.26.0

package/dist/DataTable/EmptyState.js

@@ -7,8 +7,8 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import FilterListOffIcon from "@mui/icons-material/FilterListOff";
 import InboxOutlinedIcon from "@mui/icons-material/InboxOutlined";
-function EmptyState({ filtered = false, label, onClearFilters }) {
-  const { t } = useToolkitTranslation("table");
+function EmptyState({ filtered = false, label, onClearFilters, texts }) {
+  const { t } = useToolkitTranslation("table", texts);
   const Icon = filtered ? FilterListOffIcon : InboxOutlinedIcon;
   return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { height: "100%", px: 3, textAlign: "center", alignItems: "center", justifyContent: "center" }, children: [
     /* @__PURE__ */ jsx(Box, { sx: { color: "text.disabled", display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { fontSize: "large" }) }),

package/dist/DataTable/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../src/DataTable/EmptyState.jsx"],"sourcesContent":["// Qué decir cuando la tabla no tiene filas.\n//\n// Son dos situaciones distintas y confundirlas hace daño:\n//   - sin filtros puestos, la lista vacía es el RESULTADO y se dice tal cual (label);\n//   - con filtros puestos, la lista vacía NO dice nada del conjunto: dice que lo filtrado no existe dentro de él. Ahí\n//     sí hay algo que hacer, y el botón lo hace.\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 FilterListOffIcon from '@mui/icons-material/FilterListOff';\nimport InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';\n\n/**\n * @param {{filtered?: boolean, label?: string, onClearFilters?: () => void}} props label ya traducido\n */\nexport default function EmptyState({filtered = false, label, onClearFilters}) {\n    const {t} = useToolkitTranslation('table');\n    const Icon = filtered ? FilterListOffIcon : InboxOutlinedIcon;\n\n    return (\n        <Stack spacing={1} sx={{height: '100%', px: 3, textAlign: 'center', alignItems: 'center', justifyContent: 'center'}}>\n            <Box sx={{color: 'text.disabled', display: 'flex'}}>\n                <Icon fontSize=\"large\" />\n            </Box>\n            <Typography variant=\"body2\" color=\"text.secondary\">\n                {filtered ? t('empty.filtered') : (label ?? t('empty.default'))}\n            </Typography>\n            {filtered && onClearFilters && (\n                <Button size=\"small\" onClick={onClearFilters}>{t('empty.clearFilters')}</Button>\n            )}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAmBA,SAAwB,WAAW,EAAC,WAAW,OAAO,OAAO,kBAAiB;AAC1E,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,OAAO,WAAW,oBAAoB;AAE5C,8BACK,OAAA,EAAM,SAAS,GAAG,IAAI,EAAC,QAAQ,QAAQ,IAAI,GAAG,WAAW,UAAU,YAAY,UAAU,gBAAgB,YACtG,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,IAAI,EAAC,OAAO,iBAAiB,SAAS,OAAA,GACvC,UAAA,oBAAC,MAAA,EAAK,UAAS,QAAA,CAAQ,GAC3B;AAAA,IACA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC7B,UAAA,WAAW,EAAE,gBAAgB,IAAK,SAAS,EAAE,eAAe,GACjE;AAAA,IACC,YAAY,kBACT,oBAAC,QAAA,EAAO,MAAK,SAAQ,SAAS,gBAAiB,UAAA,EAAE,oBAAoB,EAAA,CAAE;AAAA,EAAA,GAE/E;AAER;"}
+{"version":3,"file":"EmptyState.js","sources":["../../src/DataTable/EmptyState.jsx"],"sourcesContent":["// Qué decir cuando la tabla no tiene filas.\n//\n// Son dos situaciones distintas y confundirlas hace daño:\n//   - sin filtros puestos, la lista vacía es el RESULTADO y se dice tal cual (label);\n//   - con filtros puestos, la lista vacía NO dice nada del conjunto: dice que lo filtrado no existe dentro de él. Ahí\n//     sí hay algo que hacer, y el botón lo hace.\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 FilterListOffIcon from '@mui/icons-material/FilterListOff';\nimport InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';\n\n/**\n * @param {object} [props]\n * @param {boolean} [props.filtered]\n * @param {string} [props.label] ya traducido\n * @param {() => void} [props.onClearFilters]\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function EmptyState({filtered = false, label, onClearFilters, texts}) {\n    const {t} = useToolkitTranslation('table', texts);\n    const Icon = filtered ? FilterListOffIcon : InboxOutlinedIcon;\n\n    return (\n        <Stack spacing={1} sx={{height: '100%', px: 3, textAlign: 'center', alignItems: 'center', justifyContent: 'center'}}>\n            <Box sx={{color: 'text.disabled', display: 'flex'}}>\n                <Icon fontSize=\"large\" />\n            </Box>\n            <Typography variant=\"body2\" color=\"text.secondary\">\n                {filtered ? t('empty.filtered') : (label ?? t('empty.default'))}\n            </Typography>\n            {filtered && onClearFilters && (\n                <Button size=\"small\" onClick={onClearFilters}>{t('empty.clearFilters')}</Button>\n            )}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAuBA,SAAwB,WAAW,EAAC,WAAW,OAAO,OAAO,gBAAgB,SAAQ;AACjF,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,OAAO,WAAW,oBAAoB;AAE5C,8BACK,OAAA,EAAM,SAAS,GAAG,IAAI,EAAC,QAAQ,QAAQ,IAAI,GAAG,WAAW,UAAU,YAAY,UAAU,gBAAgB,YACtG,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,IAAI,EAAC,OAAO,iBAAiB,SAAS,OAAA,GACvC,UAAA,oBAAC,MAAA,EAAK,UAAS,QAAA,CAAQ,GAC3B;AAAA,IACA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC7B,UAAA,WAAW,EAAE,gBAAgB,IAAK,SAAS,EAAE,eAAe,GACjE;AAAA,IACC,YAAY,kBACT,oBAAC,QAAA,EAAO,MAAK,SAAQ,SAAS,gBAAiB,UAAA,EAAE,oBAAoB,EAAA,CAAE;AAAA,EAAA,GAE/E;AAER;"}

package/dist/DataTable/FilterChips.js

@@ -8,8 +8,8 @@ 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 }) {
-  const { t } = useToolkitTranslation("table");
+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) {

package/dist/DataTable/FilterChips.js.map

@@ -1 +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 */\nexport default function FilterChips({chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0}) {\n    const {t} = useToolkitTranslation('table');\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":";;;;;;;;;;AA+BA,SAAwB,YAAY,EAAC,YAAY,SAAS,aAAa,YAAY,mBAAmB,KAAI;AACtG,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,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;"}
+{"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

@@ -5,7 +5,7 @@ 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 { formatNumber } from "../formatting.js";
+import { useFormatters } from "../toolkit/useFormatters.js";
 const RENDER_LIMIT = 100;
 function filterPages(pageNumbers, { inputValue }) {
   const typedText = inputValue.trim();
@@ -16,8 +16,9 @@ function filterPages(pageNumbers, { inputValue }) {
   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 }) {
-  const { t } = useToolkitTranslation("table");
+function GoToPage({ page, pageCount, onChange, texts }) {
+  const { t } = useToolkitTranslation("table", texts);
+  const { formatNumber } = useFormatters();
   if (pageCount <= 1) {
     return null;
   }

package/dist/DataTable/GoToPage.js.map

@@ -1 +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 {formatNumber} from '@/formatting.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 {{page: number, pageCount: number, onChange: (page: number) => void}} props page cuenta desde 0\n */\nexport default function GoToPage({page, pageCount, onChange}) {\n    const {t} = useToolkitTranslation('table');\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;AAKA,SAAwB,SAAS,EAAC,MAAM,WAAW,YAAW;AAC1D,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AAGzC,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;"}
+{"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

@@ -1,30 +1,33 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useMemo, useEffect } from "react";
+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 InputAdornment from "@mui/material/InputAdornment";
+import "@mui/material/InputAdornment";
 import Paper from "@mui/material/Paper";
 import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
+import "@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 { 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 BarActions from "../appShell/BarActions.js";
-import { BAR_CAPSULE_HEIGHT_PIXELS } from "../appShell/BarCapsule.js";
+import BarSearch from "../appShell/BarSearch.js";
 import { PHONE_MEDIA_QUERY } from "../appShell/shellSizes.js";
-import { formatNumber } from "../formatting.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";
@@ -44,34 +47,43 @@ 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 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: 0,
+      left: fixedLeft,
       zIndex: FIXED_CELL_Z_INDEX,
       borderRight: divider,
       ...stickyBackground,
-      "&::before": { content: '""', position: "absolute", inset: 0, zIndex: -1, backgroundColor: "inherit" }
+      "&::before": rowColorLayer
     },
-    [`& :where(.MuiDataGrid-columnHeader[data-field="${field}"], ${ownBandHeader})`]: isMaterialContent ? materialBackgroundOf(theme, { thick: true }) : { backgroundColor: paper },
+    [`& :where(.MuiDataGrid-columnHeader[data-field="${field}"], ${ownBandHeader})`]: headerBackground,
     [`& .MuiDataGrid-columnHeader[data-field="${field}"], & ${ownBandHeader}`]: {
       position: "sticky",
-      left: 0,
+      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 }
     }
   };
 }
@@ -155,18 +167,31 @@ function ServerTable({
   gridSx,
   maxGridHeight = null,
   ariaLabel,
-  fixedColumn
+  fixedColumn,
+  selectionActions = [],
+  isRowSelectable,
+  allowSelectAllMatching = true,
+  onSelectionChange,
+  selectionPhoneLayout = SELECTION_PHONE_LAYOUT.top,
+  onQueryChange,
+  onLoaded,
+  onLoadError,
+  gridProps,
+  texts
 }) {
-  const { t, language, changeLanguage } = useToolkitTranslation("table");
+  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 [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 latestEvents = useRef({ onQueryChange, onLoaded, onLoadError });
+  latestEvents.current = { onQueryChange, onLoaded, onLoadError };
   const [tableSnapshot, sendToTable] = useMachine(
     tableMachine.provide({ actors: buildTableActors((params, signal) => latestFetchPage.current(params, signal)) })
   );
@@ -179,8 +204,20 @@ function ServerTable({
     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) {
@@ -191,6 +228,55 @@ function ServerTable({
       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(() => ({
@@ -221,71 +307,25 @@ function ServerTable({
   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: [
+  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: [
-      searchBox && !searchInBar && searchBox,
-      searchBox && searchInBar && /* @__PURE__ */ jsx(
-        BarActions,
+      searchField && /* @__PURE__ */ jsx(BarSearch, { value: searchDraft, onChange: setSearchDraft, placeholder: searchText, inBar: searchInBar, collapsible: collapseSearchInBar }),
+      hasSelection && /* @__PURE__ */ jsx(
+        SelectionActions,
         {
-          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
+          countText: selectionCountText,
+          actions: selectionActionItems,
+          onClear: clearSelection,
+          phoneLayout: selectionPhoneLayout,
+          texts: { selection: { clear: t("selection.clear"), actionsLabel: t("selection.actionsLabel"), summaryLabel: t("selection.summaryLabel") } }
         }
       ),
-      header ? /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: header({ countText: capped ? t("count.capped", { total: formattedTotal }) : countText, total, capped }) }) : (
+      /* @__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: [
@@ -295,7 +335,7 @@ function ServerTable({
           ] }),
           toolbarExtra
         ] })
-      )
+      ) })
     ] }),
     beforeQuickFilters,
     quickFilters.map((quickFilter) => /* @__PURE__ */ jsx(
@@ -321,6 +361,27 @@ function ServerTable({
         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,
       {
@@ -334,6 +395,7 @@ function ServerTable({
     /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: { width: "100%", minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
       DataGrid,
       {
+        ...gridProps,
         rows: visibleRows,
         columns,
         columnGroupingModel,
@@ -362,6 +424,13 @@ function ServerTable({
         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") },
@@ -395,13 +464,14 @@ function ServerTable({
           [`& .${STRIPED_ROW_CLASS}`]: { bgcolor: "action.hover" },
           [`& .${STRIPED_ROW_CLASS}:hover`]: { bgcolor: "action.selected" },
           ...gridSx
-        }, (theme) => fixedColumn ? fixedColumnSxOf(theme, fixedColumn) : {}]
+        }, (gridTheme) => fixedColumn ? fixedColumnSxOf(gridTheme, fixedColumn, { withCheckboxColumn: isSelectable }) : {}]
       }
     ) }),
     footer?.({ total, capped })
-  ] });
+  ] }) });
 }
 export {
+  SELECTION_PHONE_LAYOUT,
   ServerTable as default
 };
 //# sourceMappingURL=ServerTable.js.map