@stackcraftmx/calcita 0.23.0 → 0.26.0

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

@@ -0,0 +1,112 @@
+/** Los colores de las series, en orden, cuando la pantalla no dice el suyo: los del tema. */
+export declare const CHART_SERIES_TONES: readonly string[];
+/** El trazo de cada serie de líneas, en orden (continuo, rayado, punteado): así no se distinguen solo por el color. */
+export declare const CHART_LINE_DASHES: readonly string[];
+/**
+ * Los colores de las gráficas, leídos del tema: con variables CSS salen como var(--su-prefijo-palette-…) y sirven en claro y
+ * en oscuro sin volver a pintar; sin ellas, el color de la paleta.
+ *
+ * @returns {{palette: object, axis: string, axisText: {fill: string, fontSize: number}, grid: string, text: string, muted: string, hover: string}}
+ */
+export declare function useChartColors(): {
+    palette: object;
+    axis: string;
+    axisText: {
+        fill: string;
+        fontSize: number;
+    };
+    grid: string;
+    text: string;
+    muted: string;
+    hover: string;
+};
+/**
+ * Ancho del eje de valores para que quepa su número más largo.
+ *
+ * @param {number} highestValue el valor más alto que se dibuja
+ * @param {(value: number) => string} formatValue cómo se escribe un valor
+ * @returns {number} pixeles
+ */
+export declare function valueAxisWidthOf(highestValue: number, formatValue: (value: number) => string): number;
+/**
+ * Las series con su color y su trazo resueltos (lo que la pantalla no dijo, por su lugar en la lista).
+ *
+ * @param {Array<{key: string, label: string, tone?: string, dash?: string}>} series
+ * @param {object} palette la del tema (useChartColors().palette)
+ * @returns {Array<{key: string, label: string, tone: string, color: string, dash: string}>}
+ */
+export declare function resolvedSeriesOf(series: Array<{
+    key: string;
+    label: string;
+    tone?: string;
+    dash?: string;
+}>, palette: object): Array<{
+    key: string;
+    label: string;
+    tone: string;
+    color: string;
+    dash: string;
+}>;
+/**
+ * El valor más alto de todas las series (y de la línea de referencia), para el ancho del eje.
+ *
+ * @param {Array<Record<string, any>>} data
+ * @param {Array<{key: string}>} series
+ * @param {{value: number}|undefined} referenceLine
+ * @returns {number}
+ */
+export declare function highestValueOf(data: Array<Record<string, any>>, series: Array<{
+    key: string;
+}>, referenceLine: {
+    value: number;
+} | undefined): number;
+/**
+ * La vista de tabla: un renglón por periodo y una columna por serie.
+ *
+ * @param {object} props
+ * @param {Array<Record<string, any>>} props.data
+ * @param {Array<{key: string, label: string}>} props.series
+ * @param {string} props.periodLabel
+ * @param {(value: number) => string} props.formatValue
+ * @param {number} props.height
+ */
+export declare function ChartTable({ data, series, periodLabel, formatValue, height }: {
+    data: Array<Record<string, any>>;
+    series: Array<{
+        key: string;
+        label: string;
+    }>;
+    periodLabel: string;
+    formatValue: (value: number) => string;
+    height: number;
+}): import("react").JSX.Element;
+/**
+ * La leyenda: solo con dos series o más. Cada una con su muestra (su color y, en líneas, su trazo).
+ *
+ * @param {object} props
+ * @param {Array<{key: string, label: string, color: string, dash: string}>} props.series ya resueltas
+ * @param {boolean} [props.showsDash] la muestra con el trazo de su línea (LineChart); sin él, un cuadro de color
+ * @param {string} props.ariaLabel
+ */
+export declare function ChartLegend({ series, showsDash, ariaLabel }: {
+    series: Array<{
+        key: string;
+        label: string;
+        color: string;
+        dash: string;
+    }>;
+    showsDash?: boolean;
+    ariaLabel: string;
+}): import("react").JSX.Element | null;
+/**
+ * El rótulo de la línea de referencia (la meta), debajo de la gráfica: sobre la línea se encimaba con la última columna, y
+ * así también lo lee quien ve la tabla.
+ *
+ * @param {{referenceLine?: {value: number, label: string}}} props
+ */
+export declare function ReferenceCaption({ referenceLine }: {
+    referenceLine?: {
+        value: number;
+        label: string;
+    };
+}): import("react").JSX.Element | null;

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

