@stackcraftmx/calcita 0.32.2 → 0.51.0

package/cli/templates/project/vite.config.js.tpl

@@ -21,8 +21,15 @@ const LARGEST_CHUNK_KILOBYTES = 1000;
 // misma línea que lleva el .env del servidor. Vite pide sus archivos con el prefijo, se lo pone a las rutas de index.html y lo
 // deja en import.meta.env.BASE_URL, de donde lo toman el router, las imágenes y version.json (src/core/publicPaths.js). Sin
 // ella, todo en la raíz. Con otro prefijo hay que volver a construir.
+// ASSET_URL=./ : los archivos relativos a la página, para cuando el prefijo lo pone el servidor al servirla (<base href>):
+// una sola compilación sirve detrás de cualquier prefijo (src/core/publicPaths.js)
+const RELATIVE_BASE = './';
 const basePathOf = (assetUrl) => {
-    const prefix = (assetUrl ?? '').trim().replace(/^\/+|\/+$/g, '');
+    const trimmed = (assetUrl ?? '').trim();
+    if (trimmed === '.' || trimmed === RELATIVE_BASE) {
+        return RELATIVE_BASE;
+    }
+    const prefix = trimmed.replace(/^\/+|\/+$/g, '');
     return prefix ? `/${prefix}/` : '/';
 };
 
@@ -50,4 +57,16 @@ export default defineConfig({
         dedupe: SINGLE_COPY_PACKAGES,
     },
     build: {chunkSizeWarningLimit: LARGEST_CHUNK_KILOBYTES},
+    // Las pruebas de pantalla (pnpm test, src/**/*.test.jsx): jsdom hace de navegador y src/testing/setup.js lo prepara.
+    // Toman todo lo de arriba (el alias @/, React, import.meta.glob de los módulos): una prueba carga los archivos igual que
+    // el build, sin una segunda configuración que se desfase
+    test: {
+        environment: 'jsdom',
+        setupFiles: ['./src/testing/setup.js'],
+        // una prueba de pantalla abre la app completa (rutas lazy, servidor de mentira con su demora): unos segundos
+        testTimeout: 30_000,
+        // OJO: Calcita pasa por Vite como la app. Si no, Node la carga aparte y le da OTRA copia del router y de MUI: sus
+        // pantallas no encuentran el router de la app («useRouteError must be used within a data router»)
+        server: {deps: {inline: ['@stackcraftmx/calcita']}},
+    },
 });

package/dist/DataTable/AuditTrailDialog.js

@@ -3,11 +3,11 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import Typography from "@mui/material/Typography";
 import AuditTrailTable from "./AuditTrailTable.js";
 import ContentDialog from "../ui/layout/ContentDialog.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 = "CalcitaAuditTrailDialog";
 const AuditDescription = piecePart(THEME_NAME, "Description", Typography);
-function AuditTrailDialog(props) {
+function AuditTrailDialogContent(props) {
   const {
     open,
     onClose,
@@ -41,6 +41,7 @@ function AuditTrailDialog(props) {
     )
   ] });
 }
+const AuditTrailDialog = withPieceSlots(AuditTrailDialogContent, THEME_NAME);
 export {
   AuditTrailDialog as default
 };

