@stackcraftmx/calcita 0.47.0 → 0.52.0

package/cli/checkTexts.js

@@ -0,0 +1,266 @@
+// calcita check:texts — revisa los textos del proyecto sin abrir la app:
+//   1. que cada t('llave') escrita tal cual en el código exista en todos los idiomas (con su namespace: el de
+//      useToolkitTranslation('orders') del archivo, o el que trae la llave, 'common:actions.save');
+//   2. que cada idioma tenga las mismas llaves que los demás (lo que falta en inglés se pintaría en español… o como llave).
+// Sin esto, una llave que no existe se descubre cuando alguien la ve en la pantalla («profile:tabs.documents»).
+//
+// Lo que NO revisa: las llaves armadas con una variable (t(`status.${value}`)) ni las que llevan defaultValue (son opcionales).
+// Para esas está el aviso de Calcita en la consola (onMissingText de ToolkitProvider).
+//
+// Lee los archivos de textos del proyecto (src/**/*Texts.js y src/**/texts.js: cada uno exporta {es: {...}, en: {...}}) con
+// node; el que los junta (con import.meta.glob) se salta. Si uno importa otro archivo, puede ser con ruta relativa o con el
+// alias @/, que aquí apunta a la carpeta del código, como en vite.config.js (trampa pagada: un texts.js que reexportaba con
+// @/ no se leía y sus 400 llaves salían como faltantes). Los namespaces de Calcita (common, table, validation…) salen de su dist/.
+//
+// Un verde falso es peor que un rojo: sin la carpeta, sin ningún archivo de textos o con uno que no se pudo leer, la revisión
+// sale con problema y no compara llaves (con un archivo sin leer, todas las suyas saldrían como faltantes).
+//
+// Solo node, sin dependencias (el CLI corre antes de que el proyecto tenga nada instalado): function (regla de la casa).
+// Pruebas en checkTexts.test.js.
+import {readdir, readFile, stat} from 'node:fs/promises';
+import * as nodeModule from 'node:module';
+import {join, relative} from 'node:path';
+import {pathToFileURL} from 'node:url';
+
+const SOURCE_EXTENSIONS = /\.(jsx?|tsx?)$/;
+const TEST_FILE = /\.test\.(jsx?|tsx?)$/;
+const TEXT_FILE = /(?:^|\/)(?:texts|[A-Za-z0-9]+Texts)\.js$/;
+const IGNORED_FOLDERS = new Set(['node_modules', 'dist', 'coverage', '.git']);
+// el namespace de un archivo: useToolkitTranslation('orders') o useToolkitTranslation(['orders', …])
+const NAMESPACE_CALL = /useToolkitTranslation\(\s*\[?\s*(['"])([\w-]+)\1/g;
+// una llave escrita tal cual: t('list.title') o t("common:actions.save"); con lo que sigue, para ver si trae defaultValue
+const KEY_CALL = /\bt\(\s*(['"])([^'"`$\n]+?)\1([^)]{0,200})/g;
+const PLURAL_SUFFIXES = ['', '_zero', '_one', '_two', '_few', '_many', '_other'];
+
+// la carpeta del código de la revisión en curso, para el alias @/ de los archivos de textos
+let aliasFolderUrl = null;
+let isAliasRegistered = false;
+
+/**
+ * Que node entienda @/ al leer los archivos de textos, como Vite. Se registra una sola vez por proceso y lee aliasFolderUrl,
+ * la carpeta de la revisión en curso. registerHooks llegó en Node 22.15: con uno anterior, un archivo de textos que importe
+ * con @/ no se puede leer y se dice.
+ */
+function understandAlias() {
+    if (isAliasRegistered || typeof nodeModule.registerHooks !== 'function') {
+        return;
+    }
+    nodeModule.registerHooks({
+        resolve(specifier, context, nextResolve) {
+            if (aliasFolderUrl && specifier.startsWith('@/')) {
+                return nextResolve(new URL(specifier.slice(2), aliasFolderUrl).href, context);
+            }
+            return nextResolve(specifier, context);
+        },
+    });
+    isAliasRegistered = true;
+}
+
+/**
+ * Los archivos de una carpeta y sus subcarpetas, sin node_modules ni dist.
+ *
+ * @param {string} folder
+ * @returns {Promise<string[]>}
+ */
+async function filesOf(folder) {
+    const entries = await readdir(folder, {withFileTypes: true}).catch(() => []);
+    const nested = await Promise.all(entries.map(async (entry) => {
+        const path = join(folder, entry.name);
+        if (entry.isDirectory()) {
+            return IGNORED_FOLDERS.has(entry.name) ? [] : filesOf(path);
+        }
+        return [path];
+    }));
+    return nested.flat();
+}
+
+/**
+ * Suma los textos de un archivo a los de todos (por idioma y namespace, objetos por dentro). Aquí no truena con un repetido:
+ * lo anota, para decirlo junto con lo demás.
+ */
+function addTexts(combined, fileTexts, duplicates, fileName) {
+    const mergeInto = (target, added, place) => {
+        for (const [key, value] of Object.entries(added)) {
+            const isObject = value && typeof value === 'object';
+            const keyPath = [...place.path, key];
+            if (isObject && target[key] && typeof target[key] === 'object') {
+                mergeInto(target[key], value, {...place, path: keyPath});
+            } else if (Object.hasOwn(target, key)) {
+                duplicates.push(`«${place.namespace}:${keyPath.join('.')}» en ${place.language} (otra vez en ${fileName})`);
+            } else {
+                target[key] = isObject ? structuredClone(value) : value;
+            }
+        }
+    };
+    for (const [language, namespaces] of Object.entries(fileTexts)) {
+        combined[language] ??= {};
+        for (const [namespace, keys] of Object.entries(namespaces ?? {})) {
+            combined[language][namespace] ??= {};
+            mergeInto(combined[language][namespace], keys, {language, namespace, path: []});
+        }
+    }
+}
+
+/**
+ * ¿Parece un objeto de textos? ({es: {namespace: {...}}, en: {...}}: llaves de idioma con objetos adentro)
+ *
+ * @param {unknown} value
+ * @returns {boolean}
+ */
+function looksLikeTexts(value) {
+    return Boolean(value) && typeof value === 'object' && Object.keys(value).length > 0
+        && Object.entries(value).every(([language, namespaces]) => /^[a-z]{2}(-[A-Z]{2})?$/.test(language) && namespaces && typeof namespaces === 'object');
+}
+
+/** Lo que hay en un camino con puntos ('list.title') dentro de un objeto. */
+function valueAt(object, dottedKey) {
+    return dottedKey.split('.').reduce((current, step) => (current && typeof current === 'object' ? current[step] : undefined), object);
+}
+
+/** ¿Existe la llave (o su plural) en ese namespace? */
+function hasKey(namespaceTexts, key) {
+    return PLURAL_SUFFIXES.some((suffix) => typeof valueAt(namespaceTexts, `${key}${suffix}`) === 'string');
+}
+
+/** Todas las llaves con texto de un objeto, con puntos (para comparar idiomas); los plurales cuentan como su llave base. */
+function leafKeysOf(object, prefix = '') {
+    return Object.entries(object ?? {}).flatMap(([key, value]) => {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (value && typeof value === 'object') {
+            return leafKeysOf(value, path);
+        }
+        return [path.replace(/_(zero|one|two|few|many|other)$/, '')];
+    });
+}
+
+/**
+ * Los textos de Calcita (common, table, validation…), del dist/ del paquete que corre este CLI. Sin dist/ (el repo del paquete
+ * sin construir), ninguno: las llaves de esos namespaces no se revisan.
+ *
+ * @returns {Promise<Record<string, object>>}
+ */
+async function packageTextsOf() {
+    const texts = {};
+    for (const language of ['es', 'en']) {
+        try {
+            const module = await import(new URL(`../dist/locales/${language}.js`, import.meta.url).href);
+            texts[language] = module.default ?? {};
+        } catch {
+            return {};
+        }
+    }
+    return texts;
+}
+
+/**
+ * @param {object} options
+ * @param {string} options.projectRoot la carpeta del proyecto
+ * @param {string} [options.sourceFolder] dónde está el código (por omisión src; en Laravel, resources/js): `--source` del CLI
+ * @param {Record<string, object>} [options.packageTexts] los textos de Calcita (por omisión, los de su dist/)
+ * @returns {Promise<{problems: string[], checkedKeys: number, textFiles: string[], languages: string[], sourceFolder: string}>}
+ */
+export async function checkTexts({projectRoot, sourceFolder: askedFolder = 'src', packageTexts}) {
+    // 'resources/js/' y 'resources/js' son la misma carpeta (el mensaje la dice sin la diagonal de más)
+    const sourceFolder = askedFolder.replace(/[\\/]+$/, '');
+    const sourceRoot = join(projectRoot, sourceFolder);
+    const nothingChecked = {checkedKeys: 0, textFiles: [], languages: [], sourceFolder};
+    const isFolder = await stat(sourceRoot).then((found) => found.isDirectory(), () => false);
+    if (!isFolder) {
+        return {...nothingChecked, problems: [`No existe la carpeta ${sourceFolder}/ en el proyecto: no hay código que revisar (si está en otra, --source resources/js)`]};
+    }
+    const files = await filesOf(sourceRoot);
+    const problems = [];
+    aliasFolderUrl = `${pathToFileURL(sourceRoot).href}/`;
+    understandAlias();
+
+    // 1. los textos del proyecto
+    const projectTexts = {};
+    const duplicates = [];
+    const textFiles = files.filter((file) => TEXT_FILE.test(file.replaceAll('\\', '/')));
+    const readTextFiles = [];
+    const unreadTextFiles = [];
+    const addedTexts = new Set();
+    for (const file of textFiles) {
+        const fileName = relative(projectRoot, file);
+        // el que JUNTA los textos (appTexts.js, con el glob de Vite) no es un archivo de textos: se salta
+        if ((await readFile(file, 'utf8')).includes('import.meta.glob')) {
+            continue;
+        }
+        readTextFiles.push(fileName);
+        try {
+            const module = await import(pathToFileURL(file).href);
+            const exported = Object.values(module).filter(looksLikeTexts);
+            if (exported.length === 0) {
+                problems.push(`${fileName}: no exporta textos con la forma {es: {...}, en: {...}}`);
+            }
+            // el mismo objeto que otro archivo ya reexportó (texts.js que reexporta documentFileTexts.js) se suma una vez:
+            // node da el mismo objeto por archivo, y sumarlo dos veces lo haría pasar por repetido
+            exported.filter((fileTexts) => !addedTexts.has(fileTexts)).forEach((fileTexts) => {
+                addedTexts.add(fileTexts);
+                addTexts(projectTexts, fileTexts, duplicates, fileName);
+            });
+        } catch (error) {
+            unreadTextFiles.push(fileName);
+            const reason = error.message.split('\n')[0];
+            const hint = isAliasRegistered
+                ? 'revise lo que importa: otro archivo va con ruta relativa o con @/'
+                : 'si importa con @/, esta revisión necesita Node 22.15 o más';
+            problems.push(`${fileName}: no se pudo leer (${reason}); ${hint}`);
+        }
+    }
+    if (unreadTextFiles.length > 0) {
+        problems.push(`No revisé las llaves: sin ${unreadTextFiles.length === 1 ? 'ese archivo' : 'esos archivos'} de textos, sus llaves saldrían todas como faltantes`);
+        return {...nothingChecked, problems, textFiles: readTextFiles};
+    }
+    if (readTextFiles.length === 0) {
+        return {...nothingChecked, problems: [`No encontré archivos de textos (*Texts.js o texts.js) en ${sourceFolder}/: no hay con qué comparar (si el código está en otra carpeta, --source resources/js)`]};
+    }
+    problems.push(...duplicates.map((duplicate) => `texto repetido: ${duplicate}`));
+
+    const languages = Object.keys(projectTexts);
+    // 2. que cada idioma tenga las mismas llaves
+    for (const language of languages) {
+        for (const otherLanguage of languages.filter((other) => other !== language)) {
+            for (const namespace of Object.keys(projectTexts[language])) {
+                const otherKeys = new Set(leafKeysOf(projectTexts[otherLanguage][namespace]));
+                for (const key of new Set(leafKeysOf(projectTexts[language][namespace]))) {
+                    if (!otherKeys.has(key)) {
+                        problems.push(`«${namespace}:${key}» está en ${language} y falta en ${otherLanguage}`);
+                    }
+                }
+            }
+        }
+    }
+
+    // 3. cada t('llave') escrita tal cual
+    const calcitaTexts = packageTexts ?? await packageTextsOf();
+    const textsOf = (language, namespace) => projectTexts[language]?.[namespace] ?? calcitaTexts[language]?.[namespace];
+    let checkedKeys = 0;
+    for (const file of files.filter((path) => SOURCE_EXTENSIONS.test(path) && !TEST_FILE.test(path))) {
+        const code = await readFile(file, 'utf8');
+        const fileNamespaces = [...code.matchAll(NAMESPACE_CALL)].map((match) => match[2]);
+        for (const match of code.matchAll(KEY_CALL)) {
+            const [, , key, rest] = match;
+            // con defaultValue la llave es opcional; una llave con espacios es un texto, no una llave
+            if (/defaultValue/.test(rest) || /\s/.test(key)) {
+                continue;
+            }
+            const line = code.slice(0, match.index).split('\n').length;
+            const place = `${relative(projectRoot, file)}:${line}`;
+            const [explicitNamespace, plainKey] = key.includes(':') ? key.split(':', 2) : [null, key];
+            const candidates = explicitNamespace ? [explicitNamespace] : fileNamespaces;
+            if (candidates.length === 0) {
+                continue;
+            }
+            checkedKeys += 1;
+            for (const language of languages.length > 0 ? languages : ['es']) {
+                const found = candidates.some((namespace) => hasKey(textsOf(language, namespace), plainKey));
+                if (!found) {
+                    problems.push(`${place}  «${explicitNamespace ? key : `${candidates[0]}:${key}`}» no existe en ${language}`);
+                }
+            }
+        }
+    }
+
+    return {problems, checkedKeys, textFiles: readTextFiles, languages, sourceFolder};
+}

package/cli/packageVersions.js

@@ -7,7 +7,7 @@ import {readFile} from 'node:fs/promises';
 // Lo que el paquete no usa, así que no está en sus devDependencies: i18next (su adaptador recibe la instancia del proyecto;
 // versión con más de dos semanas publicada al escogerla, pnpm espera un día antes de instalar una recién salida), qrcode
 // (el QR de la cuenta de demostración; la misma versión que usan los ejemplos) y las pruebas de pantalla del proyecto
-// (Vitest con jsdom y Testing Library), en las versiones que ya se probaron juntas con el mismo Vite 7 y React 19
+// (Vitest con jsdom y Testing Library), en las versiones que ya se probaron juntas con el mismo Vite 7 y React 19, y ESLint
 const VERSIONS_NOT_IN_PACKAGE = Object.freeze({
     i18next: '26.4.2',
     qrcode: '1.5.4',
@@ -16,6 +16,11 @@ const VERSIONS_NOT_IN_PACKAGE = Object.freeze({
     '@testing-library/dom': '10.4.2',
     '@testing-library/react': '16.3.3',
     '@testing-library/user-event': '14.6.7',
+    // ESLint del proyecto nuevo (pnpm lint): versiones con más de dos semanas publicadas al escogerlas (03/11/2026)
+    eslint: '10.13.0',
+    '@eslint/js': '10.0.1',
+    'eslint-plugin-react-hooks': '7.1.1',
+    globals: '17.13.0',
 });
 
 /**

package/cli/projectFiles.js

@@ -15,8 +15,10 @@ const BASE_DEPENDENCIES = Object.freeze([
 const HOOK_FORM_DEPENDENCIES = Object.freeze(['@hookform/resolvers', 'react-hook-form']);
 // la cuenta: las llaves de acceso (las pide @stackcraftmx/calcita/account) y el QR de la demostración
 const ACCOUNT_DEPENDENCIES = Object.freeze(['@simplewebauthn/browser', 'qrcode']);
-// las pruebas de pantalla (pnpm test): Vitest con jsdom como navegador y Testing Library para picar como una persona
+// las pruebas de pantalla (pnpm test): Vitest con jsdom como navegador y Testing Library para picar como una persona; y ESLint
+// (pnpm lint), que caza al escribir lo que si no se ve en la pantalla del cliente (una variable que no existe: «t is not defined»)
 const DEV_DEPENDENCIES = Object.freeze([
+    '@eslint/js', 'eslint', 'eslint-plugin-react-hooks', 'globals',
     '@testing-library/dom', '@testing-library/react', '@testing-library/user-event', '@vitejs/plugin-react', 'jsdom', 'vite', 'vitest',
 ]);
 
@@ -43,7 +45,7 @@ export function packageJsonOf({packageName, answers, calcitaPackage}) {
         version: '0.1.0',
         private: true,
         type: 'module',
-        scripts: {dev: 'vite', build: 'vite build', preview: 'vite preview', test: 'vitest run'},
+        scripts: {dev: 'vite', build: 'vite build', preview: 'vite preview', test: 'vitest run', lint: 'eslint .', 'check:texts': 'calcita check:texts'},
         dependencies: sortedByKey({'@stackcraftmx/calcita': `^${calcitaPackage.version}`, ...versionsOf(dependencyNames, calcitaPackage)}),
         devDependencies: sortedByKey(versionsOf([...DEV_DEPENDENCIES], calcitaPackage)),
         engines: {node: '>=22'},

package/cli/templates/project/README.md.tpl

@@ -55,6 +55,17 @@ clic o escribe con `user`. Pasa por lo mismo que la persona (permisos, menú, te
 módulo de ejemplo, y `make:module` arma la de cada módulo nuevo. Corren con Vitest y jsdom (un navegador de mentira): lo que
 depende de medir o pintar se revisa en un navegador de verdad.
 
+## Revisar antes de subir
+
+```bash
+pnpm lint          # ESLint: una variable que no existe, los hooks de React fuera de orden
+pnpm check:texts   # que cada t('llave') exista en todos los idiomas y que los idiomas tengan las mismas llaves
+```
+
+Las dos cazan al escribir lo que si no se descubre en la pantalla del cliente («t is not defined», «orders:tabs.documents»).
+Una llave armada con una variable no se puede revisar así: para esas, Calcita avisa en la consola del navegador (y
+`onMissingText` de `ToolkitProvider` se lo dice a su proyecto).
+
 ## Publicar una versión nueva
 
 `pnpm build` deja la app en `dist/`, con `version.json` (la versión de esa compilación). La app publicada lo vuelve a leer al
@@ -81,7 +92,16 @@ location /ventas/ {
 }
 ```
 
-Con otro prefijo se vuelve a construir.
+Con otro prefijo se vuelve a construir… o, si el prefijo lo decide el servidor al servir la página (Laravel con
+`config('app.url')`, un proxy con su ruta), se construye una sola vez con archivos relativos y la página trae su `<base>`:
+
+```bash
+ASSET_URL=./ pnpm build
+```
+
+```html
+<base href="/ventas/">   <!-- lo pone el servidor en index.html; el router y publicUrlOf lo leen al abrir -->
+```
 
 ## Crecer la app con el CLI
 

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

@@ -0,0 +1,27 @@
+// Las reglas de ESLint del proyecto (pnpm lint): lo que se caza al escribir y no en la pantalla del cliente. La que más
+// ahorra: no-undef, una variable que no existe (un `t` que una función auxiliar se quedó sin recibir truena con «t is not
+// defined» hasta que alguien abre esa pantalla). Y las de los hooks de React (en el orden de siempre, con sus dependencias).
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+
+export default [
+    {ignores: ['dist/', 'coverage/']},
+    js.configs.recommended,
+    reactHooks.configs.flat.recommended,
+    {
+        files: ['**/*.{js,jsx}'],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            globals: {...globals.browser},
+            parserOptions: {ecmaFeatures: {jsx: true}},
+        },
+        rules: {
+            // un parámetro que no se usa a propósito lleva «unused» en el nombre (unusedEvent)
+            'no-unused-vars': ['error', {argsIgnorePattern: '^unused', varsIgnorePattern: '^unused', caughtErrors: 'none'}],
+        },
+    },
+    // la configuración y las pruebas corren en node
+    {files: ['*.config.js', 'src/testing/**', '**/*.test.{js,jsx}'], languageOptions: {globals: {...globals.node}}},
+];

package/cli/templates/project/src/app/appTexts.js.tpl

@@ -4,7 +4,8 @@
 //
 // OJO: constante de módulo. ToolkitProvider vuelve a configurar todo cuando cambian sus textos; un objeto nuevo en cada
 // pintada lo haría en cada pintada.
-import {combineTexts} from '@/app/combineTexts.js';
+// combineTexts es del paquete: un texto repetido entre módulos truena y los objetos de adentro (validation.fields) se suman
+import {combineTexts} from '@stackcraftmx/calcita';
 import {shellTexts} from '@/app/shellTexts.js';
 
 const MODULE_TEXT_FILES = import.meta.glob('@/modules/*/*Texts.js', {eager: true});

package/cli/templates/project/src/core/publicPaths.js.tpl

@@ -5,13 +5,21 @@
 // OJO: una dirección escrita a mano desde la raíz ('/favicon.svg', '/version.json') funciona en la raíz y se rompe detrás del
 // proxy: se arma con publicUrlOf.
 //
+// El prefijo también puede llegar al SERVIR la página, sin volver a construir: si la página trae <base href="/ventas/"> (Laravel
+// lo pone con config('app.url'), un proxy con su ruta), manda ese (documentBasePath). Para eso se construye con ASSET_URL=./
+// (archivos relativos a la página). Sin <base>, todo sigue como arriba.
+//
 // Funciones puras, no renderizan: function (regla de la casa).
 
+import {documentBasePath} from '@stackcraftmx/calcita';
+
 // en las pruebas de node no hay import.meta.env (es de Vite): ahí, la raíz
 const APP_BASE_URL = import.meta.env?.BASE_URL ?? '/';
+// el prefijo que puso el servidor en <base href> ('' en la raíz), o null si la página no trae <base>
+const SERVED_BASE_PATH = documentBasePath();
 
 /** El prefijo como lo pide el router: '/ventas' (sin la diagonal del final) o '/'. */
-export const ROUTER_BASENAME = APP_BASE_URL.replace(/\/$/, '') || '/';
+export const ROUTER_BASENAME = (SERVED_BASE_PATH ?? APP_BASE_URL.replace(/\/$/, '')) || '/';
 
 /**
  * La dirección de un archivo de public/ con el prefijo: 'favicon.svg' → '/ventas/favicon.svg'.
@@ -20,5 +28,5 @@ export const ROUTER_BASENAME = APP_BASE_URL.replace(/\/$/, '') || '/';
  * @returns {string}
  */
 export function publicUrlOf(path) {
-    return `${APP_BASE_URL}${path}`;
+    return SERVED_BASE_PATH === null ? `${APP_BASE_URL}${path}` : `${SERVED_BASE_PATH}/${path}`;
 }

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}/` : '/';
 };
 

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
 };