@stackcraftmx/calcita 0.47.0 → 0.52.0

package/dist/DataTable/ColumnFilters/SortableFilterHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableFilterHeader.js","sources":["../../../src/DataTable/ColumnFilters/SortableFilterHeader.jsx"],"sourcesContent":["// Encabezado con orden y filtro.\n//\n// El que ordena es el TÍTULO, no un botón aparte: es el gesto que ya tiene aprendido quien usa tablas. La flecha solo\n// aparece cuando la columna está ordenando, y su × quita ese orden sin tener que ciclar hasta el tercer clic.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSortableFilterHeader con defaultProps y\n// styleOverrides de sus partes: title, root, sortButton, sortIndicator, clearButton.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport HeaderFilterPopover from '@/DataTable/ColumnFilters/HeaderFilterPopover.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSortableFilterHeader)\nconst THEME_NAME = 'CalcitaSortableFilterHeader';\nconst SortableTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst SortableRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst SortableSortButton = piecePart(THEME_NAME, 'SortButton', ButtonBase);\nconst SortableSortIndicator = piecePart(THEME_NAME, 'SortIndicator', Box);\nconst SortableClearButton = piecePart(THEME_NAME, 'ClearButton', ButtonBase);\n\n/**\n * @param {object} props\n * @param {string} props.label\n * @param {boolean} [props.sortable]\n * @param {{column: string, direction: 'asc'|'desc'}} [props.sortEntry]\n * @param {() => void} [props.onSort]\n * @param {() => void} [props.onClearSort]\n * @param {boolean} [props.filterable]\n * @param {number} [props.activeCount]\n * @param {() => void} [props.onClear]\n * @param {import('react').ReactNode} [props.children] el filtro de la columna\n */\nexport default function SortableFilterHeader(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSortableFilterHeader.defaultProps) y encima lo que llega aquí\n    const {\n    label, sortable = true, sortEntry, onSort, onClearSort, filterable = true, activeCount, onClear, children,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table');\n    const title = <SortableTitle variant=\"caption\" ownSx={{fontWeight: 700, whiteSpace: 'nowrap'}}>{label}</SortableTitle>;\n\n    return (\n        <SortableRoot direction=\"row\" spacing={0.25} ownSx={{alignItems: 'center'}}>\n            {sortable ? (\n                <Tooltip title={t('sort.tooltip')}>\n                    <SortableSortButton onClick={onSort} ownSx={{gap: 0.25, borderRadius: 0.5}}>\n                        {title}\n                        {sortEntry && (\n                            <SortableSortIndicator component=\"span\" ownSx={{display: 'inline-flex', alignItems: 'center', color: 'primary.main', fontWeight: 700}}\n                                 aria-label={sortEntry.direction === 'asc' ? t('sort.ascending') : t('sort.descending')}>\n                                {sortEntry.direction === 'asc' ? '↑' : '↓'}\n                            </SortableSortIndicator>\n                        )}\n                    </SortableSortButton>\n                </Tooltip>\n            ) : title}\n\n            {sortEntry && onClearSort && (\n                <Tooltip title={t('sort.clear')}>\n                    <SortableClearButton aria-label={t('sort.clear')}\n                                // sin opacidad: la × es un control y al 70% daba 2.90:1 sobre el encabezado de la tabla\n                                ownSx={{fontSize: 12, lineHeight: 1, color: 'primary.main', '&:hover': {color: 'primary.dark'}}}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    onClearSort();\n                                }}>\n                        ×\n                    </SortableClearButton>\n                </Tooltip>\n            )}\n\n            {filterable && (\n                <HeaderFilterPopover activeCount={activeCount} onClear={onClear}>{children}</HeaderFilterPopover>\n            )}\n        </SortableRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,SAAS,UAAU;AAC/D,MAAM,eAAe,UAAU,YAAY,QAAQ,KAAK;AACxD,MAAM,qBAAqB,UAAU,YAAY,cAAc,UAAU;AACzE,MAAM,wBAAwB,UAAU,YAAY,iBAAiB,GAAG;AACxE,MAAM,sBAAsB,UAAU,YAAY,eAAe,UAAU;AAc3E,SAAwB,qBAAqB,OAAO;AAEhD,QAAM;AAAA,IACN;AAAA,IAAO,WAAW;AAAA,IAAM;AAAA,IAAW;AAAA,IAAQ;AAAA,IAAa,aAAa;AAAA,IAAM;AAAA,IAAa;AAAA,IAAS;AAAA,IACjG,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,QAAQ,oBAAC,eAAA,EAAc,SAAQ,WAAU,OAAO,EAAC,YAAY,KAAK,YAAY,SAAA,GAAY,UAAA,MAAA,CAAM;AAEtG,SACI,qBAAC,cAAA,EAAa,WAAU,OAAM,SAAS,MAAM,OAAO,EAAC,YAAY,SAAA,GAC5D,UAAA;AAAA,IAAA,+BACI,SAAA,EAAQ,OAAO,EAAE,cAAc,GAC5B,UAAA,qBAAC,oBAAA,EAAmB,SAAS,QAAQ,OAAO,EAAC,KAAK,MAAM,cAAc,OACjE,UAAA;AAAA,MAAA;AAAA,MACA,aACG;AAAA,QAAC;AAAA,QAAA;AAAA,UAAsB,WAAU;AAAA,UAAO,OAAO,EAAC,SAAS,eAAe,YAAY,UAAU,OAAO,gBAAgB,YAAY,IAAA;AAAA,UAC5H,cAAY,UAAU,cAAc,QAAQ,EAAE,gBAAgB,IAAI,EAAE,iBAAiB;AAAA,UACrF,UAAA,UAAU,cAAc,QAAQ,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3C,EAAA,CAER,GACJ,IACA;AAAA,IAEH,aAAa,eACV,oBAAC,WAAQ,OAAO,EAAE,YAAY,GAC1B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAoB,cAAY,EAAE,YAAY;AAAA,QAEnC,OAAO,EAAC,UAAU,IAAI,YAAY,GAAG,OAAO,gBAAgB,WAAW,EAAC,OAAO,eAAA,EAAc;AAAA,QAC7F,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,sBAAA;AAAA,QACJ;AAAA,QAAG,UAAA;AAAA,MAAA;AAAA,IAAA,GAGnB;AAAA,IAGH,cACG,oBAAC,qBAAA,EAAoB,aAA0B,SAAmB,SAAA,CAAS;AAAA,EAAA,GAEnF;AAER;"}
+{"version":3,"file":"SortableFilterHeader.js","sources":["../../../src/DataTable/ColumnFilters/SortableFilterHeader.jsx"],"sourcesContent":["// Encabezado con orden y filtro.\n//\n// El que ordena es el TÍTULO, no un botón aparte: es el gesto que ya tiene aprendido quien usa tablas. La flecha solo\n// aparece cuando la columna está ordenando, y su × quita ese orden sin tener que ciclar hasta el tercer clic.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSortableFilterHeader con defaultProps y\n// styleOverrides de sus partes: title, root, sortButton, sortIndicator, clearButton.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport HeaderFilterPopover from '@/DataTable/ColumnFilters/HeaderFilterPopover.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSortableFilterHeader)\nconst THEME_NAME = 'CalcitaSortableFilterHeader';\nconst SortableTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst SortableRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst SortableSortButton = piecePart(THEME_NAME, 'SortButton', ButtonBase);\nconst SortableSortIndicator = piecePart(THEME_NAME, 'SortIndicator', Box);\nconst SortableClearButton = piecePart(THEME_NAME, 'ClearButton', ButtonBase);\n\n/**\n * @param {object} props\n * @param {string} props.label\n * @param {boolean} [props.sortable]\n * @param {{column: string, direction: 'asc'|'desc'}} [props.sortEntry]\n * @param {() => void} [props.onSort]\n * @param {() => void} [props.onClearSort]\n * @param {boolean} [props.filterable]\n * @param {number} [props.activeCount]\n * @param {() => void} [props.onClear]\n * @param {import('react').ReactNode} [props.children] el filtro de la columna\n */\nfunction SortableFilterHeaderContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSortableFilterHeader.defaultProps) y encima lo que llega aquí\n    const {\n    label, sortable = true, sortEntry, onSort, onClearSort, filterable = true, activeCount, onClear, children,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table');\n    const title = <SortableTitle variant=\"caption\" ownSx={{fontWeight: 700, whiteSpace: 'nowrap'}}>{label}</SortableTitle>;\n\n    return (\n        <SortableRoot direction=\"row\" spacing={0.25} ownSx={{alignItems: 'center'}}>\n            {sortable ? (\n                <Tooltip title={t('sort.tooltip')}>\n                    <SortableSortButton onClick={onSort} ownSx={{gap: 0.25, borderRadius: 0.5}}>\n                        {title}\n                        {sortEntry && (\n                            <SortableSortIndicator component=\"span\" ownSx={{display: 'inline-flex', alignItems: 'center', color: 'primary.main', fontWeight: 700}}\n                                 aria-label={sortEntry.direction === 'asc' ? t('sort.ascending') : t('sort.descending')}>\n                                {sortEntry.direction === 'asc' ? '↑' : '↓'}\n                            </SortableSortIndicator>\n                        )}\n                    </SortableSortButton>\n                </Tooltip>\n            ) : title}\n\n            {sortEntry && onClearSort && (\n                <Tooltip title={t('sort.clear')}>\n                    <SortableClearButton aria-label={t('sort.clear')}\n                                // sin opacidad: la × es un control y al 70% daba 2.90:1 sobre el encabezado de la tabla\n                                ownSx={{fontSize: 12, lineHeight: 1, color: 'primary.main', '&:hover': {color: 'primary.dark'}}}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    onClearSort();\n                                }}>\n                        ×\n                    </SortableClearButton>\n                </Tooltip>\n            )}\n\n            {filterable && (\n                <HeaderFilterPopover activeCount={activeCount} onClear={onClear}>{children}</HeaderFilterPopover>\n            )}\n        </SortableRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst SortableFilterHeader = withPieceSlots(SortableFilterHeaderContent, THEME_NAME);\nexport default SortableFilterHeader;\n"],"names":[],"mappings":";;;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,SAAS,UAAU;AAC/D,MAAM,eAAe,UAAU,YAAY,QAAQ,KAAK;AACxD,MAAM,qBAAqB,UAAU,YAAY,cAAc,UAAU;AACzE,MAAM,wBAAwB,UAAU,YAAY,iBAAiB,GAAG;AACxE,MAAM,sBAAsB,UAAU,YAAY,eAAe,UAAU;AAc3E,SAAS,4BAA4B,OAAO;AAExC,QAAM;AAAA,IACN;AAAA,IAAO,WAAW;AAAA,IAAM;AAAA,IAAW;AAAA,IAAQ;AAAA,IAAa,aAAa;AAAA,IAAM;AAAA,IAAa;AAAA,IAAS;AAAA,IACjG,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,QAAQ,oBAAC,eAAA,EAAc,SAAQ,WAAU,OAAO,EAAC,YAAY,KAAK,YAAY,SAAA,GAAY,UAAA,MAAA,CAAM;AAEtG,SACI,qBAAC,cAAA,EAAa,WAAU,OAAM,SAAS,MAAM,OAAO,EAAC,YAAY,SAAA,GAC5D,UAAA;AAAA,IAAA,+BACI,SAAA,EAAQ,OAAO,EAAE,cAAc,GAC5B,UAAA,qBAAC,oBAAA,EAAmB,SAAS,QAAQ,OAAO,EAAC,KAAK,MAAM,cAAc,OACjE,UAAA;AAAA,MAAA;AAAA,MACA,aACG;AAAA,QAAC;AAAA,QAAA;AAAA,UAAsB,WAAU;AAAA,UAAO,OAAO,EAAC,SAAS,eAAe,YAAY,UAAU,OAAO,gBAAgB,YAAY,IAAA;AAAA,UAC5H,cAAY,UAAU,cAAc,QAAQ,EAAE,gBAAgB,IAAI,EAAE,iBAAiB;AAAA,UACrF,UAAA,UAAU,cAAc,QAAQ,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3C,EAAA,CAER,GACJ,IACA;AAAA,IAEH,aAAa,eACV,oBAAC,WAAQ,OAAO,EAAE,YAAY,GAC1B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAoB,cAAY,EAAE,YAAY;AAAA,QAEnC,OAAO,EAAC,UAAU,IAAI,YAAY,GAAG,OAAO,gBAAgB,WAAW,EAAC,OAAO,eAAA,EAAc;AAAA,QAC7F,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,sBAAA;AAAA,QACJ;AAAA,QAAG,UAAA;AAAA,MAAA;AAAA,IAAA,GAGnB;AAAA,IAGH,cACG,oBAAC,qBAAA,EAAoB,aAA0B,SAAmB,SAAA,CAAS;AAAA,EAAA,GAEnF;AAER;AAGA,MAAM,uBAAuB,eAAe,6BAA6B,UAAU;"}