package/dist/DataTable/AuditTrailDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuditTrailDialog.js","sources":["../../src/DataTable/AuditTrailDialog.jsx"],"sourcesContent":["// Diálogo de auditoría de un renglón: su historia de eventos, paginada y filtrada EN EL SERVIDOR (AuditTrailTable).\n//\n// Sirve para el historial de cualquier registro (un pedido, una cuenta).\n// Solo abre una vista: no ejecuta nada y por eso no lleva confirmación.\n//\n// Se abre como diálogo de contenido (ContentDialog): sube desde abajo y ocupa la pantalla debajo de la barra superior. Una\n// tabla con su historia se lee mejor a todo lo ancho que en un recuadro al centro, también en el teléfono.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAuditTrailDialog con defaultProps y\n// styleOverrides de sus partes: description.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Typography from '@mui/material/Typography';\n\nimport AuditTrailTable from '@/DataTable/AuditTrailTable.jsx';\nimport ContentDialog from '@/ui/layout/ContentDialog.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.CalcitaAuditTrailDialog)\nconst THEME_NAME = 'CalcitaAuditTrailDialog';\nconst AuditDescription = piecePart(THEME_NAME, 'Description', Typography);\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {string} props.title ya traducido («Historial de Q3 · ago 2026»)\n * @param {import('react').ReactNode} [props.subtitle]\n * @param {string} props.subjectKey\n * @param {(tableRequest: object, signal: AbortSignal) => Promise<{rows: Array, total: number, facets?: object}>} props.fetchPage\n * @param {Record<string, object>} props.eventDictionary\n * @param {Record<string, object>} [props.resultDictionary]\n * @param {Array<object>} [props.extraColumns]\n * @param {import('react').ReactNode} [props.header] va entre el subtítulo y la tabla (p. ej. pestañas que cambian lo que se\n *     consulta)\n * @param {(row: any) => string|null} [props.eventSuffixOf] complemento del evento de un renglón (AuditTrailTable)\n */\nexport default function AuditTrailDialog(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAuditTrailDialog.defaultProps) y encima lo que llega aquí\n    const {\n    open, onClose, title, subtitle, subjectKey, fetchPage, eventDictionary, resultDictionary, extraColumns = [], header = null, eventSuffixOf = null,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    return (\n        <ContentDialog open={open} onClose={onClose} title={title}>\n            {subtitle && (\n                <AuditDescription variant=\"body2\" color=\"text.secondary\" ownSx={{mb: 2}}>{subtitle}</AuditDescription>\n            )}\n            {header}\n            <AuditTrailTable\n                subjectKey={open ? subjectKey : ''}\n                fetchPage={fetchPage}\n                eventDictionary={eventDictionary}\n                resultDictionary={resultDictionary}\n                extraColumns={extraColumns}\n                eventSuffixOf={eventSuffixOf}\n                ariaLabel={title}\n                maxGridHeight={null}\n            />\n        </ContentDialog>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,mBAAmB,UAAU,YAAY,eAAe,UAAU;AAiBxE,SAAwB,iBAAiB,OAAO;AAE5C,QAAM;AAAA,IACN;AAAA,IAAM;AAAA,IAAS;AAAA,IAAO;AAAA,IAAU;AAAA,IAAY;AAAA,IAAW;AAAA,IAAiB;AAAA,IAAkB,eAAe,CAAA;AAAA,IAAI,SAAS;AAAA,IAAM,gBAAgB;AAAA,IAC5I,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,SACI,qBAAC,eAAA,EAAc,MAAY,SAAkB,OACxC,UAAA;AAAA,IAAA,YACG,oBAAC,kBAAA,EAAiB,SAAQ,SAAQ,OAAM,kBAAiB,OAAO,EAAC,IAAI,EAAA,GAAK,UAAA,SAAA,CAAS;AAAA,IAEtF;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAY,OAAO,aAAa;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACJ;AAER;"}
+{"version":3,"file":"AuditTrailDialog.js","sources":["../../src/DataTable/AuditTrailDialog.jsx"],"sourcesContent":["// Diálogo de auditoría de un renglón: su historia de eventos, paginada y filtrada EN EL SERVIDOR (AuditTrailTable).\n//\n// Sirve para el historial de cualquier registro (un pedido, una cuenta).\n// Solo abre una vista: no ejecuta nada y por eso no lleva confirmación.\n//\n// Se abre como diálogo de contenido (ContentDialog): sube desde abajo y ocupa la pantalla debajo de la barra superior. Una\n// tabla con su historia se lee mejor a todo lo ancho que en un recuadro al centro, también en el teléfono.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAuditTrailDialog con defaultProps y\n// styleOverrides de sus partes: description.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Typography from '@mui/material/Typography';\n\nimport AuditTrailTable from '@/DataTable/AuditTrailTable.jsx';\nimport ContentDialog from '@/ui/layout/ContentDialog.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.CalcitaAuditTrailDialog)\nconst THEME_NAME = 'CalcitaAuditTrailDialog';\nconst AuditDescription = piecePart(THEME_NAME, 'Description', Typography);\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {string} props.title ya traducido («Historial de Q3 · ago 2026»)\n * @param {import('react').ReactNode} [props.subtitle]\n * @param {string} props.subjectKey\n * @param {(tableRequest: object, signal: AbortSignal) => Promise<{rows: Array, total: number, facets?: object}>} props.fetchPage\n * @param {Record<string, object>} props.eventDictionary\n * @param {Record<string, object>} [props.resultDictionary]\n * @param {Array<object>} [props.extraColumns]\n * @param {import('react').ReactNode} [props.header] va entre el subtítulo y la tabla (p. ej. pestañas que cambian lo que se\n *     consulta)\n * @param {(row: any) => string|null} [props.eventSuffixOf] complemento del evento de un renglón (AuditTrailTable)\n */\nfunction AuditTrailDialogContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAuditTrailDialog.defaultProps) y encima lo que llega aquí\n    const {\n    open, onClose, title, subtitle, subjectKey, fetchPage, eventDictionary, resultDictionary, extraColumns = [], header = null, eventSuffixOf = null,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    return (\n        <ContentDialog open={open} onClose={onClose} title={title}>\n            {subtitle && (\n                <AuditDescription variant=\"body2\" color=\"text.secondary\" ownSx={{mb: 2}}>{subtitle}</AuditDescription>\n            )}\n            {header}\n            <AuditTrailTable\n                subjectKey={open ? subjectKey : ''}\n                fetchPage={fetchPage}\n                eventDictionary={eventDictionary}\n                resultDictionary={resultDictionary}\n                extraColumns={extraColumns}\n                eventSuffixOf={eventSuffixOf}\n                ariaLabel={title}\n                maxGridHeight={null}\n            />\n        </ContentDialog>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst AuditTrailDialog = withPieceSlots(AuditTrailDialogContent, THEME_NAME);\nexport default AuditTrailDialog;\n"],"names":[],"mappings":";;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,mBAAmB,UAAU,YAAY,eAAe,UAAU;AAiBxE,SAAS,wBAAwB,OAAO;AAEpC,QAAM;AAAA,IACN;AAAA,IAAM;AAAA,IAAS;AAAA,IAAO;AAAA,IAAU;AAAA,IAAY;AAAA,IAAW;AAAA,IAAiB;AAAA,IAAkB,eAAe,CAAA;AAAA,IAAI,SAAS;AAAA,IAAM,gBAAgB;AAAA,IAC5I,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,SACI,qBAAC,eAAA,EAAc,MAAY,SAAkB,OACxC,UAAA;AAAA,IAAA,YACG,oBAAC,kBAAA,EAAiB,SAAQ,SAAQ,OAAM,kBAAiB,OAAO,EAAC,IAAI,EAAA,GAAK,UAAA,SAAA,CAAS;AAAA,IAEtF;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAY,OAAO,aAAa;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACJ;AAER;AAGA,MAAM,mBAAmB,eAAe,yBAAyB,UAAU;"}

package/dist/DataTable/ColumnFilters/HeaderFilterPopover.js

@@ -11,13 +11,13 @@ import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
 import FilterAltIcon from "@mui/icons-material/FilterAlt";
 import FilterAltOutlinedIcon from "@mui/icons-material/FilterAltOutlined";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaHeaderFilter";
 const FilterButton = piecePart(THEME_NAME, "Button", IconButton);
 const FilterBadge = piecePart(THEME_NAME, "Badge", Badge);
 const FilterPanel = piecePart(THEME_NAME, "Panel", Box);
-function HeaderFilterPopover(props) {
+function HeaderFilterPopoverContent(props) {
   const { activeCount = 0, onClear, children, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table");
@@ -73,6 +73,7 @@ function HeaderFilterPopover(props) {
     )
   ] });
 }