@@ -3,9 +3,11 @@
  * @param {string} props.fallbackTo ruta de la lista sin filtros (último respaldo)
  * @param {string} [props.listKey] la misma llave que usa useRememberListUrl en la lista
  * @param {string} [props.label] ya traducido; se usa cuando la página anterior no anotó su nombre o no hay historial
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function BackButton({ fallbackTo, listKey, label, ...buttonProps }: {
+export default function BackButton({ fallbackTo, listKey, label, texts, ...buttonProps }: {
     fallbackTo: string;
     listKey?: string;
     label?: string;
+    texts?: object;
 }): import("react").JSX.Element;

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

@@ -1,7 +1,13 @@
 /**
- * @param {{size?: 'small'|'medium', inverted?: boolean}} props inverted = icono blanco para fondos oscuros
+ * @param {object} [props]
+ * @param {'small'|'medium'} [props.size]
+ * @param {boolean} [props.inverted] ícono blanco para fondos oscuros
+ * @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 }: {
+export default function ColorSchemeToggle({ size, inverted, onChange, texts }?: {
     size?: 'small' | 'medium';
     inverted?: boolean;
+    onChange?: (mode: 'light' | 'dark' | 'system') => void;
+    texts?: object;
 }): import("react").JSX.Element;

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

@@ -1,6 +1,11 @@
 /**
- * @param {{size?: 'small'|'medium'}} props
+ * @param {object} [props]
+ * @param {'small'|'medium'} [props.size]
+ * @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 }: {
+export default function FontSizeToggle({ size, onChange, texts }?: {
     size?: 'small' | 'medium';
+    onChange?: (level: string) => void;
+    texts?: object;
 }): import("react").JSX.Element;

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

@@ -1,8 +1,13 @@
 /** Los idiomas que traen los textos del paquete. */
-export declare const LANGUAGES: readonly string[];
+export declare const LANGUAGES: readonly ("en" | "es")[];
 /**
- * @param {{inverted?: boolean}} props inverted = texto blanco para fondos oscuros
+ * @param {object} [props]
+ * @param {boolean} [props.inverted] texto blanco para fondos oscuros
+ * @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 }: {
+export default function LanguageToggle({ inverted, onChange, texts }?: {
     inverted?: boolean;
+    onChange?: (language: string) => void;
+    texts?: object;
 }): import("react").JSX.Element;

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

@@ -1,9 +1,12 @@
 /**
- * @param {{items: Array<{label: string, to?: string}>}} props textos ya traducidos
+ * @param {object} props
+ * @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 }: {
+export default function PageBreadcrumbs({ items, texts }: {
     items: Array<{
         label: string;
         to?: string;
     }>;
+    texts?: object;
 }): import("react").JSX.Element | null;

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

@@ -16,8 +16,10 @@
  * @param {import('react').ReactNode} props.groups[].items[].title
  * @param {string} [props.groups[].items[].timestamp] fecha y hora ya formateadas
  * @param {import('react').ReactNode} [props.groups[].items[].details] lo que va abajo del título (chip de resultado, una liga...)
+ * @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 }: {
+export default function GroupedTimeline({ groups, onGroupToggle }: {
     groups: {
         key: string;
         title?: string;
@@ -35,4 +37,5 @@ export default function GroupedTimeline({ groups }: {
             details?: import('react').ReactNode;
         }[];
     }[];
+    onGroupToggle?: (groupKey: string, isExpanded: boolean) => void;
 }): import("react").JSX.Element;

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

@@ -13,8 +13,9 @@
  * @param {import('react').ReactNode} [props.actions]
  * @param {import('react').ReactNode} [props.children]
  * @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, }: {
+export default function FileDropzone({ value, onChange, accept, maxSize, hint, buttonLabel, disabled, busy, busyModal, onReject, actions, children, sx, texts, }: {
     value?: File | null;
     onChange: (file: File | null) => void;
     accept?: string | string[];
@@ -31,4 +32,5 @@ export default function FileDropzone({ value, onChange, accept, maxSize, hint, b
     actions?: import('react').ReactNode;
     children?: import('react').ReactNode;
     sx?: object;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/ui/actions/ActionsMenu.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import IconButton from "@mui/material/IconButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+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" }) {
+  const [anchor, setAnchor] = useState(null);
+  if (!actions?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: label, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size,
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        onClick: (event) => {
+          event.stopPropagation();
+          setAnchor(event.currentTarget);
+        },
+        children: icon ?? /* @__PURE__ */ jsx(MoreHorizRoundedIcon, { fontSize: "small" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Menu, { anchorEl: anchor, open: Boolean(anchor), onClose: () => setAnchor(null), onClick: (event) => event.stopPropagation(), children: actions.map((action) => /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        disabled: action.disabled,
+        onClick: () => {
+          setAnchor(null);
+          action.onClick();
+        },
+        sx: action.color ? { color: `${action.color}.main` } : void 0,
+        children: [
+          action.icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: action.color ? { color: "inherit" } : void 0, children: action.icon }),
+          /* @__PURE__ */ jsx(ListItemText, { children: action.label })
+        ]
+      },
+      action.key
+    )) })
+  ] });
+}
+export {
+  ActionsMenu as default
+};
+//# sourceMappingURL=ActionsMenu.js.map

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