package/dist/DataTable/EmptyState.js

@@ -7,12 +7,12 @@ 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";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaEmptyState";
 const EmptyRoot = piecePart(THEME_NAME, "Root", Stack);
 const EmptyIcon = piecePart(THEME_NAME, "Icon", Box);
-function EmptyState(props) {
+function EmptyStateContent(props) {
   const { filtered = false, label, onClearFilters, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table", texts);
@@ -23,6 +23,7 @@ function EmptyState(props) {
     filtered && onClearFilters && /* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearFilters, children: t("empty.clearFilters") })
   ] });
 }
+const EmptyState = withPieceSlots(EmptyStateContent, THEME_NAME);
 export {
   EmptyState as default
 };

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// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaEmptyState con defaultProps y\n// styleOverrides de sus partes: root, icon.\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';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaEmptyState)\nconst THEME_NAME = 'CalcitaEmptyState';\nconst EmptyRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst EmptyIcon = piecePart(THEME_NAME, 'Icon', Box);\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(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaEmptyState.defaultProps) y encima lo que llega aquí\n    const {filtered = false, label, onClearFilters, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table', texts);\n    const Icon = filtered ? FilterListOffIcon : InboxOutlinedIcon;\n\n    return (\n        <EmptyRoot spacing={1} ownSx={{height: '100%', px: 3, textAlign: 'center', alignItems: 'center', justifyContent: 'center'}}>\n            <EmptyIcon ownSx={{color: 'text.disabled', display: 'flex'}}>\n                <Icon fontSize=\"large\" />\n            </EmptyIcon>\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        </EmptyRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAsBA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,KAAK;AACrD,MAAM,YAAY,UAAU,YAAY,QAAQ,GAAG;AASnD,SAAwB,WAAW,OAAO;AAEtC,QAAM,EAAC,WAAW,OAAO,OAAO,gBAAgB,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACzG,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,OAAO,WAAW,oBAAoB;AAE5C,8BACK,WAAA,EAAU,SAAS,GAAG,OAAO,EAAC,QAAQ,QAAQ,IAAI,GAAG,WAAW,UAAU,YAAY,UAAU,gBAAgB,YAC7G,UAAA;AAAA,IAAA,oBAAC,WAAA,EAAU,OAAO,EAAC,OAAO,iBAAiB,SAAS,OAAA,GAChD,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// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaEmptyState con defaultProps y\n// styleOverrides de sus partes: root, icon.\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';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaEmptyState)\nconst THEME_NAME = 'CalcitaEmptyState';\nconst EmptyRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst EmptyIcon = piecePart(THEME_NAME, 'Icon', Box);\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 */\nfunction EmptyStateContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaEmptyState.defaultProps) y encima lo que llega aquí\n    const {filtered = false, label, onClearFilters, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table', texts);\n    const Icon = filtered ? FilterListOffIcon : InboxOutlinedIcon;\n\n    return (\n        <EmptyRoot spacing={1} ownSx={{height: '100%', px: 3, textAlign: 'center', alignItems: 'center', justifyContent: 'center'}}>\n            <EmptyIcon ownSx={{color: 'text.disabled', display: 'flex'}}>\n                <Icon fontSize=\"large\" />\n            </EmptyIcon>\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        </EmptyRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst EmptyState = withPieceSlots(EmptyStateContent, THEME_NAME);\nexport default EmptyState;\n"],"names":[],"mappings":";;;;;;;;;;;AAsBA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,KAAK;AACrD,MAAM,YAAY,UAAU,YAAY,QAAQ,GAAG;AASnD,SAAS,kBAAkB,OAAO;AAE9B,QAAM,EAAC,WAAW,OAAO,OAAO,gBAAgB,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACzG,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,OAAO,WAAW,oBAAoB;AAE5C,8BACK,WAAA,EAAU,SAAS,GAAG,OAAO,EAAC,QAAQ,QAAQ,IAAI,GAAG,WAAW,UAAU,YAAY,UAAU,gBAAgB,YAC7G,UAAA;AAAA,IAAA,oBAAC,WAAA,EAAU,OAAO,EAAC,OAAO,iBAAiB,SAAS,OAAA,GAChD,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;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/DataTable/FilterChips.js

@@ -8,13 +8,13 @@ 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";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaFilterChips";
 const ChipsRoot = piecePart(THEME_NAME, "Root", Box);
 const ChipsHeader = piecePart(THEME_NAME, "Header", Stack);
 const ChipsClearButton = piecePart(THEME_NAME, "ClearButton", Button);
-function FilterChips(props) {
+function FilterChipsContent(props) {
   const { chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table", texts);
@@ -41,6 +41,7 @@ function FilterChips(props) {
     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)) })
   ] });
 }
