@stackcraftmx/calcita 0.27.0 → 0.30.0

package/README.md

@@ -263,6 +263,16 @@ navegador: `isAndroidDevice({userAgent: headers.get('user-agent')})`. Sirve para
 const theme = isAndroidDevice() ? createToolkitTheme({look: THEME_LOOK.minimal}) : createToolkitTheme({glass: true});
 ```
 
+Los campos de captura (con vidrio, con el minimalista y dentro de `FormSection`) traen el gris de relleno de Apple. Para que
+se vean como los de su sistema: `fields`, por modo, con el relleno (`fill`), el relleno con el cursor encima (`hoverFill`),
+la orilla (`border`) y la orilla con el cursor encima (`hoverBorder`); y sus esquinas (`radius`). Lo que no se pase se queda
+como lo trae el estilo (`FIELD_TONES`). Van en la paleta de cada modo (`palette.field`): cambian solos con el modo y también
+se pueden escribir en `colorSchemes`.
+
+```js
+createToolkitTheme({glass: true, fields: {radius: 8, light: {fill: '#FFFFFF', hoverFill: '#FFFFFF', border: '#C4CDD5'}}});
+```
+
 El minimalista separa las superficies por su tono con los grises de Apple. Para pintarlo con los colores de la marca:
 `minimalTones`, por modo, con el fondo de la página (`default`), las tarjetas (`paper`), el relleno de campos, grupos y
 botones sin color (`fill`) y lo que flota, como la barra del teléfono (`floating`). Lo que no se pase se queda con el gris
@@ -280,6 +290,145 @@ Para lo que el proyecto quiera hacer flotar (los botones encima de un mapa, una
 de vidrio si el tema lo trae y una tarjeta con sombra si no. Para algo propio: `sx={(theme) => glassStylesOf(theme)}` e
 `isGlassTheme(theme)`. Cada ajuste vive en su archivo (`src/theme/components/MuiButton.js`…).
 
+Todas las piezas de Calcita se cambian desde el tema del proyecto igual que las de MUI: con su nombre en `components`,
+`styleOverrides` para cada parte y `defaultProps`. El orden, de abajo hacia arriba: el estilo de Calcita, encima el del
+tema del proyecto y al final el `sx` que pase la pantalla. Los números se leen como en MUI (`borderRadius: 4` son 4 px).
+Sirve con `createToolkitTheme` y con cualquier tema de MUI (el que ya tenía un sistema, tal cual): así un sistema puede
+dejar Calcita con su propia cara, parte por parte.
+
+<details>
+<summary>Las piezas, con su nombre en el tema y sus partes</summary>
+
+| Nombre en el tema | Partes |
+| --- | --- |
+| `CalcitaAccountMenu` | `button`, `avatar`, `header`, `name`, `settings` |
+| `CalcitaAccountSecurity` | `title`, `form` |
+| `CalcitaActionsMenu` | `item`, `itemIcon` |
+| `CalcitaActivityLog` | `itemIcon` |
+| `CalcitaAppearanceSettings` | `selectSection`, `section`, `sectionLabel`, `option`, `divider` |
+| `CalcitaAppLayout` | `skipLink`, `brand`, `brandLogo`, `brandText`, `brandName`, `brandCaption`, `titleArea`, `phoneTitle`, `desktopTitle`, `railBrand`, `railLogo`, `collapseButton`, `root`, `scrollEdge`, `bar`, `toolbar`, `menuButton`, `spacer`, `tools`, `progress`, `body`, `drawer`, `main`, `phoneSlot`, `content`, `phoneDrawer` |
+| `CalcitaAuditTrailDialog` | `description` |
+| `CalcitaAuthLayout` | `root`, `tools`, `body`, `brand`, `logo`, `brandName`, `card`, `description`, `content`, `footer` |
+| `CalcitaBarActions` | `group` |
+| `CalcitaBarCapsule` | `root` |
+| `CalcitaBarList` | `row`, `chart` |
+| `CalcitaBarSearch` | `field` |
+| `CalcitaCalendarHeatmap` | `header`, `toggle`, `tableArea`, `dateCell`, `valueCell`, `descriptionCell`, `gridArea`, `grid`, `monthLabel`, `week`, `dayLabel`, `cell`, `legend`, `legendLess`, `legendCell`, `legendMore` |
+| `CalcitaChart` | `tableArea`, `legend`, `legendItem`, `legendLine`, `legendSwatch`, `reference`, `referenceLine` |
+| `CalcitaChartTooltip` | `root` |
+| `CalcitaCollapsibleSection` | `root`, `accordion`, `summary`, `titleArea`, `collapsedTitle`, `expandedTitle`, `details` |
+| `CalcitaColorInput` | `swatch`, `nativeInput` |
+| `CalcitaColorSchemeToggle` | `button` |
+| `CalcitaColumnChart` | `chart` |
+| `CalcitaConfirmDialog` | `problem`, `actions` |
+| `CalcitaContentDialog` | `header`, `title`, `closeButton`, `body` |
+| `CalcitaDateRangeFilter` | `chip`, `panel`, `actions` |
+| `CalcitaDefinitionList` | `root`, `entry`, `label`, `value` |
+| `CalcitaDemoTotpCode` | `root`, `code` |
+| `CalcitaDetailHeader` | `root`, `titleArea`, `title`, `badges`, `actions` |
+| `CalcitaDownloadManager` | `doneIcon`, `failedIcon`, `canceledIcon`, `cancelButton`, `progress`, `cancelIcon`, `item`, `itemText`, `itemStatus`, `itemActions`, `panel`, `header`, `title`, `list` |
+| `CalcitaDownloadMenu` | `button` |
+| `CalcitaEmptyState` | `root`, `icon` |
+| `CalcitaErrorPage` | `root`, `actions` |
+| `CalcitaEventCalendar` | `toolbar`, `navigation`, `title`, `calendar` |
+| `CalcitaEventDetails` | `row`, `rowContent`, `titleRow`, `toneDot`, `linkRow`, `link`, `guestsTitle`, `guest`, `guestAvatar`, `guestName`, `notes`, `actions` |
+| `CalcitaFileDropzone` | `root`, `fileArea`, `fileChip`, `hint`, `actions`, `limits`, `extra` |
+| `CalcitaFilterChips` | `root`, `header`, `clearButton` |
+| `CalcitaFontSizeToggle` | `button` |
+| `CalcitaFormProblemAlert` | `root` |
+| `CalcitaFormRow` | `root`, `label`, `control` |
+| `CalcitaFormSection` | `root`, `title`, `card`, `footer` |
+| `CalcitaFullPageLoader` | `root` |
+| `CalcitaGlassPanel` | `root` |
+| `CalcitaGoToPage` | `root`, `field` |
+| `CalcitaGroupedTimeline` | `group`, `groupHeader`, `groupButton`, `groupTitle`, `expandIcon`, `timeline`, `opposite`, `connector`, `content`, `entryTitle` |
+| `CalcitaHeaderFilter` | `button`, `badge`, `panel` |
+| `CalcitaHeaderTools` | `divider`, `root` |
+| `CalcitaInboxLayout` | `labelDot`, `folder`, `folderIcon`, `folderCount`, `root`, `folders`, `foldersHeader`, `labelsTitle`, `listPane`, `phoneTabs`, `phoneTabBadge`, `listHeader`, `list`, `detail`, `backButton` |
+| `CalcitaInstallAppSetting` | `root` |
+| `CalcitaInstallInstructions` | `steps` |
+| `CalcitaInstallPromptBanner` | `root`, `alert` |
+| `CalcitaKanbanBoard` | `completeButton`, `tags`, `titleRow`, `doneIcon`, `cardTitle`, `meta`, `due`, `dueIcon`, `dueText`, `checklist`, `checklistIcon`, `comments`, `commentsIcon`, `attachments`, `attachmentsIcon`, `assignees`, `root`, `collapsedColumn`, `collapsedTitle`, `hidden`, `column`, `columnHeader`, `columnTitle`, `quickAdd`, `dropZone`, `card`, `cardActions`, `cardContent`, `empty` |
+| `CalcitaLanguageToggle` | `button` |
+| `CalcitaLineChart` | `chart` |
+| `CalcitaMapView` | `popupText`, `root` |
+| `CalcitaMessageList` | `empty`, `selectedAvatar`, `item`, `actions`, `starButton`, `itemButton`, `avatarSlot`, `avatarButton`, `avatar`, `body`, `text`, `topRow`, `unreadDot`, `sender`, `threadCount`, `date`, `subject`, `labels` |
+| `CalcitaMessageView` | `header`, `headerText`, `recipients`, `body`, `empty`, `labels`, `attachments`, `divider`, `collapsed`, `collapsedAvatar`, `collapsedText`, `collapsedSender`, `collapsedDate` |
+| `CalcitaMetricCard` | `root`, `action`, `header`, `icon`, `label`, `value`, `caption`, `extra`, `trend` |
+| `CalcitaMobileTabBar` | `tab`, `tabIconPlaceholder`, `tabLabel`, `root`, `bar`, `minimized`, `account`, `sheetHeader` |
+| `CalcitaModalWaiting` | `root`, `title`, `body`, `text` |
+| `CalcitaMultiSelectFilter` | `list`, `option` |
+| `CalcitaNewBuildNotice` | `floating`, `icon`, `message`, `reloadButton`, `banner` |
+| `CalcitaPageBreadcrumbs` | `root`, `link`, `current` |
+| `CalcitaPageHeader` | `root`, `subtitle`, `action` |
+| `CalcitaPageHeading` | `root`, `breadcrumbs`, `titleRow`, `title`, `actions`, `description` |
+| `CalcitaPasswordChecklist` | `title`, `list`, `item`, `hidden` |
+| `CalcitaPeriodRangeSelector` | `field`, `select`, `root` |
+| `CalcitaPermissionMatrix` | `permission`, `checkbox`, `group`, `groupHeader`, `groupTitle`, `grid` |
+| `CalcitaPondDropzone` | `root`, `summary`, `limits`, `actions`, `extra` |
+| `CalcitaProfileHeader` | `root`, `cover`, `body`, `avatar`, `text`, `name`, `chips`, `actions` |
+| `CalcitaProfileScreen` | `sectionTitle`, `form`, `preferences` |
+| `CalcitaQuickFilters` | `root`, `caption`, `chip`, `chipLabel`, `chipCount` |
+| `CalcitaRecoveryCodesDialog` | `codes`, `actions` |
+| `CalcitaScrollableRow` | `root` |
+| `CalcitaSecondStepForm` | `actions` |
+| `CalcitaSectionCard` | `root`, `header`, `title` |
+| `CalcitaSegmentedControl` | `root` |
+| `CalcitaSelectInput` | `option`, `optionText` |
+| `CalcitaSelectionActions` | `bar`, `count`, `clear`, `phoneCount`, `phoneActions` |
+| `CalcitaServerTable` | `toolbar`, `summary`, `customHeader`, `count`, `countRow`, `selectionNotice`, `error`, `card`, `grid`, `pagination` |
+| `CalcitaSessionsCard` | `item`, `itemIcon`, `itemHeader`, `actions` |
+| `CalcitaSettingsMenu` | `divider` |
+| `CalcitaSideMenu` | `scrollArrow`, `root`, `brand`, `brandLogo`, `brandText`, `brandName`, `brandCaption`, `railTop`, `listArea`, `list`, `section`, `sectionTitle`, `sectionTitleText`, `footer`, `railBottom` |
+| `CalcitaSideMenuEntry` | `button`, `icon`, `iconPlaceholder`, `text`, `badge`, `expand` |
+| `CalcitaSignInForm` | `footer` |
+| `CalcitaSignInScreen` | `alert` |
+| `CalcitaSortableFilterHeader` | `title`, `root`, `sortButton`, `sortIndicator`, `clearButton` |
+| `CalcitaStatusChip` | `root`, `dot`, `label`, `chip` |
+| `CalcitaSubmenuActionsMenu` | `badge` |
+| `CalcitaTabBarEditor` | `root`, `header`, `title`, `list`, `itemIcon`, `footer` |
+| `CalcitaTableToggle` | `root`, `button` |
+| `CalcitaTag` | `root` |
+| `CalcitaTextInput` | `field` |
+| `CalcitaTopMenu` | `link`, `root` |
+| `CalcitaTwoStepVerification` | `qr`, `secret`, `secretCode`, `header`, `headerTitle`, `headerText`, `menuIcon` |
+| `CalcitaWizardLayout` | `stepper`, `phoneSteps`, `actions` |
+| `CalcitaWordmark` | `root` |
+
+</details>
+
+Para cambiar de un jalón los valores globales, sin tocar pieza por pieza, Calcita los lee de variables CSS. Cada una trae su
+valor de siempre de respaldo: sin ella se ve igual.
+
+| Variable | Qué cambia | De fábrica |
+| --- | --- | --- |
+| `--calcita-panel-radius` | las esquinas de lo que flota grande y las tarjetas grandes (menú lateral, diálogos, la sección de un formulario) | 20px (16px en el minimalista) |
+| `--calcita-menu-radius` | las esquinas de menús, listas desplegables, globos y avisos | 12px |
+| `--calcita-field-radius` | las esquinas de los campos de captura | 12px (10px en el minimalista) |
+| `--calcita-glass-blur` | el desenfoque del vidrio | 20px |
+| `--calcita-glass-saturate` | cuánto aviva el vidrio los colores de atrás | 180% |
+
+```css
+:root { --calcita-panel-radius: 6px; --calcita-glass-blur: 12px; }   /* también en la página de un sistema que ya existe */
+```
+
+```js
+createToolkitTheme({cssTokens: {panelRadius: 6, glassBlur: 12}});    // las mismas, declaradas por el tema (un número va en px)
+```
+
+Los colores de los campos son variables de MUI (`--mui-palette-field-fill`, `--mui-palette-field-border`…; ver `fields`).
+Lo que se pinta flotando al final de la página (menús, ventanas) toma las de `:root`, no las de un contenedor.
+
+```js
+createTheme({
+    components: {
+        CalcitaStatusChip: {defaultProps: {variant: 'chip'}},
+        CalcitaFormSection: {styleOverrides: {card: {borderRadius: 4}}},
+        CalcitaSegmentedControl: {styleOverrides: {root: {'& .MuiToggleButton-root': {textTransform: 'uppercase'}}}},
+    },
+});
+```
+
 ## El marco de la app, el menú y los permisos
 
 `AppLayout` es el marco de las plantillas de MUI: la barra a todo lo ancho, con el logo y el nombre de la app; debajo,

package/dist/DataTable/AuditTrailDialog.js

@@ -3,21 +3,25 @@ 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";
-function AuditTrailDialog({
-  open,
-  onClose,
-  title,
-  subtitle,
-  subjectKey,
-  fetchPage,
-  eventDictionary,
-  resultDictionary,
-  extraColumns = [],
-  header = null,
-  eventSuffixOf = null
-}) {
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaAuditTrailDialog";
+const AuditDescription = piecePart(THEME_NAME, "Description", Typography);
+function AuditTrailDialog(props) {
+  const {
+    open,
+    onClose,
+    title,
+    subtitle,
+    subjectKey,
+    fetchPage,
+    eventDictionary,
+    resultDictionary,
+    extraColumns = [],
+    header = null,
+    eventSuffixOf = null
+  } = usePieceProps(props, THEME_NAME);
   return /* @__PURE__ */ jsxs(ContentDialog, { open, onClose, title, children: [
-    subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: subtitle }),
+    subtitle && /* @__PURE__ */ jsx(AuditDescription, { variant: "body2", color: "text.secondary", ownSx: { mb: 2 }, children: subtitle }),
     header,
     /* @__PURE__ */ jsx(
       AuditTrailTable,

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// 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';\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({\n    open, onClose, title, subtitle, subjectKey, fetchPage, eventDictionary, resultDictionary, extraColumns = [], header = null, eventSuffixOf = null,\n}) {\n    return (\n        <ContentDialog open={open} onClose={onClose} title={title}>\n            {subtitle && (\n                <Typography variant=\"body2\" color=\"text.secondary\" sx={{mb: 2}}>{subtitle}</Typography>\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":";;;;;AA6BA,SAAwB,iBAAiB;AAAA,EACrC;AAAA,EAAM;AAAA,EAAS;AAAA,EAAO;AAAA,EAAU;AAAA,EAAY;AAAA,EAAW;AAAA,EAAiB;AAAA,EAAkB,eAAe,CAAA;AAAA,EAAI,SAAS;AAAA,EAAM,gBAAgB;AAChJ,GAAG;AACC,SACI,qBAAC,eAAA,EAAc,MAAY,SAAkB,OACxC,UAAA;AAAA,IAAA,YACG,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAC,IAAI,EAAA,GAAK,UAAA,SAAA,CAAS;AAAA,IAE7E;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} from '@/theme/themePieces.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} = usePieceProps(props, THEME_NAME);\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":";;;;;;AAmBA,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,EAAA,IAC5I,cAAc,OAAO,UAAU;AAC/B,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;"}

package/dist/DataTable/ColumnFilters/HeaderFilterPopover.js

@@ -11,29 +11,35 @@ 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";
-function HeaderFilterPopover({ activeCount = 0, onClear, children }) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.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) {
+  const { activeCount = 0, onClear, children } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("table");
   const [anchorElement, setAnchorElement] = useState(null);
   const isActive = activeCount > 0;
   const tooltip = isActive ? t("columnFilter.activeTooltip", { count: activeCount }) : t("columnFilter.tooltip");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(
-      IconButton,
+      FilterButton,
       {
         size: "small",
         "aria-label": tooltip,
-        sx: { color: isActive ? "primary.main" : "action.active", opacity: isActive ? 1 : 0.45, overflow: "visible" },
+        ownSx: { color: isActive ? "primary.main" : "action.active", opacity: isActive ? 1 : 0.45, overflow: "visible" },
         onClick: (event) => {
           event.stopPropagation();
           setAnchorElement(event.currentTarget);
         },
         children: isActive ? /* @__PURE__ */ jsx(
-          Badge,
+          FilterBadge,
           {
             badgeContent: activeCount,
             color: "primary",
             overlap: "circular",
-            sx: { "& .MuiBadge-badge": { fontSize: 10, fontWeight: 700, minWidth: 16, height: 16 } },
+            ownSx: { "& .MuiBadge-badge": { fontSize: 10, fontWeight: 700, minWidth: 16, height: 16 } },
             children: /* @__PURE__ */ jsx(FilterAltIcon, { fontSize: "inherit" })
           }
         ) : /* @__PURE__ */ jsx(FilterAltOutlinedIcon, { fontSize: "inherit" })
@@ -46,7 +52,7 @@ function HeaderFilterPopover({ activeCount = 0, onClear, children }) {
         anchorEl: anchorElement,
         onClose: () => setAnchorElement(null),
         anchorOrigin: { vertical: "bottom", horizontal: "left" },
-        children: /* @__PURE__ */ jsx(Box, { sx: { p: 2, minWidth: 280 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+        children: /* @__PURE__ */ jsx(FilterPanel, { ownSx: { p: 2, minWidth: 280 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
           children,
           /* @__PURE__ */ jsx(
             Button,

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// 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';\n\n/**\n * @param {{activeCount?: number, onClear: () => void, children: import('react').ReactNode}} props children = el filtro\n */\nexport default function HeaderFilterPopover({activeCount = 0, onClear, children}) {\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                <IconButton size=\"small\" aria-label={tooltip}\n                            sx={{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                        <Badge badgeContent={activeCount} color=\"primary\" overlap=\"circular\"\n                               sx={{'& .MuiBadge-badge': {fontSize: 10, fontWeight: 700, minWidth: 16, height: 16}}}>\n                            <FilterAltIcon fontSize=\"inherit\" />\n                        </Badge>\n                    ) : <FilterAltOutlinedIcon fontSize=\"inherit\" />}\n                </IconButton>\n            </Tooltip>\n\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={() => setAnchorElement(null)}\n                     anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <Box sx={{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                </Box>\n            </Popover>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwBA,SAAwB,oBAAoB,EAAC,cAAc,GAAG,SAAS,YAAW;AAC9E,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,QAAW,MAAK;AAAA,QAAQ,cAAY;AAAA,QACzB,IAAI,EAAC,OAAO,WAAW,iBAAiB,iBAAiB,SAAS,WAAW,IAAI,MAAM,UAAU,UAAA;AAAA,QACjG,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,2BAAiB,MAAM,aAAa;AAAA,QACxC;AAAA,QAEP,UAAA,WACG;AAAA,UAAC;AAAA,UAAA;AAAA,YAAM,cAAc;AAAA,YAAa,OAAM;AAAA,YAAU,SAAQ;AAAA,YACnD,IAAI,EAAC,qBAAqB,EAAC,UAAU,IAAI,YAAY,KAAK,UAAU,IAAI,QAAQ,GAAA,EAAE;AAAA,YACrF,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,KAAA,EAAI,IAAI,EAAC,GAAG,GAAG,UAAU,IAAA,GACtB,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} from '@/theme/themePieces.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} = usePieceProps(props, THEME_NAME);\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":";;;;;;;;;;;;;;AA0BA,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,aAAY,cAAc,OAAO,UAAU;AAC5E,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;"}

package/dist/DataTable/ColumnFilters/MultiSelectColumnFilter.js

@@ -8,8 +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";
+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({ value = [], onChange, options = [], renderOption }) {
+function MultiSelectColumnFilter(props) {
+  const { value = [], onChange, options = [], renderOption } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("table");
   const { formatNumber } = useFormatters();
   const [searchText, setSearchText] = useState("");
@@ -28,14 +33,14 @@ function MultiSelectColumnFilter({ value = [], onChange, options = [], renderOpt
         onChange: (event) => setSearchText(event.target.value)
       }
     ),
-    /* @__PURE__ */ jsxs(Stack, { sx: { maxHeight: 300, overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsxs(MultiList, { ownSx: { maxHeight: 300, overflowY: "auto" }, children: [
       options.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("options.empty") }),
       options.length > 0 && visibleOptions.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("options.noMatch", { text: searchText }) }),
       visibleOptions.map((option) => /* @__PURE__ */ jsx(
         FormControlLabel,
         {
           control: /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: value.includes(option.value), onChange: () => toggleOption(option.value) }),
-          label: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.75, sx: { alignItems: "center" }, children: [
+          label: /* @__PURE__ */ jsxs(MultiOption, { direction: "row", spacing: 0.75, ownSx: { alignItems: "center" }, children: [
             renderOption ? renderOption(option.value) : /* @__PURE__ */ jsx(Typography, { variant: "body2", children: option.value }),
             /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: formatNumber(option.total) })
           ] })

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// 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';\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({value = [], onChange, options = [], renderOption}) {\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            <Stack sx={{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                            <Stack direction=\"row\" spacing={0.75} sx={{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                            </Stack>\n                        )}\n                    />\n                ))}\n            </Stack>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAoBA,MAAM,0BAA0B;AAShC,SAAwB,wBAAwB,EAAC,QAAQ,CAAA,GAAI,UAAU,UAAU,CAAA,GAAI,gBAAe;AAChG,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,SAAM,IAAI,EAAC,WAAW,KAAK,WAAW,UAClC,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,OAAA,EAAM,WAAU,OAAM,SAAS,MAAM,IAAI,EAAC,YAAY,SAAA,GAClD,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} from '@/theme/themePieces.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} = usePieceProps(props, THEME_NAME);\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":";;;;;;;;;;;AAyBA,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,IAAI,iBAAgB,cAAc,OAAO,UAAU;AAC1F,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;"}

package/dist/DataTable/ColumnFilters/SortableFilterHeader.js

@@ -7,37 +7,45 @@ import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import HeaderFilterPopover from "./HeaderFilterPopover.js";
-function SortableFilterHeader({
-  label,
-  sortable = true,
-  sortEntry,
-  onSort,
-  onClearSort,
-  filterable = true,
-  activeCount,
-  onClear,
-  children
-}) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaSortableFilterHeader";
+const SortableTitle = piecePart(THEME_NAME, "Title", Typography);
+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) {
+  const {
+    label,
+    sortable = true,
+    sortEntry,
+    onSort,
+    onClearSort,
+    filterable = true,
+    activeCount,
+    onClear,
+    children
+  } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("table");
-  const title = /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { fontWeight: 700, whiteSpace: "nowrap" }, children: label });
-  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.25, sx: { alignItems: "center" }, children: [
-    sortable ? /* @__PURE__ */ jsx(Tooltip, { title: t("sort.tooltip"), children: /* @__PURE__ */ jsxs(ButtonBase, { onClick: onSort, sx: { gap: 0.25, borderRadius: 0.5 }, children: [
+  const title = /* @__PURE__ */ jsx(SortableTitle, { variant: "caption", ownSx: { fontWeight: 700, whiteSpace: "nowrap" }, children: label });
+  return /* @__PURE__ */ jsxs(SortableRoot, { direction: "row", spacing: 0.25, ownSx: { alignItems: "center" }, children: [
+    sortable ? /* @__PURE__ */ jsx(Tooltip, { title: t("sort.tooltip"), children: /* @__PURE__ */ jsxs(SortableSortButton, { onClick: onSort, ownSx: { gap: 0.25, borderRadius: 0.5 }, children: [
       title,
       sortEntry && /* @__PURE__ */ jsx(
-        Box,
+        SortableSortIndicator,
         {
           component: "span",
-          sx: { display: "inline-flex", alignItems: "center", color: "primary.main", fontWeight: 700 },
+          ownSx: { display: "inline-flex", alignItems: "center", color: "primary.main", fontWeight: 700 },
           "aria-label": sortEntry.direction === "asc" ? t("sort.ascending") : t("sort.descending"),
           children: sortEntry.direction === "asc" ? "↑" : "↓"
         }
       )
     ] }) }) : title,
     sortEntry && onClearSort && /* @__PURE__ */ jsx(Tooltip, { title: t("sort.clear"), children: /* @__PURE__ */ jsx(
-      ButtonBase,
+      SortableClearButton,
       {
         "aria-label": t("sort.clear"),
-        sx: { fontSize: 12, lineHeight: 1, color: "primary.main", "&:hover": { color: "primary.dark" } },
+        ownSx: { fontSize: 12, lineHeight: 1, color: "primary.main", "&:hover": { color: "primary.dark" } },
         onClick: (event) => {
           event.stopPropagation();
           onClearSort();

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// 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';\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({\n    label, sortable = true, sortEntry, onSort, onClearSort, filterable = true, activeCount, onClear, children,\n}) {\n    const {t} = useToolkitTranslation('table');\n    const title = <Typography variant=\"caption\" sx={{fontWeight: 700, whiteSpace: 'nowrap'}}>{label}</Typography>;\n\n    return (\n        <Stack direction=\"row\" spacing={0.25} sx={{alignItems: 'center'}}>\n            {sortable ? (\n                <Tooltip title={t('sort.tooltip')}>\n                    <ButtonBase onClick={onSort} sx={{gap: 0.25, borderRadius: 0.5}}>\n                        {title}\n                        {sortEntry && (\n                            <Box component=\"span\" sx={{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                            </Box>\n                        )}\n                    </ButtonBase>\n                </Tooltip>\n            ) : title}\n\n            {sortEntry && onClearSort && (\n                <Tooltip title={t('sort.clear')}>\n                    <ButtonBase 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                                sx={{fontSize: 12, lineHeight: 1, color: 'primary.main', '&:hover': {color: 'primary.dark'}}}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    onClearSort();\n                                }}>\n                        ×\n                    </ButtonBase>\n                </Tooltip>\n            )}\n\n            {filterable && (\n                <HeaderFilterPopover activeCount={activeCount} onClear={onClear}>{children}</HeaderFilterPopover>\n            )}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AA2BA,SAAwB,qBAAqB;AAAA,EACzC;AAAA,EAAO,WAAW;AAAA,EAAM;AAAA,EAAW;AAAA,EAAQ;AAAA,EAAa,aAAa;AAAA,EAAM;AAAA,EAAa;AAAA,EAAS;AACrG,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,QAAQ,oBAAC,YAAA,EAAW,SAAQ,WAAU,IAAI,EAAC,YAAY,KAAK,YAAY,SAAA,GAAY,UAAA,MAAA,CAAM;AAEhG,SACI,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,MAAM,IAAI,EAAC,YAAY,SAAA,GAClD,UAAA;AAAA,IAAA,+BACI,SAAA,EAAQ,OAAO,EAAE,cAAc,GAC5B,UAAA,qBAAC,YAAA,EAAW,SAAS,QAAQ,IAAI,EAAC,KAAK,MAAM,cAAc,OACtD,UAAA;AAAA,MAAA;AAAA,MACA,aACG;AAAA,QAAC;AAAA,QAAA;AAAA,UAAI,WAAU;AAAA,UAAO,IAAI,EAAC,SAAS,eAAe,YAAY,UAAU,OAAO,gBAAgB,YAAY,IAAA;AAAA,UACvG,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,QAAW,cAAY,EAAE,YAAY;AAAA,QAE1B,IAAI,EAAC,UAAU,IAAI,YAAY,GAAG,OAAO,gBAAgB,WAAW,EAAC,OAAO,eAAA,EAAc;AAAA,QAC1F,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} from '@/theme/themePieces.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} = usePieceProps(props, THEME_NAME);\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":";;;;;;;;;;AAoBA,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,EAAA,IACjG,cAAc,OAAO,UAAU;AAC/B,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;"}

package/dist/DataTable/EmptyState.js

@@ -7,11 +7,16 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import FilterListOffIcon from "@mui/icons-material/FilterListOff";
 import InboxOutlinedIcon from "@mui/icons-material/InboxOutlined";
-function EmptyState({ filtered = false, label, onClearFilters, texts }) {
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaEmptyState";
+const EmptyRoot = piecePart(THEME_NAME, "Root", Stack);
+const EmptyIcon = piecePart(THEME_NAME, "Icon", Box);
+function EmptyState(props) {
+  const { filtered = false, label, onClearFilters, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("table", texts);
   const Icon = filtered ? FilterListOffIcon : InboxOutlinedIcon;
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { height: "100%", px: 3, textAlign: "center", alignItems: "center", justifyContent: "center" }, children: [
-    /* @__PURE__ */ jsx(Box, { sx: { color: "text.disabled", display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { fontSize: "large" }) }),
+  return /* @__PURE__ */ jsxs(EmptyRoot, { spacing: 1, ownSx: { height: "100%", px: 3, textAlign: "center", alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx(EmptyIcon, { ownSx: { color: "text.disabled", display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { fontSize: "large" }) }),
     /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: filtered ? t("empty.filtered") : label ?? t("empty.default") }),
     filtered && onClearFilters && /* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearFilters, children: t("empty.clearFilters") })
   ] });

package/dist/DataTable/EmptyState.js.map

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

package/dist/DataTable/FilterChips.js

@@ -8,24 +8,30 @@ import Typography from "@mui/material/Typography";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import ScrollableRow from "../ui/layout/ScrollableRow.js";
 import Tag from "../ui/labels/Tag.js";
-function FilterChips({ chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0, texts }) {
+import { piecePart, usePieceProps } from "../theme/themePieces.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) {
+  const { chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("table", texts);
   const chips = chipConfig.filter((chipDeclaration) => chipDeclaration.isActive(filters[chipDeclaration.key])).flatMap((chipDeclaration) => chipDeclaration.chipsFor(filters[chipDeclaration.key], onSetFilter));
   const activeCount = chips.length + quickActiveCount;
   if (activeCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1.5, minWidth: 0 }, children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { px: 0.25, alignItems: "center", justifyContent: "space-between" }, children: [
+  return /* @__PURE__ */ jsxs(ChipsRoot, { ownSx: { mb: 1.5, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs(ChipsHeader, { direction: "row", spacing: 1, ownSx: { px: 0.25, alignItems: "center", justifyContent: "space-between" }, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: t("chips.applied", { count: activeCount }) }),
       /* @__PURE__ */ jsx(
-        Button,
+        ChipsClearButton,
         {
           size: "small",
           color: "error",
           startIcon: /* @__PURE__ */ jsx(ClearAllIcon, { fontSize: "small" }),
           onClick: onClearAll,
-          sx: { flexShrink: 0 },
+          ownSx: { flexShrink: 0 },
           children: t("chips.clearAll")
         }
       )

package/dist/DataTable/FilterChips.js.map

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