+const HeaderFilterPopover = withPieceSlots(HeaderFilterPopoverContent, THEME_NAME);
 export {
   HeaderFilterPopover as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderFilterPopover.js","sources":["../../../src/DataTable/ColumnFilters/HeaderFilterPopover.jsx"],"sourcesContent":["// El icono de filtro del encabezado, con su globo.\n//\n// El badge trae el NÚMERO de valores activos en esa columna, no un punto: así se sabe sin abrir nada si se filtró por\n// uno o por seis.\n//\n// OJO: stopPropagation en el clic no es adorno. El título del encabezado ordena, y sin eso abrir el filtro también\n// cambiaría el orden.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaHeaderFilter con defaultProps y\n// styleOverrides de sus partes: button, badge, panel.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport FilterAltIcon from '@mui/icons-material/FilterAlt';\nimport FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';\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.CalcitaHeaderFilter)\nconst THEME_NAME = 'CalcitaHeaderFilter';\nconst FilterButton = piecePart(THEME_NAME, 'Button', IconButton);\nconst FilterBadge = piecePart(THEME_NAME, 'Badge', Badge);\nconst FilterPanel = piecePart(THEME_NAME, 'Panel', Box);\n\n/**\n * @param {{activeCount?: number, onClear: () => void, children: import('react').ReactNode}} props children = el filtro\n */\nexport default function HeaderFilterPopover(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaHeaderFilter.defaultProps) y encima lo que llega aquí\n    const {activeCount = 0, onClear, children, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table');\n    const [anchorElement, setAnchorElement] = useState(null);\n    const isActive = activeCount > 0;\n    const tooltip = isActive ? t('columnFilter.activeTooltip', {count: activeCount}) : t('columnFilter.tooltip');\n\n    return (\n        <>\n            <Tooltip title={tooltip}>\n                <FilterButton size=\"small\" aria-label={tooltip}\n                            ownSx={{color: isActive ? 'primary.main' : 'action.active', opacity: isActive ? 1 : 0.45, overflow: 'visible'}}\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchorElement(event.currentTarget);\n                            }}>\n                    {/* sin filtros NO se monta el Badge: MUI lo esconde con scale(0) y deja un artefacto en la esquina */}\n                    {isActive ? (\n                        <FilterBadge badgeContent={activeCount} color=\"primary\" overlap=\"circular\"\n                               ownSx={{'& .MuiBadge-badge': {fontSize: 10, fontWeight: 700, minWidth: 16, height: 16}}}>\n                            <FilterAltIcon fontSize=\"inherit\" />\n                        </FilterBadge>\n                    ) : <FilterAltOutlinedIcon fontSize=\"inherit\" />}\n                </FilterButton>\n            </Tooltip>\n\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={() => setAnchorElement(null)}\n                     anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <FilterPanel ownSx={{p: 2, minWidth: 280}}>\n                    <Stack spacing={1}>\n                        {children}\n                        <Button size=\"small\" disabled={!isActive}\n                                onClick={() => {\n                                    onClear();\n                                    setAnchorElement(null);\n                                }}>\n                            {t('columnFilter.clear')}\n                        </Button>\n                    </Stack>\n                </FilterPanel>\n            </Popover>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,UAAU,UAAU;AAC/D,MAAM,cAAc,UAAU,YAAY,SAAS,KAAK;AACxD,MAAM,cAAc,UAAU,YAAY,SAAS,GAAG;AAKtD,SAAwB,oBAAoB,OAAO;AAE/C,QAAM,EAAC,cAAc,GAAG,SAAS,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC7F,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,QAAM,WAAW,cAAc;AAC/B,QAAM,UAAU,WAAW,EAAE,8BAA8B,EAAC,OAAO,YAAA,CAAY,IAAI,EAAE,sBAAsB;AAE3G,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,SACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,MAAK;AAAA,QAAQ,cAAY;AAAA,QAC3B,OAAO,EAAC,OAAO,WAAW,iBAAiB,iBAAiB,SAAS,WAAW,IAAI,MAAM,UAAU,UAAA;AAAA,QACpG,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,2BAAiB,MAAM,aAAa;AAAA,QACxC;AAAA,QAEP,UAAA,WACG;AAAA,UAAC;AAAA,UAAA;AAAA,YAAY,cAAc;AAAA,YAAa,OAAM;AAAA,YAAU,SAAQ;AAAA,YACzD,OAAO,EAAC,qBAAqB,EAAC,UAAU,IAAI,YAAY,KAAK,UAAU,IAAI,QAAQ,GAAA,EAAE;AAAA,YACxF,UAAA,oBAAC,eAAA,EAAc,UAAS,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA,IAEtC,oBAAC,uBAAA,EAAsB,UAAS,UAAA,CAAU;AAAA,MAAA;AAAA,IAAA,GAEtD;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAQ,MAAM,QAAQ,aAAa;AAAA,QAAG,UAAU;AAAA,QAAe,SAAS,MAAM,iBAAiB,IAAI;AAAA,QAC3F,cAAc,EAAC,UAAU,UAAU,YAAY,OAAA;AAAA,QACpD,UAAA,oBAAC,aAAA,EAAY,OAAO,EAAC,GAAG,GAAG,UAAU,IAAA,GACjC,UAAA,qBAAC,OAAA,EAAM,SAAS,GACX,UAAA;AAAA,UAAA;AAAA,UACD;AAAA,YAAC;AAAA,YAAA;AAAA,cAAO,MAAK;AAAA,cAAQ,UAAU,CAAC;AAAA,cACxB,SAAS,MAAM;AACX,wBAAA;AACA,iCAAiB,IAAI;AAAA,cACzB;AAAA,cACH,YAAE,oBAAoB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC3B,EAAA,CACJ,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}
+{"version":3,"file":"HeaderFilterPopover.js","sources":["../../../src/DataTable/ColumnFilters/HeaderFilterPopover.jsx"],"sourcesContent":["// El icono de filtro del encabezado, con su globo.\n//\n// El badge trae el NÚMERO de valores activos en esa columna, no un punto: así se sabe sin abrir nada si se filtró por\n// uno o por seis.\n//\n// OJO: stopPropagation en el clic no es adorno. El título del encabezado ordena, y sin eso abrir el filtro también\n// cambiaría el orden.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaHeaderFilter con defaultProps y\n// styleOverrides de sus partes: button, badge, panel.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport FilterAltIcon from '@mui/icons-material/FilterAlt';\nimport FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';\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.CalcitaHeaderFilter)\nconst THEME_NAME = 'CalcitaHeaderFilter';\nconst FilterButton = piecePart(THEME_NAME, 'Button', IconButton);\nconst FilterBadge = piecePart(THEME_NAME, 'Badge', Badge);\nconst FilterPanel = piecePart(THEME_NAME, 'Panel', Box);\n\n/**\n * @param {{activeCount?: number, onClear: () => void, children: import('react').ReactNode}} props children = el filtro\n */\nfunction HeaderFilterPopoverContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaHeaderFilter.defaultProps) y encima lo que llega aquí\n    const {activeCount = 0, onClear, children, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table');\n    const [anchorElement, setAnchorElement] = useState(null);\n    const isActive = activeCount > 0;\n    const tooltip = isActive ? t('columnFilter.activeTooltip', {count: activeCount}) : t('columnFilter.tooltip');\n\n    return (\n        <>\n            <Tooltip title={tooltip}>\n                <FilterButton size=\"small\" aria-label={tooltip}\n                            ownSx={{color: isActive ? 'primary.main' : 'action.active', opacity: isActive ? 1 : 0.45, overflow: 'visible'}}\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchorElement(event.currentTarget);\n                            }}>\n                    {/* sin filtros NO se monta el Badge: MUI lo esconde con scale(0) y deja un artefacto en la esquina */}\n                    {isActive ? (\n                        <FilterBadge badgeContent={activeCount} color=\"primary\" overlap=\"circular\"\n                               ownSx={{'& .MuiBadge-badge': {fontSize: 10, fontWeight: 700, minWidth: 16, height: 16}}}>\n                            <FilterAltIcon fontSize=\"inherit\" />\n                        </FilterBadge>\n                    ) : <FilterAltOutlinedIcon fontSize=\"inherit\" />}\n                </FilterButton>\n            </Tooltip>\n\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={() => setAnchorElement(null)}\n                     anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <FilterPanel ownSx={{p: 2, minWidth: 280}}>\n                    <Stack spacing={1}>\n                        {children}\n                        <Button size=\"small\" disabled={!isActive}\n                                onClick={() => {\n                                    onClear();\n                                    setAnchorElement(null);\n                                }}>\n                            {t('columnFilter.clear')}\n                        </Button>\n                    </Stack>\n                </FilterPanel>\n            </Popover>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst HeaderFilterPopover = withPieceSlots(HeaderFilterPopoverContent, THEME_NAME);\nexport default HeaderFilterPopover;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,UAAU,UAAU;AAC/D,MAAM,cAAc,UAAU,YAAY,SAAS,KAAK;AACxD,MAAM,cAAc,UAAU,YAAY,SAAS,GAAG;AAKtD,SAAS,2BAA2B,OAAO;AAEvC,QAAM,EAAC,cAAc,GAAG,SAAS,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC7F,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,QAAM,WAAW,cAAc;AAC/B,QAAM,UAAU,WAAW,EAAE,8BAA8B,EAAC,OAAO,YAAA,CAAY,IAAI,EAAE,sBAAsB;AAE3G,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,SACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,MAAK;AAAA,QAAQ,cAAY;AAAA,QAC3B,OAAO,EAAC,OAAO,WAAW,iBAAiB,iBAAiB,SAAS,WAAW,IAAI,MAAM,UAAU,UAAA;AAAA,QACpG,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,2BAAiB,MAAM,aAAa;AAAA,QACxC;AAAA,QAEP,UAAA,WACG;AAAA,UAAC;AAAA,UAAA;AAAA,YAAY,cAAc;AAAA,YAAa,OAAM;AAAA,YAAU,SAAQ;AAAA,YACzD,OAAO,EAAC,qBAAqB,EAAC,UAAU,IAAI,YAAY,KAAK,UAAU,IAAI,QAAQ,GAAA,EAAE;AAAA,YACxF,UAAA,oBAAC,eAAA,EAAc,UAAS,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA,IAEtC,oBAAC,uBAAA,EAAsB,UAAS,UAAA,CAAU;AAAA,MAAA;AAAA,IAAA,GAEtD;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAQ,MAAM,QAAQ,aAAa;AAAA,QAAG,UAAU;AAAA,QAAe,SAAS,MAAM,iBAAiB,IAAI;AAAA,QAC3F,cAAc,EAAC,UAAU,UAAU,YAAY,OAAA;AAAA,QACpD,UAAA,oBAAC,aAAA,EAAY,OAAO,EAAC,GAAG,GAAG,UAAU,IAAA,GACjC,UAAA,qBAAC,OAAA,EAAM,SAAS,GACX,UAAA;AAAA,UAAA;AAAA,UACD;AAAA,YAAC;AAAA,YAAA;AAAA,cAAO,MAAK;AAAA,cAAQ,UAAU,CAAC;AAAA,cACxB,SAAS,MAAM;AACX,wBAAA;AACA,iCAAiB,IAAI;AAAA,cACzB;AAAA,cACH,YAAE,oBAAoB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC3B,EAAA,CACJ,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAGA,MAAM,sBAAsB,eAAe,4BAA4B,UAAU;"}

package/dist/DataTable/ColumnFilters/MultiSelectColumnFilter.js

@@ -8,13 +8,13 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import { useFormatters } from "../../toolkit/useFormatters.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 = "CalcitaMultiSelectFilter";
 const MultiList = piecePart(THEME_NAME, "List", Stack);
 const MultiOption = piecePart(THEME_NAME, "Option", Stack);
 const SEARCHABLE_FROM_OPTIONS = 8;
-function MultiSelectColumnFilter(props) {
+function MultiSelectColumnFilterContent(props) {
   const { value = [], onChange, options = [], renderOption, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table");
@@ -52,6 +52,7 @@ function MultiSelectColumnFilter(props) {
     ] })
   ] });
 }