+const FilterChips = withPieceSlots(FilterChipsContent, THEME_NAME);
 export {
   FilterChips as default
 };

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// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFilterChips con defaultProps y\n// styleOverrides de sus partes: root, header, clearButton.\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';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFilterChips)\nconst THEME_NAME = 'CalcitaFilterChips';\nconst ChipsRoot = piecePart(THEME_NAME, 'Root', Box);\nconst ChipsHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst ChipsClearButton = piecePart(THEME_NAME, 'ClearButton', Button);\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(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaFilterChips.defaultProps) y encima lo que llega aquí\n    const {chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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        <ChipsRoot ownSx={{mb: 1.5, minWidth: 0}}>\n            <ChipsHeader direction=\"row\" spacing={1} ownSx={{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                <ChipsClearButton size=\"small\" color=\"error\" startIcon={<ClearAllIcon fontSize=\"small\" />} onClick={onClearAll}\n                        ownSx={{flexShrink: 0}}>\n                    {t('chips.clearAll')}\n                </ChipsClearButton>\n            </ChipsHeader>\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        </ChipsRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,GAAG;AACnD,MAAM,cAAc,UAAU,YAAY,UAAU,KAAK;AACzD,MAAM,mBAAmB,UAAU,YAAY,eAAe,MAAM;AAWpE,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,YAAY,SAAS,aAAa,YAAY,mBAAmB,GAAG,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACpI,mBAAiB,YAAY,YAAY;AACzC,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,aAAU,OAAO,EAAC,IAAI,KAAK,UAAU,KAClC,UAAA;AAAA,IAAA,qBAAC,aAAA,EAAY,WAAU,OAAM,SAAS,GAAG,OAAO,EAAC,IAAI,MAAM,YAAY,UAAU,gBAAgB,mBAC7F,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,UAAiB,MAAK;AAAA,UAAQ,OAAM;AAAA,UAAQ,WAAW,oBAAC,cAAA,EAAa,UAAS,QAAA,CAAQ;AAAA,UAAI,SAAS;AAAA,UAC5F,OAAO,EAAC,YAAY,EAAA;AAAA,UACvB,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// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFilterChips con defaultProps y\n// styleOverrides de sus partes: root, header, clearButton.\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';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFilterChips)\nconst THEME_NAME = 'CalcitaFilterChips';\nconst ChipsRoot = piecePart(THEME_NAME, 'Root', Box);\nconst ChipsHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst ChipsClearButton = piecePart(THEME_NAME, 'ClearButton', Button);\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 */\nfunction FilterChipsContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaFilterChips.defaultProps) y encima lo que llega aquí\n    const {chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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        <ChipsRoot ownSx={{mb: 1.5, minWidth: 0}}>\n            <ChipsHeader direction=\"row\" spacing={1} ownSx={{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                <ChipsClearButton size=\"small\" color=\"error\" startIcon={<ClearAllIcon fontSize=\"small\" />} onClick={onClearAll}\n                        ownSx={{flexShrink: 0}}>\n                    {t('chips.clearAll')}\n                </ChipsClearButton>\n            </ChipsHeader>\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        </ChipsRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst FilterChips = withPieceSlots(FilterChipsContent, THEME_NAME);\nexport default FilterChips;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,GAAG;AACnD,MAAM,cAAc,UAAU,YAAY,UAAU,KAAK;AACzD,MAAM,mBAAmB,UAAU,YAAY,eAAe,MAAM;AAWpE,SAAS,mBAAmB,OAAO;AAE/B,QAAM,EAAC,YAAY,SAAS,aAAa,YAAY,mBAAmB,GAAG,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACpI,mBAAiB,YAAY,YAAY;AACzC,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,aAAU,OAAO,EAAC,IAAI,KAAK,UAAU,KAClC,UAAA;AAAA,IAAA,qBAAC,aAAA,EAAY,WAAU,OAAM,SAAS,GAAG,OAAO,EAAC,IAAI,MAAM,YAAY,UAAU,gBAAgB,mBAC7F,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,UAAiB,MAAK;AAAA,UAAQ,OAAM;AAAA,UAAQ,WAAW,oBAAC,cAAA,EAAa,UAAS,QAAA,CAAQ;AAAA,UAAI,SAAS;AAAA,UAC5F,OAAO,EAAC,YAAY,EAAA;AAAA,UACvB,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;AAGA,MAAM,cAAc,eAAe,oBAAoB,UAAU;"}

