@stackcraftmx/calcita 0.32.2 → 0.47.0

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

@@ -0,0 +1,80 @@
+/** En qué va el archivo de un renglón (onStatusChange). */
+export declare const FILE_UPLOAD_STATUS: Readonly<{
+    pending: "pending";
+    uploading: "uploading";
+    processing: "processing";
+    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: {
+    name?: string;
+    label?: import('react').ReactNode;
+    value?: string | null;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    upload: (file: File, options: {
+        signal: AbortSignal;
+        idempotencyKey: string;
+        onUploadProgress: (transfer: {
+            loaded: number;
+            total: number;
+            rate?: number;
+            estimated?: number;
+        }) => void;
+    }) => Promise<any>;
+    idOf?: (result: any) => string;
+    uploadedFile?: {
+        name: string;
+        size?: number;
+    } | null;
+    download?: (value: string, transferOptions: object) => Promise<{
+        blob: Blob;
+        fileName: string;
+    }>;
+    accept?: string | string[];
+    maxSize?: number | string;
+    limitsText?: string;
+    error?: string | {
+        key: string;
+        values?: object;
+    };
+    helperText?: string;
+    disabled?: boolean;
+    actions?: import('react').ReactNode;
+    onUploaded?: (result: any) => void;
+    onUploadFailed?: (error: unknown) => void;
+    onCancel?: () => void;
+    onRemove?: () => void;
+    onStatusChange?: (status: string) => void;
+    sx?: object;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,53 @@
+/** La forma de la vista previa: círculo para una persona, recuadro para lo demás. */
+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: {
+    name?: string;
+    label?: import('react').ReactNode;
+    value?: File | string | null;
+    onChange: (file: File | null) => void;
+    onBlur?: () => void;
+    shape?: 'circle' | 'rounded';
+    size?: number;
+    alt?: string;
+    placeholder?: import('react').ReactNode;
+    accept?: string | string[];
+    maxSize?: number | string;
+    error?: string | {
+        key: string;
+        values?: object;
+    };
+    helperText?: string;
+    chooseLabel?: string;
+    removeLabel?: string;
+    disabled?: boolean;
+    busy?: boolean;
+    onReject?: (file: File, reason: string) => void;
+    sx?: object;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+/**
+ * @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: {
+    href?: string;
+    fileName?: string;
+    request?: (transferOptions: {
+        signal: AbortSignal;
+        onDownloadProgress: (progress: {
+            loaded: number;
+            total?: number | null;
+        }) => void;
+    }) => Promise<{
+        blob: Blob;
+        fileName: string;
+    }>;
+    format?: string;
+    label?: string;
+    onDownload?: () => void;
+    variant?: 'text' | 'outlined' | 'contained';
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    startIcon?: import('react').ReactNode;
+    sx?: object;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+/**
+ * @param {string} fileName
+ * @returns {{Icon: import('react').ElementType, color: string}}
+ */
+export declare function fileAppearanceOf(fileName: string): {
+    Icon: import('react').ElementType;
+    color: string;
+};

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

@@ -49,3 +49,41 @@ export declare function matchesAccept(file: {
  * @returns {number|null} null si no hay límite
  */
 export declare function parseFileSize(size: number | string | undefined | null): number | null;
+/**
+ * Lo que queda al elegir o soltar archivos: cuáles pasan y cuáles no, con su motivo. La usan los cargadores de MUI del
+ * paquete (la zona, el compacto, «Adjuntar» y la imagen), así rechazan igual y con los mismos motivos.
+ *
+ * Un archivo con el MISMO nombre que uno que ya estaba lo reemplaza (se volvió a elegir corregido) y no cuenta doble ni
+ * en la cantidad ni en el peso. Se revisa en este orden: tipo, peso del archivo, cantidad y peso de todos juntos.
+ *
+ * @param {Array<{name: string, type?: string, size?: number}>} pickedFiles lo que se eligió o se soltó
+ * @param {object} rules
+ * @param {string} [rules.resolvedAccept] lo que regresa resolveAccept
+ * @param {number|null} [rules.maxBytes] el peso máximo de cada archivo
+ * @param {number} [rules.maxFiles] cuántos como máximo entre los que ya estaban y los nuevos
+ * @param {number|null} [rules.maxTotalBytes] cuánto pueden pesar todos juntos
+ * @param {Array<{name: string, size?: number}>} [rules.keptFiles] los que ya estaban (un archivo guardado sin peso cuenta 0)
+ * @returns {{files: Array<object>, accepted: Array<object>, rejected: Array<{file: object, reason: string}>}} files: los
+ *     que ya estaban (sin los reemplazados) y después los nuevos que pasaron
+ */
+export declare function screenFiles(pickedFiles: Array<{
+    name: string;
+    type?: string;
+    size?: number;
+}>, { resolvedAccept, maxBytes, maxFiles, maxTotalBytes, keptFiles }?: {
+    resolvedAccept?: string;
+    maxBytes?: number | null;
+    maxFiles?: number;
+    maxTotalBytes?: number | null;
+    keptFiles?: Array<{
+        name: string;
+        size?: number;
+    }>;
+}): {
+    files: Array<object>;
+    accepted: Array<object>;
+    rejected: Array<{
+        file: object;
+        reason: string;
+    }>;
+};

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

@@ -0,0 +1,18 @@
+/**
+ * @param {{loaded: number, total: number, rate?: number, estimated?: number}} transfer lo que avisa la subida (bytes)
+ * @param {number} startedAt cuándo empezó la subida, en milisegundos
+ * @param {number} [now]
+ * @returns {{percent: number, loaded: number, total: number, bytesPerSecond: number|null, remainingSeconds: number|null}}
+ */
+export declare function transferProgressOf({ loaded, total, rate, estimated }: {
+    loaded: number;
+    total: number;
+    rate?: number;
+    estimated?: number;
+}, startedAt: number, now?: number): {
+    percent: number;
+    loaded: number;
+    total: number;
+    bytesPerSecond: number | null;
+    remainingSeconds: number | null;
+};

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

@@ -16,8 +16,12 @@ export declare const uploadMachine: import("xstate").StateMachine<import("xstate
  *
  * fromCallback y no fromPromise: hacen falta EVENTOS a medio camino (el avance) y un CLEANUP que aborte la petición.
  *
- * @param {(input: object, onProgress: (percent: number) => void, signal: AbortSignal) => Promise<unknown>} uploadFile
+ * @param {(input: object, onProgress: (percent: number, transfer?: {loaded: number, total: number}) => void, signal: AbortSignal) => Promise<unknown>} uploadFile
+ *     onProgress lleva, si se sabe, cuánto va y cuánto pesa (para la velocidad y lo que falta)
  */
-export declare function buildUploadActors(uploadFile: (input: object, onProgress: (percent: number) => void, signal: AbortSignal) => Promise<unknown>): {
+export declare function buildUploadActors(uploadFile: (input: object, onProgress: (percent: number, transfer?: {
+    loaded: number;
+    total: number;
+}) => void, signal: AbortSignal) => Promise<unknown>): {
     upload: import("xstate").CallbackActorLogic<import("xstate").EventObject, import("xstate").NonReducibleUnknown, import("xstate").EventObject>;
 };

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

@@ -3,14 +3,18 @@
  * @param {FormData} formData los archivos y los campos que pida el backend
  * @param {object} [options]
  * @param {Record<string, string>} [options.headers] p. ej. Authorization; Accept-Language ya va con el idioma activo
- * @param {(percent: number) => void} [options.onProgress] 0 a 100 de lo que ya viajó del cuerpo
+ * @param {(percent: number, transfer: {loaded: number, total: number}) => void} [options.onProgress] 0 a 100 de lo que ya
+ *     viajó del cuerpo, y los bytes (para la velocidad y lo que falta)
  * @param {AbortSignal} [options.signal]
  * @param {boolean} [options.withCredentials] manda las cookies a otro dominio (sesión de Sanctum en otro subdominio)
  * @returns {Promise<Response>}
  */
 export declare function uploadWithProgress(url: string, formData: FormData, { headers, onProgress, signal, withCredentials }?: {
     headers?: Record<string, string>;
-    onProgress?: (percent: number) => void;
+    onProgress?: (percent: number, transfer: {
+        loaded: number;
+        total: number;
+    }) => void;
     signal?: AbortSignal;
     withCredentials?: boolean;
 }): Promise<Response>;

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

@@ -0,0 +1,39 @@
+/**
+ * @param {object} options
+ * @param {string|string[]} [options.accept] 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'
+ * @param {number|string} [options.maxSize] el peso máximo de cada archivo: bytes o '10 MB'
+ * @param {boolean} [options.multiple] varios a la vez; sin él, solo el primero que se elija o se suelte
+ * @param {number} [options.maxFiles] con multiple: cuántos como máximo, contando los que ya estaban
+ * @param {number|string} [options.maxTotalSize] con multiple: cuánto pueden pesar todos juntos
+ * @param {Array<{name: string, size?: number}>} [options.keptFiles] con multiple: los que ya estaban (cuentan en los topes)
+ * @param {boolean} [options.disabled] no se puede elegir ni soltar (también mientras se sube)
+ * @param {(picked: any) => void} options.onAccept sin multiple, el archivo; con multiple, la lista completa (los que ya
+ *     estaban y los nuevos), lista para guardarse
+ * @param {(file: File, reason: string) => void} [options.onReject] reason es uno de FILE_REJECTION; sin él, un aviso
+ * @param {object} [options.texts] los textos que cambian, con la forma de `common`
+ * @returns {{inputProps: object, open: () => void, pickFiles: (fileList: FileList|File[]|null|undefined) => void, isDragging: boolean, dropHandlers: object, resolvedAccept: string|undefined, maxBytes: number|null, maxTotalBytes: number|null}}
+ */
+export declare function useFilePicker({ accept, maxSize, multiple, maxFiles, maxTotalSize, keptFiles, disabled, onAccept, onReject, texts, }: {
+    accept?: string | string[];
+    maxSize?: number | string;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxTotalSize?: number | string;
+    keptFiles?: Array<{
+        name: string;
+        size?: number;
+    }>;
+    disabled?: boolean;
+    onAccept: (picked: any) => void;
+    onReject?: (file: File, reason: string) => void;
+    texts?: object;
+}): {
+    inputProps: object;
+    open: () => void;
+    pickFiles: (fileList: FileList | File[] | null | undefined) => void;
+    isDragging: boolean;
+    dropHandlers: object;
+    resolvedAccept: string | undefined;
+    maxBytes: number | null;
+    maxTotalBytes: number | null;
+};

package/dist/ui/actions/ActionsMenu.js

@@ -1,25 +1,58 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
+import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
+import ListSubheader from "@mui/material/ListSubheader";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 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 { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+const ACTIONS_MENU_ROW = Object.freeze({ section: "section", divider: "divider" });
 const THEME_NAME = "CalcitaActionsMenu";
 const ActionsItem = piecePart(THEME_NAME, "Item", MenuItem);
 const ActionsItemIcon = piecePart(THEME_NAME, "ItemIcon", ListItemIcon);
+function levelOf(actions, path) {
+  const parents = [];
+  let items = actions;
+  for (const key of path) {
+    const parent = items.find((item) => item.key === key);
+    if (!parent?.children) {
+      break;
+    }
+    parents.push(parent);
+    items = parent.children;
+  }
+  return { items, parents };
+}
 function ActionsMenu(props) {
-  const { label, actions, icon, size = "small", ...unknownProps } = usePieceProps(props, THEME_NAME);
+  const { label, actions, icon, size = "small", texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
   const [anchor, setAnchor] = useState(null);
+  const [path, setPath] = useState([]);
+  const listRef = useRef(null);
+  const { items, parents } = levelOf(actions ?? [], path);
+  useEffect(() => {
+    if (anchor) {
+      listRef.current?.querySelector('[role="menuitem"]:not([aria-disabled="true"])')?.focus();
+    }
+  }, [path, anchor]);
   if (!actions?.length) {
     return null;
   }
+  const close = () => {
+    setAnchor(null);
+    setPath([]);
+  };
+  const goBack = () => setPath((current) => current.slice(0, -1));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Tooltip, { title: label, children: /* @__PURE__ */ jsx(
       IconButton,
@@ -34,25 +67,75 @@ function ActionsMenu(props) {
         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(
-      ActionsItem,
+    /* @__PURE__ */ jsxs(
+      Menu,
       {
-        disabled: action.disabled,
-        onClick: () => {
-          setAnchor(null);
-          action.onClick();
-        },
-        ownSx: action.color ? { color: `${action.color}.main` } : void 0,
+        anchorEl: anchor,
+        open: Boolean(anchor),
+        onClose: close,
+        onClick: (event) => event.stopPropagation(),
+        slotProps: { list: { ref: listRef, onKeyDown: (event) => {
+          if (event.key === "ArrowLeft" && path.length > 0) {
+            event.preventDefault();
+            goBack();
+          }
+        } } },
         children: [
-          action.icon && /* @__PURE__ */ jsx(ActionsItemIcon, { ownSx: action.color ? { color: "inherit" } : void 0, children: action.icon }),
-          /* @__PURE__ */ jsx(ListItemText, { children: action.label })
+          parents.length > 0 && [
+            /* @__PURE__ */ jsxs(ActionsItem, { onClick: goBack, ownSx: { fontWeight: 600 }, children: [
+              /* @__PURE__ */ jsx(ActionsItemIcon, { children: /* @__PURE__ */ jsx(ChevronLeftRoundedIcon, { fontSize: "small" }) }),
+              /* @__PURE__ */ jsx(ListItemText, { primary: parents.at(-1).label, secondary: t("actionsMenu.back") })
+            ] }, "__back"),
+            /* @__PURE__ */ jsx(Divider, {}, "__back-divider")
+          ],
+          items.map((item) => {
+            if (item.type === ACTIONS_MENU_ROW.divider) {
+              return /* @__PURE__ */ jsx(Divider, {}, item.key);
+            }
+            if (item.type === ACTIONS_MENU_ROW.section) {
+              return /* @__PURE__ */ jsx(ListSubheader, { sx: { lineHeight: 2.5, bgcolor: "transparent" }, children: item.label }, item.key);
+            }
+            if (item.render) {
+              return /* @__PURE__ */ jsx("li", { children: item.render({ close }) }, item.key);
+            }
+            const hasChildren = Boolean(item.children?.length);
+            return /* @__PURE__ */ jsxs(
+              ActionsItem,
+              {
+                disabled: item.disabled,
+                ...item.href && { component: "a", href: item.href, download: item.download },
+                "aria-haspopup": hasChildren ? "menu" : void 0,
+                onKeyDown: (event) => {
+                  if (hasChildren && event.key === "ArrowRight") {
+                    event.preventDefault();
+                    setPath((current) => [...current, item.key]);
+                  }
+                },
+                onClick: () => {
+                  if (hasChildren) {
+                    setPath((current) => [...current, item.key]);
+                    return;
+                  }
+                  close();
+                  item.onClick?.();
+                },
+                ownSx: item.color ? { color: `${item.color}.main` } : void 0,
+                children: [
+                  item.icon && /* @__PURE__ */ jsx(ActionsItemIcon, { ownSx: item.color ? { color: "inherit" } : void 0, children: item.icon }),
+                  /* @__PURE__ */ jsx(ListItemText, { primary: item.label, secondary: item.description }),
+                  hasChildren && /* @__PURE__ */ jsx(ChevronRightRoundedIcon, { fontSize: "small", sx: { ml: 2, color: "text.secondary" } })
+                ]
+              },
+              item.key
+            );
+          })
         ]
-      },
-      action.key
-    )) })
+      }
+    )
   ] });
 }
 export {
+  ACTIONS_MENU_ROW,
   ActionsMenu as default
 };
 //# sourceMappingURL=ActionsMenu.js.map

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

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

package/dist/ui/actions/CopyButton.js

@@ -1,28 +1,48 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import CheckIcon from "@mui/icons-material/CheckRounded";
 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";
-const COPIED_FEEDBACK_MILLISECONDS = 2e3;
-function CopyButton({ value, label, size = "small", onCopied, texts, ...unknownProps }) {
+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);
   const { t } = useToolkitTranslation("common", texts);
-  const [isCopied, setIsCopied] = useState(false);
+  const [copyState, setCopyState] = useState(COPY_STATE.idle);
+  const resetTimer = useRef(null);
   const buttonLabel = label ?? t("form.copy");
+  useEffect(() => () => clearTimeout(resetTimer.current), []);
   const copy = async () => {
+    clearTimeout(resetTimer.current);
     try {
-      await navigator.clipboard.writeText(value);
-      setIsCopied(true);
+      await navigator.clipboard.writeText(typeof value === "function" ? value() : value);
+      setCopyState(COPY_STATE.copied);
       onCopied?.();
-      setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);
-    } catch {
+    } catch (error) {
+      setCopyState(COPY_STATE.failed);
+      onCopyFailed?.(error);
     }
+    resetTimer.current = setTimeout(() => setCopyState(COPY_STATE.idle), FEEDBACK_MILLISECONDS);
   };
-  return /* @__PURE__ */ jsx(Tooltip, { title: isCopied ? t("form.copied") : buttonLabel, children: /* @__PURE__ */ jsx(IconButton, { size, "aria-label": buttonLabel, onClick: copy, color: isCopied ? "success" : "default", children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, { fontSize: "inherit" }) : /* @__PURE__ */ jsx(CopyIcon, { fontSize: "inherit" }) }) });
+  const feedbackText = {
+    [COPY_STATE.idle]: buttonLabel,
+    [COPY_STATE.copied]: t("form.copied"),
+    [COPY_STATE.failed]: t("form.copyFailed")
+  }[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(Box, { component: "span", role: "status", "aria-live": "polite", sx: VISUALLY_HIDDEN_SX, children: copyState === COPY_STATE.idle ? "" : feedbackText })
+  ] });
 }
 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 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';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\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, ...unknownProps}) {\n    warnUnknownProps('CopyButton', unknownProps);\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":";;;;;;;;;AAeA,MAAM,+BAA+B;AAUrC,SAAwB,WAAW,EAAC,OAAO,OAAO,OAAO,SAAS,UAAU,OAAO,GAAG,gBAAe;AACjG,mBAAiB,cAAc,YAAY;AAC3C,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;"}
