@stackcraftmx/calcita 0.32.2 → 0.47.0

package/dist/upload/FileDropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropzone.js","sources":["../../src/upload/FileDropzone.jsx"],"sourcesContent":["// La zona para soltar UN archivo, con puro MUI (sin librerías): se suelta o se elige, se revisa su tipo y su peso, y el\n// elegido se ve con su ícono, su nombre y su peso, con la × para quitarlo sin volver a abrir la ventana de archivos.\n//\n// Hay otra con el mismo uso y FilePond por dentro (@stackcraftmx/calcita/filepond): animaciones, varios archivos y\n// avance por archivo. Cambiar de una a otra es cambiar el import.\n//\n// Solo ELIGE el archivo (controlado: value / onChange). Enviarlo es de la pantalla: arma su FormData con los campos que\n// pida su backend y lo sube (uploadWithProgress + uploadMachine). Para eso están los huecos:\n//   actions   botones junto a «Elegir archivo» (p. ej. el de enviar)\n//   children  lo que va abajo (campos del formulario, el avance de la subida)\n//\n// Configuración: accept y maxSize (upload/fileRules.js); busy pone el candado mientras se sube (no se puede quitar ni\n// cambiar el archivo a media subida) y busyModal además bloquea toda la pantalla con ModalWaiting.\n//\n// Lo que se rechaza se avisa con toastError y los textos del paquete; con onReject la pantalla decide qué hacer.\n//\n// Mobile primero: en el teléfono no hay arrastrar; el botón es el camino y los botones se apilan a lo ancho.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFileDropzone con defaultProps y\n// styleOverrides de sus partes: root, fileArea, fileChip, hint, actions, limits, extra.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CancelIcon from '@mui/icons-material/Cancel';\nimport DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';\nimport ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';\nimport InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';\nimport PictureAsPdfOutlinedIcon from '@mui/icons-material/PictureAsPdfOutlined';\nimport TableViewOutlinedIcon from '@mui/icons-material/TableViewOutlined';\n\nimport ModalWaiting from '@/feedback/ModalWaiting.jsx';\nimport {toastError} from '@/feedback/toast.jsx';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {FILE_REJECTION, matchesAccept, parseFileSize, resolveAccept} from '@/upload/fileRules.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.CalcitaFileDropzone)\nconst THEME_NAME = 'CalcitaFileDropzone';\nconst DropzoneRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst DropzoneFileArea = piecePart(THEME_NAME, 'FileArea', Box);\nconst DropzoneFileChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst DropzoneHint = piecePart(THEME_NAME, 'Hint', Typography);\nconst DropzoneActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst DropzoneLimits = piecePart(THEME_NAME, 'Limits', Typography);\nconst DropzoneExtra = piecePart(THEME_NAME, 'Extra', Box);\n\n// el ícono según el tipo del archivo elegido, con el mismo color que el panel de descargas\nconst FILE_APPEARANCES = [\n    {pattern: /\\.(xlsx?|csv)$/, Icon: TableViewOutlinedIcon, color: 'success'},\n    {pattern: /\\.pdf$/, Icon: PictureAsPdfOutlinedIcon, color: 'error'},\n    {pattern: /\\.(png|jpe?g|gif|webp|svg|avif)$/, Icon: ImageOutlinedIcon, color: 'info'},\n    {pattern: /\\.(docx?|txt|md)$/, Icon: DescriptionOutlinedIcon, color: 'primary'},\n];\nconst DEFAULT_FILE_APPEARANCE = {Icon: InsertDriveFileOutlinedIcon, color: 'action'};\n\n/**\n * @param {object} props\n * @param {File|null} [props.value] el archivo elegido\n * @param {(file: File|null) => void} props.onChange null al quitarlo\n * @param {string|string[]} [props.accept] 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string} [props.hint] ya traducido; por omisión «Arrastre aquí su archivo»\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede soltar, elegir ni quitar\n * @param {boolean|{title?: string, text?: string}} [props.busyModal] además bloquea la pantalla mientras busy\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {import('react').ReactNode} [props.actions]\n * @param {import('react').ReactNode} [props.children]\n * @param {object} [props.sx] ajustes del recuadro\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FileDropzone(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaFileDropzone.defaultProps) y encima lo que llega aquí\n    const {\n    value = null, onChange, accept, maxSize, hint, buttonLabel, disabled = false, busy = false, busyModal = false, onReject, actions,\n    children, sx, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatFileSize} = useFormatters();\n    const inputRef = useRef(null);\n    const [isDragging, setIsDragging] = useState(false);\n    const isLocked = disabled || busy;\n    const resolvedAccept = resolveAccept(accept);\n    const maxBytes = parseFileSize(maxSize);\n    const hintText = hint ?? t('upload.hint');\n\n    const reject = (file, reason) => {\n        if (onReject) {\n            onReject(file, reason);\n            return;\n        }\n        const message = reason === FILE_REJECTION.size\n            ? t('upload.tooLarge', {name: file.name, max: formatFileSize(maxBytes)})\n            : t('upload.invalidType', {name: file.name, accept: resolvedAccept});\n        toastError(message);\n    };\n\n    const pick = (file) => {\n        // guard clause: se cerró la ventana sin elegir, o el candado está puesto\n        if (!file || isLocked) {\n            return;\n        }\n        if (!matchesAccept(file, resolvedAccept)) {\n            reject(file, FILE_REJECTION.type);\n            return;\n        }\n        if (maxBytes && file.size > maxBytes) {\n            reject(file, FILE_REJECTION.size);\n            return;\n        }\n        onChange(file);\n    };\n\n    const openPicker = () => {\n        // OJO: se limpia el valor del input para poder volver a elegir EL MISMO archivo (corregido en disco); sin esto\n        // el navegador no avisa el cambio\n        if (inputRef.current) {\n            inputRef.current.value = '';\n        }\n        inputRef.current?.click();\n    };\n\n    const appearance = value\n        ? FILE_APPEARANCES.find(({pattern}) => pattern.test(value.name.toLowerCase())) ?? DEFAULT_FILE_APPEARANCE\n        : null;\n\n    return (\n        <DropzoneRoot\n            variant=\"outlined\"\n            aria-busy={busy}\n            onDragOver={(event) => {\n                event.preventDefault();\n                setIsDragging(!isLocked);\n            }}\n            onDragLeave={() => setIsDragging(false)}\n            onDrop={(event) => {\n                event.preventDefault();\n                setIsDragging(false);\n                pick(event.dataTransfer.files?.[0]);\n            }}\n            ownSx={{\n                p: {xs: 3, sm: 5},\n                textAlign: 'center',\n                borderStyle: 'dashed',\n                borderWidth: 2,\n                borderColor: isDragging ? 'primary.main' : 'divider',\n                bgcolor: isDragging ? 'action.hover' : 'background.paper',\n                transition: 'border-color .15s ease, background-color .15s ease',\n                opacity: disabled ? 0.6 : 1,\n                ...sx,\n            }}\n        >\n            <input ref={inputRef} type=\"file\" accept={resolvedAccept} hidden disabled={isLocked} aria-label={hintText}\n                   onChange={(event) => pick(event.target.files?.[0])} />\n            {value ? (\n                <DropzoneFileArea ownSx={{mb: 2}}>\n                    <DropzoneFileChip\n                        icon={<appearance.Icon fontSize=\"small\" color={appearance.color} />}\n                        label={`${value.name} · ${formatFileSize(value.size)}`}\n                        variant=\"outlined\"\n                        onDelete={isLocked ? undefined : () => onChange(null)}\n                        deleteIcon={<CancelIcon aria-label={t('upload.remove', {name: value.name})} />}\n                        ownSx={{maxWidth: '100%', height: 'auto', py: 0.5, '& .MuiChip-label': {whiteSpace: 'normal', overflowWrap: 'anywhere'}}}\n                    />\n                </DropzoneFileArea>\n            ) : (\n                <DropzoneHint variant=\"body1\" ownSx={{mb: 2, overflowWrap: 'anywhere'}}>{hintText}</DropzoneHint>\n            )}\n            <DropzoneActions direction={{xs: 'column', sm: 'row'}} spacing={2} ownSx={{justifyContent: 'center', alignItems: {xs: 'stretch', sm: 'center'}}}>\n                <Button variant=\"outlined\" onClick={openPicker} disabled={isLocked}>{buttonLabel ?? t('upload.choose')}</Button>\n                {actions}\n            </DropzoneActions>\n            {/* el límite, discreto, solo si hay límite */}\n            {maxBytes && (\n                <DropzoneLimits variant=\"caption\" color=\"text.secondary\" ownSx={{display: 'block', mt: 1.5}}>\n                    {t('upload.maxSizeHint', {max: formatFileSize(maxBytes)})}\n                </DropzoneLimits>\n            )}\n            {children && <DropzoneExtra ownSx={{mt: 3, textAlign: 'left'}}>{children}</DropzoneExtra>}\n            {busyModal && <ModalWaiting open={busy} title={busyModal.title} text={busyModal.text} />}\n        </DropzoneRoot>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileDropzone.js","sources":["../../src/upload/FileDropzone.jsx"],"sourcesContent":["// La zona para soltar UN archivo, con puro MUI (sin librerías): se suelta o se elige, se revisa su tipo y su peso, y el\n// elegido se ve con su ícono, su nombre y su peso, con la × para quitarlo sin volver a abrir la ventana de archivos.\n//\n// Hay otra con el mismo uso y FilePond por dentro (@stackcraftmx/calcita/filepond): animaciones, varios archivos y\n// avance por archivo. Cambiar de una a otra es cambiar el import. Para un formulario, del tamaño de un campo: FileInput;\n// para varios como en un correo: AttachmentsInput; para una foto: ImageInput.\n//\n// Solo ELIGE el archivo (controlado: value / onChange). Enviarlo es de la pantalla: arma su FormData con los campos que\n// pida su backend y lo sube (uploadWithProgress + uploadMachine). Para eso están los huecos:\n//   actions   botones junto a «Elegir archivo» (p. ej. el de enviar)\n//   template  «Descargar la plantilla» junto a «Elegir archivo» (las props de TemplateDownloadButton)\n//   children  lo que va abajo (campos del formulario, el avance de la subida)\n//\n// Configuración: accept y maxSize (upload/fileRules.js); busy pone el candado mientras se sube (no se puede quitar ni\n// cambiar el archivo a media subida) y busyModal además bloquea toda la pantalla con ModalWaiting.\n//\n// Lo que se rechaza se avisa con toastError y los textos del paquete; con onReject la pantalla decide qué hacer\n// (useFilePicker, el mismo de los demás cargadores).\n//\n// Mobile primero: en el teléfono no hay arrastrar; el botón es el camino y los botones se apilan a lo ancho.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFileDropzone con defaultProps y\n// styleOverrides de sus partes: root, fileArea, fileChip, hint, actions, limits, extra.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport ModalWaiting from '@/feedback/ModalWaiting.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FileChip from '@/upload/FileChip.jsx';\nimport TemplateDownloadButton from '@/upload/TemplateDownloadButton.jsx';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFileDropzone)\nconst THEME_NAME = 'CalcitaFileDropzone';\nconst DropzoneRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst DropzoneFileArea = piecePart(THEME_NAME, 'FileArea', Box);\nconst DropzoneFileChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst DropzoneHint = piecePart(THEME_NAME, 'Hint', Typography);\nconst DropzoneActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst DropzoneLimits = piecePart(THEME_NAME, 'Limits', Typography);\nconst DropzoneExtra = piecePart(THEME_NAME, 'Extra', Box);\n\n/**\n * @param {object} props\n * @param {File|null} [props.value] el archivo elegido\n * @param {(file: File|null) => void} props.onChange null al quitarlo\n * @param {string|string[]} [props.accept] 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string} [props.hint] ya traducido; por omisión «Arrastre aquí su archivo»\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede soltar, elegir ni quitar\n * @param {boolean|{title?: string, text?: string}} [props.busyModal] además bloquea la pantalla mientras busy\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {Parameters<typeof import('@/upload/TemplateDownloadButton.jsx').default>[0]} [props.template] «Descargar la\n *     plantilla» junto a «Elegir archivo»: {href} de un archivo fijo o {request} al API\n * @param {import('react').ReactNode} [props.actions]\n * @param {import('react').ReactNode} [props.children]\n * @param {object} [props.sx] ajustes del recuadro\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FileDropzone(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaFileDropzone.defaultProps) y encima lo que llega aquí\n    const {\n        value = null, onChange, accept, maxSize, hint, buttonLabel, disabled = false, busy = false, busyModal = false, onReject, template,\n        actions, children, sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatFileSize} = useFormatters();\n    const isLocked = disabled || busy;\n    const hintText = hint ?? t('upload.hint');\n    const picker = useFilePicker({accept, maxSize, disabled: isLocked, onAccept: onChange, onReject, texts});\n\n    return (\n        <DropzoneRoot\n            variant=\"outlined\"\n            aria-busy={busy}\n            {...picker.dropHandlers}\n            ownSx={{\n                p: {xs: 3, sm: 5},\n                textAlign: 'center',\n                borderStyle: 'dashed',\n                borderWidth: 2,\n                borderColor: picker.isDragging ? 'primary.main' : 'divider',\n                bgcolor: picker.isDragging ? 'action.hover' : 'background.paper',\n                transition: 'border-color .15s ease, background-color .15s ease',\n                opacity: disabled ? 0.6 : 1,\n                ...sx,\n            }}\n        >\n            <input {...picker.inputProps} aria-label={hintText} />\n            {value ? (\n                <DropzoneFileArea ownSx={{mb: 2}}>\n                    <FileChip file={value} ChipComponent={DropzoneFileChip} removeLabel={t('upload.remove', {name: value.name})}\n                              onRemove={isLocked ? undefined : () => onChange(null)} />\n                </DropzoneFileArea>\n            ) : (\n                <DropzoneHint variant=\"body1\" ownSx={{mb: 2, overflowWrap: 'anywhere'}}>{hintText}</DropzoneHint>\n            )}\n            <DropzoneActions direction={{xs: 'column', sm: 'row'}} spacing={2} ownSx={{justifyContent: 'center', alignItems: {xs: 'stretch', sm: 'center'}}}>\n                <Button variant=\"outlined\" onClick={picker.open} disabled={isLocked}>{buttonLabel ?? t('upload.choose')}</Button>\n                {template && <TemplateDownloadButton texts={texts} {...template} />}\n                {actions}\n            </DropzoneActions>\n            {/* el límite, discreto, solo si hay límite */}\n            {picker.maxBytes && (\n                <DropzoneLimits variant=\"caption\" color=\"text.secondary\" ownSx={{display: 'block', mt: 1.5}}>\n                    {t('upload.maxSizeHint', {max: formatFileSize(picker.maxBytes)})}\n                </DropzoneLimits>\n            )}\n            {children && <DropzoneExtra ownSx={{mt: 3, textAlign: 'left'}}>{children}</DropzoneExtra>}\n            {busyModal && <ModalWaiting open={busy} title={busyModal.title} text={busyModal.text} />}\n        </DropzoneRoot>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/upload/FileInput.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import FormHelperText from "@mui/material/FormHelperText";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import AttachFileRoundedIcon from "@mui/icons-material/AttachFileRounded";
+import { translateValidationMessage } from "../forms/validationMessages.js";
+import FieldFrame from "../inputs/FieldFrame.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import FileChip from "./FileChip.js";
+import TemplateDownloadButton from "./TemplateDownloadButton.js";
+import { useFilePicker } from "./useFilePicker.js";
+const THEME_NAME = "CalcitaFileInput";
+const FileInputRoot = piecePart(THEME_NAME, "Root", Stack);
+const FileInputButton = piecePart(THEME_NAME, "Button", Button);
+const FileInputChip = piecePart(THEME_NAME, "FileChip", Chip);
+const FileInputEmpty = piecePart(THEME_NAME, "Empty", Typography);
+function FileInput(props) {
+  const {
+    name,
+    label,
+    value = null,
+    onChange,
+    onBlur,
+    accept,
+    maxSize,
+    error,
+    helperText = " ",
+    buttonLabel,
+    emptyText,
+    disabled = false,
+    busy = false,
+    onReject,
+    template,
+    actions,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const generatedId = useId();
+  const buttonId = `${name ?? "file"}-${generatedId}`;
+  const errorText = translateValidationMessage(t, error);
+  const isLocked = disabled || busy;
+  const change = (file) => {
+    onChange(file);
+    onBlur?.();
+  };
+  const picker = useFilePicker({ accept, maxSize, disabled: isLocked, onAccept: change, onReject, texts });
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId: buttonId, label, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      FileInputRoot,
+      {
+        direction: "row",
+        "aria-busy": busy,
+        ...picker.dropHandlers,
+        ownSx: {
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: 1,
+          minHeight: 40,
+          borderRadius: 1,
+          px: 0.5,
+          mx: -0.5,
+          outline: picker.isDragging ? 2 : 0,
+          outlineStyle: "dashed",
+          outlineColor: "primary.main",
+          bgcolor: picker.isDragging ? "action.hover" : "transparent",
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ jsx("input", { ...picker.inputProps, name, "aria-hidden": "true", tabIndex: -1 }),
+          /* @__PURE__ */ jsx(
+            FileInputButton,
+            {
+              id: buttonId,
+              variant: "outlined",
+              size: "small",
+              startIcon: /* @__PURE__ */ jsx(AttachFileRoundedIcon, {}),
+              onClick: picker.open,
+              disabled: isLocked,
+              ownSx: { flexShrink: 0 },
+              children: buttonLabel ?? t("upload.choose")
+            }
+          ),
+          value ? /* @__PURE__ */ jsx(
+            FileChip,
+            {
+              file: value,
+              ChipComponent: FileInputChip,
+              removeLabel: t("upload.remove", { name: value.name }),
+              onRemove: isLocked ? void 0 : () => change(null)
+            }
+          ) : /* @__PURE__ */ jsx(FileInputEmpty, { variant: "body2", color: "text.secondary", children: emptyText ?? t("upload.empty") }),
+          template && /* @__PURE__ */ jsx(TemplateDownloadButton, { size: "small", texts, ...template }),
+          actions
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FormHelperText, { error: Boolean(errorText), children: errorText ?? helperText })
+  ] }) });
+}
+export {
+  FileInput as default
+};
+//# sourceMappingURL=FileInput.js.map