+const MultiSelectColumnFilter = withPieceSlots(MultiSelectColumnFilterContent, THEME_NAME);
 export {
   MultiSelectColumnFilter as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectColumnFilter.js","sources":["../../../src/DataTable/ColumnFilters/MultiSelectColumnFilter.jsx"],"sourcesContent":["// Filtro de opciones de una columna.\n//\n// Dos cosas lo separan de un multi-select cualquiera:\n//   - las opciones NO salen de las filas visibles: salen de las FACETAS que el servidor calcula sobre el resultado\n//     COMPLETO (ofrecer solo lo que aparece en las primeras 25 filas convierte el filtro en adorno);\n//   - cada opción trae su conteo, que es lo que deja decidir si vale la pena filtrar.\n//\n// Desde ocho opciones aparece una caja para buscar entre ellas.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMultiSelectFilter con defaultProps y\n// styleOverrides de sus partes: list, option.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormControlLabel from '@mui/material/FormControlLabel';\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';\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.CalcitaMultiSelectFilter)\nconst THEME_NAME = 'CalcitaMultiSelectFilter';\nconst MultiList = piecePart(THEME_NAME, 'List', Stack);\nconst MultiOption = piecePart(THEME_NAME, 'Option', Stack);\n\nconst SEARCHABLE_FROM_OPTIONS = 8;\n\n/**\n * @param {object} props\n * @param {string[]} [props.value]\n * @param {(value: string[]) => void} props.onChange\n * @param {Array<{value: string, total: number}>} [props.options] faceta del servidor\n * @param {(value: string) => import('react').ReactNode} [props.renderOption] cómo se lee el valor (diccionario)\n */\nexport default function MultiSelectColumnFilter(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMultiSelectFilter.defaultProps) y encima lo que llega aquí\n    const {value = [], onChange, options = [], renderOption, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table');\n    const {formatNumber} = useFormatters();\n    const [searchText, setSearchText] = useState('');\n\n    const toggleOption = (optionValue) => onChange(value.includes(optionValue)\n        ? value.filter((currentValue) => currentValue !== optionValue)\n        : [...value, optionValue]);\n\n    const isSearchable = options.length >= SEARCHABLE_FROM_OPTIONS;\n    const visibleOptions = isSearchable && searchText\n        ? options.filter((option) => String(option.value).toLowerCase().includes(searchText.toLowerCase()))\n        : options;\n\n    return (\n        <Stack spacing={1}>\n            {isSearchable && (\n                <TextField size=\"small\" autoFocus fullWidth placeholder={t('options.searchPlaceholder')} value={searchText}\n                           onChange={(event) => setSearchText(event.target.value)} />\n            )}\n            <MultiList ownSx={{maxHeight: 300, overflowY: 'auto'}}>\n                {options.length === 0 && (\n                    <Typography variant=\"caption\" color=\"text.secondary\">{t('options.empty')}</Typography>\n                )}\n                {options.length > 0 && visibleOptions.length === 0 && (\n                    <Typography variant=\"caption\" color=\"text.secondary\">{t('options.noMatch', {text: searchText})}</Typography>\n                )}\n                {visibleOptions.map((option) => (\n                    <FormControlLabel\n                        key={option.value}\n                        control={<Checkbox size=\"small\" checked={value.includes(option.value)} onChange={() => toggleOption(option.value)} />}\n                        label={(\n                            <MultiOption direction=\"row\" spacing={0.75} ownSx={{alignItems: 'center'}}>\n                                {renderOption ? renderOption(option.value) : <Typography variant=\"body2\">{option.value}</Typography>}\n                                <Typography variant=\"caption\" color=\"text.secondary\">{formatNumber(option.total)}</Typography>\n                            </MultiOption>\n                        )}\n                    />\n                ))}\n            </MultiList>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,KAAK;AACrD,MAAM,cAAc,UAAU,YAAY,UAAU,KAAK;AAEzD,MAAM,0BAA0B;AAShC,SAAwB,wBAAwB,OAAO;AAEnD,QAAM,EAAC,QAAQ,IAAI,UAAU,UAAU,CAAA,GAAI,cAAc,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC3G,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,EAAC,aAAA,IAAgB,cAAA;AACvB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAE/C,QAAM,eAAe,CAAC,gBAAgB,SAAS,MAAM,SAAS,WAAW,IACnE,MAAM,OAAO,CAAC,iBAAiB,iBAAiB,WAAW,IAC3D,CAAC,GAAG,OAAO,WAAW,CAAC;AAE7B,QAAM,eAAe,QAAQ,UAAU;AACvC,QAAM,iBAAiB,gBAAgB,aACjC,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,KAAK,EAAE,cAAc,SAAS,WAAW,YAAA,CAAa,CAAC,IAChG;AAEN,SACI,qBAAC,OAAA,EAAM,SAAS,GACX,UAAA;AAAA,IAAA,gBACG;AAAA,MAAC;AAAA,MAAA;AAAA,QAAU,MAAK;AAAA,QAAQ,WAAS;AAAA,QAAC,WAAS;AAAA,QAAC,aAAa,EAAE,2BAA2B;AAAA,QAAG,OAAO;AAAA,QACrF,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpE,qBAAC,aAAU,OAAO,EAAC,WAAW,KAAK,WAAW,UACzC,UAAA;AAAA,MAAA,QAAQ,WAAW,KAChB,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,EAAE,eAAe,EAAA,CAAE;AAAA,MAE5E,QAAQ,SAAS,KAAK,eAAe,WAAW,yBAC5C,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,EAAE,mBAAmB,EAAC,MAAM,WAAA,CAAW,GAAE;AAAA,MAElG,eAAe,IAAI,CAAC,WACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEG,SAAS,oBAAC,UAAA,EAAS,MAAK,SAAQ,SAAS,MAAM,SAAS,OAAO,KAAK,GAAG,UAAU,MAAM,aAAa,OAAO,KAAK,GAAG;AAAA,UACnH,OACI,qBAAC,aAAA,EAAY,WAAU,OAAM,SAAS,MAAM,OAAO,EAAC,YAAY,SAAA,GAC3D,UAAA;AAAA,YAAA,eAAe,aAAa,OAAO,KAAK,wBAAK,YAAA,EAAW,SAAQ,SAAS,UAAA,OAAO,MAAA,CAAM;AAAA,YACvF,oBAAC,cAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,aAAa,OAAO,KAAK,EAAA,CAAE;AAAA,UAAA,EAAA,CACrF;AAAA,QAAA;AAAA,QANC,OAAO;AAAA,MAAA,CASnB;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"MultiSelectColumnFilter.js","sources":["../../../src/DataTable/ColumnFilters/MultiSelectColumnFilter.jsx"],"sourcesContent":["// Filtro de opciones de una columna.\n//\n// Dos cosas lo separan de un multi-select cualquiera:\n//   - las opciones NO salen de las filas visibles: salen de las FACETAS que el servidor calcula sobre el resultado\n//     COMPLETO (ofrecer solo lo que aparece en las primeras 25 filas convierte el filtro en adorno);\n//   - cada opción trae su conteo, que es lo que deja decidir si vale la pena filtrar.\n//\n// Desde ocho opciones aparece una caja para buscar entre ellas.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMultiSelectFilter con defaultProps y\n// styleOverrides de sus partes: list, option.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormControlLabel from '@mui/material/FormControlLabel';\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';\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.CalcitaMultiSelectFilter)\nconst THEME_NAME = 'CalcitaMultiSelectFilter';\nconst MultiList = piecePart(THEME_NAME, 'List', Stack);\nconst MultiOption = piecePart(THEME_NAME, 'Option', Stack);\n\nconst SEARCHABLE_FROM_OPTIONS = 8;\n\n/**\n * @param {object} props\n * @param {string[]} [props.value]\n * @param {(value: string[]) => void} props.onChange\n * @param {Array<{value: string, total: number}>} [props.options] faceta del servidor\n * @param {(value: string) => import('react').ReactNode} [props.renderOption] cómo se lee el valor (diccionario)\n */\nfunction MultiSelectColumnFilterContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMultiSelectFilter.defaultProps) y encima lo que llega aquí\n    const {value = [], onChange, options = [], renderOption, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table');\n    const {formatNumber} = useFormatters();\n    const [searchText, setSearchText] = useState('');\n\n    const toggleOption = (optionValue) => onChange(value.includes(optionValue)\n        ? value.filter((currentValue) => currentValue !== optionValue)\n        : [...value, optionValue]);\n\n    const isSearchable = options.length >= SEARCHABLE_FROM_OPTIONS;\n    const visibleOptions = isSearchable && searchText\n        ? options.filter((option) => String(option.value).toLowerCase().includes(searchText.toLowerCase()))\n        : options;\n\n    return (\n        <Stack spacing={1}>\n            {isSearchable && (\n                <TextField size=\"small\" autoFocus fullWidth placeholder={t('options.searchPlaceholder')} value={searchText}\n                           onChange={(event) => setSearchText(event.target.value)} />\n            )}\n            <MultiList ownSx={{maxHeight: 300, overflowY: 'auto'}}>\n                {options.length === 0 && (\n                    <Typography variant=\"caption\" color=\"text.secondary\">{t('options.empty')}</Typography>\n                )}\n                {options.length > 0 && visibleOptions.length === 0 && (\n                    <Typography variant=\"caption\" color=\"text.secondary\">{t('options.noMatch', {text: searchText})}</Typography>\n                )}\n                {visibleOptions.map((option) => (\n                    <FormControlLabel\n                        key={option.value}\n                        control={<Checkbox size=\"small\" checked={value.includes(option.value)} onChange={() => toggleOption(option.value)} />}\n                        label={(\n                            <MultiOption direction=\"row\" spacing={0.75} ownSx={{alignItems: 'center'}}>\n                                {renderOption ? renderOption(option.value) : <Typography variant=\"body2\">{option.value}</Typography>}\n                                <Typography variant=\"caption\" color=\"text.secondary\">{formatNumber(option.total)}</Typography>\n                            </MultiOption>\n                        )}\n                    />\n                ))}\n            </MultiList>\n        </Stack>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst MultiSelectColumnFilter = withPieceSlots(MultiSelectColumnFilterContent, THEME_NAME);\nexport default MultiSelectColumnFilter;\n"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,KAAK;AACrD,MAAM,cAAc,UAAU,YAAY,UAAU,KAAK;AAEzD,MAAM,0BAA0B;AAShC,SAAS,+BAA+B,OAAO;AAE3C,QAAM,EAAC,QAAQ,IAAI,UAAU,UAAU,CAAA,GAAI,cAAc,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC3G,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,EAAC,aAAA,IAAgB,cAAA;AACvB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAE/C,QAAM,eAAe,CAAC,gBAAgB,SAAS,MAAM,SAAS,WAAW,IACnE,MAAM,OAAO,CAAC,iBAAiB,iBAAiB,WAAW,IAC3D,CAAC,GAAG,OAAO,WAAW,CAAC;AAE7B,QAAM,eAAe,QAAQ,UAAU;AACvC,QAAM,iBAAiB,gBAAgB,aACjC,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,KAAK,EAAE,cAAc,SAAS,WAAW,YAAA,CAAa,CAAC,IAChG;AAEN,SACI,qBAAC,OAAA,EAAM,SAAS,GACX,UAAA;AAAA,IAAA,gBACG;AAAA,MAAC;AAAA,MAAA;AAAA,QAAU,MAAK;AAAA,QAAQ,WAAS;AAAA,QAAC,WAAS;AAAA,QAAC,aAAa,EAAE,2BAA2B;AAAA,QAAG,OAAO;AAAA,QACrF,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpE,qBAAC,aAAU,OAAO,EAAC,WAAW,KAAK,WAAW,UACzC,UAAA;AAAA,MAAA,QAAQ,WAAW,KAChB,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,EAAE,eAAe,EAAA,CAAE;AAAA,MAE5E,QAAQ,SAAS,KAAK,eAAe,WAAW,yBAC5C,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,EAAE,mBAAmB,EAAC,MAAM,WAAA,CAAW,GAAE;AAAA,MAElG,eAAe,IAAI,CAAC,WACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEG,SAAS,oBAAC,UAAA,EAAS,MAAK,SAAQ,SAAS,MAAM,SAAS,OAAO,KAAK,GAAG,UAAU,MAAM,aAAa,OAAO,KAAK,GAAG;AAAA,UACnH,OACI,qBAAC,aAAA,EAAY,WAAU,OAAM,SAAS,MAAM,OAAO,EAAC,YAAY,SAAA,GAC3D,UAAA;AAAA,YAAA,eAAe,aAAa,OAAO,KAAK,wBAAK,YAAA,EAAW,SAAQ,SAAS,UAAA,OAAO,MAAA,CAAM;AAAA,YACvF,oBAAC,cAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,aAAa,OAAO,KAAK,EAAA,CAAE;AAAA,UAAA,EAAA,CACrF;AAAA,QAAA;AAAA,QANC,OAAO;AAAA,MAAA,CASnB;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AAGA,MAAM,0BAA0B,eAAe,gCAAgC,UAAU;"}

package/dist/DataTable/ColumnFilters/SortableFilterHeader.js

@@ -7,7 +7,7 @@ import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import HeaderFilterPopover from "./HeaderFilterPopover.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 = "CalcitaSortableFilterHeader";
 const SortableTitle = piecePart(THEME_NAME, "Title", Typography);
@@ -15,7 +15,7 @@ const SortableRoot = piecePart(THEME_NAME, "Root", Stack);
 const SortableSortButton = piecePart(THEME_NAME, "SortButton", ButtonBase);
 const SortableSortIndicator = piecePart(THEME_NAME, "SortIndicator", Box);
 const SortableClearButton = piecePart(THEME_NAME, "ClearButton", ButtonBase);
-function SortableFilterHeader(props) {
+function SortableFilterHeaderContent(props) {
   const {
     label,
     sortable = true,
@@ -59,6 +59,7 @@ function SortableFilterHeader(props) {
     filterable && /* @__PURE__ */ jsx(HeaderFilterPopover, { activeCount, onClear, children })
   ] });
 }
+const SortableFilterHeader = withPieceSlots(SortableFilterHeaderContent, THEME_NAME);
 export {
   SortableFilterHeader as default
 };

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

@@ -1,35 +1,88 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { useMemo, useRef, useEffect } from "react";
 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 useMediaQuery from "@mui/material/useMediaQuery";
+import { List } from "react-window";
+import { pageNumbersOf, filterPages } from "./goToPageOptions.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { useFormatters } from "../toolkit/useFormatters.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaGoToPage";
 const GoToRoot = piecePart(THEME_NAME, "Root", Stack);
 const GoToField = piecePart(THEME_NAME, "Field", Autocomplete);
-const RENDER_LIMIT = 100;
-function filterPages(pageNumbers, { inputValue }) {
-  const typedText = inputValue.trim();
-  if (!typedText) {
-    return pageNumbers.slice(0, RENDER_LIMIT);
-  }
-  const startingWith = pageNumbers.filter((pageNumber) => String(pageNumber).startsWith(typedText));
-  const containing = pageNumbers.filter((pageNumber) => !String(pageNumber).startsWith(typedText) && String(pageNumber).includes(typedText));
-  return [...startingWith, ...containing].slice(0, RENDER_LIMIT);
+const OPTION_HEIGHT = 36;
+const PHONE_OPTION_HEIGHT = 48;
+const LISTBOX_MAX_HEIGHT = 240;
+const LISTBOX_PADDING = 8;
+const OVERSCAN_ROWS = 5;
+function PageOption({ index, style, pageOptions }) {
+  const [{ key, ...optionProps }, pageNumber] = pageOptions[index];
+  return /* @__PURE__ */ jsx(Typography, { component: "li", ...optionProps, noWrap: true, style: { ...style, top: (style.top ?? 0) + LISTBOX_PADDING }, children: pageNumber }, key);
+}
+function PageListbox({ children: pageOptions, ref, pageCount, pageListRef, pageIndexesRef, className, style, ...listboxProps }) {
+  const isWideScreen = useMediaQuery((theme) => theme.breakpoints.up("sm"), { noSsr: true });
+  const optionHeight = isWideScreen ? OPTION_HEIGHT : PHONE_OPTION_HEIGHT;
+  const listHeight = Math.min(pageOptions.length * optionHeight, LISTBOX_MAX_HEIGHT);
+  useEffect(() => {
+    const pageIndexes = /* @__PURE__ */ new Map();
+    pageOptions.forEach(([, pageNumber], pageIndex) => pageIndexes.set(pageNumber, pageIndex));
+    pageIndexesRef.current = pageIndexes;
+  }, [pageOptions, pageIndexesRef]);
+  const placedListElementsRef = useRef(/* @__PURE__ */ new WeakSet());
+  const keepListApi = (listApi) => {
+    pageListRef.current = listApi;
+    const listElement = listApi?.element;
+    if (!listElement || placedListElementsRef.current.has(listElement)) {
+      return;
+    }
+    placedListElementsRef.current.add(listElement);
+    if (pageOptions.length !== pageCount) {
+      return;
+    }
+    const selectedIndex = pageOptions.findIndex(([optionProps]) => optionProps["aria-selected"] === true);
+    if (selectedIndex >= 0) {
+      listApi.scrollToRow({ index: selectedIndex, align: "center" });
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { ref, ...listboxProps, children: /* @__PURE__ */ jsx(
+    List,
+    {
+      role: "none",
+      className,
+      listRef: keepListApi,
+      rowCount: pageOptions.length,
+      rowHeight: optionHeight,
+      rowComponent: PageOption,
+      rowProps: { pageOptions },
+      style: { height: listHeight + 2 * LISTBOX_PADDING, width: "100%", boxSizing: "border-box" },
+      overscanCount: OVERSCAN_ROWS,
+      tagName: "ul"
+    },
+    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);
   const { formatNumber } = useFormatters();
+  const pageNumbers = useMemo(() => pageNumbersOf(pageCount), [pageCount]);
+  const pageListRef = useRef(null);
+  const pageIndexesRef = useRef(/* @__PURE__ */ new Map());
   if (pageCount <= 1) {
     return null;
   }
-  const pageNumbers = Array.from({ length: pageCount }, (unused, position) => position + 1);
+  const scrollToHighlightedPage = (event, highlightedPageNumber) => {
+    const highlightedIndex = pageIndexesRef.current.get(highlightedPageNumber);
+    if (highlightedIndex !== void 0) {
+      pageListRef.current?.scrollToRow({ index: highlightedIndex, align: "auto" });
+    }
+  };
   return /* @__PURE__ */ jsxs(GoToRoot, { direction: "row", spacing: 0.75, ownSx: { alignItems: "baseline" }, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: t("goToPage.page") }),
     /* @__PURE__ */ jsx(
@@ -37,6 +90,7 @@ function GoToPage(props) {
       {
         size: "small",
         disableClearable: true,
+        disableListWrap: true,
         openOnFocus: true,
         autoHighlight: true,
         options: pageNumbers,
@@ -44,13 +98,15 @@ function GoToPage(props) {
         value: page + 1,
         isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
         getOptionLabel: (option) => String(option),
+        renderOption: (optionProps, pageNumber) => [optionProps, pageNumber],
+        onHighlightChange: scrollToHighlightedPage,
         onChange: (event, selectedPageNumber) => {
           if (selectedPageNumber !== null && selectedPageNumber - 1 !== page) {
             onChange(selectedPageNumber - 1);
           }
         },
         ownSx: { width: 78, "& .MuiAutocomplete-endAdornment": { right: 0 } },
-        slotProps: { listbox: { sx: { maxHeight: 240 } } },
+        slotProps: { listbox: { component: PageListbox, pageCount, pageListRef, pageIndexesRef } },
         renderInput: (params) => /* @__PURE__ */ jsx(
           TextField,
           {
@@ -64,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// 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// 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 {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';\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.CalcitaGoToPage)\nconst THEME_NAME = 'CalcitaGoToPage';\nconst GoToRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst GoToField = piecePart(THEME_NAME, 'Field', Autocomplete);\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(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\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        <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                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                ownSx={{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        </GoToRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,MAAM,aAAa;AACnB,MAAM,WAAW,UAAU,YAAY,QAAQ,KAAK;AACpD,MAAM,YAAY,UAAU,YAAY,SAAS,YAAY;AAG7D,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,OAAO;AAEpC,QAAM,EAAC,MAAM,WAAW,UAAU,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC3F,mBAAiB,YAAY,YAAY;AACzC,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,UAAA,EAAS,WAAU,OAAM,SAAS,MAAM,OAAO,EAAC,YAAY,WAAA,GACzD,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,OAAO,EAAC,OAAO,IAAI,mCAAmC,EAAC,OAAO,IAAC;AAAA,QAC/D,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// 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":";;;;;;;;;;;;;;AAgCA,MAAM,aAAa;AACnB,MAAM,WAAW,UAAU,YAAY,QAAQ,KAAK;AACpD,MAAM,YAAY,UAAU,YAAY,SAAS,YAAY;AAI7D,MAAM,gBAAgB;AACtB,MAAM,sBAAsB;AAE5B,MAAM,qBAAqB;AAC3B,MAAM,kBAAkB;AAExB,MAAM,gBAAgB;AAOtB,SAAS,WAAW,EAAC,OAAO,OAAO,eAAc;AAC7C,QAAM,CAAC,EAAC,KAAK,GAAG,eAAc,UAAU,IAAI,YAAY,KAAK;AAE7D,6BACK,YAAA,EAAqB,WAAU,MAAM,GAAG,aAAa,QAAM,MAAC,OAAO,EAAC,GAAG,OAAO,MAAM,MAAM,OAAO,KAAK,gBAAA,GAClG,wBADY,GAEjB;AAER;AAiBA,SAAS,YAAY,EAAC,UAAU,aAAa,KAAK,WAAW,aAAa,gBAAgB,WAAW,OAAO,GAAG,aAAA,GAAe;AAC1H,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY,GAAG,IAAI,GAAG,EAAC,OAAO,KAAA,CAAK;AACvF,QAAM,eAAe,eAAe,gBAAgB;AACpD,QAAM,aAAa,KAAK,IAAI,YAAY,SAAS,cAAc,kBAAkB;AAGjF,YAAU,MAAM;AACZ,UAAM,kCAAkB,IAAA;AACxB,gBAAY,QAAQ,CAAC,CAAA,EAAG,UAAU,GAAG,cAAc,YAAY,IAAI,YAAY,SAAS,CAAC;AACzF,mBAAe,UAAU;AAAA,EAC7B,GAAG,CAAC,aAAa,cAAc,CAAC;AAOhC,QAAM,wBAAwB,OAAO,oBAAI,SAAS;AAClD,QAAM,cAAc,CAAC,YAAY;AAC7B,gBAAY,UAAU;AACtB,UAAM,cAAc,SAAS;AAC7B,QAAI,CAAC,eAAe,sBAAsB,QAAQ,IAAI,WAAW,GAAG;AAChE;AAAA,IACJ;AACA,0BAAsB,QAAQ,IAAI,WAAW;AAC7C,QAAI,YAAY,WAAW,WAAW;AAClC;AAAA,IACJ;AACA,UAAM,gBAAgB,YAAY,UAAU,CAAC,CAAC,WAAW,MAAM,YAAY,eAAe,MAAM,IAAI;AACpG,QAAI,iBAAiB,GAAG;AACpB,cAAQ,YAAY,EAAC,OAAO,eAAe,OAAO,UAAS;AAAA,IAC/D;AAAA,EACJ;AAEA,SACI,oBAAC,OAAA,EAAI,KAAW,GAAG,cACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAGG,MAAK;AAAA,MACL;AAAA,MACA,SAAS;AAAA,MAGT,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,cAAc;AAAA,MACd,UAAU,EAAC,YAAA;AAAA,MACX,OAAO,EAAC,QAAQ,aAAa,IAAI,iBAAiB,OAAO,QAAQ,WAAW,aAAA;AAAA,MAC5E,eAAe;AAAA,MACf,SAAQ;AAAA,IAAA;AAAA,IAPH,YAAY;AAAA,EAAA,GASzB;AAER;AASA,SAAS,gBAAgB,OAAO;AAE5B,QAAM,EAAC,MAAM,WAAW,UAAU,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC3F,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,EAAC,aAAA,IAAgB,cAAA;AAEvB,QAAM,cAAc,QAAQ,MAAM,cAAc,SAAS,GAAG,CAAC,SAAS,CAAC;AACvE,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,iBAAiB,OAAO,oBAAI,KAAK;AAGvC,MAAI,aAAa,GAAG;AAChB,WAAO;AAAA,EACX;AAGA,QAAM,0BAA0B,CAAC,OAAO,0BAA0B;AAC9D,UAAM,mBAAmB,eAAe,QAAQ,IAAI,qBAAqB;AACzE,QAAI,qBAAqB,QAAW;AAChC,kBAAY,SAAS,YAAY,EAAC,OAAO,kBAAkB,OAAO,QAAO;AAAA,IAC7E;AAAA,EACJ;AAEA,SACI,qBAAC,UAAA,EAAS,WAAU,OAAM,SAAS,MAAM,OAAO,EAAC,YAAY,WAAA,GACzD,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,iBAAe;AAAA,QACf,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,QAEzC,cAAc,CAAC,aAAa,eAAe,CAAC,aAAa,UAAU;AAAA,QACnE,mBAAmB;AAAA,QACnB,UAAU,CAAC,OAAO,uBAAuB;AACrC,cAAI,uBAAuB,QAAQ,qBAAqB,MAAM,MAAM;AAChE,qBAAS,qBAAqB,CAAC;AAAA,UACnC;AAAA,QACJ;AAAA,QACA,OAAO,EAAC,OAAO,IAAI,mCAAmC,EAAC,OAAO,IAAC;AAAA,QAC/D,WAAW,EAAC,SAAS,EAAC,WAAW,aAAa,WAAW,aAAa,iBAAc;AAAA,QACpF,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;AAGA,MAAM,WAAW,eAAe,iBAAiB,UAAU;"}