+{"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;"}

package/dist/ui/actions/tableRowText.js

@@ -0,0 +1,7 @@
+function tableRowTextOf(cells) {
+  return cells.map((cell) => (cell === null || cell === void 0 ? "" : String(cell)).replace(/[\t\r\n]+/g, " ")).join("	");
+}
+export {
+  tableRowTextOf
+};
+//# sourceMappingURL=tableRowText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tableRowText.js","sources":["../../../src/ui/actions/tableRowText.js"],"sourcesContent":["// Un renglón de tabla como texto para el portapapeles: sus celdas separadas por tabulador, como copian Excel y las tablas de\n// datos. Al pegarlo en una hoja cada dato cae en su celda; en un correo se lee como una línea. Va con CopyButton:\n//\n//   <CopyButton label=\"Copiar el pedido\" value={() => tableRowTextOf([order.folio, order.customer, formatCurrency(order.total)])} />\n//\n// Puro (sin React): se prueba con node (tableRowText.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/**\n * @param {Array<string|number|null|undefined>} cells las celdas en el orden de las columnas, ya formateadas\n * @returns {string} las celdas unidas con tabulador; una vacía o nula queda vacía. Un tabulador o un salto de renglón dentro\n *     de una celda se cambia por un espacio: partirían el renglón al pegarlo\n */\nexport function tableRowTextOf(cells) {\n    return cells\n        .map((cell) => (cell === null || cell === undefined ? '' : String(cell)).replace(/[\\t\\r\\n]+/g, ' '))\n        .join('\\t');\n}\n"],"names":[],"mappings":"AAcO,SAAS,eAAe,OAAO;AAClC,SAAO,MACF,IAAI,CAAC,UAAU,SAAS,QAAQ,SAAS,SAAY,KAAK,OAAO,IAAI,GAAG,QAAQ,cAAc,GAAG,CAAC,EAClG,KAAK,GAAI;AAClB;"}