package/dist/upload/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","sources":["../../src/upload/FileInput.jsx"],"sourcesContent":["// Un archivo del tamaño de un campo, para un formulario (la constancia fiscal de un cliente, el contrato firmado): la\n// etiqueta como los demás campos, el botón «Elegir archivo», el elegido en su chip con la × y abajo su ayuda o su error.\n// Dentro de una FormSection se vuelve renglón, como los demás campos. También se puede soltar el archivo encima.\n//\n// Solo ELIGE (controlado: value / onChange), con las mismas reglas que la zona grande (accept, maxSize; useFilePicker):\n// enviarlo es de la pantalla. value puede ser un archivo nuevo (File) o uno que ya está guardado ({name, size?}), para\n// editar un registro que ya lo tiene.\n//\n// Huecos: template («Descargar la plantilla» junto al botón), actions (botones suyos en el mismo renglón), emptyText,\n// buttonLabel y texts. Con formik: FormFileField (/forms); con react-hook-form, el del mismo nombre (/react-hook-form).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFileInput con defaultProps y\n// styleOverrides de sus partes: root, button, fileChip, empty.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FileChip from '@/upload/FileChip.jsx';\nimport TemplateDownloadButton from '@/upload/TemplateDownloadButton.jsx';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFileInput)\nconst THEME_NAME = 'CalcitaFileInput';\nconst FileInputRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst FileInputButton = piecePart(THEME_NAME, 'Button', Button);\nconst FileInputChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst FileInputEmpty = piecePart(THEME_NAME, 'Empty', Typography);\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida\n * @param {File|{name: string, size?: number}|null} [props.value] el archivo nuevo o el que ya está guardado\n * @param {(file: File|null) => void} props.onChange null al quitarlo\n * @param {() => void} [props.onBlur] se llama al elegir o quitar (para que el formulario lo marque como tocado)\n * @param {string|string[]} [props.accept] 'excel' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»\n * @param {string} [props.emptyText] ya traducido; por omisión «Ningún archivo elegido»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede elegir, soltar ni quitar\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {Parameters<typeof import('@/upload/TemplateDownloadButton.jsx').default>[0]} [props.template] «Descargar la\n *     plantilla» junto al botón\n * @param {import('react').ReactNode} [props.actions] botones suyos en el mismo renglón\n * @param {object} [props.sx] ajustes del renglón\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FileInput(props) {\n    const {\n        name, label, value = null, onChange, onBlur, accept, maxSize, error, helperText = ' ', buttonLabel, emptyText, disabled = false,\n        busy = false, onReject, template, actions, sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const buttonId = `${name ?? 'file'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, error);\n    const isLocked = disabled || busy;\n    const change = (file) => {\n        onChange(file);\n        onBlur?.();\n    };\n    const picker = useFilePicker({accept, maxSize, disabled: isLocked, onAccept: change, onReject, texts});\n\n    return (\n        <FieldFrame inputId={buttonId} label={label}>\n            <div>\n                <FileInputRoot\n                    direction=\"row\"\n                    aria-busy={busy}\n                    {...picker.dropHandlers}\n                    ownSx={{\n                        alignItems: 'center', flexWrap: 'wrap', gap: 1, minHeight: 40, borderRadius: 1, px: 0.5, mx: -0.5,\n                        outline: picker.isDragging ? 2 : 0, outlineStyle: 'dashed', outlineColor: 'primary.main',\n                        bgcolor: picker.isDragging ? 'action.hover' : 'transparent',\n                        ...sx,\n                    }}\n                >\n                    <input {...picker.inputProps} name={name} aria-hidden=\"true\" tabIndex={-1} />\n                    <FileInputButton id={buttonId} variant=\"outlined\" size=\"small\" startIcon={<AttachFileRoundedIcon />} onClick={picker.open}\n                                     disabled={isLocked} ownSx={{flexShrink: 0}}>\n                        {buttonLabel ?? t('upload.choose')}\n                    </FileInputButton>\n                    {value ? (\n                        <FileChip file={value} ChipComponent={FileInputChip} removeLabel={t('upload.remove', {name: value.name})}\n                                  onRemove={isLocked ? undefined : () => change(null)} />\n                    ) : (\n                        <FileInputEmpty variant=\"body2\" color=\"text.secondary\">{emptyText ?? t('upload.empty')}</FileInputEmpty>\n                    )}\n                    {template && <TemplateDownloadButton size=\"small\" texts={texts} {...template} />}\n                    {actions}\n                </FileInputRoot>\n                <FormHelperText error={Boolean(errorText)}>{errorText ?? helperText}</FormHelperText>\n            </div>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,QAAQ,KAAK;AACzD,MAAM,kBAAkB,UAAU,YAAY,UAAU,MAAM;AAC9D,MAAM,gBAAgB,UAAU,YAAY,YAAY,IAAI;AAC5D,MAAM,iBAAiB,UAAU,YAAY,SAAS,UAAU;AAwBhE,SAAwB,UAAU,OAAO;AACrC,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO,QAAQ;AAAA,IAAM;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAa;AAAA,IAAW,WAAW;AAAA,IAC1H,OAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAU;AAAA,IAAS;AAAA,IAAI;AAAA,IAC/C,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,cAAc,MAAA;AACpB,QAAM,WAAW,GAAG,QAAQ,MAAM,IAAI,WAAW;AACjD,QAAM,YAAY,2BAA2B,GAAG,KAAK;AACrD,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,CAAC,SAAS;AACrB,aAAS,IAAI;AACb,aAAA;AAAA,EACJ;AACA,QAAM,SAAS,cAAc,EAAC,QAAQ,SAAS,UAAU,UAAU,UAAU,QAAQ,UAAU,MAAA,CAAM;AAErG,6BACK,YAAA,EAAW,SAAS,UAAU,OAC3B,+BAAC,OAAA,EACG,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,aAAW;AAAA,QACV,GAAG,OAAO;AAAA,QACX,OAAO;AAAA,UACH,YAAY;AAAA,UAAU,UAAU;AAAA,UAAQ,KAAK;AAAA,UAAG,WAAW;AAAA,UAAI,cAAc;AAAA,UAAG,IAAI;AAAA,UAAK,IAAI;AAAA,UAC7F,SAAS,OAAO,aAAa,IAAI;AAAA,UAAG,cAAc;AAAA,UAAU,cAAc;AAAA,UAC1E,SAAS,OAAO,aAAa,iBAAiB;AAAA,UAC9C,GAAG;AAAA,QAAA;AAAA,QAGP,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAO,GAAG,OAAO,YAAY,MAAY,eAAY,QAAO,UAAU,IAAI;AAAA,UAC3E;AAAA,YAAC;AAAA,YAAA;AAAA,cAAgB,IAAI;AAAA,cAAU,SAAQ;AAAA,cAAW,MAAK;AAAA,cAAQ,+BAAY,uBAAA,EAAsB;AAAA,cAAI,SAAS,OAAO;AAAA,cACpG,UAAU;AAAA,cAAU,OAAO,EAAC,YAAY,EAAA;AAAA,cACpD,UAAA,eAAe,EAAE,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAEpC,QACG;AAAA,YAAC;AAAA,YAAA;AAAA,cAAS,MAAM;AAAA,cAAO,eAAe;AAAA,cAAe,aAAa,EAAE,iBAAiB,EAAC,MAAM,MAAM,MAAK;AAAA,cAC7F,UAAU,WAAW,SAAY,MAAM,OAAO,IAAI;AAAA,YAAA;AAAA,UAAA,IAE5D,oBAAC,gBAAA,EAAe,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,aAAa,EAAE,cAAc,EAAA,CAAE;AAAA,UAE1F,YAAY,oBAAC,wBAAA,EAAuB,MAAK,SAAQ,OAAe,GAAG,UAAU;AAAA,UAC7E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,wBAEJ,gBAAA,EAAe,OAAO,QAAQ,SAAS,GAAI,uBAAa,WAAA,CAAW;AAAA,EAAA,EAAA,CACxE,EAAA,CACJ;AAER;"}

