@stackcraftmx/calcita 0.28.0 → 0.30.0

package/dist/types/ui/actions/SelectionActions.d.ts

@@ -22,7 +22,7 @@ export declare function selectionFloatsOnPhone(theme: object): boolean;
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {selection: {clear, actionsLabel, summaryLabel}}
  * @param {object} [props.sx] estilos del renglón
  */
-export default function SelectionActions({ countText, actions, onClear, phoneLayout, texts, sx }: {
+export default function SelectionActions(props: {
     countText: string;
     actions?: Array<{
         key: string;

package/dist/types/ui/filters/DateRangeFilter.d.ts

@@ -6,7 +6,7 @@
  * @param {string} [props.label] ya traducido; por defecto "Personalizado"
  * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function DateRangeFilter({ from, to, onChange, label, texts }: {
+export default function DateRangeFilter(props: {
     from?: string;
     to?: string;
     onChange: (range: {

package/dist/types/ui/filters/PeriodRangeSelector.d.ts

@@ -9,7 +9,7 @@
  * @param {string} props.toLabel ya traducido
  * @param {(range: {from: string, to: string}) => void} props.onChange
  */
-export default function PeriodRangeSelector({ id, options, from, to, fromLabel, toLabel, onChange }: {
+export default function PeriodRangeSelector(props: {
     id: string;
     options: Array<{
         value: string;

package/dist/types/ui/filters/QuickFilters.d.ts

@@ -8,7 +8,7 @@
  * @param {import('react').ReactNode} [props.extra] al final de la tira (p. ej. un rango de fechas)
  * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function QuickFilters({ value, onChange, options, caption, ariaLabel, extra, texts }: {
+export default function QuickFilters(props: {
     value: string;
     onChange: (value: string) => void;
     options?: Array<{

package/dist/types/ui/filters/SegmentedControl.d.ts

@@ -11,14 +11,19 @@ export declare const SEGMENTED_CONTROL_SX: {
         letterSpacing: string;
         border: number;
         borderRadius: string;
+        m: number;
         px: number;
         py: number;
-        m: string;
         fontWeight: number;
         textTransform: string;
         color: string;
         whiteSpace: string;
     };
+    '& .MuiToggleButton-root.MuiToggleButtonGroup-grouped': {
+        border: number;
+        borderRadius: string;
+        m: number;
+    };
     '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {
         bgcolor: string;
         color: string;
@@ -32,7 +37,7 @@ export declare const SEGMENTED_CONTROL_SX: {
  * @param {(value: string) => void} props.onChange
  * @param {string} props.ariaLabel ya traducido
  */
-export default function SegmentedControl({ options, value, onChange, ariaLabel }: {
+export default function SegmentedControl(props: {
     options: Array<{
         value: string;
         label: string;

package/dist/types/ui/labels/StatusChip.d.ts

@@ -10,7 +10,7 @@
  *     que decir. OJO: no envuelvas este componente en otro Tooltip, porque el suyo sigue ahí y se ven los dos encimados
  * @param {object} [props.sx] ajustes de estilo del Chip (solo variant="chip")
  */
-export default function StatusChip({ dictionary, value, variant, short, suffix, tooltip: customTooltip, sx }: {
+export default function StatusChip(props: {
     dictionary: Record<string, object>;
     value: string | null | undefined;
     variant?: 'dot' | 'chip';

package/dist/types/ui/labels/Tag.d.ts

@@ -8,7 +8,7 @@
  * @param {() => void} [props.onDelete]
  * @param {object} [props.sx]
  */
-export default function Tag({ label, tooltip, color, variant, size, onDelete, sx, ...chipProps }: {
+export default function Tag(props: {
     label: import('react').ReactNode;
     tooltip?: string;
     color?: string;

package/dist/types/ui/layout/CollapsibleSection.d.ts

@@ -8,7 +8,7 @@
  *     adentro hasta que se abre)
  * @param {import('react').ReactNode} props.children
  */
-export default function CollapsibleSection({ collapsedTitle, expandedTitle, hint, defaultExpanded, onExpandedChange, children }: {
+export default function CollapsibleSection(props: {
     collapsedTitle: string;
     expandedTitle: string;
     hint?: string;

package/dist/types/ui/layout/ContentDialog.d.ts

@@ -6,7 +6,7 @@
  * @param {import('react').ReactNode} props.children
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function ContentDialog({ open, onClose, title, children, texts }: {
+export default function ContentDialog(props: {
     open: boolean;
     onClose: () => void;
     title: string;

package/dist/types/ui/layout/DefinitionList.d.ts

@@ -5,7 +5,7 @@
  * @param {'columns'|'stacked'} [props.layout]
  * @param {number} [props.labelWidth] ancho en px de la columna del dato (solo columns)
  */
-export default function DefinitionList({ entries, layout, labelWidth }: {
+export default function DefinitionList(props: {
     entries: Array<{
         label: string;
         value: import('react').ReactNode;

package/dist/types/ui/layout/DetailHeader.d.ts

@@ -6,7 +6,7 @@
  * @param {import('react').ReactNode} [props.actions] botones a la derecha
  * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
  */
-export default function DetailHeader({ title, eyebrow, badges, actions, documentTitle }: {
+export default function DetailHeader(props: {
     title: string;
     eyebrow?: string;
     badges?: import('react').ReactNode;

package/dist/types/ui/layout/ErrorPage.d.ts

@@ -20,7 +20,7 @@ export declare const ERROR_PAGE_KIND: Readonly<{
  * @param {object} [props.texts] los textos que cambian, con la forma de `errorPage` en los textos del paquete:
  *     {goHome: 'Volver al tablero', notFound: {title: '…'}}
  */
-export default function ErrorPage({ kind, title, text, homePath, onRetry, onGoHome, extraActions, actions, icon, children, texts, }: {
+export default function ErrorPage(props: {
     kind: string;
     title?: string;
     text?: import('react').ReactNode;

package/dist/types/ui/layout/GlassPanel.d.ts

@@ -4,7 +4,7 @@
  * @param {object|Function|Array} [props.sx] estilos propios: se suman y ganan
  * @param {import('react').ElementType} [props.component] por omisión 'div'
  */
-export default function GlassPanel({ children, sx, ...paperProps }: {
+export default function GlassPanel(props: {
     children: import('react').ReactNode;
     sx?: object | Function | any[];
     component?: import('react').ElementType;

package/dist/types/ui/layout/PageHeader.d.ts

@@ -6,7 +6,7 @@
  * @param {import('react').ReactNode} [props.action] normalmente un <Button variant="contained" shape="pill">
  * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
  */
-export default function PageHeader({ title, eyebrow, subtitle, action, documentTitle }: {
+export default function PageHeader(props: {
     title: string;
     eyebrow?: string;
     subtitle?: import('react').ReactNode;

package/dist/types/ui/layout/PageHeading.d.ts

@@ -7,7 +7,7 @@
  * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
  * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function PageHeading({ title, description, breadcrumbs, actions, documentTitle, texts }: {
+export default function PageHeading(props: {
     title: string;
     description?: import('react').ReactNode;
     breadcrumbs?: Array<{

package/dist/types/ui/layout/ProfileHeader.d.ts

@@ -7,7 +7,7 @@
  * @param {string[]} [props.chips] sus perfiles o etiquetas, ya traducidos
  * @param {import('react').ReactNode} [props.actions] los botones de la derecha
  */
-export default function ProfileHeader({ name, email, subtitle, avatarUrl, chips, actions }: {
+export default function ProfileHeader(props: {
     name: string;
     email?: string;
     subtitle?: string;

package/dist/types/ui/layout/ScrollableRow.d.ts

@@ -21,7 +21,7 @@ export declare const scrollableRow: {
  * @param {boolean} [props.fadeEdges]
  * @param {import('react').Ref<HTMLElement>} [props.ref]
  */
-export default function ScrollableRow({ children, gap, py, sx, enableDragScroll, enableWheelToX, fadeEdges, ref, ...boxProps }: {
+export default function ScrollableRow(props: {
     children: import('react').ReactNode;
     gap?: number;
     py?: number;

package/dist/types/ui/layout/SectionCard.d.ts

@@ -4,7 +4,7 @@
  * @param {import('react').ReactNode} [props.action] botón o liga a la derecha del título
  * @param {import('react').ReactNode} props.children
  */
-export default function SectionCard({ title, action, children }: {
+export default function SectionCard(props: {
     title: string;
     action?: import('react').ReactNode;
     children: import('react').ReactNode;

package/dist/types/ui/metrics/BarList.d.ts

@@ -8,7 +8,7 @@
  * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function BarList({ items, onSelect, emptyLabel, tone, texts, defaultView, onViewChange }: {
+export default function BarList(props: {
     items: Array<{
         key: string;
         label: string;

package/dist/types/ui/metrics/CalendarHeatmap.d.ts

@@ -14,7 +14,7 @@
  * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone, texts, defaultView, onViewChange }: {
+export default function CalendarHeatmap(props: {
     startsOn: string;
     endsOn: string;
     days: Array<{

package/dist/types/ui/metrics/ChartTooltip.d.ts

@@ -2,7 +2,7 @@
  * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props
  *     active y payload los pone recharts; render recibe el renglón de data del punto o la columna
  */
-export default function ChartTooltip({ active, payload, render }: {
+export default function ChartTooltip(props: {
     active?: boolean;
     payload?: Array<{
         payload: any;

package/dist/types/ui/metrics/ColumnChart.d.ts

@@ -21,7 +21,7 @@
  * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}
  */
-export default function ColumnChart({ data, periodLabel, valueLabel, series, ariaLabel, emptyLabel, height, tone, onSelect, formatValue: formatValueProp, referenceLine, renderTooltip, texts, defaultView, onViewChange, }: {
+export default function ColumnChart(props: {
     data: Array<Record<string, any>>;
     periodLabel: string;
     valueLabel?: string;

package/dist/types/ui/metrics/LineChart.d.ts

@@ -16,7 +16,7 @@
  * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}
  */
-export default function LineChart({ data, series, periodLabel, ariaLabel, emptyLabel, height, formatValue: formatValueProp, referenceLine, onSelect, renderTooltip, texts, defaultView, onViewChange, }: {
+export default function LineChart(props: {
     data: Array<Record<string, any>>;
     series: Array<{
         key: string;

package/dist/types/ui/metrics/MetricCard.d.ts

@@ -19,7 +19,7 @@ export declare const TREND_DIRECTION: Readonly<{
  * @param {() => void} [props.onClick] la tarjeta entera como botón, cuando no lleva a otra pantalla (to)
  * @param {object} [props.texts] los textos que cambian, con la forma de `metricCard`: {trend: {up: 'subió'}}
  */
-export default function MetricCard({ label, value, caption, tone, valueColor, isLoading, to, trend, icon, children, onClick, texts, }: {
+export default function MetricCard(props: {
     label: string;
     value: import('react').ReactNode;
     caption?: import('react').ReactNode;

package/dist/types/ui/metrics/TableToggle.d.ts

@@ -7,7 +7,7 @@ export declare const CHART_VIEW: Readonly<{
  * @param {{asTable: boolean, onToggle: () => void, texts?: object}} props texts: los textos que cambian, con la forma de
  *     `common` ({charts: {viewAsTable, viewAsChart}})
  */
-export default function TableToggle({ asTable, onToggle, texts }: {
+export default function TableToggle(props: {
     asTable: boolean;
     onToggle: () => void;
     texts?: object;

package/dist/types/ui/navigation/ColorSchemeToggle.d.ts

@@ -5,7 +5,7 @@
  * @param {(mode: 'light'|'dark'|'system') => void} [props.onChange] la persona cambió el modo (para guardarlo en su servidor)
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function ColorSchemeToggle({ size, inverted, onChange, texts }?: {
+export default function ColorSchemeToggle(props?: {
     size?: 'small' | 'medium';
     inverted?: boolean;
     onChange?: (mode: 'light' | 'dark' | 'system') => void;

package/dist/types/ui/navigation/FontSizeToggle.d.ts

@@ -4,7 +4,7 @@
  * @param {(level: string) => void} [props.onChange] la persona eligió otro tamaño (FONT_SIZE_LEVELS; para guardarlo en su servidor)
  * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function FontSizeToggle({ size, onChange, texts }?: {
+export default function FontSizeToggle(props?: {
     size?: 'small' | 'medium';
     onChange?: (level: string) => void;
     texts?: object;

package/dist/types/ui/navigation/LanguageToggle.d.ts

@@ -6,7 +6,7 @@ export declare const LANGUAGES: readonly ("en" | "es")[];
  * @param {(language: string) => void} [props.onChange] además de avisar a ToolkitProvider, cada que se elige un idioma
  * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {language: {switchToNamed, choose}}
  */
-export default function LanguageToggle({ inverted, onChange, texts }?: {
+export default function LanguageToggle(props?: {
     inverted?: boolean;
     onChange?: (language: string) => void;
     texts?: object;

package/dist/types/ui/navigation/PageBreadcrumbs.d.ts

@@ -3,7 +3,7 @@
  * @param {Array<{label: string, to?: string}>} props.items textos ya traducidos
  * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function PageBreadcrumbs({ items, texts }: {
+export default function PageBreadcrumbs(props: {
     items: Array<{
         label: string;
         to?: string;

package/dist/types/ui/timeline/GroupedTimeline.d.ts

@@ -19,7 +19,7 @@
  * @param {(groupKey: string, isExpanded: boolean) => void} [props.onGroupToggle] la persona abrió o plegó un grupo (por ejemplo,
  *     para pedir sus eventos hasta que se abre)
  */
-export default function GroupedTimeline({ groups, onGroupToggle }: {
+export default function GroupedTimeline(props: {
     groups: {
         key: string;
         title?: string;

package/dist/types/upload/FileDropzone.d.ts

@@ -15,7 +15,7 @@
  * @param {object} [props.sx] ajustes del recuadro
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function FileDropzone({ value, onChange, accept, maxSize, hint, buttonLabel, disabled, busy, busyModal, onReject, actions, children, sx, texts, }: {
+export default function FileDropzone(props: {
     value?: File | null;
     onChange: (file: File | null) => void;
     accept?: string | string[];

package/dist/ui/actions/ActionsMenu.js

@@ -8,7 +8,12 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Tooltip from "@mui/material/Tooltip";
 import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
-function ActionsMenu({ label, actions, icon, size = "small" }) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaActionsMenu";
+const ActionsItem = piecePart(THEME_NAME, "Item", MenuItem);
+const ActionsItemIcon = piecePart(THEME_NAME, "ItemIcon", ListItemIcon);
+function ActionsMenu(props) {
+  const { label, actions, icon, size = "small" } = usePieceProps(props, THEME_NAME);
   const [anchor, setAnchor] = useState(null);
   if (!actions?.length) {
     return null;
@@ -28,16 +33,16 @@ function ActionsMenu({ label, actions, icon, size = "small" }) {
       }
     ) }),
     /* @__PURE__ */ jsx(Menu, { anchorEl: anchor, open: Boolean(anchor), onClose: () => setAnchor(null), onClick: (event) => event.stopPropagation(), children: actions.map((action) => /* @__PURE__ */ jsxs(
-      MenuItem,
+      ActionsItem,
       {
         disabled: action.disabled,
         onClick: () => {
           setAnchor(null);
           action.onClick();
         },
-        sx: action.color ? { color: `${action.color}.main` } : void 0,
+        ownSx: action.color ? { color: `${action.color}.main` } : void 0,
         children: [
-          action.icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: action.color ? { color: "inherit" } : void 0, children: action.icon }),
+          action.icon && /* @__PURE__ */ jsx(ActionsItemIcon, { ownSx: action.color ? { color: "inherit" } : void 0, children: action.icon }),
           /* @__PURE__ */ jsx(ListItemText, { children: action.label })
         ]
       },

package/dist/ui/actions/ActionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsMenu.js","sources":["../../../src/ui/actions/ActionsMenu.jsx"],"sourcesContent":["// Un botón «⋯» con un menú de acciones: el de cada tarjeta del tablero, el de cada columna, el de cada mensaje de la bandeja.\n// Las acciones las da la pantalla (label ya traducido, ícono, color, apagada); sin acciones no se pinta nada.\n//\n//   <ActionsMenu label=\"Acciones de «Junta de cierre»\"\n//                actions={[{key: 'delete', label: 'Borrar', icon: <DeleteOutlineIcon fontSize=\"small\" />, color: 'error', onClick: remove}]} />\n//\n// El clic no llega a lo de abajo: no levanta una tarjeta que se arrastra ni abre el renglón donde vive.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre del botón (lector de pantalla y su tooltip), ya traducido\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.actions]\n * @param {import('react').ReactNode} [props.icon] otro ícono para el botón (por omisión «⋯»)\n * @param {'small'|'medium'} [props.size]\n */\nexport default function ActionsMenu({label, actions, icon, size = 'small'}) {\n    const [anchor, setAnchor] = useState(null);\n    if (!actions?.length) {\n        return null;\n    }\n    return (\n        <>\n            <Tooltip title={label}>\n                <IconButton size={size} aria-label={label} aria-haspopup=\"menu\"\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchor(event.currentTarget);\n                            }}>\n                    {icon ?? <MoreHorizRoundedIcon fontSize=\"small\" />}\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)} onClick={(event) => event.stopPropagation()}>\n                {actions.map((action) => (\n                    <MenuItem key={action.key} disabled={action.disabled}\n                              onClick={() => {\n                                  setAnchor(null);\n                                  action.onClick();\n                              }}\n                              sx={action.color ? {color: `${action.color}.main`} : undefined}>\n                        {action.icon && <ListItemIcon sx={action.color ? {color: 'inherit'} : undefined}>{action.icon}</ListItemIcon>}\n                        <ListItemText>{action.label}</ListItemText>\n                    </MenuItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,SAAwB,YAAY,EAAC,OAAO,SAAS,MAAM,OAAO,WAAU;AACxE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,MAAI,CAAC,SAAS,QAAQ;AAClB,WAAO;AAAA,EACX;AACA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,OACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW;AAAA,QAAY,cAAY;AAAA,QAAO,iBAAc;AAAA,QAC7C,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,oBAAU,MAAM,aAAa;AAAA,QACjC;AAAA,QACP,UAAA,QAAQ,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA,GAExD;AAAA,IACA,oBAAC,QAAK,UAAU,QAAQ,MAAM,QAAQ,MAAM,GAAG,SAAS,MAAM,UAAU,IAAI,GAAG,SAAS,CAAC,UAAU,MAAM,mBACpG,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAA0B,UAAU,OAAO;AAAA,QAClC,SAAS,MAAM;AACX,oBAAU,IAAI;AACd,iBAAO,QAAA;AAAA,QACX;AAAA,QACA,IAAI,OAAO,QAAQ,EAAC,OAAO,GAAG,OAAO,KAAK,QAAA,IAAW;AAAA,QAC1D,UAAA;AAAA,UAAA,OAAO,QAAQ,oBAAC,cAAA,EAAa,IAAI,OAAO,QAAQ,EAAC,OAAO,UAAA,IAAa,QAAY,UAAA,OAAO,MAAK;AAAA,UAC9F,oBAAC,cAAA,EAAc,UAAA,OAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAPjB,OAAO;AAAA,IAAA,CASzB,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"ActionsMenu.js","sources":["../../../src/ui/actions/ActionsMenu.jsx"],"sourcesContent":["// Un botón «⋯» con un menú de acciones: el de cada tarjeta del tablero, el de cada columna, el de cada mensaje de la bandeja.\n// Las acciones las da la pantalla (label ya traducido, ícono, color, apagada); sin acciones no se pinta nada.\n//\n//   <ActionsMenu label=\"Acciones de «Junta de cierre»\"\n//                actions={[{key: 'delete', label: 'Borrar', icon: <DeleteOutlineIcon fontSize=\"small\" />, color: 'error', onClick: remove}]} />\n//\n// El clic no llega a lo de abajo: no levanta una tarjeta que se arrastra ni abre el renglón donde vive.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaActionsMenu con defaultProps y\n// styleOverrides de sus partes: item, itemIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaActionsMenu)\nconst THEME_NAME = 'CalcitaActionsMenu';\nconst ActionsItem = piecePart(THEME_NAME, 'Item', MenuItem);\nconst ActionsItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre del botón (lector de pantalla y su tooltip), ya traducido\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.actions]\n * @param {import('react').ReactNode} [props.icon] otro ícono para el botón (por omisión «⋯»)\n * @param {'small'|'medium'} [props.size]\n */\nexport default function ActionsMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaActionsMenu.defaultProps) y encima lo que llega aquí\n    const {label, actions, icon, size = 'small'} = usePieceProps(props, THEME_NAME);\n    const [anchor, setAnchor] = useState(null);\n    if (!actions?.length) {\n        return null;\n    }\n    return (\n        <>\n            <Tooltip title={label}>\n                <IconButton size={size} aria-label={label} aria-haspopup=\"menu\"\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchor(event.currentTarget);\n                            }}>\n                    {icon ?? <MoreHorizRoundedIcon fontSize=\"small\" />}\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)} onClick={(event) => event.stopPropagation()}>\n                {actions.map((action) => (\n                    <ActionsItem key={action.key} disabled={action.disabled}\n                              onClick={() => {\n                                  setAnchor(null);\n                                  action.onClick();\n                              }}\n                              ownSx={action.color ? {color: `${action.color}.main`} : undefined}>\n                        {action.icon && <ActionsItemIcon ownSx={action.color ? {color: 'inherit'} : undefined}>{action.icon}</ActionsItemIcon>}\n                        <ListItemText>{action.label}</ListItemText>\n                    </ActionsItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,QAAQ;AAC1D,MAAM,kBAAkB,UAAU,YAAY,YAAY,YAAY;AAStE,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,SAAS,MAAM,OAAO,YAAW,cAAc,OAAO,UAAU;AAC9E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,MAAI,CAAC,SAAS,QAAQ;AAClB,WAAO;AAAA,EACX;AACA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,OACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW;AAAA,QAAY,cAAY;AAAA,QAAO,iBAAc;AAAA,QAC7C,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,oBAAU,MAAM,aAAa;AAAA,QACjC;AAAA,QACP,UAAA,QAAQ,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA,GAExD;AAAA,IACA,oBAAC,QAAK,UAAU,QAAQ,MAAM,QAAQ,MAAM,GAAG,SAAS,MAAM,UAAU,IAAI,GAAG,SAAS,CAAC,UAAU,MAAM,mBACpG,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAA6B,UAAU,OAAO;AAAA,QACrC,SAAS,MAAM;AACX,oBAAU,IAAI;AACd,iBAAO,QAAA;AAAA,QACX;AAAA,QACA,OAAO,OAAO,QAAQ,EAAC,OAAO,GAAG,OAAO,KAAK,QAAA,IAAW;AAAA,QAC7D,UAAA;AAAA,UAAA,OAAO,QAAQ,oBAAC,iBAAA,EAAgB,OAAO,OAAO,QAAQ,EAAC,OAAO,UAAA,IAAa,QAAY,UAAA,OAAO,MAAK;AAAA,UACpG,oBAAC,cAAA,EAAc,UAAA,OAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAPd,OAAO;AAAA,IAAA,CAS5B,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}

package/dist/ui/actions/DownloadMenu.js

@@ -16,21 +16,25 @@ import { startDownload } from "../../downloads/downloadQueue.js";
 import { useFileTypes } from "../../downloads/fileTypes.js";
 import ConfirmDialog from "../../feedback/ConfirmDialog.js";
 import { useConfirmAction } from "../../feedback/useConfirmAction.js";
-function DownloadMenu({
-  formats,
-  download,
-  label,
-  downloadLabel,
-  disabled = false,
-  confirmation,
-  onDownloaded,
-  onFailed,
-  onCanceled,
-  variant = "button",
-  ariaLabel,
-  onChooseFormat,
-  icon: ButtonIcon = FileDownloadOutlinedIcon
-}) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaDownloadMenu";
+const DownloadButton = piecePart(THEME_NAME, "Button", Button);
+function DownloadMenu(props) {
+  const {
+    formats,
+    download,
+    label,
+    downloadLabel,
+    disabled = false,
+    confirmation,
+    onDownloaded,
+    onFailed,
+    onCanceled,
+    variant = "button",
+    ariaLabel,
+    onChooseFormat,
+    icon: ButtonIcon = FileDownloadOutlinedIcon
+  } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("common");
   const fileTypes = useFileTypes();
   const [anchorElement, setAnchorElement] = useState(null);
@@ -106,12 +110,12 @@ function DownloadMenu({
         }
       ) }) })
     ) : /* @__PURE__ */ jsx(
-      Button,
+      DownloadButton,
       {
         variant: "outlined",
         startIcon: /* @__PURE__ */ jsx(ButtonIcon, {}),
         endIcon: /* @__PURE__ */ jsx(ArrowDropDownIcon, {}),
-        sx: { flexShrink: 0 },
+        ownSx: { flexShrink: 0 },
         disabled,
         "aria-haspopup": "menu",
         onClick: openMenu,

package/dist/ui/actions/DownloadMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadMenu.js","sources":["../../../src/ui/actions/DownloadMenu.jsx"],"sourcesContent":["// \"Descargar ▾\" con los formatos de un reporte: PDF para leer o archivar, Excel o CSV para trabajar.\n//\n// Un solo botón y no tres: en la barra de una pantalla tres botones de descarga compiten con la acción principal.\n// Se acomoda a donde quedó, como BarActionButton: en una cápsula de la barra (las `actions` de PageHeading con cápsulas)\n// es solo el ícono con su nombre en el tooltip, como las demás acciones; antes salía la píldora «Descargar ▾» dentro de\n// la cápsula y se veía una cápsula dentro de otra. En el «⋯» del teléfono es un renglón que abre los formatos.\n// Quien llama pasa QUÉ descargar por formato (download(format, transferOptions) → {blob, fileName}, la forma de\n// un cliente HTTP que descarga). La descarga va al panel de descargas (startDownload, downloads): el diálogo se cierra al\n// confirmar y el avance, el aviso de \"descargado\" y el error se ven allá, mientras la persona sigue trabajando.\n//\n// Regla de tablas: una descarga pasa por un diálogo de confirmación que dice qué se va a bajar (p. ej. que la base\n// completa de clientes tarda unos minutos). Con `confirmation` el formato elegido NO se descarga de inmediato: abre\n// ConfirmDialog (máquina confirmActionMachine) y solo al confirmar se pide el archivo, una sola vez aunque haya doble clic.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\nimport {startDownload} from '@/downloads/downloadQueue.js';\nimport {useFileTypes} from '@/downloads/fileTypes.js';\nimport ConfirmDialog from '@/feedback/ConfirmDialog.jsx';\nimport {useConfirmAction} from '@/feedback/useConfirmAction.js';\n\n\n/**\n * @param {object} props\n * @param {string[]} props.formats los tipos de archivo, en orden: los de la casa (xlsx, csv, pdf) y los que el proyecto declare\n *     en ToolkitProvider fileTypes (zip, xml…)\n * @param {(format: string, transferOptions: {signal: AbortSignal, onDownloadProgress: (progress: {loaded: number, total?: number|null}) => void}) => Promise<{blob: Blob, fileName: string}>} props.download\n * @param {string} [props.label] ya traducido; por defecto \"Descargar\"\n * @param {string} [props.downloadLabel] ya traducido; lo que se ve en el panel de descargas antes de saber el nombre\n *     del archivo\n * @param {boolean} [props.disabled]\n * @param {(format: string) => {title: string, description: import('react').ReactNode, confirmLabel?: string}} [props.confirmation]\n * @param {(format: string) => void} [props.onDownloaded] p. ej. volver a pedir la tabla (si la descarga cambia algo en\n *     el servidor)\n * @param {(format: string, error: unknown) => void} [props.onFailed] cuando la descarga no se pudo (el panel ya lo dice)\n * @param {(format: string) => void} [props.onCanceled] cuando la persona la canceló desde el panel\n * @param {'button'|'icon'} [props.variant] icon = solo el icono (columna de acciones de una tabla)\n * @param {string} [props.ariaLabel] ya traducido; obligatorio en la variante icon\n * @param {(format: string) => void} [props.onChooseFormat] quien llama se encarga de confirmar y descargar\n * @param {import('react').ElementType} [props.icon] ícono del botón; por defecto el de descarga. Distingue dos descargas en la\n *     misma fila\n *\n * IMPORTANTE: hay que pasar `confirmation` u `onChooseFormat`. Sin ninguno de los dos el menú no descarga nada (regla de\n * tablas: toda descarga pasa por confirmación).\n *\n * OJO onChooseFormat: dentro de una celda del DataGrid el diálogo de confirmación NO puede vivir en la celda (el grid\n * virtualiza y vuelve a pintar sus celdas; el diálogo se perdía al elegir el formato). Ahí el menú solo avisa qué formato\n * se eligió y la pantalla abre SU confirmación (useConfirmAction) fuera de la tabla.\n */\nexport default function DownloadMenu({\n    formats, download, label, downloadLabel, disabled = false, confirmation, onDownloaded, onFailed, onCanceled, variant = 'button', ariaLabel,\n    onChooseFormat, icon: ButtonIcon = FileDownloadOutlinedIcon,\n}) {\n    const {t} = useToolkitTranslation('common');\n    const fileTypes = useFileTypes();\n    // de dónde sale el menú de formatos: del botón, o (desde el «⋯» del teléfono, que se cierra) de donde estaba el renglón\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [anchorPosition, setAnchorPosition] = useState(null);\n    const placement = useBarActionsPlacement();\n    const closeMoreMenu = useCloseBarActionsMenu();\n    const closeFormats = () => {\n        setAnchorElement(null);\n        setAnchorPosition(null);\n    };\n\n    // no se espera a que termine: la descarga sigue en el panel y el diálogo de confirmación se cierra de inmediato\n    const runDownload = (format) => {\n        startDownload({\n            label: downloadLabel ?? label ?? ariaLabel ?? t('actions.download'),\n            format,\n            request: (transferOptions) => download(format, transferOptions),\n            onCompleted: () => onDownloaded?.(format),\n            onFailed: (error) => onFailed?.(format, error),\n            onCanceled: () => onCanceled?.(format),\n        });\n    };\n\n    const confirmedDownload = useConfirmAction({run: ({subject}) => runDownload(subject.format)});\n\n    const chooseFormat = (format) => {\n        closeFormats();\n        if (onChooseFormat) {\n            onChooseFormat(format);\n            return;\n        }\n        if (confirmation) {\n            confirmedDownload.open({format});\n            return;\n        }\n        // Regla de tablas: nada se descarga con un solo clic. Sin confirmation ni onChooseFormat es un error de quien\n        // llama, no un camino válido: lo decimos en la consola y no descargamos\n        console.error('DownloadMenu: falta confirmation u onChooseFormat; toda descarga pasa por un diálogo de confirmación');\n    };\n\n    const buttonLabel = label ?? t('actions.download');\n    const openMenu = (event) => setAnchorElement(event.currentTarget);\n    // desde el «⋯»: se cierra ese menú y los formatos salen donde estaba el renglón\n    const openFromMoreMenu = (event) => {\n        const {bottom, right} = event.currentTarget.getBoundingClientRect();\n        closeMoreMenu();\n        setAnchorPosition({top: bottom, left: right});\n    };\n    const isFormatsOpen = Boolean(anchorElement || anchorPosition);\n    const confirmationTexts = confirmedDownload.subject ? confirmation?.(confirmedDownload.subject.format) : null;\n\n    return (\n        <>\n            {placement === BAR_ACTIONS_PLACEMENT.menu && (\n                <MenuItem disabled={disabled} aria-haspopup=\"menu\" onClick={openFromMoreMenu}>\n                    <ListItemIcon><ButtonIcon /></ListItemIcon>\n                    <ListItemText>{buttonLabel}</ListItemText>\n                </MenuItem>\n            )}\n            {placement === BAR_ACTIONS_PLACEMENT.capsule && (\n                // en la cápsula, del tamaño y color de las demás acciones (BarActionButton)\n                <Tooltip title={buttonLabel} describeChild>\n                    <span>\n                        <IconButton color=\"primary\" aria-label={buttonLabel} aria-haspopup=\"menu\" aria-expanded={isFormatsOpen}\n                                    disabled={disabled} onClick={openMenu}>\n                            <ButtonIcon />\n                        </IconButton>\n                    </span>\n                </Tooltip>\n            )}\n            {placement === BAR_ACTIONS_PLACEMENT.inline && (variant === 'icon' ? (\n                // describeChild: el nombre accesible ya lo trae el botón; sin esto el Tooltip le pone el mismo aria-label al\n                // span y un lector de pantalla (o una prueba) encuentra dos \"botones\" con el mismo nombre\n                <Tooltip title={ariaLabel ?? buttonLabel} describeChild>\n                    {/* el span deja que el tooltip funcione con el botón inhabilitado */}\n                    <span>\n                        <IconButton size=\"small\" aria-label={ariaLabel ?? buttonLabel} aria-haspopup=\"menu\"\n                                    disabled={disabled} onClick={openMenu}>\n                            <ButtonIcon fontSize=\"small\" />\n                        </IconButton>\n                    </span>\n                </Tooltip>\n            ) : (\n                <Button variant=\"outlined\" startIcon={<ButtonIcon />} endIcon={<ArrowDropDownIcon />}\n                        sx={{flexShrink: 0}} disabled={disabled} aria-haspopup=\"menu\" onClick={openMenu}>\n                    {buttonLabel}\n                </Button>\n            ))}\n            <Menu open={isFormatsOpen} onClose={closeFormats}\n                  anchorReference={anchorPosition ? 'anchorPosition' : 'anchorEl'} anchorEl={anchorElement} anchorPosition={anchorPosition ?? undefined}\n                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} transformOrigin={{vertical: 'top', horizontal: 'right'}}>\n                {formats.map((format) => {\n                    const fileType = fileTypes[format];\n                    const Icon = fileType?.Icon ?? FileDownloadOutlinedIcon;\n                    return (\n                        <MenuItem key={format} onClick={() => chooseFormat(format)}>\n                            <ListItemIcon><Icon fontSize=\"small\" /></ListItemIcon>\n                            {/* los de la casa con sus textos; los del proyecto con su label y hint (o esas llaves en sus texts) */}\n                            <ListItemText primary={t(`download.formats.${format}.label`, {defaultValue: fileType?.label ?? format.toUpperCase()})}\n                                          secondary={t(`download.formats.${format}.hint`, {defaultValue: fileType?.hint ?? ''})}\n                                          slotProps={{secondary: {variant: 'caption'}}} />\n                        </MenuItem>\n                    );\n                })}\n            </Menu>\n            {confirmation && (\n                <ConfirmDialog\n                    {...confirmedDownload.dialogProps}\n                    title={confirmationTexts?.title ?? ''}\n                    description={confirmationTexts?.description}\n                    confirmLabel={confirmationTexts?.confirmLabel ?? t('actions.download')}\n                />\n            )}\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DownloadMenu.js","sources":["../../../src/ui/actions/DownloadMenu.jsx"],"sourcesContent":["// \"Descargar ▾\" con los formatos de un reporte: PDF para leer o archivar, Excel o CSV para trabajar.\n//\n// Un solo botón y no tres: en la barra de una pantalla tres botones de descarga compiten con la acción principal.\n// Se acomoda a donde quedó, como BarActionButton: en una cápsula de la barra (las `actions` de PageHeading con cápsulas)\n// es solo el ícono con su nombre en el tooltip, como las demás acciones; antes salía la píldora «Descargar ▾» dentro de\n// la cápsula y se veía una cápsula dentro de otra. En el «⋯» del teléfono es un renglón que abre los formatos.\n// Quien llama pasa QUÉ descargar por formato (download(format, transferOptions) → {blob, fileName}, la forma de\n// un cliente HTTP que descarga). La descarga va al panel de descargas (startDownload, downloads): el diálogo se cierra al\n// confirmar y el avance, el aviso de \"descargado\" y el error se ven allá, mientras la persona sigue trabajando.\n//\n// Regla de tablas: una descarga pasa por un diálogo de confirmación que dice qué se va a bajar (p. ej. que la base\n// completa de clientes tarda unos minutos). Con `confirmation` el formato elegido NO se descarga de inmediato: abre\n// ConfirmDialog (máquina confirmActionMachine) y solo al confirmar se pide el archivo, una sola vez aunque haya doble clic.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDownloadMenu con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\nimport {startDownload} from '@/downloads/downloadQueue.js';\nimport {useFileTypes} from '@/downloads/fileTypes.js';\nimport ConfirmDialog from '@/feedback/ConfirmDialog.jsx';\nimport {useConfirmAction} from '@/feedback/useConfirmAction.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDownloadMenu)\nconst THEME_NAME = 'CalcitaDownloadMenu';\nconst DownloadButton = piecePart(THEME_NAME, 'Button', Button);\n\n\n/**\n * @param {object} props\n * @param {string[]} props.formats los tipos de archivo, en orden: los de la casa (xlsx, csv, pdf) y los que el proyecto declare\n *     en ToolkitProvider fileTypes (zip, xml…)\n * @param {(format: string, transferOptions: {signal: AbortSignal, onDownloadProgress: (progress: {loaded: number, total?: number|null}) => void}) => Promise<{blob: Blob, fileName: string}>} props.download\n * @param {string} [props.label] ya traducido; por defecto \"Descargar\"\n * @param {string} [props.downloadLabel] ya traducido; lo que se ve en el panel de descargas antes de saber el nombre\n *     del archivo\n * @param {boolean} [props.disabled]\n * @param {(format: string) => {title: string, description: import('react').ReactNode, confirmLabel?: string}} [props.confirmation]\n * @param {(format: string) => void} [props.onDownloaded] p. ej. volver a pedir la tabla (si la descarga cambia algo en\n *     el servidor)\n * @param {(format: string, error: unknown) => void} [props.onFailed] cuando la descarga no se pudo (el panel ya lo dice)\n * @param {(format: string) => void} [props.onCanceled] cuando la persona la canceló desde el panel\n * @param {'button'|'icon'} [props.variant] icon = solo el icono (columna de acciones de una tabla)\n * @param {string} [props.ariaLabel] ya traducido; obligatorio en la variante icon\n * @param {(format: string) => void} [props.onChooseFormat] quien llama se encarga de confirmar y descargar\n * @param {import('react').ElementType} [props.icon] ícono del botón; por defecto el de descarga. Distingue dos descargas en la\n *     misma fila\n *\n * IMPORTANTE: hay que pasar `confirmation` u `onChooseFormat`. Sin ninguno de los dos el menú no descarga nada (regla de\n * tablas: toda descarga pasa por confirmación).\n *\n * OJO onChooseFormat: dentro de una celda del DataGrid el diálogo de confirmación NO puede vivir en la celda (el grid\n * virtualiza y vuelve a pintar sus celdas; el diálogo se perdía al elegir el formato). Ahí el menú solo avisa qué formato\n * se eligió y la pantalla abre SU confirmación (useConfirmAction) fuera de la tabla.\n */\nexport default function DownloadMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDownloadMenu.defaultProps) y encima lo que llega aquí\n    const {\n    formats, download, label, downloadLabel, disabled = false, confirmation, onDownloaded, onFailed, onCanceled, variant = 'button', ariaLabel,\n    onChooseFormat, icon: ButtonIcon = FileDownloadOutlinedIcon,\n} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common');\n    const fileTypes = useFileTypes();\n    // de dónde sale el menú de formatos: del botón, o (desde el «⋯» del teléfono, que se cierra) de donde estaba el renglón\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [anchorPosition, setAnchorPosition] = useState(null);\n    const placement = useBarActionsPlacement();\n    const closeMoreMenu = useCloseBarActionsMenu();\n    const closeFormats = () => {\n        setAnchorElement(null);\n        setAnchorPosition(null);\n    };\n\n    // no se espera a que termine: la descarga sigue en el panel y el diálogo de confirmación se cierra de inmediato\n    const runDownload = (format) => {\n        startDownload({\n            label: downloadLabel ?? label ?? ariaLabel ?? t('actions.download'),\n            format,\n            request: (transferOptions) => download(format, transferOptions),\n            onCompleted: () => onDownloaded?.(format),\n            onFailed: (error) => onFailed?.(format, error),\n            onCanceled: () => onCanceled?.(format),\n        });\n    };\n\n    const confirmedDownload = useConfirmAction({run: ({subject}) => runDownload(subject.format)});\n\n    const chooseFormat = (format) => {\n        closeFormats();\n        if (onChooseFormat) {\n            onChooseFormat(format);\n            return;\n        }\n        if (confirmation) {\n            confirmedDownload.open({format});\n            return;\n        }\n        // Regla de tablas: nada se descarga con un solo clic. Sin confirmation ni onChooseFormat es un error de quien\n        // llama, no un camino válido: lo decimos en la consola y no descargamos\n        console.error('DownloadMenu: falta confirmation u onChooseFormat; toda descarga pasa por un diálogo de confirmación');\n    };\n\n    const buttonLabel = label ?? t('actions.download');\n    const openMenu = (event) => setAnchorElement(event.currentTarget);\n    // desde el «⋯»: se cierra ese menú y los formatos salen donde estaba el renglón\n    const openFromMoreMenu = (event) => {\n        const {bottom, right} = event.currentTarget.getBoundingClientRect();\n        closeMoreMenu();\n        setAnchorPosition({top: bottom, left: right});\n    };\n    const isFormatsOpen = Boolean(anchorElement || anchorPosition);\n    const confirmationTexts = confirmedDownload.subject ? confirmation?.(confirmedDownload.subject.format) : null;\n\n    return (\n        <>\n            {placement === BAR_ACTIONS_PLACEMENT.menu && (\n                <MenuItem disabled={disabled} aria-haspopup=\"menu\" onClick={openFromMoreMenu}>\n                    <ListItemIcon><ButtonIcon /></ListItemIcon>\n                    <ListItemText>{buttonLabel}</ListItemText>\n                </MenuItem>\n            )}\n            {placement === BAR_ACTIONS_PLACEMENT.capsule && (\n                // en la cápsula, del tamaño y color de las demás acciones (BarActionButton)\n                <Tooltip title={buttonLabel} describeChild>\n                    <span>\n                        <IconButton color=\"primary\" aria-label={buttonLabel} aria-haspopup=\"menu\" aria-expanded={isFormatsOpen}\n                                    disabled={disabled} onClick={openMenu}>\n                            <ButtonIcon />\n                        </IconButton>\n                    </span>\n                </Tooltip>\n            )}\n            {placement === BAR_ACTIONS_PLACEMENT.inline && (variant === 'icon' ? (\n                // describeChild: el nombre accesible ya lo trae el botón; sin esto el Tooltip le pone el mismo aria-label al\n                // span y un lector de pantalla (o una prueba) encuentra dos \"botones\" con el mismo nombre\n                <Tooltip title={ariaLabel ?? buttonLabel} describeChild>\n                    {/* el span deja que el tooltip funcione con el botón inhabilitado */}\n                    <span>\n                        <IconButton size=\"small\" aria-label={ariaLabel ?? buttonLabel} aria-haspopup=\"menu\"\n                                    disabled={disabled} onClick={openMenu}>\n                            <ButtonIcon fontSize=\"small\" />\n                        </IconButton>\n                    </span>\n                </Tooltip>\n            ) : (\n                <DownloadButton variant=\"outlined\" startIcon={<ButtonIcon />} endIcon={<ArrowDropDownIcon />}\n                        ownSx={{flexShrink: 0}} disabled={disabled} aria-haspopup=\"menu\" onClick={openMenu}>\n                    {buttonLabel}\n                </DownloadButton>\n            ))}\n            <Menu open={isFormatsOpen} onClose={closeFormats}\n                  anchorReference={anchorPosition ? 'anchorPosition' : 'anchorEl'} anchorEl={anchorElement} anchorPosition={anchorPosition ?? undefined}\n                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} transformOrigin={{vertical: 'top', horizontal: 'right'}}>\n                {formats.map((format) => {\n                    const fileType = fileTypes[format];\n                    const Icon = fileType?.Icon ?? FileDownloadOutlinedIcon;\n                    return (\n                        <MenuItem key={format} onClick={() => chooseFormat(format)}>\n                            <ListItemIcon><Icon fontSize=\"small\" /></ListItemIcon>\n                            {/* los de la casa con sus textos; los del proyecto con su label y hint (o esas llaves en sus texts) */}\n                            <ListItemText primary={t(`download.formats.${format}.label`, {defaultValue: fileType?.label ?? format.toUpperCase()})}\n                                          secondary={t(`download.formats.${format}.hint`, {defaultValue: fileType?.hint ?? ''})}\n                                          slotProps={{secondary: {variant: 'caption'}}} />\n                        </MenuItem>\n                    );\n                })}\n            </Menu>\n            {confirmation && (\n                <ConfirmDialog\n                    {...confirmedDownload.dialogProps}\n                    title={confirmationTexts?.title ?? ''}\n                    description={confirmationTexts?.description}\n                    confirmLabel={confirmationTexts?.confirmLabel ?? t('actions.download')}\n                />\n            )}\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/actions/SelectionActions.js

@@ -18,6 +18,13 @@ import { usesMobileTabBar } from "../../appShell/tabBarRule.js";
 import { minimalFloatingStylesOf } from "../../theme/components/minimalComponents.js";
 import { isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
 import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaSelectionActions";
+const SelectionBar = piecePart(THEME_NAME, "Bar", Stack);
+const SelectionCount = piecePart(THEME_NAME, "Count", Typography);
+const SelectionClear = piecePart(THEME_NAME, "Clear", Button);
+const SelectionPhoneCount = piecePart(THEME_NAME, "PhoneCount", Typography);
+const SelectionPhoneActions = piecePart(THEME_NAME, "PhoneActions", Box);
 const SELECTION_PHONE_LAYOUT = Object.freeze({ top: "top", split: "split" });
 const FLOATING_GAP_PIXELS = 8;
 const FLOATING_BOTTOM_SPACE_PIXELS = 64;
@@ -41,7 +48,8 @@ function bottomCapsuleSxOf(theme) {
     ...aboveMobileTabBarOf(FLOATING_GAP_PIXELS)
   };
 }
-function SelectionActions({ countText, actions = [], onClear, phoneLayout = SELECTION_PHONE_LAYOUT.top, texts, sx }) {
+function SelectionActions(props) {
+  const { countText, actions = [], onClear, phoneLayout = SELECTION_PHONE_LAYOUT.top, texts, sx } = usePieceProps(props, THEME_NAME);
   const theme = useTheme();
   const { t } = useToolkitTranslation("common", texts);
   const [runningActionKey, setRunningActionKey] = useState(null);
@@ -58,20 +66,20 @@ function SelectionActions({ countText, actions = [], onClear, phoneLayout = SELE
   const isDisabledOf = (action) => runningActionKey !== null || Boolean(action.disabled);
   const clearButton = /* @__PURE__ */ jsx(Tooltip, { title: t("selection.clear"), children: /* @__PURE__ */ jsx(IconButton, { "aria-label": t("selection.clear"), onClick: onClear, children: /* @__PURE__ */ jsx(CloseRoundedIcon, {}) }) });
   const row = /* @__PURE__ */ jsxs(
-    Stack,
+    SelectionBar,
     {
       role: "toolbar",
       "aria-label": t("selection.actionsLabel"),
       direction: "row",
       spacing: 1,
       useFlexGap: true,
-      sx: [
+      ownSx: [
         { flexGrow: 1, alignItems: "center", flexWrap: "wrap", minHeight: 32 },
         floatsOnPhone && { [PHONE_MEDIA_QUERY]: { display: "none" } },
         ...extraSx
       ],
       children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, mr: 1 }, children: countText }),
+        /* @__PURE__ */ jsx(SelectionCount, { variant: "body2", ownSx: { fontWeight: 600, mr: 1 }, children: countText }),
         actions.map((action) => /* @__PURE__ */ jsx(
           Button,
           {
@@ -84,7 +92,7 @@ function SelectionActions({ countText, actions = [], onClear, phoneLayout = SELE
           },
           action.key
         )),
-        /* @__PURE__ */ jsx(Button, { size: "small", color: "inherit", startIcon: /* @__PURE__ */ jsx(CloseRoundedIcon, {}), onClick: onClear, sx: { ml: "auto" }, children: t("selection.clear") })
+        /* @__PURE__ */ jsx(SelectionClear, { size: "small", color: "inherit", startIcon: /* @__PURE__ */ jsx(CloseRoundedIcon, {}), onClick: onClear, ownSx: { ml: "auto" }, children: t("selection.clear") })
       ]
     }
   );
@@ -95,7 +103,7 @@ function SelectionActions({ countText, actions = [], onClear, phoneLayout = SELE
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     row,
     /* @__PURE__ */ jsx(BarActions, { bare: true, exclusive: true, order: -2, sx: PHONE_ONLY_SX, inlineSx: PHONE_ONLY_SX, children: /* @__PURE__ */ jsxs(BarCapsule, { "aria-label": t("selection.summaryLabel"), sx: { pl: 2 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", role: "status", "aria-live": "polite", sx: { fontWeight: 600, whiteSpace: "nowrap", mr: 0.5 }, children: countText }),
+      /* @__PURE__ */ jsx(SelectionPhoneCount, { variant: "body2", role: "status", "aria-live": "polite", ownSx: { fontWeight: 600, whiteSpace: "nowrap", mr: 0.5 }, children: countText }),
       clearButton
     ] }) }),
     phoneLayout === SELECTION_PHONE_LAYOUT.top && actions.length > 0 && /* @__PURE__ */ jsx(BarActions, { label: t("selection.actionsLabel"), exclusive: true, order: -1, sx: PHONE_ONLY_SX, inlineSx: PHONE_ONLY_SX, children: actions.map((action) => /* @__PURE__ */ jsx(
@@ -111,7 +119,7 @@ function SelectionActions({ countText, actions = [], onClear, phoneLayout = SELE
     )) }),
     showsBottomCapsule && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(GlobalStyles, { styles: { ":root": { [FLOATING_BOTTOM_SPACE_CSS_VARIABLE]: `${FLOATING_BOTTOM_SPACE_PIXELS}px` } } }),
-      /* @__PURE__ */ jsx(Box, { role: "toolbar", "aria-label": t("selection.actionsLabel"), sx: [bottomCapsuleSxOf, PHONE_ONLY_SX], children: actions.map((action) => action.icon ? /* @__PURE__ */ jsx(Tooltip, { title: action.label, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(SelectionPhoneActions, { role: "toolbar", "aria-label": t("selection.actionsLabel"), ownSx: [bottomCapsuleSxOf, PHONE_ONLY_SX], children: actions.map((action) => action.icon ? /* @__PURE__ */ jsx(Tooltip, { title: action.label, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
         IconButton,
         {
           "aria-label": action.label,