package/dist/DataTable/GoToPage.js

@@ -8,7 +8,7 @@ import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { List } from "react-window";
 import { pageNumbersOf, filterPages } from "./goToPageOptions.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { useFormatters } from "../toolkit/useFormatters.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
@@ -66,7 +66,7 @@ function PageListbox({ children: pageOptions, ref, pageCount, pageListRef, pageI
     pageOptions.length
   ) });
 }
-function GoToPage(props) {
+function GoToPageContent(props) {
   const { page, pageCount, onChange, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table", texts);
@@ -120,6 +120,7 @@ function GoToPage(props) {
     /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: t("goToPage.of", { count: pageCount, total: formatNumber(pageCount) }) })
   ] });
 }
+const GoToPage = withPieceSlots(GoToPageContent, THEME_NAME);
 export {
   GoToPage as default
 };

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// Cuatro detalles:\n//   1. la lista trae TODAS las páginas, pero pinta solo las que se ven (react-window, el «Virtualization» de la\n//      documentación del Autocomplete de MUI): con decenas de miles de páginas abre igual de rápido y se desliza hasta la\n//      última. Antes se cortaba en 100 y la 101 solo se alcanzaba tecleando;\n//   2. abre en la página donde está la tabla, no en la 1;\n//   3. filtra por PREFIJO primero (teclear 13 da 13, 130, 131...) y luego por \"contiene\" (goToPageOptions.js);\n//   4. con una sola página no se pinta: sería un control que no lleva a ningún lado.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaGoToPage con defaultProps y\n// styleOverrides de sus partes: root, field.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useMemo, useRef} from 'react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport {List} from 'react-window';\n\nimport {filterPages, pageNumbersOf} from '@/DataTable/goToPageOptions.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaGoToPage)\nconst THEME_NAME = 'CalcitaGoToPage';\nconst GoToRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst GoToField = piecePart(THEME_NAME, 'Field', Autocomplete);\n\n// alto de cada página en la lista: el de una opción de MUI, 36 px desde «sm» y 48 en el teléfono (MUI les da 48 de alto\n// mínimo ahí). OJO: react-window acomoda cada renglón con este número; si no es el alto real, se encimarían\nconst OPTION_HEIGHT = 36;\nconst PHONE_OPTION_HEIGHT = 48;\n// lo más alto que crece la lista y el margen de arriba y abajo que MUI les da a sus listas\nconst LISTBOX_MAX_HEIGHT = 240;\nconst LISTBOX_PADDING = 8;\n// renglones de más que se pintan arriba y abajo de lo visible, para que no parpadee al deslizar\nconst OVERSCAN_ROWS = 5;\n\n/**\n * Un renglón de la lista: la opción que armó MUI (role=\"option\", resaltado, clic) acomodada donde dice react-window.\n *\n * @param {{index: number, style: object, pageOptions: Array<[object, number]>}} props\n */\nfunction PageOption({index, style, pageOptions}) {\n    const [{key, ...optionProps}, pageNumber] = pageOptions[index];\n\n    return (\n        <Typography key={key} component=\"li\" {...optionProps} noWrap style={{...style, top: (style.top ?? 0) + LISTBOX_PADDING}}>\n            {pageNumber}\n        </Typography>\n    );\n}\n\n/**\n * La lista del Autocomplete con react-window (el adaptador de la documentación de MUI).\n *\n * MUI le pasa sus props de lista (role=\"listbox\", id, eventos) y cada opción ya armada como [props, página] (ver\n * renderOption en GoToPage). Al abrir, se acomoda en la página elegida.\n *\n * @param {object} props\n * @param {Array<[object, number]>} props.children las opciones ya armadas por MUI\n * @param {import('react').Ref<HTMLDivElement>} [props.ref]\n * @param {number} props.pageCount cuántas páginas tiene la tabla: con todas en la lista, nadie ha tecleado\n * @param {{current: object|null}} props.pageListRef la API de react-window, para deslizar hasta una página\n * @param {{current: Map<number, number>}} props.pageIndexesRef se llena con página → lugar en la lista, para seguir con el\n *     teclado a la resaltada\n * @param {string} [props.className]\n */\nfunction PageListbox({children: pageOptions, ref, pageCount, pageListRef, pageIndexesRef, className, style, ...listboxProps}) {\n    const isWideScreen = useMediaQuery((theme) => theme.breakpoints.up('sm'), {noSsr: true});\n    const optionHeight = isWideScreen ? OPTION_HEIGHT : PHONE_OPTION_HEIGHT;\n    const listHeight = Math.min(pageOptions.length * optionHeight, LISTBOX_MAX_HEIGHT);\n\n    // dónde quedó cada página en la lista filtrada\n    useEffect(() => {\n        const pageIndexes = new Map();\n        pageOptions.forEach(([, pageNumber], pageIndex) => pageIndexes.set(pageNumber, pageIndex));\n        pageIndexesRef.current = pageIndexes;\n    }, [pageOptions, pageIndexesRef]);\n\n    // al abrir sin teclear (la lista trae TODAS las páginas) se acomoda en la página elegida, la opción que MUI marca como\n    // seleccionada; tecleando se queda arriba, en la primera que coincide.\n    // OJO: no va en un useEffect al montar: en ese momento react-window todavía no guarda su contenedor y scrollToRow no\n    // hace nada. Se hace cuando react-window entrega su API ya con el contenedor (listRef como función), una sola vez por\n    // lista armada: después no pelea con quien desliza\n    const placedListElementsRef = useRef(new WeakSet());\n    const keepListApi = (listApi) => {\n        pageListRef.current = listApi;\n        const listElement = listApi?.element;\n        if (!listElement || placedListElementsRef.current.has(listElement)) {\n            return;\n        }\n        placedListElementsRef.current.add(listElement);\n        if (pageOptions.length !== pageCount) {\n            return;\n        }\n        const selectedIndex = pageOptions.findIndex(([optionProps]) => optionProps['aria-selected'] === true);\n        if (selectedIndex >= 0) {\n            listApi.scrollToRow({index: selectedIndex, align: 'center'});\n        }\n    };\n\n    return (\n        <div ref={ref} {...listboxProps}>\n            <List\n                // OJO: react-window le pone role=\"list\" a su contenedor; las opciones tienen que ser de la lista de MUI\n                // (role=\"listbox\", el div de afuera) para que un lector de pantalla las anuncie como opciones del selector\n                role=\"none\"\n                className={className}\n                listRef={keepListApi}\n                // OJO: otra cantidad de páginas (al teclear) arma la lista de nuevo y la regresa arriba\n                key={pageOptions.length}\n                rowCount={pageOptions.length}\n                rowHeight={optionHeight}\n                rowComponent={PageOption}\n                rowProps={{pageOptions}}\n                style={{height: listHeight + 2 * LISTBOX_PADDING, width: '100%', boxSizing: 'border-box'}}\n                overscanCount={OVERSCAN_ROWS}\n                tagName=\"ul\"\n            />\n        </div>\n    );\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(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaGoToPage.defaultProps) y encima lo que llega aquí\n    const {page, pageCount, onChange, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table', texts);\n    const {formatNumber} = useFormatters();\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 = useMemo(() => pageNumbersOf(pageCount), [pageCount]);\n    const pageListRef = useRef(null);\n    const pageIndexesRef = useRef(new Map());\n\n    // guard clause: con una página no hay a dónde ir\n    if (pageCount <= 1) {\n        return null;\n    }\n\n    // con las flechas del teclado, la lista desliza hasta la página resaltada (react-window no la tiene pintada)\n    const scrollToHighlightedPage = (event, highlightedPageNumber) => {\n        const highlightedIndex = pageIndexesRef.current.get(highlightedPageNumber);\n        if (highlightedIndex !== undefined) {\n            pageListRef.current?.scrollToRow({index: highlightedIndex, align: 'auto'});\n        }\n    };\n\n    return (\n        <GoToRoot direction=\"row\" spacing={0.75} ownSx={{alignItems: 'baseline'}}>\n            <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{t('goToPage.page')}</Typography>\n            <GoToField\n                size=\"small\"\n                disableClearable\n                disableListWrap\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                // cada opción viaja armada a PageListbox, que pinta solo las que se ven\n                renderOption={(optionProps, pageNumber) => [optionProps, pageNumber]}\n                onHighlightChange={scrollToHighlightedPage}\n                onChange={(event, selectedPageNumber) => {\n                    if (selectedPageNumber !== null && selectedPageNumber - 1 !== page) {\n                        onChange(selectedPageNumber - 1);\n                    }\n                }}\n                ownSx={{width: 78, '& .MuiAutocomplete-endAdornment': {right: 0}}}\n                slotProps={{listbox: {component: PageListbox, pageCount, pageListRef, pageIndexesRef}}}\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        </GoToRoot>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"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// Cuatro detalles:\n//   1. la lista trae TODAS las páginas, pero pinta solo las que se ven (react-window, el «Virtualization» de la\n//      documentación del Autocomplete de MUI): con decenas de miles de páginas abre igual de rápido y se desliza hasta la\n//      última. Antes se cortaba en 100 y la 101 solo se alcanzaba tecleando;\n//   2. abre en la página donde está la tabla, no en la 1;\n//   3. filtra por PREFIJO primero (teclear 13 da 13, 130, 131...) y luego por \"contiene\" (goToPageOptions.js);\n//   4. con una sola página no se pinta: sería un control que no lleva a ningún lado.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaGoToPage con defaultProps y\n// styleOverrides de sus partes: root, field.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useMemo, useRef} from 'react';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport {List} from 'react-window';\n\nimport {filterPages, pageNumbersOf} from '@/DataTable/goToPageOptions.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaGoToPage)\nconst THEME_NAME = 'CalcitaGoToPage';\nconst GoToRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst GoToField = piecePart(THEME_NAME, 'Field', Autocomplete);\n\n// alto de cada página en la lista: el de una opción de MUI, 36 px desde «sm» y 48 en el teléfono (MUI les da 48 de alto\n// mínimo ahí). OJO: react-window acomoda cada renglón con este número; si no es el alto real, se encimarían\nconst OPTION_HEIGHT = 36;\nconst PHONE_OPTION_HEIGHT = 48;\n// lo más alto que crece la lista y el margen de arriba y abajo que MUI les da a sus listas\nconst LISTBOX_MAX_HEIGHT = 240;\nconst LISTBOX_PADDING = 8;\n// renglones de más que se pintan arriba y abajo de lo visible, para que no parpadee al deslizar\nconst OVERSCAN_ROWS = 5;\n\n/**\n * Un renglón de la lista: la opción que armó MUI (role=\"option\", resaltado, clic) acomodada donde dice react-window.\n *\n * @param {{index: number, style: object, pageOptions: Array<[object, number]>}} props\n */\nfunction PageOption({index, style, pageOptions}) {\n    const [{key, ...optionProps}, pageNumber] = pageOptions[index];\n\n    return (\n        <Typography key={key} component=\"li\" {...optionProps} noWrap style={{...style, top: (style.top ?? 0) + LISTBOX_PADDING}}>\n            {pageNumber}\n        </Typography>\n    );\n}\n\n/**\n * La lista del Autocomplete con react-window (el adaptador de la documentación de MUI).\n *\n * MUI le pasa sus props de lista (role=\"listbox\", id, eventos) y cada opción ya armada como [props, página] (ver\n * renderOption en GoToPage). Al abrir, se acomoda en la página elegida.\n *\n * @param {object} props\n * @param {Array<[object, number]>} props.children las opciones ya armadas por MUI\n * @param {import('react').Ref<HTMLDivElement>} [props.ref]\n * @param {number} props.pageCount cuántas páginas tiene la tabla: con todas en la lista, nadie ha tecleado\n * @param {{current: object|null}} props.pageListRef la API de react-window, para deslizar hasta una página\n * @param {{current: Map<number, number>}} props.pageIndexesRef se llena con página → lugar en la lista, para seguir con el\n *     teclado a la resaltada\n * @param {string} [props.className]\n */\nfunction PageListbox({children: pageOptions, ref, pageCount, pageListRef, pageIndexesRef, className, style, ...listboxProps}) {\n    const isWideScreen = useMediaQuery((theme) => theme.breakpoints.up('sm'), {noSsr: true});\n    const optionHeight = isWideScreen ? OPTION_HEIGHT : PHONE_OPTION_HEIGHT;\n    const listHeight = Math.min(pageOptions.length * optionHeight, LISTBOX_MAX_HEIGHT);\n\n    // dónde quedó cada página en la lista filtrada\n    useEffect(() => {\n        const pageIndexes = new Map();\n        pageOptions.forEach(([, pageNumber], pageIndex) => pageIndexes.set(pageNumber, pageIndex));\n        pageIndexesRef.current = pageIndexes;\n    }, [pageOptions, pageIndexesRef]);\n\n    // al abrir sin teclear (la lista trae TODAS las páginas) se acomoda en la página elegida, la opción que MUI marca como\n    // seleccionada; tecleando se queda arriba, en la primera que coincide.\n    // OJO: no va en un useEffect al montar: en ese momento react-window todavía no guarda su contenedor y scrollToRow no\n    // hace nada. Se hace cuando react-window entrega su API ya con el contenedor (listRef como función), una sola vez por\n    // lista armada: después no pelea con quien desliza\n    const placedListElementsRef = useRef(new WeakSet());\n    const keepListApi = (listApi) => {\n        pageListRef.current = listApi;\n        const listElement = listApi?.element;\n        if (!listElement || placedListElementsRef.current.has(listElement)) {\n            return;\n        }\n        placedListElementsRef.current.add(listElement);\n        if (pageOptions.length !== pageCount) {\n            return;\n        }\n        const selectedIndex = pageOptions.findIndex(([optionProps]) => optionProps['aria-selected'] === true);\n        if (selectedIndex >= 0) {\n            listApi.scrollToRow({index: selectedIndex, align: 'center'});\n        }\n    };\n\n    return (\n        <div ref={ref} {...listboxProps}>\n            <List\n                // OJO: react-window le pone role=\"list\" a su contenedor; las opciones tienen que ser de la lista de MUI\n                // (role=\"listbox\", el div de afuera) para que un lector de pantalla las anuncie como opciones del selector\n                role=\"none\"\n                className={className}\n                listRef={keepListApi}\n                // OJO: otra cantidad de páginas (al teclear) arma la lista de nuevo y la regresa arriba\n                key={pageOptions.length}\n                rowCount={pageOptions.length}\n                rowHeight={optionHeight}\n                rowComponent={PageOption}\n                rowProps={{pageOptions}}\n                style={{height: listHeight + 2 * LISTBOX_PADDING, width: '100%', boxSizing: 'border-box'}}\n                overscanCount={OVERSCAN_ROWS}\n                tagName=\"ul\"\n            />\n        </div>\n    );\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 */\nfunction GoToPageContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaGoToPage.defaultProps) y encima lo que llega aquí\n    const {page, pageCount, onChange, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table', texts);\n    const {formatNumber} = useFormatters();\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 = useMemo(() => pageNumbersOf(pageCount), [pageCount]);\n    const pageListRef = useRef(null);\n    const pageIndexesRef = useRef(new Map());\n\n    // guard clause: con una página no hay a dónde ir\n    if (pageCount <= 1) {\n        return null;\n    }\n\n    // con las flechas del teclado, la lista desliza hasta la página resaltada (react-window no la tiene pintada)\n    const scrollToHighlightedPage = (event, highlightedPageNumber) => {\n        const highlightedIndex = pageIndexesRef.current.get(highlightedPageNumber);\n        if (highlightedIndex !== undefined) {\n            pageListRef.current?.scrollToRow({index: highlightedIndex, align: 'auto'});\n        }\n    };\n\n    return (\n        <GoToRoot direction=\"row\" spacing={0.75} ownSx={{alignItems: 'baseline'}}>\n            <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{t('goToPage.page')}</Typography>\n            <GoToField\n                size=\"small\"\n                disableClearable\n                disableListWrap\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                // cada opción viaja armada a PageListbox, que pinta solo las que se ven\n                renderOption={(optionProps, pageNumber) => [optionProps, pageNumber]}\n                onHighlightChange={scrollToHighlightedPage}\n                onChange={(event, selectedPageNumber) => {\n                    if (selectedPageNumber !== null && selectedPageNumber - 1 !== page) {\n                        onChange(selectedPageNumber - 1);\n                    }\n                }}\n                ownSx={{width: 78, '& .MuiAutocomplete-endAdornment': {right: 0}}}\n                slotProps={{listbox: {component: PageListbox, pageCount, pageListRef, pageIndexesRef}}}\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        </GoToRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst GoToPage = withPieceSlots(GoToPageContent, THEME_NAME);\nexport default GoToPage;\n"],"names":[],"mappings":"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"}