package/dist/upload/FileUploadInput.js

@@ -0,0 +1,285 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef, useEffect } from "react";
+import { useMachine } from "@xstate/react";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import CircularProgress from "@mui/material/CircularProgress";
+import FormHelperText from "@mui/material/FormHelperText";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import CheckCircleRoundedIcon from "@mui/icons-material/CheckCircleRounded";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
+import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";
+import { startDownload } from "../downloads/downloadQueue.js";
+import { translateValidationMessage } from "../forms/validationMessages.js";
+import { newIdentifier } from "../identifiers.js";
+import FieldFrame from "../inputs/FieldFrame.js";
+import { fieldErrorsOf } from "../problems.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { useFormatters } from "../toolkit/useFormatters.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { FILE_REJECTION } from "./fileRules.js";
+import { transferProgressOf } from "./transferProgress.js";
+import { uploadMachine, buildUploadActors } from "./uploadMachine.js";
+import { useFilePicker } from "./useFilePicker.js";
+const FILE_UPLOAD_STATUS = Object.freeze({
+  pending: "pending",
+  uploading: "uploading",
+  processing: "processing",
+  uploaded: "uploaded",
+  failed: "failed"
+});
+const STATUS_COLORS = Object.freeze({
+  [FILE_UPLOAD_STATUS.pending]: "default",
+  [FILE_UPLOAD_STATUS.uploading]: "info",
+  [FILE_UPLOAD_STATUS.processing]: "info",
+  [FILE_UPLOAD_STATUS.uploaded]: "success",
+  [FILE_UPLOAD_STATUS.failed]: "error"
+});
+const PROGRESS_SEPARATOR = " · ";
+const THEME_NAME = "CalcitaFileUploadInput";
+const FileUploadRoot = piecePart(THEME_NAME, "Root", Stack);
+const FileUploadName = piecePart(THEME_NAME, "FileName", Typography);
+const FileUploadStatus = piecePart(THEME_NAME, "Status", Chip);
+const FileUploadButton = piecePart(THEME_NAME, "Button", Button);
+const FileUploadHelper = piecePart(THEME_NAME, "Helper", FormHelperText);
+function uploadErrorTextOf(error) {
+  const problem = (
+    /** @type {{problem?: object, message?: string}} */
+    error?.problem
+  );
+  const firstFieldMessage = Object.values(fieldErrorsOf(problem ?? null)).flat()[0];
+  return firstFieldMessage ?? problem?.detail ?? null;
+}
+function FileUploadInput(props) {
+  const {
+    name,
+    label,
+    value = "",
+    onChange,
+    onBlur,
+    upload,
+    idOf = (result2) => result2?.id,
+    uploadedFile = null,
+    download,
+    accept,
+    maxSize,
+    limitsText,
+    error,
+    helperText = " ",
+    disabled = false,
+    actions,
+    onUploaded,
+    onUploadFailed,
+    onCancel,
+    onRemove,
+    onStatusChange,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const { formatFileSize } = useFormatters();
+  const generatedId = useId();
+  const inputId = `${name ?? "file-upload"}-${generatedId}`;
+  const labelId = `${inputId}-label`;
+  const buttonTextId = `${inputId}-button`;
+  const [chosenFile, setChosenFile] = useState(null);
+  const [rejectedText, setRejectedText] = useState(null);
+  const startedAtRef = useRef(0);
+  const [uploadSnapshot, sendToUpload] = useMachine(uploadMachine.provide({
+    actors: buildUploadActors(({ file, idempotencyKey }, onProgress, signal) => upload(file, {
+      signal,
+      idempotencyKey,
+      onUploadProgress: (transfer2) => {
+        const total = transfer2.total ?? file.size;
+        onProgress(total ? Math.round(transfer2.loaded * 100 / total) : 0, { ...transfer2, total });
+      }
+    }))
+  }));
+  const { progress, transfer, result, problem } = uploadSnapshot.context;
+  const isSending = uploadSnapshot.matches({ uploading: "sending" });
+  const isProcessing = uploadSnapshot.matches({ uploading: "processing" });
+  const isUploading = isSending || isProcessing;
+  const isFailed = uploadSnapshot.matches("failed") || Boolean(rejectedText);
+  const isUploaded = Boolean(value) && !isUploading && !isFailed;
+  let status = FILE_UPLOAD_STATUS.pending;
+  if (isSending) {
+    status = FILE_UPLOAD_STATUS.uploading;
+  } else if (isProcessing) {
+    status = FILE_UPLOAD_STATUS.processing;
+  } else if (isFailed) {
+    status = FILE_UPLOAD_STATUS.failed;
+  } else if (isUploaded) {
+    status = FILE_UPLOAD_STATUS.uploaded;
+  }
+  useEffect(() => {
+    if (!result) {
+      return;
+    }
+    onChange(idOf(result) ?? "");
+    onUploaded?.(result);
+  }, [result]);
+  useEffect(() => {
+    if (problem) {
+      onUploadFailed?.(problem);
+    }
+  }, [problem]);
+  useEffect(() => {
+    onStatusChange?.(status);
+  }, [status]);
+  useEffect(() => {
+    if (!value && uploadSnapshot.matches("done")) {
+      setChosenFile(null);
+      sendToUpload({ type: "RESET" });
+    }
+  }, [value]);
+  const startUpload = (file) => {
+    onBlur?.();
+    setRejectedText(null);
+    setChosenFile(file);
+    onChange("");
+    startedAtRef.current = Date.now();
+    sendToUpload({ type: "UPLOAD", input: { file, idempotencyKey: newIdentifier() } });
+  };
+  const picker = useFilePicker({
+    accept,
+    maxSize,
+    disabled: disabled || isUploading,
+    onAccept: startUpload,
+    texts,
+    onReject: (file, reason) => {
+      onBlur?.();
+      setRejectedText(reason === FILE_REJECTION.size ? t("upload.tooLarge", { name: file.name, max: formatFileSize(picker.maxBytes) }) : t("upload.invalidType", { name: file.name, accept: picker.resolvedAccept }));
+    }
+  });
+  const remove = () => {
+    setChosenFile(null);
+    setRejectedText(null);
+    onChange("");
+    onBlur?.();
+    sendToUpload({ type: "RESET" });
+    onRemove?.();
+  };
+  const cancel = () => {
+    sendToUpload({ type: "CANCEL" });
+    onCancel?.();
+  };
+  const shownFile = chosenFile ?? (value ? uploadedFile : null);
+  const statusLabel = status === FILE_UPLOAD_STATUS.uploading ? t("upload.status.uploading", { percent: progress ?? 0 }) : t(`upload.status.${status}`);
+  const validationText = translateValidationMessage(t, error);
+  const errorText = rejectedText ?? (uploadSnapshot.matches("failed") ? uploadErrorTextOf(problem) ?? t("upload.failed") : null) ?? (isUploading ? null : validationText);
+  let progressText = null;
+  if (isProcessing) {
+    progressText = t("upload.processing");
+  } else if (isSending) {
+    const now = transfer ? transferProgressOf(transfer, startedAtRef.current) : null;
+    progressText = now ? [
+      t("upload.amount", { loaded: formatFileSize(now.loaded), total: formatFileSize(now.total) }),
+      now.bytesPerSecond ? t("upload.speed", { size: formatFileSize(now.bytesPerSecond) }) : null,
+      now.remainingSeconds != null ? t("upload.remaining", { count: now.remainingSeconds }) : null
+    ].filter(Boolean).join(PROGRESS_SEPARATOR) : t("upload.starting");
+  } else if (uploadSnapshot.matches("cancelled")) {
+    progressText = t("upload.cancelled");
+  }
+  const buttonHint = limitsText ?? (picker.maxBytes ? t("upload.maxSizeHint", { max: formatFileSize(picker.maxBytes) }) : "");
+  const downloadUploaded = () => startDownload({
+    label: shownFile?.name ?? t("upload.download"),
+    request: (transferOptions) => download(value, transferOptions)
+  });
+  const row = /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      FileUploadRoot,
+      {
+        direction: "row",
+        "aria-busy": isUploading,
+        ...picker.dropHandlers,
+        ownSx: {
+          // en el teléfono el nombre baja a su renglón; en escritorio se corta con «…» y el botón no se mueve
+          alignItems: "center",
+          justifyContent: "flex-end",
+          flexWrap: { xs: "wrap", sm: "nowrap" },
+          gap: 1,
+          minWidth: 0,
+          minHeight: 40,
+          px: 0.5,
+          mx: -0.5,
+          borderRadius: 1,
+          outline: picker.isDragging ? 2 : 0,
+          outlineStyle: "dashed",
+          outlineColor: "primary.main",
+          bgcolor: picker.isDragging ? "action.hover" : "transparent",
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ jsx("input", { ...picker.inputProps, id: inputId, name, "aria-labelledby": label ? labelId : void 0 }),
+          shownFile && // el nombre cortado si es largo y completo al pasar el cursor; en el teléfono baja a su renglón
+          /* @__PURE__ */ jsx(Tooltip, { title: shownFile.size != null ? `${shownFile.name} · ${formatFileSize(shownFile.size)}` : shownFile.name, children: /* @__PURE__ */ jsx(
+            FileUploadName,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              noWrap: true,
+              ownSx: { minWidth: 0, flexShrink: 1, flexBasis: { xs: "100%", sm: "auto" }, textAlign: { xs: "right", sm: "left" } },
+              children: shownFile.name
+            }
+          ) }),
+          actions,
+          /* @__PURE__ */ jsx(
+            FileUploadStatus,
+            {
+              size: "small",
+              color: STATUS_COLORS[status],
+              variant: status === FILE_UPLOAD_STATUS.pending ? "filled" : "outlined",
+              label: statusLabel,
+              icon: isUploading && /* @__PURE__ */ jsx(CircularProgress, { size: 12, color: "inherit", variant: isProcessing ? "indeterminate" : "determinate", value: progress ?? 0 }) || isUploaded && /* @__PURE__ */ jsx(CheckCircleRoundedIcon, {}) || void 0,
+              ownSx: { flexShrink: 0 }
+            }
+          ),
+          isUploading ? /* @__PURE__ */ jsx(FileUploadButton, { size: "small", color: "inherit", onClick: cancel, ownSx: { flexShrink: 0 }, children: t("upload.cancel") }) : (
+            // describeChild: lo que acepta se lee como descripción; el nombre sigue siendo «Cargar» y el documento
+            /* @__PURE__ */ jsx(Tooltip, { title: buttonHint, describeChild: true, children: /* @__PURE__ */ jsx(
+              FileUploadButton,
+              {
+                size: "small",
+                variant: isUploaded ? "outlined" : "contained",
+                startIcon: /* @__PURE__ */ jsx(FileUploadOutlinedIcon, {}),
+                disabled,
+                onClick: picker.open,
+                "aria-labelledby": label ? `${buttonTextId} ${labelId}` : void 0,
+                ownSx: { flexShrink: 0 },
+                children: /* @__PURE__ */ jsx("span", { id: buttonTextId, children: isUploaded ? t("upload.replace") : t("upload.upload") })
+              }
+            ) })
+          ),
+          isUploaded && download && /* @__PURE__ */ jsx(Tooltip, { title: t("upload.download"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", "aria-label": t("upload.download"), onClick: downloadUploaded, children: /* @__PURE__ */ jsx(FileDownloadOutlinedIcon, { fontSize: "small" }) }) }),
+          isUploaded && !disabled && /* @__PURE__ */ jsx(Tooltip, { title: t("upload.remove", { name: shownFile?.name ?? "" }), children: /* @__PURE__ */ jsx(IconButton, { size: "small", "aria-label": t("upload.remove", { name: shownFile?.name ?? "" }), onClick: remove, children: /* @__PURE__ */ jsx(CloseRoundedIcon, { fontSize: "small" }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FileUploadHelper,
+      {
+        error: Boolean(errorText),
+        role: errorText ? "alert" : progressText ? "status" : void 0,
+        ownSx: { textAlign: "right", mx: 0 },
+        children: errorText ?? progressText ?? helperText
+      }
+    )
+  ] });
+  if (!label) {
+    return row;
+  }
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, labelId, label, children: row });
+}
+export {
+  FILE_UPLOAD_STATUS,
+  FileUploadInput as default
+};
+//# sourceMappingURL=FileUploadInput.js.map

package/dist/upload/FileUploadInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadInput.js","sources":["../../src/upload/FileUploadInput.jsx"],"sourcesContent":["// El cargador MINI: un archivo que se SUBE en cuanto se elige, del tamaño de un renglón. Para una lista de documentos (el\n// expediente de un cliente, lo que pide una solicitud): a la izquierda el nombre del documento (la etiqueta del renglón) y a\n// la derecha el nombre del archivo, su estado y el botón.\n//\n//   estado    Por cargar · Subiendo 40 % · Procesando · Cargado · No se cargó\n//   botón     Cargar (lleno) → ya cargado, Sustituir (con borde); mientras sube, Cancelar\n//   íconos    bajar el que ya subió (si la pantalla da download) y quitarlo\n//   abajo     el avance en palabras («1.2 MB de 3 MB · 350 kB/s · faltan 5 segundos»; el porcentaje ya va en el estado) o el\n//             motivo del error\n//\n// Al formulario llega SOLO lo que el servidor da para reconocer el archivo (su id, por omisión result.id): el formulario\n// manda ese id junto con lo demás y el backend lo liga a su registro. Mientras sube, el valor es '' (no se puede guardar\n// con el id del anterior). Subir es de la pantalla: `upload` recibe el archivo con su señal para cancelar, su avance y una\n// llave por archivo elegido (si la red se cae a media subida, el servidor no deja dos copias). Con uploadWithProgress o\n// con axios, igual.\n//\n// Lo que es del negocio (Aprobado, Falta información) no va aquí: la pantalla lo pinta junto, con `actions`, y sabe en\n// qué va cada uno con onStatusChange (para «3 de 5 cargados»). Tipo y peso se revisan ANTES de subir (accept, maxSize): no\n// se gastan minutos subiendo lo que el servidor va a rechazar; el motivo sale abajo, en rojo.\n//\n// Dentro de una FormSection se vuelve renglón, como los demás campos. También se puede soltar el archivo encima.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFileUploadInput con defaultProps y\n// styleOverrides de sus partes: root, fileName, status, button, helper.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useId, useRef, useState} from 'react';\nimport {useMachine} from '@xstate/react';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\nimport FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';\n\nimport {startDownload} from '@/downloads/downloadQueue.js';\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport {newIdentifier} from '@/identifiers.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {fieldErrorsOf} from '@/problems.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {FILE_REJECTION} from '@/upload/fileRules.js';\nimport {transferProgressOf} from '@/upload/transferProgress.js';\nimport {buildUploadActors, uploadMachine} from '@/upload/uploadMachine.js';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n/** En qué va el archivo de un renglón (onStatusChange). */\nexport const FILE_UPLOAD_STATUS = Object.freeze({\n    pending: 'pending', uploading: 'uploading', processing: 'processing', uploaded: 'uploaded', failed: 'failed',\n});\n\n// el color de la etiqueta de cada estado (el color es información)\nconst STATUS_COLORS = Object.freeze({\n    [FILE_UPLOAD_STATUS.pending]: 'default',\n    [FILE_UPLOAD_STATUS.uploading]: 'info',\n    [FILE_UPLOAD_STATUS.processing]: 'info',\n    [FILE_UPLOAD_STATUS.uploaded]: 'success',\n    [FILE_UPLOAD_STATUS.failed]: 'error',\n});\n\n// entre las partes del avance en palabras\nconst PROGRESS_SEPARATOR = ' · ';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFileUploadInput)\nconst THEME_NAME = 'CalcitaFileUploadInput';\nconst FileUploadRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst FileUploadName = piecePart(THEME_NAME, 'FileName', Typography);\nconst FileUploadStatus = piecePart(THEME_NAME, 'Status', Chip);\nconst FileUploadButton = piecePart(THEME_NAME, 'Button', Button);\nconst FileUploadHelper = piecePart(THEME_NAME, 'Helper', FormHelperText);\n\n/**\n * El texto de un error de la subida: el del campo si el servidor mandó un 422 con su lista, si no su detail, y si no hubo\n * respuesta, el genérico.\n *\n * @param {unknown} error\n * @returns {string|null}\n */\nfunction uploadErrorTextOf(error) {\n    const problem = /** @type {{problem?: object, message?: string}} */ (error)?.problem;\n    const firstFieldMessage = Object.values(fieldErrorsOf(problem ?? null)).flat()[0];\n    return firstFieldMessage ?? problem?.detail ?? null;\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida: el nombre del documento; sin ella, el renglón va solo\n * @param {string|null} [props.value] lo que el servidor dio para reconocer el archivo subido ('' o null = ninguno)\n * @param {(value: string) => void} props.onChange recibe el id al terminar de subir, '' al quitarlo o mientras sube otro\n * @param {() => void} [props.onBlur] se llama al elegir o quitar (para que el formulario lo marque como tocado)\n * @param {(file: File, options: {signal: AbortSignal, idempotencyKey: string, onUploadProgress: (transfer: {loaded: number, total: number, rate?: number, estimated?: number}) => void}) => Promise<any>} props.upload\n *     sube el archivo (con uploadWithProgress, axios o el cliente del proyecto) y regresa lo que conteste el servidor\n * @param {(result: any) => string} [props.idOf] de la respuesta, lo que se guarda en el formulario; por omisión result.id\n * @param {{name: string, size?: number}|null} [props.uploadedFile] el que ya estaba subido, para enseñar su nombre al editar\n * @param {(value: string, transferOptions: object) => Promise<{blob: Blob, fileName: string}>} [props.download] baja el\n *     que ya subió (pasa por el panel de descargas); sin él no sale el ícono\n * @param {string|string[]} [props.accept] 'pdf' | ['pdf', 'image'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string} [props.limitsText] ya traducido: qué acepta, en palabras («PDF o foto, hasta 5 MB»); sale al pasar sobre\n *     el botón. Por omisión solo el peso máximo\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {boolean} [props.disabled]\n * @param {import('react').ReactNode} [props.actions] lo del negocio junto al estado (Aprobado, Falta información)\n * @param {(result: any) => void} [props.onUploaded] terminó de subir (p. ej. para enseñar el folio de la respuesta)\n * @param {(error: unknown) => void} [props.onUploadFailed] no se pudo subir (el motivo ya sale abajo)\n * @param {() => void} [props.onCancel] la persona canceló a media subida\n * @param {() => void} [props.onRemove] la persona quitó el archivo\n * @param {(status: string) => void} [props.onStatusChange] uno de FILE_UPLOAD_STATUS, cada vez que cambia\n * @param {object} [props.sx] ajustes del renglón\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FileUploadInput(props) {\n    const {\n        name, label, value = '', onChange, onBlur, upload, idOf = (result) => result?.id, uploadedFile = null, download, accept, maxSize,\n        limitsText, error, helperText = ' ', disabled = false, actions, onUploaded, onUploadFailed, onCancel, onRemove, onStatusChange,\n        sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatFileSize} = useFormatters();\n    const generatedId = useId();\n    const inputId = `${name ?? 'file-upload'}-${generatedId}`;\n    const labelId = `${inputId}-label`;\n    const buttonTextId = `${inputId}-button`;\n    const [chosenFile, setChosenFile] = useState(null);\n    const [rejectedText, setRejectedText] = useState(null);\n    const startedAtRef = useRef(0);\n    const [uploadSnapshot, sendToUpload] = useMachine(uploadMachine.provide({\n        actors: buildUploadActors(({file, idempotencyKey}, onProgress, signal) => upload(file, {\n            signal,\n            idempotencyKey,\n            onUploadProgress: (transfer) => {\n                const total = transfer.total ?? file.size;\n                onProgress(total ? Math.round((transfer.loaded * 100) / total) : 0, {...transfer, total});\n            },\n        })),\n    }));\n    const {progress, transfer, result, problem} = uploadSnapshot.context;\n    const isSending = uploadSnapshot.matches({uploading: 'sending'});\n    const isProcessing = uploadSnapshot.matches({uploading: 'processing'});\n    const isUploading = isSending || isProcessing;\n    const isFailed = uploadSnapshot.matches('failed') || Boolean(rejectedText);\n    const isUploaded = Boolean(value) && !isUploading && !isFailed;\n    let status = FILE_UPLOAD_STATUS.pending;\n    if (isSending) {\n        status = FILE_UPLOAD_STATUS.uploading;\n    } else if (isProcessing) {\n        status = FILE_UPLOAD_STATUS.processing;\n    } else if (isFailed) {\n        status = FILE_UPLOAD_STATUS.failed;\n    } else if (isUploaded) {\n        status = FILE_UPLOAD_STATUS.uploaded;\n    }\n\n    // al terminar, el formulario se queda con el id; quien usa el campo puede enseñar lo demás de la respuesta\n    useEffect(() => {\n        if (!result) {\n            return;\n        }\n        onChange(idOf(result) ?? '');\n        onUploaded?.(result);\n        // OJO: solo cuando llega una respuesta nueva; onChange, idOf y onUploaded cambian en cada render\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [result]);\n    useEffect(() => {\n        if (problem) {\n            onUploadFailed?.(problem);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [problem]);\n    useEffect(() => {\n        onStatusChange?.(status);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [status]);\n    // si el formulario se limpia (después de guardar), el renglón también regresa a «por cargar»\n    useEffect(() => {\n        if (!value && uploadSnapshot.matches('done')) {\n            setChosenFile(null);\n            sendToUpload({type: 'RESET'});\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    const startUpload = (file) => {\n        onBlur?.();\n        setRejectedText(null);\n        setChosenFile(file);\n        // mientras sube, el formulario no tiene archivo: no se puede guardar con el id del anterior\n        onChange('');\n        startedAtRef.current = Date.now();\n        sendToUpload({type: 'UPLOAD', input: {file, idempotencyKey: newIdentifier()}});\n    };\n    const picker = useFilePicker({\n        accept, maxSize, disabled: disabled || isUploading, onAccept: startUpload, texts,\n        onReject: (file, reason) => {\n            onBlur?.();\n            setRejectedText(reason === FILE_REJECTION.size\n                ? t('upload.tooLarge', {name: file.name, max: formatFileSize(picker.maxBytes)})\n                : t('upload.invalidType', {name: file.name, accept: picker.resolvedAccept}));\n        },\n    });\n    const remove = () => {\n        setChosenFile(null);\n        setRejectedText(null);\n        onChange('');\n        onBlur?.();\n        sendToUpload({type: 'RESET'});\n        onRemove?.();\n    };\n    const cancel = () => {\n        sendToUpload({type: 'CANCEL'});\n        onCancel?.();\n    };\n\n    const shownFile = chosenFile ?? (value ? uploadedFile : null);\n    const statusLabel = status === FILE_UPLOAD_STATUS.uploading\n        ? t('upload.status.uploading', {percent: progress ?? 0})\n        : t(`upload.status.${status}`);\n    const validationText = translateValidationMessage(t, error);\n    const errorText = rejectedText\n        ?? (uploadSnapshot.matches('failed') ? uploadErrorTextOf(problem) ?? t('upload.failed') : null)\n        ?? (isUploading ? null : validationText);\n    let progressText = null;\n    if (isProcessing) {\n        progressText = t('upload.processing');\n    } else if (isSending) {\n        // «1.2 MB de 3 MB · 350 kB/s · faltan 5 segundos»: la velocidad y lo que falta, cuando ya se pueden decir (el\n        // porcentaje ya va en la etiqueta del estado)\n        const now = transfer ? transferProgressOf(transfer, startedAtRef.current) : null;\n        progressText = now ? [\n            t('upload.amount', {loaded: formatFileSize(now.loaded), total: formatFileSize(now.total)}),\n            now.bytesPerSecond ? t('upload.speed', {size: formatFileSize(now.bytesPerSecond)}) : null,\n            now.remainingSeconds != null ? t('upload.remaining', {count: now.remainingSeconds}) : null,\n        ].filter(Boolean).join(PROGRESS_SEPARATOR) : t('upload.starting');\n    } else if (uploadSnapshot.matches('cancelled')) {\n        progressText = t('upload.cancelled');\n    }\n    const buttonHint = limitsText ?? (picker.maxBytes ? t('upload.maxSizeHint', {max: formatFileSize(picker.maxBytes)}) : '');\n    const downloadUploaded = () => startDownload({\n        label: shownFile?.name ?? t('upload.download'),\n        request: (transferOptions) => download(value, transferOptions),\n    });\n\n    const row = (\n        <div>\n            <FileUploadRoot\n                direction=\"row\"\n                aria-busy={isUploading}\n                {...picker.dropHandlers}\n                ownSx={{\n                    // en el teléfono el nombre baja a su renglón; en escritorio se corta con «…» y el botón no se mueve\n                    alignItems: 'center', justifyContent: 'flex-end', flexWrap: {xs: 'wrap', sm: 'nowrap'}, gap: 1, minWidth: 0, minHeight: 40,\n                    px: 0.5, mx: -0.5, borderRadius: 1,\n                    outline: picker.isDragging ? 2 : 0, outlineStyle: 'dashed', outlineColor: 'primary.main',\n                    bgcolor: picker.isDragging ? 'action.hover' : 'transparent',\n                    ...sx,\n                }}\n            >\n                <input {...picker.inputProps} id={inputId} name={name} aria-labelledby={label ? labelId : undefined} />\n                {shownFile && (\n                    // el nombre cortado si es largo y completo al pasar el cursor; en el teléfono baja a su renglón\n                    <Tooltip title={shownFile.size != null ? `${shownFile.name} · ${formatFileSize(shownFile.size)}` : shownFile.name}>\n                        <FileUploadName variant=\"caption\" color=\"text.secondary\" noWrap\n                                        ownSx={{minWidth: 0, flexShrink: 1, flexBasis: {xs: '100%', sm: 'auto'}, textAlign: {xs: 'right', sm: 'left'}}}>\n                            {shownFile.name}\n                        </FileUploadName>\n                    </Tooltip>\n                )}\n                {actions}\n                <FileUploadStatus\n                    size=\"small\"\n                    color={STATUS_COLORS[status]}\n                    variant={status === FILE_UPLOAD_STATUS.pending ? 'filled' : 'outlined'}\n                    label={statusLabel}\n                    icon={(isUploading && (\n                        <CircularProgress size={12} color=\"inherit\" variant={isProcessing ? 'indeterminate' : 'determinate'} value={progress ?? 0} />\n                    )) || (isUploaded && <CheckCircleRoundedIcon />) || undefined}\n                    ownSx={{flexShrink: 0}}\n                />\n                {isUploading ? (\n                    <FileUploadButton size=\"small\" color=\"inherit\" onClick={cancel} ownSx={{flexShrink: 0}}>{t('upload.cancel')}</FileUploadButton>\n                ) : (\n                    // describeChild: lo que acepta se lee como descripción; el nombre sigue siendo «Cargar» y el documento\n                    <Tooltip title={buttonHint} describeChild>\n                        <FileUploadButton\n                            size=\"small\"\n                            variant={isUploaded ? 'outlined' : 'contained'}\n                            startIcon={<FileUploadOutlinedIcon />}\n                            disabled={disabled}\n                            onClick={picker.open}\n                            aria-labelledby={label ? `${buttonTextId} ${labelId}` : undefined}\n                            ownSx={{flexShrink: 0}}\n                        >\n                            <span id={buttonTextId}>{isUploaded ? t('upload.replace') : t('upload.upload')}</span>\n                        </FileUploadButton>\n                    </Tooltip>\n                )}\n                {isUploaded && download && (\n                    <Tooltip title={t('upload.download')}>\n                        <IconButton size=\"small\" aria-label={t('upload.download')} onClick={downloadUploaded}>\n                            <FileDownloadOutlinedIcon fontSize=\"small\" />\n                        </IconButton>\n                    </Tooltip>\n                )}\n                {isUploaded && !disabled && (\n                    <Tooltip title={t('upload.remove', {name: shownFile?.name ?? ''})}>\n                        <IconButton size=\"small\" aria-label={t('upload.remove', {name: shownFile?.name ?? ''})} onClick={remove}>\n                            <CloseRoundedIcon fontSize=\"small\" />\n                        </IconButton>\n                    </Tooltip>\n                )}\n            </FileUploadRoot>\n            {/* abajo: el error manda; si no, el avance; si no, la ayuda de la pantalla */}\n            <FileUploadHelper error={Boolean(errorText)} role={errorText ? 'alert' : (progressText ? 'status' : undefined)}\n                              ownSx={{textAlign: 'right', mx: 0}}>\n                {errorText ?? progressText ?? helperText}\n            </FileUploadHelper>\n        </div>\n    );\n\n    // sin etiqueta, el renglón va solo (la pantalla pone el título del documento a su manera)\n    if (!label) {\n        return row;\n    }\n    return <FieldFrame inputId={inputId} labelId={labelId} label={label}>{row}</FieldFrame>;\n}\n"],"names":["result","transfer"],"mappings":"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"}