@@ -0,0 +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;"}

package/dist/ui/actions/CopyButton.js

@@ -7,8 +7,8 @@ import Tooltip from "@mui/material/Tooltip";
 import CheckIcon from "@mui/icons-material/CheckRounded";
 import CopyIcon from "@mui/icons-material/ContentCopyOutlined";
 const COPIED_FEEDBACK_MILLISECONDS = 2e3;
-function CopyButton({ value, label, size = "small", onCopied }) {
-  const { t } = useToolkitTranslation("common");
+function CopyButton({ value, label, size = "small", onCopied, texts }) {
+  const { t } = useToolkitTranslation("common", texts);
   const [isCopied, setIsCopied] = useState(false);
   const buttonLabel = label ?? t("form.copy");
   const copy = async () => {

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

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","sources":["../../../src/ui/actions/CopyButton.jsx"],"sourcesContent":["// Botón para copiar un valor al portapapeles, con la palomita de «copiado» un par de segundos.\n//\n// Sin permiso de portapapeles (una página en http, dentro de un iframe) no truena: el valor sigue a la vista para copiarlo\n// a mano.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/CheckRounded';\nimport CopyIcon from '@mui/icons-material/ContentCopyOutlined';\n\n// cuánto se queda la palomita de «copiado»\nconst COPIED_FEEDBACK_MILLISECONDS = 2000;\n\n/**\n * @param {object} props\n * @param {string} props.value lo que se copia\n * @param {string} [props.label] ya traducido; por omisión «Copiar»\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onCopied]\n */\nexport default function CopyButton({value, label, size = 'small', onCopied}) {\n    const {t} = useToolkitTranslation('common');\n    const [isCopied, setIsCopied] = useState(false);\n    const buttonLabel = label ?? t('form.copy');\n\n    const copy = async () => {\n        try {\n            await navigator.clipboard.writeText(value);\n            setIsCopied(true);\n            onCopied?.();\n            setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);\n        } catch {\n            // sin permiso de portapapeles: el valor está a la vista para copiarlo a mano\n        }\n    };\n\n    return (\n        <Tooltip title={isCopied ? t('form.copied') : buttonLabel}>\n            <IconButton size={size} aria-label={buttonLabel} onClick={copy} color={isCopied ? 'success' : 'default'}>\n                {isCopied ? <CheckIcon fontSize=\"inherit\" /> : <CopyIcon fontSize=\"inherit\" />}\n            </IconButton>\n        </Tooltip>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAcA,MAAM,+BAA+B;AASrC,SAAwB,WAAW,EAAC,OAAO,OAAO,OAAO,SAAS,YAAW;AACzE,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,SAAS,EAAE,WAAW;AAE1C,QAAM,OAAO,YAAY;AACrB,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,KAAK;AACzC,kBAAY,IAAI;AAChB,iBAAA;AACA,iBAAW,MAAM,YAAY,KAAK,GAAG,4BAA4B;AAAA,IACrE,QAAQ;AAAA,IAER;AAAA,EACJ;AAEA,SACI,oBAAC,SAAA,EAAQ,OAAO,WAAW,EAAE,aAAa,IAAI,aAC1C,UAAA,oBAAC,YAAA,EAAW,MAAY,cAAY,aAAa,SAAS,MAAM,OAAO,WAAW,YAAY,WACzF,UAAA,WAAW,oBAAC,WAAA,EAAU,UAAS,UAAA,CAAU,IAAK,oBAAC,UAAA,EAAS,UAAS,UAAA,CAAU,GAChF,GACJ;AAER;"}
+{"version":3,"file":"CopyButton.js","sources":["../../../src/ui/actions/CopyButton.jsx"],"sourcesContent":["// Botón para copiar un valor al portapapeles, con la palomita de «copiado» un par de segundos.\n//\n// Sin permiso de portapapeles (una página en http, dentro de un iframe) no truena: el valor sigue a la vista para copiarlo\n// a mano.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/CheckRounded';\nimport CopyIcon from '@mui/icons-material/ContentCopyOutlined';\n\n// cuánto se queda la palomita de «copiado»\nconst COPIED_FEEDBACK_MILLISECONDS = 2000;\n\n/**\n * @param {object} props\n * @param {string} props.value lo que se copia\n * @param {string} [props.label] ya traducido; por omisión «Copiar»\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onCopied]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CopyButton({value, label, size = 'small', onCopied, texts}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const [isCopied, setIsCopied] = useState(false);\n    const buttonLabel = label ?? t('form.copy');\n\n    const copy = async () => {\n        try {\n            await navigator.clipboard.writeText(value);\n            setIsCopied(true);\n            onCopied?.();\n            setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);\n        } catch {\n            // sin permiso de portapapeles: el valor está a la vista para copiarlo a mano\n        }\n    };\n\n    return (\n        <Tooltip title={isCopied ? t('form.copied') : buttonLabel}>\n            <IconButton size={size} aria-label={buttonLabel} onClick={copy} color={isCopied ? 'success' : 'default'}>\n                {isCopied ? <CheckIcon fontSize=\"inherit\" /> : <CopyIcon fontSize=\"inherit\" />}\n            </IconButton>\n        </Tooltip>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAcA,MAAM,+BAA+B;AAUrC,SAAwB,WAAW,EAAC,OAAO,OAAO,OAAO,SAAS,UAAU,SAAQ;AAChF,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,SAAS,EAAE,WAAW;AAE1C,QAAM,OAAO,YAAY;AACrB,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,KAAK;AACzC,kBAAY,IAAI;AAChB,iBAAA;AACA,iBAAW,MAAM,YAAY,KAAK,GAAG,4BAA4B;AAAA,IACrE,QAAQ;AAAA,IAER;AAAA,EACJ;AAEA,SACI,oBAAC,SAAA,EAAQ,OAAO,WAAW,EAAE,aAAa,IAAI,aAC1C,UAAA,oBAAC,YAAA,EAAW,MAAY,cAAY,aAAa,SAAS,MAAM,OAAO,WAAW,YAAY,WACzF,UAAA,WAAW,oBAAC,WAAA,EAAU,UAAS,UAAA,CAAU,IAAK,oBAAC,UAAA,EAAS,UAAS,UAAA,CAAU,GAChF,GACJ;AAER;"}

package/dist/ui/actions/DownloadMenu.js

@@ -11,18 +11,11 @@ import MenuItem from "@mui/material/MenuItem";
 import Tooltip from "@mui/material/Tooltip";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import PictureAsPdfOutlinedIcon from "@mui/icons-material/PictureAsPdfOutlined";
-import TableViewOutlinedIcon from "@mui/icons-material/TableViewOutlined";
-import TextSnippetOutlinedIcon from "@mui/icons-material/TextSnippetOutlined";
 import { useBarActionsPlacement, useCloseBarActionsMenu, BAR_ACTIONS_PLACEMENT } from "../../appShell/barActionsSlot.js";
 import { startDownload } from "../../downloads/downloadQueue.js";
+import { useFileTypes } from "../../downloads/fileTypes.js";
 import ConfirmDialog from "../../feedback/ConfirmDialog.js";
 import { useConfirmAction } from "../../feedback/useConfirmAction.js";
-const ICON_BY_FORMAT = {
-  pdf: PictureAsPdfOutlinedIcon,
-  xlsx: TableViewOutlinedIcon,
-  csv: TextSnippetOutlinedIcon
-};
 function DownloadMenu({
   formats,
   download,
@@ -31,12 +24,15 @@ function DownloadMenu({
   disabled = false,
   confirmation,
   onDownloaded,
+  onFailed,
+  onCanceled,
   variant = "button",
   ariaLabel,
   onChooseFormat,
   icon: ButtonIcon = FileDownloadOutlinedIcon
 }) {
   const { t } = useToolkitTranslation("common");
+  const fileTypes = useFileTypes();
   const [anchorElement, setAnchorElement] = useState(null);
   const [anchorPosition, setAnchorPosition] = useState(null);
   const placement = useBarActionsPlacement();
@@ -50,7 +46,9 @@ function DownloadMenu({
       label: downloadLabel ?? label ?? ariaLabel ?? t("actions.download"),
       format,
       request: (transferOptions) => download(format, transferOptions),
-      onCompleted: () => onDownloaded?.(format)
+      onCompleted: () => onDownloaded?.(format),
+      onFailed: (error) => onFailed?.(format, error),
+      onCanceled: () => onCanceled?.(format)
     });
   };
   const confirmedDownload = useConfirmAction({ run: ({ subject }) => runDownload(subject.format) });
@@ -131,14 +129,15 @@ function DownloadMenu({
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
         children: formats.map((format) => {
-          const Icon = ICON_BY_FORMAT[format] ?? FileDownloadOutlinedIcon;
+          const fileType = fileTypes[format];
+          const Icon = fileType?.Icon ?? FileDownloadOutlinedIcon;
           return /* @__PURE__ */ jsxs(MenuItem, { onClick: () => chooseFormat(format), children: [
             /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) }),
             /* @__PURE__ */ jsx(
               ListItemText,
               {
-                primary: t(`download.formats.${format}.label`),
-                secondary: t(`download.formats.${format}.hint`),
+                primary: t(`download.formats.${format}.label`, { defaultValue: fileType?.label ?? format.toUpperCase() }),
+                secondary: t(`download.formats.${format}.hint`, { defaultValue: fileType?.hint ?? "" }),
                 slotProps: { secondary: { variant: "caption" } }
               }
             )

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';\nimport PictureAsPdfOutlinedIcon from '@mui/icons-material/PictureAsPdfOutlined';\nimport TableViewOutlinedIcon from '@mui/icons-material/TableViewOutlined';\nimport TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\nimport {startDownload} from '@/downloads/downloadQueue.js';\nimport ConfirmDialog from '@/feedback/ConfirmDialog.jsx';\nimport {useConfirmAction} from '@/feedback/useConfirmAction.js';\n\nconst ICON_BY_FORMAT = {\n    pdf: PictureAsPdfOutlinedIcon,\n    xlsx: TableViewOutlinedIcon,\n    csv: TextSnippetOutlinedIcon,\n};\n\n/**\n * @param {object} props\n * @param {Array<'pdf'|'xlsx'|'csv'>} props.formats\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 {'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, variant = 'button', ariaLabel, onChooseFormat,\n    icon: ButtonIcon = FileDownloadOutlinedIcon,\n}) {\n    const {t} = useToolkitTranslation('common');\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        });\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 Icon = ICON_BY_FORMAT[format] ?? FileDownloadOutlinedIcon;\n                    return (\n                        <MenuItem key={format} onClick={() => chooseFormat(format)}>\n                            <ListItemIcon><Icon fontSize=\"small\" /></ListItemIcon>\n                            <ListItemText primary={t(`download.formats.${format}.label`)} secondary={t(`download.formats.${format}.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// 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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"}

package/dist/ui/actions/SecretField.js

@@ -13,11 +13,15 @@ import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import FieldFrame from "../../inputs/FieldFrame.js";
 const COPIED_FEEDBACK_MILLISECONDS = 2e3;
 const MONOSPACE_FONT = "ui-monospace, SFMono-Regular, Menlo, monospace";
-function SecretField({ value, label, helperText = " ", onCopied }) {
-  const { t } = useToolkitTranslation("common");
+function SecretField({ value, label, helperText = " ", onCopied, onRevealChange, texts }) {
+  const { t } = useToolkitTranslation("common", texts);
   const generatedId = useId();
   const inputId = `secret-${generatedId}`;
-  const [isRevealed, setIsRevealed] = useState(false);
+  const [isRevealed, setIsRevealedState] = useState(false);
+  const setIsRevealed = (nextIsRevealed) => {
+    setIsRevealedState(nextIsRevealed);
+    onRevealChange?.(nextIsRevealed);
+  };
   const [isCopied, setIsCopied] = useState(false);
   const revealLabel = isRevealed ? t("form.hidePassword") : t("form.showPassword");
   const copy = async () => {
@@ -43,7 +47,7 @@ function SecretField({ value, label, helperText = " ", onCopied }) {
         htmlInput: { readOnly: true, spellCheck: false, autoComplete: "off", style: { fontFamily: MONOSPACE_FONT } },
         input: {
           endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
-            /* @__PURE__ */ jsx(Tooltip, { title: revealLabel, children: /* @__PURE__ */ jsx(IconButton, { size: "small", "aria-label": revealLabel, onClick: () => setIsRevealed((current) => !current), children: isRevealed ? /* @__PURE__ */ jsx(VisibilityOffOutlinedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(VisibilityOutlinedIcon, { fontSize: "small" }) }) }),
+            /* @__PURE__ */ jsx(Tooltip, { title: revealLabel, children: /* @__PURE__ */ jsx(IconButton, { size: "small", "aria-label": revealLabel, onClick: () => setIsRevealed(!isRevealed), children: isRevealed ? /* @__PURE__ */ jsx(VisibilityOffOutlinedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(VisibilityOutlinedIcon, { fontSize: "small" }) }) }),
             /* @__PURE__ */ jsx(Tooltip, { title: isCopied ? t("form.copied") : t("form.copy"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", "aria-label": t("form.copy"), onClick: copy, color: isCopied ? "success" : "default", children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(CopyIcon, { fontSize: "small" }) }) })
           ] })
         }

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

@@ -1 +1 @@
-{"version":3,"file":"SecretField.js","sources":["../../../src/ui/actions/SecretField.jsx"],"sourcesContent":["// Un secreto que se enseña UNA vez (una clave de acceso, un token recién creado): tapado por omisión, con el ojo para verlo\n// y el botón para copiarlo.\n//\n// Tapado porque la pantalla se comparte, se graba o la ve quien pasa por atrás; el botón de copiar evita seleccionarlo a\n// mano y dejar un carácter afuera. Si el navegador no deja copiar, se destapa para copiarlo a mano.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/CheckRounded';\nimport CopyIcon from '@mui/icons-material/ContentCopyOutlined';\nimport VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\n\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\nconst COPIED_FEEDBACK_MILLISECONDS = 2000;\nconst MONOSPACE_FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * @param {object} props\n * @param {string} props.value el secreto\n * @param {string} props.label ya traducido\n * @param {string} [props.helperText] p. ej. «Guárdela: no se vuelve a enseñar»\n * @param {() => void} [props.onCopied]\n */\nexport default function SecretField({value, label, helperText = ' ', onCopied}) {\n    const {t} = useToolkitTranslation('common');\n    const generatedId = useId();\n    const inputId = `secret-${generatedId}`;\n    const [isRevealed, setIsRevealed] = useState(false);\n    const [isCopied, setIsCopied] = useState(false);\n    const revealLabel = isRevealed ? t('form.hidePassword') : t('form.showPassword');\n\n    const copy = async () => {\n        try {\n            await navigator.clipboard.writeText(value);\n            setIsCopied(true);\n            onCopied?.();\n            setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);\n        } catch {\n            // sin permiso de portapapeles: se destapa para copiarlo a mano\n            setIsRevealed(true);\n        }\n    };\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <TextField\n                id={inputId}\n                fullWidth\n                size=\"small\"\n                value={value}\n                helperText={helperText}\n                type={isRevealed ? 'text' : 'password'}\n                slotProps={{\n                    htmlInput: {readOnly: true, spellCheck: false, autoComplete: 'off', style: {fontFamily: MONOSPACE_FONT}},\n                    input: {\n                        endAdornment: (\n                            <InputAdornment position=\"end\">\n                                <Tooltip title={revealLabel}>\n                                    <IconButton size=\"small\" aria-label={revealLabel} onClick={() => setIsRevealed((current) => !current)}>\n                                        {isRevealed ? <VisibilityOffOutlinedIcon fontSize=\"small\" /> : <VisibilityOutlinedIcon fontSize=\"small\" />}\n                                    </IconButton>\n                                </Tooltip>\n                                <Tooltip title={isCopied ? t('form.copied') : t('form.copy')}>\n                                    <IconButton size=\"small\" aria-label={t('form.copy')} onClick={copy} color={isCopied ? 'success' : 'default'}>\n                                        {isCopied ? <CheckIcon fontSize=\"small\" /> : <CopyIcon fontSize=\"small\" />}\n                                    </IconButton>\n                                </Tooltip>\n                            </InputAdornment>\n                        ),\n                    },\n                }}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,+BAA+B;AACrC,MAAM,iBAAiB;AASvB,SAAwB,YAAY,EAAC,OAAO,OAAO,aAAa,KAAK,YAAW;AAC5E,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,UAAU,WAAW;AACrC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,aAAa,EAAE,mBAAmB,IAAI,EAAE,mBAAmB;AAE/E,QAAM,OAAO,YAAY;AACrB,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,KAAK;AACzC,kBAAY,IAAI;AAChB,iBAAA;AACA,iBAAW,MAAM,YAAY,KAAK,GAAG,4BAA4B;AAAA,IACrE,QAAQ;AAEJ,oBAAc,IAAI;AAAA,IACtB;AAAA,EACJ;AAEA,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,WAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM,aAAa,SAAS;AAAA,MAC5B,WAAW;AAAA,QACP,WAAW,EAAC,UAAU,MAAM,YAAY,OAAO,cAAc,OAAO,OAAO,EAAC,YAAY,eAAA,EAAc;AAAA,QACtG,OAAO;AAAA,UACH,cACI,qBAAC,gBAAA,EAAe,UAAS,OACrB,UAAA;AAAA,YAAA,oBAAC,SAAA,EAAQ,OAAO,aACZ,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,aAAa,SAAS,MAAM,cAAc,CAAC,YAAY,CAAC,OAAO,GAC/F,UAAA,aAAa,oBAAC,2BAAA,EAA0B,UAAS,QAAA,CAAQ,IAAK,oBAAC,wBAAA,EAAuB,UAAS,QAAA,CAAQ,EAAA,CAC5G,GACJ;AAAA,YACA,oBAAC,SAAA,EAAQ,OAAO,WAAW,EAAE,aAAa,IAAI,EAAE,WAAW,GACvD,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,EAAE,WAAW,GAAG,SAAS,MAAM,OAAO,WAAW,YAAY,WAC7F,qBAAW,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ,IAAK,oBAAC,UAAA,EAAS,UAAS,QAAA,CAAQ,GAC5E,EAAA,CACJ;AAAA,UAAA,EAAA,CACJ;AAAA,QAAA;AAAA,MAER;AAAA,IACJ;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"SecretField.js","sources":["../../../src/ui/actions/SecretField.jsx"],"sourcesContent":["// Un secreto que se enseña UNA vez (una clave de acceso, un token recién creado): tapado por omisión, con el ojo para verlo\n// y el botón para copiarlo.\n//\n// Tapado porque la pantalla se comparte, se graba o la ve quien pasa por atrás; el botón de copiar evita seleccionarlo a\n// mano y dejar un carácter afuera. Si el navegador no deja copiar, se destapa para copiarlo a mano.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/CheckRounded';\nimport CopyIcon from '@mui/icons-material/ContentCopyOutlined';\nimport VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\n\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\nconst COPIED_FEEDBACK_MILLISECONDS = 2000;\nconst MONOSPACE_FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * @param {object} props\n * @param {string} props.value el secreto\n * @param {string} props.label ya traducido\n * @param {string} [props.helperText] p. ej. «Guárdela: no se vuelve a enseñar»\n * @param {() => void} [props.onCopied]\n * @param {(isRevealed: boolean) => void} [props.onRevealChange] se destapó o se tapó (para registrar quién vio el secreto)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function SecretField({value, label, helperText = ' ', onCopied, onRevealChange, texts}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `secret-${generatedId}`;\n    const [isRevealed, setIsRevealedState] = useState(false);\n    const setIsRevealed = (nextIsRevealed) => {\n        setIsRevealedState(nextIsRevealed);\n        onRevealChange?.(nextIsRevealed);\n    };\n    const [isCopied, setIsCopied] = useState(false);\n    const revealLabel = isRevealed ? t('form.hidePassword') : t('form.showPassword');\n\n    const copy = async () => {\n        try {\n            await navigator.clipboard.writeText(value);\n            setIsCopied(true);\n            onCopied?.();\n            setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);\n        } catch {\n            // sin permiso de portapapeles: se destapa para copiarlo a mano\n            setIsRevealed(true);\n        }\n    };\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <TextField\n                id={inputId}\n                fullWidth\n                size=\"small\"\n                value={value}\n                helperText={helperText}\n                type={isRevealed ? 'text' : 'password'}\n                slotProps={{\n                    htmlInput: {readOnly: true, spellCheck: false, autoComplete: 'off', style: {fontFamily: MONOSPACE_FONT}},\n                    input: {\n                        endAdornment: (\n                            <InputAdornment position=\"end\">\n                                <Tooltip title={revealLabel}>\n                                    <IconButton size=\"small\" aria-label={revealLabel} onClick={() => setIsRevealed(!isRevealed)}>\n                                        {isRevealed ? <VisibilityOffOutlinedIcon fontSize=\"small\" /> : <VisibilityOutlinedIcon fontSize=\"small\" />}\n                                    </IconButton>\n                                </Tooltip>\n                                <Tooltip title={isCopied ? t('form.copied') : t('form.copy')}>\n                                    <IconButton size=\"small\" aria-label={t('form.copy')} onClick={copy} color={isCopied ? 'success' : 'default'}>\n                                        {isCopied ? <CheckIcon fontSize=\"small\" /> : <CopyIcon fontSize=\"small\" />}\n                                    </IconButton>\n                                </Tooltip>\n                            </InputAdornment>\n                        ),\n                    },\n                }}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,+BAA+B;AACrC,MAAM,iBAAiB;AAWvB,SAAwB,YAAY,EAAC,OAAO,OAAO,aAAa,KAAK,UAAU,gBAAgB,SAAQ;AACnG,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,UAAU,WAAW;AACrC,QAAM,CAAC,YAAY,kBAAkB,IAAI,SAAS,KAAK;AACvD,QAAM,gBAAgB,CAAC,mBAAmB;AACtC,uBAAmB,cAAc;AACjC,qBAAiB,cAAc;AAAA,EACnC;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,aAAa,EAAE,mBAAmB,IAAI,EAAE,mBAAmB;AAE/E,QAAM,OAAO,YAAY;AACrB,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,KAAK;AACzC,kBAAY,IAAI;AAChB,iBAAA;AACA,iBAAW,MAAM,YAAY,KAAK,GAAG,4BAA4B;AAAA,IACrE,QAAQ;AAEJ,oBAAc,IAAI;AAAA,IACtB;AAAA,EACJ;AAEA,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,WAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM,aAAa,SAAS;AAAA,MAC5B,WAAW;AAAA,QACP,WAAW,EAAC,UAAU,MAAM,YAAY,OAAO,cAAc,OAAO,OAAO,EAAC,YAAY,eAAA,EAAc;AAAA,QACtG,OAAO;AAAA,UACH,cACI,qBAAC,gBAAA,EAAe,UAAS,OACrB,UAAA;AAAA,YAAA,oBAAC,SAAA,EAAQ,OAAO,aACZ,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,aAAa,SAAS,MAAM,cAAc,CAAC,UAAU,GACrF,UAAA,aAAa,oBAAC,2BAAA,EAA0B,UAAS,QAAA,CAAQ,IAAK,oBAAC,wBAAA,EAAuB,UAAS,QAAA,CAAQ,EAAA,CAC5G,GACJ;AAAA,YACA,oBAAC,SAAA,EAAQ,OAAO,WAAW,EAAE,aAAa,IAAI,EAAE,WAAW,GACvD,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,EAAE,WAAW,GAAG,SAAS,MAAM,OAAO,WAAW,YAAY,WAC7F,qBAAW,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ,IAAK,oBAAC,UAAA,EAAS,UAAS,QAAA,CAAQ,GAC5E,EAAA,CACJ;AAAA,UAAA,EAAA,CACJ;AAAA,QAAA;AAAA,MAER;AAAA,IACJ;AAAA,EAAA,GAER;AAER;"}