@stackcraftmx/calcita 0.47.0 → 0.51.0

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

@@ -1,25 +1,4 @@
-/**
- * @param {object} props
- * @param {Object[]} props.groups
- * @param {string} props.groups[].key
- * @param {string} [props.groups[].title] texto ya traducido; sin título el grupo no pinta encabezado
- * @param {string} [props.groups[].badge] insignia junto al título (p. ej. «Intento actual»)
- * @param {string} [props.groups[].summary] lo que se lee junto al título del grupo plegado (p. ej. «6 eventos»)
- * @param {boolean} [props.groups[].isCollapsible] el título se vuelve un botón que abre y cierra el grupo (necesita
- *     title)
- * @param {boolean} [props.groups[].defaultExpanded] si un grupo plegable arranca abierto (por omisión, sí)
- * @param {'highlighted'|'normal'|'muted'} [props.groups[].emphasis]
- * @param {Object[]} props.groups[].items
- * @param {string} props.groups[].items[].key
- * @param {import('react').ElementType} [props.groups[].items[].icon] ícono dentro del punto
- * @param {string} [props.groups[].items[].tone] success, warning, error, info, primary o grey
- * @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(props: {
+declare const GroupedTimeline: (props: {
     groups: {
         key: string;
         title?: string;
@@ -38,4 +17,8 @@ export default function GroupedTimeline(props: {
         }[];
     }[];
     onGroupToggle?: (groupKey: string, isExpanded: boolean) => void;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default GroupedTimeline;

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

@@ -25,9 +25,13 @@
  *     plantilla» junto a «Adjuntar»
  * @param {import('react').ReactNode} [props.actions] botones suyos junto a «Adjuntar»
  * @param {object} [props.sx]
+ * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación
+ *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}): gana al de Calcita y al de los textos
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
+ * @param {Record<string, import('react').ElementType>} [props.slots] otro componente en lugar de una parte (root, actions, list…)
+ * @param {Record<string, object>} [props.slotProps] props de más para una parte
  */