package/dist/DataTable/ServerTable.js

@@ -21,6 +21,11 @@ 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 { fixedColumnOffsetsOf, fixedFieldsOf } from "./fixedColumns.js";
+import TableCardsView, { TableViewToggle } from "./TableCardsView.js";
+import { COLUMN_STACKED_KEY } from "./columns.js";
+import { useTableView, TABLE_VIEW } from "./useTableView.js";
+import { createLogger } from "../observability/logger.js";
 import { useDebouncedFilter } from "./useDebouncedFilter.js";
 import { useTableState, isFilterActive, FILTER_KINDS } from "./useTableState.js";
 import BarSearch from "../appShell/BarSearch.js";
@@ -31,7 +36,7 @@ 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";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps, sxListOf } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaServerTable";
 const TableToolbar = piecePart(THEME_NAME, "Toolbar", Stack);
@@ -59,40 +64,48 @@ const COLUMN_HEADER_HEIGHT_PIXELS = 39;
 const FOOTER_HEIGHT_PIXELS = 52;
 const GRID_BORDER_PIXELS = 2;
 const HEIGHT_SLACK_PIXELS = 2;
+const AUTO_ROW_HEIGHT = "auto";
+const CELL_LINE_HEIGHT = "inherit";
+const log = createLogger("table");
+const warnedFixedColumns = /* @__PURE__ */ new Set();
 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 } = {}) {
+function fixedColumnSxOf(theme, fixedColumns, { 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}"]`]: {
+  const columnRules = {};
+  for (const { field, left, isLast } of fixedColumns) {
+    const ownBandHeader = `.MuiDataGrid-columnHeader[data-fields="|-${field}-|"]`;
+    const edge = isLast ? { borderRight: divider } : {};
+    columnRules[`& .MuiDataGrid-cell[data-field="${field}"]`] = {
       position: "sticky",
-      left: fixedLeft,
+      left,
       zIndex: FIXED_CELL_Z_INDEX,
-      borderRight: divider,
+      ...edge,
       ...stickyBackground,
       "&::before": rowColorLayer
-    },
-    [`& :where(.MuiDataGrid-columnHeader[data-field="${field}"], ${ownBandHeader})`]: headerBackground,
-    [`& .MuiDataGrid-columnHeader[data-field="${field}"], & ${ownBandHeader}`]: {
+    };
+    columnRules[`& :where(.MuiDataGrid-columnHeader[data-field="${field}"], ${ownBandHeader})`] = headerBackground;
+    columnRules[`& .MuiDataGrid-columnHeader[data-field="${field}"], & ${ownBandHeader}`] = {
       position: "sticky",
-      left: fixedLeft,
+      left,
       zIndex: FIXED_HEADER_Z_INDEX,
-      borderRight: divider
-    },
+      ...edge
+    };
+  }
+  return {
+    "& :where(.MuiDataGrid-row)": { backgroundColor: isMaterialContent ? "transparent" : paper },
+    ...columnRules,
     ...withCheckboxColumn && {
       [`& ${checkboxCell}`]: { position: "sticky", left: 0, zIndex: FIXED_CELL_Z_INDEX, ...stickyBackground, "&::before": rowColorLayer },
       [`& :where(${checkboxHeader})`]: headerBackground,
@@ -146,7 +159,7 @@ function QuickFilterRow({ quickFilter, facets, total, filters, isMultiple, setFi
     }
   );
 }
-function ServerTable(props) {
+function ServerTableContent(props) {
   const {
     fetchPage,
     queryKey,
@@ -191,6 +204,12 @@ function ServerTable(props) {
     onLoaded,
     onLoadError,
     gridProps,
+    renderCard,
+    view,
+    defaultView,
+    onViewChange,
+    showViewToggle,
+    cardSkeleton,
     texts,
     ...unknownProps
   } = usePieceProps(props, THEME_NAME);
@@ -200,6 +219,10 @@ function ServerTable(props) {
   const theme = useTheme();
   const tableState = useTableState({ prefix, filterDefaults, filterKinds, defaultPageSize });
   const { filters, sortOrders, page, pageSize } = tableState;
+  const tableView = useTableView({ prefix, view, defaultView, onViewChange });
+  const showsCards = Boolean(renderCard) && tableView.view === TABLE_VIEW.cards;
+  const showsViewToggle = Boolean(renderCard) && (showViewToggle ?? true);
+  const rowHeightOf = getRowHeight ?? (columns.some((column) => column[COLUMN_STACKED_KEY]) ? () => AUTO_ROW_HEIGHT : void 0);
   const [searchDraft, setSearchDraft] = useDebouncedFilter(
     searchField ? filters[searchField] : "",
     (value) => searchField && tableState.setFilter(searchField, value)
@@ -312,10 +335,29 @@ function ServerTable(props) {
     placeholderRowCount = isLoading ? Math.min(pageSize, 8) : 3;
   }
   let rowsHeight = placeholderRowCount * ROW_HEIGHT_PIXELS;
+  let hasAutoHeightRows = false;
   for (const row of visibleRows) {
-    const requestedRowHeight = getRowHeight?.({ id: getRowId ? getRowId(row) : row.id, model: row, densityFactor: COMPACT_DENSITY_FACTOR });
+    const rowParams = { id: getRowId ? getRowId(row) : row.id, model: row, densityFactor: COMPACT_DENSITY_FACTOR };
+    const requestedRowHeight = rowHeightOf?.(rowParams);
+    if (requestedRowHeight === AUTO_ROW_HEIGHT) {
+      hasAutoHeightRows = true;
+      const estimatedRowHeight = gridProps?.getEstimatedRowHeight?.(rowParams);
+      rowsHeight += typeof estimatedRowHeight === "number" ? estimatedRowHeight : ROW_HEIGHT_PIXELS;
+      continue;
+    }
     rowsHeight += typeof requestedRowHeight === "number" ? requestedRowHeight : ROW_HEIGHT_PIXELS;
   }
+  const measuresItself = hasAutoHeightRows && !maxGridHeight;
+  const fixedColumns = fixedColumnOffsetsOf(fixedFieldsOf(fixedColumn), columns, { startLeft: isSelectable ? CHECKBOX_COLUMN_WIDTH_PIXELS : 0 });
+  const fixedWithUnknownWidth = fixedColumns.filter((fixed) => fixed.hasUnknownWidth).map((fixed) => fixed.field).join(",");
+  useEffect(() => {
+    for (const field of fixedWithUnknownWidth ? fixedWithUnknownWidth.split(",") : []) {
+      if (!warnedFixedColumns.has(field)) {
+        warnedFixedColumns.add(field);
+        log.warn(`La columna fija «${field}» no es la última y no trae un width fijo: la siguiente se corre su minWidth y podría encimarse. Póngale width.`);
+      }
+    }
+  }, [fixedWithUnknownWidth]);
   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;
@@ -353,7 +395,8 @@ function ServerTable(props) {
           ] }),
           toolbarExtra
         ] })
-      ) })
+      ) }),
+      showsViewToggle && /* @__PURE__ */ jsx(TableViewToggle, { view: tableView.view, onChange: tableView.setView })
     ] }),
     beforeQuickFilters,
     quickFilters.map((quickFilter) => /* @__PURE__ */ jsx(
@@ -410,7 +453,24 @@ function ServerTable(props) {
         children: error.message ?? t("error.generic")
       }
     ),
-    /* @__PURE__ */ jsx(TableCard, { variant: "outlined", ownSx: { width: "100%", minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+    showsCards && /* @__PURE__ */ jsx(
+      TableCardsView,
+      {
+        rows: visibleRows,
+        renderCard,
+        rowIdOf: (row) => getRowId ? getRowId(row) : row.id,
+        isLoading,
+        page,
+        pageCount: Math.ceil(total / pageSize) || 1,
+        onPageChange: tableState.setPage,
+        hasActiveFilters,
+        emptyLabel,
+        onClearFilters: tableState.clearAll,
+        skeleton: cardSkeleton,
+        ariaLabel
+      }
+    ),
+    !showsCards && /* @__PURE__ */ jsx(TableCard, { variant: "outlined", ownSx: { width: "100%", minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
       TableGrid,
       {
         ...gridProps,
@@ -422,7 +482,7 @@ function ServerTable(props) {
           getRowClassName?.(params),
           striped && params.indexRelativeToCurrentPage % 2 === 1 ? STRIPED_ROW_CLASS : ""
         ].filter(Boolean).join(" "),
-        getRowHeight,
+        getRowHeight: rowHeightOf,
         "aria-label": ariaLabel,
         nonce: readCspNonce(),
         loading: isLoading,
@@ -449,7 +509,7 @@ function ServerTable(props) {
         keepNonExistentRowsSelected: isSelectable,
         disableRowSelectionExcludeModel: true,
         hideFooterSelectedRowCount: true,
-        disableVirtualization: Boolean(fixedColumn),
+        disableVirtualization: fixedColumns.length > 0,
         density: DATA_GRID_DENSITY,
         localeText: { ...gridText, noRowsLabel: emptyLabel ?? t("empty.default") },
         slotProps: {
@@ -472,22 +532,29 @@ function ServerTable(props) {
           // 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))`,
+          // renglones se desplazaban 13 px por dentro. Con barras superpuestas (teléfono, trackpad) mide 0.
+          // Con renglones 'auto' el DataGrid se mide solo y aquí no se le pone alto
+          ...!measuresItself && { 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" },
+          // todo centrado verticalmente: el texto suelto se pegaba arriba y los chips quedaban a media altura.
+          // OJO, trampa pagada: el DataGrid le da a cada celda una altura de línea IGUAL al alto del renglón
+          // (para centrar una sola línea de texto). En un renglón alto (100 px) todo texto que no traiga la
+          // suya quedaba en una línea de 99 px: a media celda o hasta abajo, y lo que iba debajo se salía y se
+          // cortaba. Las celdas ya se centran con flex, así que la altura de línea vuelve a la del texto
+          "& .MuiDataGrid-cell": { display: "flex", alignItems: "center", lineHeight: CELL_LINE_HEIGHT },
           "& .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 }) : {}]
+          [`& .${STRIPED_ROW_CLASS}:hover`]: { bgcolor: "action.selected" }
+        }, (gridTheme) => fixedColumns.length > 0 ? fixedColumnSxOf(gridTheme, fixedColumns, { withCheckboxColumn: isSelectable }) : {}],
+        sx: [...sxListOf(gridProps?.sx), ...sxListOf(gridSx)],
+        autoHeight: measuresItself
       }
     ) }),
     footer?.({ total, capped })
   ] }) });
 }
+const ServerTable = withPieceSlots(ServerTableContent, THEME_NAME);
 export {
   SELECTION_PHONE_LAYOUT,
   ServerTable as default