-export default function AttachmentsInput<T extends File | {
+declare function AttachmentsInputContent<T extends File | {
     id?: string;
     name: string;
     size?: number;
@@ -58,5 +62,11 @@ export default function AttachmentsInput<T extends File | {
     template?: Parameters<typeof import('./TemplateDownloadButton.js').default>[0];
     actions?: import('react').ReactNode;
     sx?: object;
+    messages?: Record<string, string | object>;
     texts?: object;
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object>;
 }): import("react").JSX.Element;
+/** @type {typeof AttachmentsInputContent} */
+declare const AttachmentsInput: typeof AttachmentsInputContent;
+export default AttachmentsInput;

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

@@ -1,23 +1,4 @@
-/**
- * @param {object} props
- * @param {File|null} [props.value] el archivo elegido
- * @param {(file: File|null) => void} props.onChange null al quitarlo
- * @param {string|string[]} [props.accept] 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'
- * @param {number|string} [props.maxSize] bytes o '10 MB'
- * @param {string} [props.hint] ya traducido; por omisión «Arrastre aquí su archivo»
- * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»
- * @param {boolean} [props.disabled]
- * @param {boolean} [props.busy] candado mientras se sube: no se puede soltar, elegir ni quitar
- * @param {boolean|{title?: string, text?: string}} [props.busyModal] además bloquea la pantalla mientras busy
- * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso
- * @param {Parameters<typeof import('./TemplateDownloadButton.js').default>[0]} [props.template] «Descargar la
- *     plantilla» junto a «Elegir archivo»: {href} de un archivo fijo o {request} al API
- * @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(props: {
+declare const FileDropzone: (props: {
     value?: File | null;
     onChange: (file: File | null) => void;
     accept?: string | string[];
@@ -36,4 +17,8 @@ export default function FileDropzone(props: {
     children?: import('react').ReactNode;
     sx?: object;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default FileDropzone;

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

@@ -1,26 +1,4 @@
-/**
- * @param {object} props
- * @param {string} [props.name]
- * @param {import('react').ReactNode} [props.label] ya traducida
- * @param {File|{name: string, size?: number}|null} [props.value] el archivo nuevo o el que ya está guardado
- * @param {(file: File|null) => void} props.onChange null al quitarlo
- * @param {() => void} [props.onBlur] se llama al elegir o quitar (para que el formulario lo marque como tocado)
- * @param {string|string[]} [props.accept] 'excel' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'
- * @param {number|string} [props.maxSize] bytes o '10 MB'
- * @param {string|{key: string, values?: object}} [props.error]
- * @param {string} [props.helperText] ya traducida
- * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»
- * @param {string} [props.emptyText] ya traducido; por omisión «Ningún archivo elegido»
- * @param {boolean} [props.disabled]
- * @param {boolean} [props.busy] candado mientras se sube: no se puede elegir, soltar ni quitar
- * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso
- * @param {Parameters<typeof import('./TemplateDownloadButton.js').default>[0]} [props.template] «Descargar la
- *     plantilla» junto al botón
- * @param {import('react').ReactNode} [props.actions] botones suyos en el mismo renglón
- * @param {object} [props.sx] ajustes del renglón
- * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
- */
-export default function FileInput(props: {
+declare const FileInput: (props: {
     name?: string;
     label?: import('react').ReactNode;
     value?: File | {
@@ -44,5 +22,10 @@ export default function FileInput(props: {
     template?: Parameters<typeof import('./TemplateDownloadButton.js').default>[0];
     actions?: import('react').ReactNode;
     sx?: object;
+    messages?: Record<string, string | object>;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default FileInput;

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

@@ -6,36 +6,7 @@ export declare const FILE_UPLOAD_STATUS: Readonly<{
     uploaded: "uploaded";
     failed: "failed";
 }>;
-/**
- * @param {object} props
- * @param {string} [props.name]
- * @param {import('react').ReactNode} [props.label] ya traducida: el nombre del documento; sin ella, el renglón va solo
- * @param {string|null} [props.value] lo que el servidor dio para reconocer el archivo subido ('' o null = ninguno)
- * @param {(value: string) => void} props.onChange recibe el id al terminar de subir, '' al quitarlo o mientras sube otro
- * @param {() => void} [props.onBlur] se llama al elegir o quitar (para que el formulario lo marque como tocado)
- * @param {(file: File, options: {signal: AbortSignal, idempotencyKey: string, onUploadProgress: (transfer: {loaded: number, total: number, rate?: number, estimated?: number}) => void}) => Promise<any>} props.upload
- *     sube el archivo (con uploadWithProgress, axios o el cliente del proyecto) y regresa lo que conteste el servidor
- * @param {(result: any) => string} [props.idOf] de la respuesta, lo que se guarda en el formulario; por omisión result.id
- * @param {{name: string, size?: number}|null} [props.uploadedFile] el que ya estaba subido, para enseñar su nombre al editar
- * @param {(value: string, transferOptions: object) => Promise<{blob: Blob, fileName: string}>} [props.download] baja el
- *     que ya subió (pasa por el panel de descargas); sin él no sale el ícono
- * @param {string|string[]} [props.accept] 'pdf' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'
- * @param {number|string} [props.maxSize] bytes o '10 MB'
- * @param {string} [props.limitsText] ya traducido: qué acepta, en palabras («PDF o foto, hasta 5 MB»); sale al pasar sobre
- *     el botón. Por omisión solo el peso máximo
- * @param {string|{key: string, values?: object}} [props.error]
- * @param {string} [props.helperText] ya traducida
- * @param {boolean} [props.disabled]
- * @param {import('react').ReactNode} [props.actions] lo del negocio junto al estado (Aprobado, Falta información)
- * @param {(result: any) => void} [props.onUploaded] terminó de subir (p. ej. para enseñar el folio de la respuesta)
- * @param {(error: unknown) => void} [props.onUploadFailed] no se pudo subir (el motivo ya sale abajo)
- * @param {() => void} [props.onCancel] la persona canceló a media subida
- * @param {() => void} [props.onRemove] la persona quitó el archivo
- * @param {(status: string) => void} [props.onStatusChange] uno de FILE_UPLOAD_STATUS, cada vez que cambia
- * @param {object} [props.sx] ajustes del renglón
- * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
- */
-export default function FileUploadInput(props: {
+declare const FileUploadInput: (props: {
     name?: string;
     label?: import('react').ReactNode;
     value?: string | null;
@@ -76,5 +47,10 @@ export default function FileUploadInput(props: {
     onRemove?: () => void;
     onStatusChange?: (status: string) => void;
     sx?: object;
+    messages?: Record<string, string | object>;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default FileUploadInput;

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

@@ -3,30 +3,7 @@ export declare const IMAGE_SHAPE: Readonly<{
     circle: "circle";
     rounded: "rounded";
 }>;
-/**
- * @param {object} props
- * @param {string} [props.name]
- * @param {import('react').ReactNode} [props.label] ya traducida
- * @param {File|string|null} [props.value] la imagen nueva, la dirección de la que ya está guardada o null
- * @param {(file: File|null) => void} props.onChange null al quitarla
- * @param {() => void} [props.onBlur] se llama al elegir o quitar (para que el formulario lo marque como tocado)
- * @param {'circle'|'rounded'} [props.shape] IMAGE_SHAPE; por omisión, círculo
- * @param {number} [props.size] el lado de la vista previa en px; por omisión 96
- * @param {string} [props.alt] ya traducido: qué se ve en la imagen (por omisión, la etiqueta)
- * @param {import('react').ReactNode} [props.placeholder] lo que se ve sin imagen; por omisión, un ícono
- * @param {string|string[]} [props.accept] por omisión, cualquier imagen
- * @param {number|string} [props.maxSize] bytes o '2 MB'
- * @param {string|{key: string, values?: object}} [props.error]
- * @param {string} [props.helperText] ya traducida (p. ej. «JPG o PNG, cuadrada, hasta 2 MB»)
- * @param {string} [props.chooseLabel] ya traducido; por omisión «Elegir imagen» (o «Cambiar la imagen» si ya hay una)
- * @param {string} [props.removeLabel] ya traducido; por omisión «Quitar la imagen»
- * @param {boolean} [props.disabled]
- * @param {boolean} [props.busy] candado mientras se sube
- * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso
- * @param {object} [props.sx]
- * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
- */
-export default function ImageInput(props: {
+declare const ImageInput: (props: {
     name?: string;
     label?: import('react').ReactNode;
     value?: File | string | null;
@@ -49,5 +26,10 @@ export default function ImageInput(props: {
     busy?: boolean;
     onReject?: (file: File, reason: string) => void;
     sx?: object;
+    messages?: Record<string, string | object>;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default ImageInput;

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

@@ -1,20 +1,4 @@
-/**
- * @param {object} props
- * @param {string} [props.href] un archivo fijo; se baja con un enlace
- * @param {string} [props.fileName] con href: con qué nombre se guarda (por omisión, el del archivo)
- * @param {(transferOptions: {signal: AbortSignal, onDownloadProgress: (progress: {loaded: number, total?: number|null}) => void}) => Promise<{blob: Blob, fileName: string}>} [props.request]
- *     lo pide al API y va al panel de descargas (startDownload)
- * @param {string} [props.format] con request: el tipo de archivo, para su ícono en el panel (xlsx, csv…)
- * @param {string} [props.label] ya traducido; por omisión «Descargar la plantilla»
- * @param {() => void} [props.onDownload] al empezar la descarga (para medir cuántos la bajan, por ejemplo)
- * @param {'text'|'outlined'|'contained'} [props.variant]
- * @param {'small'|'medium'|'large'} [props.size]
- * @param {boolean} [props.disabled]
- * @param {import('react').ReactNode} [props.startIcon] por omisión, la flecha de descarga
- * @param {object} [props.sx]
- * @param {object} [props.texts] los textos que cambian, con la forma de `common`
- */
-export default function TemplateDownloadButton(props: {
+declare const TemplateDownloadButton: (props: {
     href?: string;
     fileName?: string;
     request?: (transferOptions: {
@@ -36,4 +20,8 @@ export default function TemplateDownloadButton(props: {
     startIcon?: import('react').ReactNode;
     sx?: object;
     texts?: object;
-}): import("react").JSX.Element;
+} & {
+    slots?: Record<string, import('react').ElementType>;
+    slotProps?: Record<string, object | ((partProps: object) => object)>;
+}) => import("react").JSX.Element;
+export default TemplateDownloadButton;

package/dist/ui/actions/ActionsMenu.js

@@ -12,7 +12,8 @@ import Tooltip from "@mui/material/Tooltip";
 import ChevronLeftRoundedIcon from "@mui/icons-material/ChevronLeftRounded";
 import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
 import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const ACTIONS_MENU_ROW = Object.freeze({ section: "section", divider: "divider" });
@@ -32,10 +33,11 @@ function levelOf(actions, path) {
   }
   return { items, parents };
 }
-function ActionsMenu(props) {
+function ActionsMenuContent(props) {
   const { label, actions, icon, size = "small", texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
+  const { Link } = useToolkitNavigation();
   const [anchor, setAnchor] = useState(null);
   const [path, setPath] = useState([]);
   const listRef = useRef(null);
@@ -99,11 +101,17 @@ function ActionsMenu(props) {
               return /* @__PURE__ */ jsx("li", { children: item.render({ close }) }, item.key);
             }
             const hasChildren = Boolean(item.children?.length);
+            let destinationProps = {};
+            if (item.to) {
+              destinationProps = { component: Link, to: item.to, ...item.replace && { replace: true } };
+            } else if (item.href) {
+              destinationProps = { component: "a", href: item.href, download: item.download };
+            }
             return /* @__PURE__ */ jsxs(
               ActionsItem,
               {
                 disabled: item.disabled,
-                ...item.href && { component: "a", href: item.href, download: item.download },
+                ...destinationProps,
                 "aria-haspopup": hasChildren ? "menu" : void 0,
                 onKeyDown: (event) => {
                   if (hasChildren && event.key === "ArrowRight") {
@@ -111,13 +119,13 @@ function ActionsMenu(props) {
                     setPath((current) => [...current, item.key]);
                   }
                 },
-                onClick: () => {
+                onClick: (event) => {
                   if (hasChildren) {
                     setPath((current) => [...current, item.key]);
                     return;
                   }
                   close();
-                  item.onClick?.();
+                  item.onClick?.(event);
                 },
                 ownSx: item.color ? { color: `${item.color}.main` } : void 0,
                 children: [
@@ -134,6 +142,7 @@ function ActionsMenu(props) {
     )
   ] });
 }
+const ActionsMenu = withPieceSlots(ActionsMenuContent, THEME_NAME);
 export {
   ACTIONS_MENU_ROW,
   ActionsMenu as default

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// el de cada tarjeta de registro. Las acciones las da la pantalla (label ya traducido, ícono, color, apagada); sin acciones\n// 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// Tan flexible como un menú de sistema (cada renglón es uno de estos):\n//   {key, label, icon?, description?, color?, disabled?, onClick}   una acción\n//   {key, label, href, download?}                                   una liga (bajar un documento, abrir otra página)\n//   {key, label, children: [...]}                                   un submenú: se abre DENTRO del mismo menú, con «‹ Regresar»\n//                                                                   arriba (igual en el teléfono); también con → y ←\n//   {type: 'section', key, label}                                   un título de sección\n//   {type: 'divider', key}                                          una línea\n//   {key, render: ({close}) => …}                                   un renglón propio (abre su ventana y cierra el menú)\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 {useEffect, useRef, useState} from 'react';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListSubheader from '@mui/material/ListSubheader';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';\nimport ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\n\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** Los renglones que no son acciones. */\nexport const ACTIONS_MENU_ROW = Object.freeze({section: 'section', divider: 'divider'});\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 * Los renglones del nivel abierto y sus títulos, siguiendo las llaves de los submenús abiertos.\n *\n * @param {object[]} actions\n * @param {string[]} path las llaves de los submenús abiertos, del primero al último\n * @returns {{items: object[], parents: object[]}}\n */\nfunction levelOf(actions, path) {\n    const parents = [];\n    let items = actions;\n    for (const key of path) {\n        const parent = items.find((item) => item.key === key);\n        if (!parent?.children) {\n            break;\n        }\n        parents.push(parent);\n        items = parent.children;\n    }\n    return {items, parents};\n}\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, type?: string, label?: string, icon?: import('react').ReactNode, description?: string, color?: string, disabled?: boolean, onClick?: () => void, href?: string, download?: string|boolean, children?: object[], render?: (helpers: {close: () => void}) => import('react').ReactNode}>} [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 * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\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', texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const [anchor, setAnchor] = useState(null);\n    // los submenús abiertos (llaves), del primero al último\n    const [path, setPath] = useState([]);\n    const listRef = useRef(null);\n    const {items, parents} = levelOf(actions ?? [], path);\n\n    // al entrar o salir de un submenú, el foco va a su primer renglón (con el teclado se sigue sin el ratón)\n    useEffect(() => {\n        if (anchor) {\n            listRef.current?.querySelector('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')?.focus();\n        }\n    }, [path, anchor]);\n\n    if (!actions?.length) {\n        return null;\n    }\n    const close = () => {\n        setAnchor(null);\n        setPath([]);\n    };\n    const goBack = () => setPath((current) => current.slice(0, -1));\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={close} onClick={(event) => event.stopPropagation()}\n                  slotProps={{list: {ref: listRef, onKeyDown: (event) => {\n                      if (event.key === 'ArrowLeft' && path.length > 0) {\n                          event.preventDefault();\n                          goBack();\n                      }\n                  }}}}>\n                {parents.length > 0 && [\n                    <ActionsItem key=\"__back\" onClick={goBack} ownSx={{fontWeight: 600}}>\n                        <ActionsItemIcon><ChevronLeftRoundedIcon fontSize=\"small\" /></ActionsItemIcon>\n                        <ListItemText primary={parents.at(-1).label} secondary={t('actionsMenu.back')} />\n                    </ActionsItem>,\n                    <Divider key=\"__back-divider\" />,\n                ]}\n                {items.map((item) => {\n                    if (item.type === ACTIONS_MENU_ROW.divider) {\n                        return <Divider key={item.key} />;\n                    }\n                    if (item.type === ACTIONS_MENU_ROW.section) {\n                        return <ListSubheader key={item.key} sx={{lineHeight: 2.5, bgcolor: 'transparent'}}>{item.label}</ListSubheader>;\n                    }\n                    if (item.render) {\n                        return <li key={item.key}>{item.render({close})}</li>;\n                    }\n                    const hasChildren = Boolean(item.children?.length);\n                    return (\n                        <ActionsItem\n                            key={item.key}\n                            disabled={item.disabled}\n                            {...(item.href && {component: 'a', href: item.href, download: item.download})}\n                            aria-haspopup={hasChildren ? 'menu' : undefined}\n                            onKeyDown={(event) => {\n                                if (hasChildren && event.key === 'ArrowRight') {\n                                    event.preventDefault();\n                                    setPath((current) => [...current, item.key]);\n                                }\n                            }}\n                            onClick={() => {\n                                if (hasChildren) {\n                                    setPath((current) => [...current, item.key]);\n                                    return;\n                                }\n                                close();\n                                item.onClick?.();\n                            }}\n                            ownSx={item.color ? {color: `${item.color}.main`} : undefined}\n                        >\n                            {item.icon && <ActionsItemIcon ownSx={item.color ? {color: 'inherit'} : undefined}>{item.icon}</ActionsItemIcon>}\n                            <ListItemText primary={item.label} secondary={item.description} />\n                            {hasChildren && <ChevronRightRoundedIcon fontSize=\"small\" sx={{ml: 2, color: 'text.secondary'}} />}\n                        </ActionsItem>\n                    );\n                })}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"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// el de cada tarjeta de registro. Las acciones las da la pantalla (label ya traducido, ícono, color, apagada); sin acciones\n// 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// Tan flexible como un menú de sistema (cada renglón es uno de estos):\n//   {key, label, icon?, description?, color?, disabled?, onClick}   una acción; onClick recibe el evento del clic\n//   {key, label, to, replace?}                                      una pantalla de la app, con la navegación del proyecto\n//                                                                   (react-router, Next o la del navegador): el clic normal\n//                                                                   navega sin recargar y Cmd/Ctrl+clic o el botón de en\n//                                                                   medio la abren en otra pestaña, como cualquier liga\n//   {key, label, href, download?}                                   una liga de afuera (bajar un documento, otro sistema)\n//   {key, label, children: [...]}                                   un submenú: se abre DENTRO del mismo menú, con «‹ Regresar»\n//                                                                   arriba (igual en el teléfono); también con → y ←\n//   {type: 'section', key, label}                                   un título de sección\n//   {type: 'divider', key}                                          una línea\n//   {key, render: ({close}) => …}                                   un renglón propio (abre su ventana y cierra el menú)\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 {useEffect, useRef, useState} from 'react';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListSubheader from '@mui/material/ListSubheader';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';\nimport ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\n\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** Los renglones que no son acciones. */\nexport const ACTIONS_MENU_ROW = Object.freeze({section: 'section', divider: 'divider'});\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 * Los renglones del nivel abierto y sus títulos, siguiendo las llaves de los submenús abiertos.\n *\n * @param {object[]} actions\n * @param {string[]} path las llaves de los submenús abiertos, del primero al último\n * @returns {{items: object[], parents: object[]}}\n */\nfunction levelOf(actions, path) {\n    const parents = [];\n    let items = actions;\n    for (const key of path) {\n        const parent = items.find((item) => item.key === key);\n        if (!parent?.children) {\n            break;\n        }\n        parents.push(parent);\n        items = parent.children;\n    }\n    return {items, parents};\n}\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, type?: string, label?: string, icon?: import('react').ReactNode, description?: string, color?: string, disabled?: boolean, onClick?: (event: import('react').MouseEvent<HTMLElement>) => void, to?: string, replace?: boolean, href?: string, download?: string|boolean, children?: object[], render?: (helpers: {close: () => void}) => import('react').ReactNode}>} [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 * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction ActionsMenuContent(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', texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    // las pantallas de la app (to) van con el enlace de la navegación del proyecto: así el clic normal no recarga la app\n    const {Link} = useToolkitNavigation();\n    const [anchor, setAnchor] = useState(null);\n    // los submenús abiertos (llaves), del primero al último\n    const [path, setPath] = useState([]);\n    const listRef = useRef(null);\n    const {items, parents} = levelOf(actions ?? [], path);\n\n    // al entrar o salir de un submenú, el foco va a su primer renglón (con el teclado se sigue sin el ratón)\n    useEffect(() => {\n        if (anchor) {\n            listRef.current?.querySelector('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')?.focus();\n        }\n    }, [path, anchor]);\n\n    if (!actions?.length) {\n        return null;\n    }\n    const close = () => {\n        setAnchor(null);\n        setPath([]);\n    };\n    const goBack = () => setPath((current) => current.slice(0, -1));\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={close} onClick={(event) => event.stopPropagation()}\n                  slotProps={{list: {ref: listRef, onKeyDown: (event) => {\n                      if (event.key === 'ArrowLeft' && path.length > 0) {\n                          event.preventDefault();\n                          goBack();\n                      }\n                  }}}}>\n                {parents.length > 0 && [\n                    <ActionsItem key=\"__back\" onClick={goBack} ownSx={{fontWeight: 600}}>\n                        <ActionsItemIcon><ChevronLeftRoundedIcon fontSize=\"small\" /></ActionsItemIcon>\n                        <ListItemText primary={parents.at(-1).label} secondary={t('actionsMenu.back')} />\n                    </ActionsItem>,\n                    <Divider key=\"__back-divider\" />,\n                ]}\n                {items.map((item) => {\n                    if (item.type === ACTIONS_MENU_ROW.divider) {\n                        return <Divider key={item.key} />;\n                    }\n                    if (item.type === ACTIONS_MENU_ROW.section) {\n                        return <ListSubheader key={item.key} sx={{lineHeight: 2.5, bgcolor: 'transparent'}}>{item.label}</ListSubheader>;\n                    }\n                    if (item.render) {\n                        return <li key={item.key}>{item.render({close})}</li>;\n                    }\n                    const hasChildren = Boolean(item.children?.length);\n                    // a dónde lleva el renglón: una pantalla de la app (to), una liga de afuera (href) o nada (una acción)\n                    let destinationProps = {};\n                    if (item.to) {\n                        destinationProps = {component: Link, to: item.to, ...(item.replace && {replace: true})};\n                    } else if (item.href) {\n                        destinationProps = {component: 'a', href: item.href, download: item.download};\n                    }\n                    return (\n                        <ActionsItem\n                            key={item.key}\n                            disabled={item.disabled}\n                            {...destinationProps}\n                            aria-haspopup={hasChildren ? 'menu' : undefined}\n                            onKeyDown={(event) => {\n                                if (hasChildren && event.key === 'ArrowRight') {\n                                    event.preventDefault();\n                                    setPath((current) => [...current, item.key]);\n                                }\n                            }}\n                            onClick={(event) => {\n                                if (hasChildren) {\n                                    setPath((current) => [...current, item.key]);\n                                    return;\n                                }\n                                close();\n                                // con el evento la pantalla decide (saber si fue con Cmd/Ctrl, o detener una liga propia)\n                                item.onClick?.(event);\n                            }}\n                            ownSx={item.color ? {color: `${item.color}.main`} : undefined}\n                        >\n                            {item.icon && <ActionsItemIcon ownSx={item.color ? {color: 'inherit'} : undefined}>{item.icon}</ActionsItemIcon>}\n                            <ListItemText primary={item.label} secondary={item.description} />\n                            {hasChildren && <ChevronRightRoundedIcon fontSize=\"small\" sx={{ml: 2, color: 'text.secondary'}} />}\n                        </ActionsItem>\n                    );\n                })}\n            </Menu>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ActionsMenu = withPieceSlots(ActionsMenuContent, THEME_NAME);\nexport default ActionsMenu;\n"],"names":[],"mappings":"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"}

package/dist/ui/actions/CopyButton.js

@@ -9,13 +9,17 @@ import CopyIcon from "@mui/icons-material/ContentCopyOutlined";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaCopyButton";
+const CopyButtonButton = piecePart(THEME_NAME, "Button", IconButton);
 const FEEDBACK_MILLISECONDS = 2e3;
 const COPY_STATE = Object.freeze({ idle: "idle", copied: "copied", failed: "failed" });
 const ICON_BY_STATE = Object.freeze({ [COPY_STATE.idle]: CopyIcon, [COPY_STATE.copied]: CheckIcon, [COPY_STATE.failed]: ErrorOutlineIcon });
 const COLOR_BY_STATE = Object.freeze({ [COPY_STATE.idle]: void 0, [COPY_STATE.copied]: "success.dark", [COPY_STATE.failed]: "error.dark" });
 const VISUALLY_HIDDEN_SX = { position: "absolute", width: "1px", height: "1px", overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" };
-function CopyButton({ value, label, size = "small", onCopied, onCopyFailed, texts, ...unknownProps }) {
-  warnUnknownProps("CopyButton", unknownProps);
+function CopyButtonContent(props) {
+  const { value, label, size = "small", onCopied, onCopyFailed, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const [copyState, setCopyState] = useState(COPY_STATE.idle);
   const resetTimer = useRef(null);
@@ -40,10 +44,11 @@ function CopyButton({ value, label, size = "small", onCopied, onCopyFailed, text
   }[copyState];
   const StateIcon = ICON_BY_STATE[copyState];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: feedbackText, open: copyState === COPY_STATE.idle ? void 0 : true, placement: "top", children: /* @__PURE__ */ jsx(IconButton, { size, "aria-label": buttonLabel, onClick: copy, sx: { color: COLOR_BY_STATE[copyState] }, children: /* @__PURE__ */ jsx(StateIcon, { fontSize: "inherit" }) }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: feedbackText, open: copyState === COPY_STATE.idle ? void 0 : true, placement: "top", children: /* @__PURE__ */ jsx(CopyButtonButton, { size, "aria-label": buttonLabel, onClick: copy, sx: { color: COLOR_BY_STATE[copyState] }, children: /* @__PURE__ */ jsx(StateIcon, { fontSize: "inherit" }) }) }),
     /* @__PURE__ */ jsx(Box, { component: "span", role: "status", "aria-live": "polite", sx: VISUALLY_HIDDEN_SX, children: copyState === COPY_STATE.idle ? "" : feedbackText })
   ] });
 }
+const CopyButton = withPieceSlots(CopyButtonContent, THEME_NAME);
 export {
   CopyButton as default
 };

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 al portapapeles: un ícono que pone el texto y lo confirma ahí mismo («Copiado» un par de segundos, con la\n// palomita). Va donde copiar a mano cuesta trabajo: un folio, un texto largo que en pantalla va cortado, un renglón entero\n// (con tableRowTextOf: separado por tabuladores, al pegarlo en Excel cada dato cae en su celda).\n//\n// Si el navegador no deja copiar (una página en http, dentro de un iframe, sin permiso), el botón lo dice en rojo en lugar\n// de fingir que copió, y avisa con onCopyFailed. La confirmación también se anuncia a los lectores de pantalla (el globo no\n// siempre se anuncia).\n//\n// value puede ser una función: se llama al picar (arma el renglón solo si de verdad se copia).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\nimport Box from '@mui/material/Box';\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';\nimport ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// cuánto se queda la confirmación (copiado o no se pudo) antes de regresar al ícono de copiar\nconst FEEDBACK_MILLISECONDS = 2000;\n// en qué va el botón: listo, copiado o no se pudo\nconst COPY_STATE = Object.freeze({idle: 'idle', copied: 'copied', failed: 'failed'});\nconst ICON_BY_STATE = Object.freeze({[COPY_STATE.idle]: CopyIcon, [COPY_STATE.copied]: CheckIcon, [COPY_STATE.failed]: ErrorOutlineIcon});\nconst COLOR_BY_STATE = Object.freeze({[COPY_STATE.idle]: undefined, [COPY_STATE.copied]: 'success.dark', [COPY_STATE.failed]: 'error.dark'});\n// el aviso para lectores de pantalla, escondido a la vista. OJO: '1px' en texto; en MUI un width: 1 es 100% y el texto\n// escondido ensanchaba la página\nconst VISUALLY_HIDDEN_SX = {position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap'};\n\n/**\n * @param {object} props\n * @param {string|(() => string)} props.value lo que se copia; una función se llama al picar\n * @param {string} [props.label] ya traducido: qué copia («Copiar el folio»); por omisión «Copiar». Es el globo y el nombre\n *     del botón para un lector de pantalla\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onCopied]\n * @param {(error: unknown) => void} [props.onCopyFailed] el navegador no dejó copiar (el botón ya lo dice en rojo)\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, onCopyFailed, texts, ...unknownProps}) {\n    warnUnknownProps('CopyButton', unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const [copyState, setCopyState] = useState(COPY_STATE.idle);\n    const resetTimer = useRef(null);\n    const buttonLabel = label ?? t('form.copy');\n\n    // al desmontar no se queda un temporizador vivo\n    useEffect(() => () => clearTimeout(resetTimer.current), []);\n\n    const copy = async () => {\n        clearTimeout(resetTimer.current);\n        try {\n            await navigator.clipboard.writeText(typeof value === 'function' ? value() : value);\n            setCopyState(COPY_STATE.copied);\n            onCopied?.();\n        } catch (error) {\n            setCopyState(COPY_STATE.failed);\n            onCopyFailed?.(error);\n        }\n        resetTimer.current = setTimeout(() => setCopyState(COPY_STATE.idle), FEEDBACK_MILLISECONDS);\n    };\n\n    const feedbackText = {\n        [COPY_STATE.idle]: buttonLabel,\n        [COPY_STATE.copied]: t('form.copied'),\n        [COPY_STATE.failed]: t('form.copyFailed'),\n    }[copyState];\n    const StateIcon = ICON_BY_STATE[copyState];\n\n    return (\n        <>\n            {/* la confirmación se queda abierta mientras dura, aunque el cursor ya no esté encima; arriba y no a un lado, para no\n                tapar el dato de junto */}\n            <Tooltip title={feedbackText} open={copyState === COPY_STATE.idle ? undefined : true} placement=\"top\">\n                <IconButton size={size} aria-label={buttonLabel} onClick={copy} sx={{color: COLOR_BY_STATE[copyState]}}>\n                    <StateIcon fontSize=\"inherit\" />\n                </IconButton>\n            </Tooltip>\n            <Box component=\"span\" role=\"status\" aria-live=\"polite\" sx={VISUALLY_HIDDEN_SX}>\n                {copyState === COPY_STATE.idle ? '' : feedbackText}\n            </Box>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,MAAM,wBAAwB;AAE9B,MAAM,aAAa,OAAO,OAAO,EAAC,MAAM,QAAQ,QAAQ,UAAU,QAAQ,UAAS;AACnF,MAAM,gBAAgB,OAAO,OAAO,EAAC,CAAC,WAAW,IAAI,GAAG,UAAU,CAAC,WAAW,MAAM,GAAG,WAAW,CAAC,WAAW,MAAM,GAAG,kBAAiB;AACxI,MAAM,iBAAiB,OAAO,OAAO,EAAC,CAAC,WAAW,IAAI,GAAG,QAAW,CAAC,WAAW,MAAM,GAAG,gBAAgB,CAAC,WAAW,MAAM,GAAG,cAAa;AAG3I,MAAM,qBAAqB,EAAC,UAAU,YAAY,OAAO,OAAO,QAAQ,OAAO,UAAU,UAAU,MAAM,iBAAiB,YAAY,SAAA;AAYtI,SAAwB,WAAW,EAAC,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,OAAO,GAAG,gBAAe;AAC/G,mBAAiB,cAAc,YAAY;AAC3C,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW,IAAI;AAC1D,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,cAAc,SAAS,EAAE,WAAW;AAG1C,YAAU,MAAM,MAAM,aAAa,WAAW,OAAO,GAAG,CAAA,CAAE;AAE1D,QAAM,OAAO,YAAY;AACrB,iBAAa,WAAW,OAAO;AAC/B,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,OAAO,UAAU,aAAa,MAAA,IAAU,KAAK;AACjF,mBAAa,WAAW,MAAM;AAC9B,iBAAA;AAAA,IACJ,SAAS,OAAO;AACZ,mBAAa,WAAW,MAAM;AAC9B,qBAAe,KAAK;AAAA,IACxB;AACA,eAAW,UAAU,WAAW,MAAM,aAAa,WAAW,IAAI,GAAG,qBAAqB;AAAA,EAC9F;AAEA,QAAM,eAAe;AAAA,IACjB,CAAC,WAAW,IAAI,GAAG;AAAA,IACnB,CAAC,WAAW,MAAM,GAAG,EAAE,aAAa;AAAA,IACpC,CAAC,WAAW,MAAM,GAAG,EAAE,iBAAiB;AAAA,EAAA,EAC1C,SAAS;AACX,QAAM,YAAY,cAAc,SAAS;AAEzC,SACI,qBAAA,UAAA,EAGI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,cAAc,MAAM,cAAc,WAAW,OAAO,SAAY,MAAM,WAAU,OAC5F,UAAA,oBAAC,cAAW,MAAY,cAAY,aAAa,SAAS,MAAM,IAAI,EAAC,OAAO,eAAe,SAAS,EAAA,GAChG,UAAA,oBAAC,WAAA,EAAU,UAAS,UAAA,CAAU,GAClC,GACJ;AAAA,IACA,oBAAC,KAAA,EAAI,WAAU,QAAO,MAAK,UAAS,aAAU,UAAS,IAAI,oBACtD,UAAA,cAAc,WAAW,OAAO,KAAK,aAAA,CAC1C;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"CopyButton.js","sources":["../../../src/ui/actions/CopyButton.jsx"],"sourcesContent":["// Botón para copiar al portapapeles: un ícono que pone el texto y lo confirma ahí mismo («Copiado» un par de segundos, con la\n// palomita). Va donde copiar a mano cuesta trabajo: un folio, un texto largo que en pantalla va cortado, un renglón entero\n// (con tableRowTextOf: separado por tabuladores, al pegarlo en Excel cada dato cae en su celda).\n//\n// Si el navegador no deja copiar (una página en http, dentro de un iframe, sin permiso), el botón lo dice en rojo en lugar\n// de fingir que copió, y avisa con onCopyFailed. La confirmación también se anuncia a los lectores de pantalla (el globo no\n// siempre se anuncia).\n//\n// value puede ser una función: se llama al picar (arma el renglón solo si de verdad se copia).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCopyButton con defaultProps, styleOverrides de\n// sus partes (button) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\nimport Box from '@mui/material/Box';\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';\nimport ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCopyButton)\nconst THEME_NAME = 'CalcitaCopyButton';\nconst CopyButtonButton = piecePart(THEME_NAME, 'Button', IconButton);\n\n// cuánto se queda la confirmación (copiado o no se pudo) antes de regresar al ícono de copiar\nconst FEEDBACK_MILLISECONDS = 2000;\n// en qué va el botón: listo, copiado o no se pudo\nconst COPY_STATE = Object.freeze({idle: 'idle', copied: 'copied', failed: 'failed'});\nconst ICON_BY_STATE = Object.freeze({[COPY_STATE.idle]: CopyIcon, [COPY_STATE.copied]: CheckIcon, [COPY_STATE.failed]: ErrorOutlineIcon});\nconst COLOR_BY_STATE = Object.freeze({[COPY_STATE.idle]: undefined, [COPY_STATE.copied]: 'success.dark', [COPY_STATE.failed]: 'error.dark'});\n// el aviso para lectores de pantalla, escondido a la vista. OJO: '1px' en texto; en MUI un width: 1 es 100% y el texto\n// escondido ensanchaba la página\nconst VISUALLY_HIDDEN_SX = {position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap'};\n\n/**\n * @param {object} props\n * @param {string|(() => string)} props.value lo que se copia; una función se llama al picar\n * @param {string} [props.label] ya traducido: qué copia («Copiar el folio»); por omisión «Copiar». Es el globo y el nombre\n *     del botón para un lector de pantalla\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onCopied]\n * @param {(error: unknown) => void} [props.onCopyFailed] el navegador no dejó copiar (el botón ya lo dice en rojo)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction CopyButtonContent(props) {\n    const {value, label, size = 'small', onCopied, onCopyFailed, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const [copyState, setCopyState] = useState(COPY_STATE.idle);\n    const resetTimer = useRef(null);\n    const buttonLabel = label ?? t('form.copy');\n\n    // al desmontar no se queda un temporizador vivo\n    useEffect(() => () => clearTimeout(resetTimer.current), []);\n\n    const copy = async () => {\n        clearTimeout(resetTimer.current);\n        try {\n            await navigator.clipboard.writeText(typeof value === 'function' ? value() : value);\n            setCopyState(COPY_STATE.copied);\n            onCopied?.();\n        } catch (error) {\n            setCopyState(COPY_STATE.failed);\n            onCopyFailed?.(error);\n        }\n        resetTimer.current = setTimeout(() => setCopyState(COPY_STATE.idle), FEEDBACK_MILLISECONDS);\n    };\n\n    const feedbackText = {\n        [COPY_STATE.idle]: buttonLabel,\n        [COPY_STATE.copied]: t('form.copied'),\n        [COPY_STATE.failed]: t('form.copyFailed'),\n    }[copyState];\n    const StateIcon = ICON_BY_STATE[copyState];\n\n    return (\n        <>\n            {/* la confirmación se queda abierta mientras dura, aunque el cursor ya no esté encima; arriba y no a un lado, para no\n                tapar el dato de junto */}\n            <Tooltip title={feedbackText} open={copyState === COPY_STATE.idle ? undefined : true} placement=\"top\">\n                <CopyButtonButton size={size} aria-label={buttonLabel} onClick={copy} sx={{color: COLOR_BY_STATE[copyState]}}>\n                    <StateIcon fontSize=\"inherit\" />\n                </CopyButtonButton>\n            </Tooltip>\n            <Box component=\"span\" role=\"status\" aria-live=\"polite\" sx={VISUALLY_HIDDEN_SX}>\n                {copyState === COPY_STATE.idle ? '' : feedbackText}\n            </Box>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst CopyButton = withPieceSlots(CopyButtonContent, THEME_NAME);\nexport default CopyButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,mBAAmB,UAAU,YAAY,UAAU,UAAU;AAGnE,MAAM,wBAAwB;AAE9B,MAAM,aAAa,OAAO,OAAO,EAAC,MAAM,QAAQ,QAAQ,UAAU,QAAQ,UAAS;AACnF,MAAM,gBAAgB,OAAO,OAAO,EAAC,CAAC,WAAW,IAAI,GAAG,UAAU,CAAC,WAAW,MAAM,GAAG,WAAW,CAAC,WAAW,MAAM,GAAG,kBAAiB;AACxI,MAAM,iBAAiB,OAAO,OAAO,EAAC,CAAC,WAAW,IAAI,GAAG,QAAW,CAAC,WAAW,MAAM,GAAG,gBAAgB,CAAC,WAAW,MAAM,GAAG,cAAa;AAG3I,MAAM,qBAAqB,EAAC,UAAU,YAAY,OAAO,OAAO,QAAQ,OAAO,UAAU,UAAU,MAAM,iBAAiB,YAAY,SAAA;AAYtI,SAAS,kBAAkB,OAAO;AAC9B,QAAM,EAAC,OAAO,OAAO,OAAO,SAAS,UAAU,cAAc,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACtH,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW,IAAI;AAC1D,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,cAAc,SAAS,EAAE,WAAW;AAG1C,YAAU,MAAM,MAAM,aAAa,WAAW,OAAO,GAAG,CAAA,CAAE;AAE1D,QAAM,OAAO,YAAY;AACrB,iBAAa,WAAW,OAAO;AAC/B,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,OAAO,UAAU,aAAa,MAAA,IAAU,KAAK;AACjF,mBAAa,WAAW,MAAM;AAC9B,iBAAA;AAAA,IACJ,SAAS,OAAO;AACZ,mBAAa,WAAW,MAAM;AAC9B,qBAAe,KAAK;AAAA,IACxB;AACA,eAAW,UAAU,WAAW,MAAM,aAAa,WAAW,IAAI,GAAG,qBAAqB;AAAA,EAC9F;AAEA,QAAM,eAAe;AAAA,IACjB,CAAC,WAAW,IAAI,GAAG;AAAA,IACnB,CAAC,WAAW,MAAM,GAAG,EAAE,aAAa;AAAA,IACpC,CAAC,WAAW,MAAM,GAAG,EAAE,iBAAiB;AAAA,EAAA,EAC1C,SAAS;AACX,QAAM,YAAY,cAAc,SAAS;AAEzC,SACI,qBAAA,UAAA,EAGI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,cAAc,MAAM,cAAc,WAAW,OAAO,SAAY,MAAM,WAAU,OAC5F,UAAA,oBAAC,oBAAiB,MAAY,cAAY,aAAa,SAAS,MAAM,IAAI,EAAC,OAAO,eAAe,SAAS,EAAA,GACtG,UAAA,oBAAC,WAAA,EAAU,UAAS,UAAA,CAAU,GAClC,GACJ;AAAA,IACA,oBAAC,KAAA,EAAI,WAAU,QAAO,MAAK,UAAS,aAAU,UAAS,IAAI,oBACtD,UAAA,cAAc,WAAW,OAAO,KAAK,aAAA,CAC1C;AAAA,EAAA,GACJ;AAER;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/ui/actions/DownloadMenu.js

@@ -16,11 +16,11 @@ import { startDownload } from "../../downloads/downloadQueue.js";
 import { useFileTypes } from "../../downloads/fileTypes.js";
 import ConfirmDialog from "../../feedback/ConfirmDialog.js";
 import { useConfirmAction } from "../../feedback/useConfirmAction.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaDownloadMenu";
 const DownloadButton = piecePart(THEME_NAME, "Button", Button);
-function DownloadMenu(props) {
+function DownloadMenuContent(props) {
   const {
     formats,
     download,
@@ -163,6 +163,7 @@ function DownloadMenu(props) {
     )
   ] });
 }
+const DownloadMenu = withPieceSlots(DownloadMenuContent, THEME_NAME);
 export {
   DownloadMenu as default
 };

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// 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';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.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    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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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"}
+{"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, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.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 */\nfunction DownloadMenuContent(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    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DownloadMenu = withPieceSlots(DownloadMenuContent, THEME_NAME);\nexport default DownloadMenu;\n"],"names":[],"mappings":"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"}

package/dist/ui/actions/SecretField.js

@@ -12,10 +12,14 @@ import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import FieldFrame from "../../inputs/FieldFrame.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaSecretField";
+const SecretFieldField = piecePart(THEME_NAME, "Field", TextField);
 const COPIED_FEEDBACK_MILLISECONDS = 2e3;
 const MONOSPACE_FONT = "ui-monospace, SFMono-Regular, Menlo, monospace";
-function SecretField({ value, label, helperText = " ", onCopied, onRevealChange, texts, ...unknownProps }) {
-  warnUnknownProps("SecretField", unknownProps);
+function SecretFieldContent(props) {
+  const { value, label, helperText = " ", onCopied, onRevealChange, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const generatedId = useId();
   const inputId = `secret-${generatedId}`;
@@ -37,7 +41,7 @@ function SecretField({ value, label, helperText = " ", onCopied, onRevealChange,
     }
   };
   return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(
-    TextField,
+    SecretFieldField,
     {
       id: inputId,
       fullWidth: true,
@@ -57,6 +61,7 @@ function SecretField({ value, label, helperText = " ", onCopied, onRevealChange,
     }
   ) });
 }
+const SecretField = withPieceSlots(SecretFieldContent, THEME_NAME);
 export {
   SecretField as default
 };