@stackcraftmx/calcita 0.47.0 → 0.52.0

package/dist/inbox/MessageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.js","sources":["../../src/inbox/MessageList.jsx"],"sourcesContent":["// La lista de mensajes de una bandeja tipo correo: quién lo manda (y cuántos mensajes trae la conversación), el asunto con sus\n// etiquetas, el principio del texto, la fecha corta, la estrella y el clip si trae archivos. Los no leídos van en negritas con\n// su punto.\n//\n// Lo de un producto, todo hacia afuera (la lista no guarda nada ni llama a ningún servidor):\n//   - elegir varios: con onSelectionChange el monograma de cada mensaje se vuelve su casilla (como Gmail en el teléfono) y la\n//     pantalla pone las acciones de lo elegido (SelectionActions: archivar, borrar, marcar como leído…);\n//   - «⋯» de cada mensaje con las acciones que dé la pantalla (messageActions);\n//   - renderMessage para pintar lo de adentro de cada renglón a su manera, y texts para cualquier texto.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMessageList con defaultProps y\n// styleOverrides de sus partes: empty, selectedAvatar, item, actions, starButton, itemButton, avatarSlot, avatarButton,\n// avatar, body, text, topRow, unreadDot, sender, threadCount, date, subject, labels.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemAvatar from '@mui/material/ListItemAvatar';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\nimport CheckRoundedIcon from '@mui/icons-material/CheckRounded';\nimport StarBorderRoundedIcon from '@mui/icons-material/StarBorderRounded';\nimport StarRoundedIcon from '@mui/icons-material/StarRounded';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {inboxDateOf} from '@/inbox/inboxDates.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {tagOf} from '@/ui/labels/tagOf.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ActionsMenu from '@/ui/actions/ActionsMenu.jsx';\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.CalcitaMessageList)\nconst THEME_NAME = 'CalcitaMessageList';\nconst MessagesEmpty = piecePart(THEME_NAME, 'Empty', Typography);\nconst MessagesSelectedAvatar = piecePart(THEME_NAME, 'SelectedAvatar', Avatar);\nconst MessagesItem = piecePart(THEME_NAME, 'Item', ListItem);\nconst MessagesActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst MessagesStarButton = piecePart(THEME_NAME, 'StarButton', IconButton);\nconst MessagesItemButton = piecePart(THEME_NAME, 'ItemButton', ListItemButton);\nconst MessagesAvatarSlot = piecePart(THEME_NAME, 'AvatarSlot', ListItemAvatar);\nconst MessagesAvatarButton = piecePart(THEME_NAME, 'AvatarButton', ButtonBase);\nconst MessagesAvatar = piecePart(THEME_NAME, 'Avatar', Avatar);\nconst MessagesBody = piecePart(THEME_NAME, 'Body', Box);\nconst MessagesText = piecePart(THEME_NAME, 'Text', Box);\nconst MessagesTopRow = piecePart(THEME_NAME, 'TopRow', Stack);\nconst MessagesUnreadDot = piecePart(THEME_NAME, 'UnreadDot', Box);\nconst MessagesSender = piecePart(THEME_NAME, 'Sender', Typography);\nconst MessagesThreadCount = piecePart(THEME_NAME, 'ThreadCount', Typography);\nconst MessagesDate = piecePart(THEME_NAME, 'Date', Typography);\nconst MessagesSubject = piecePart(THEME_NAME, 'Subject', Typography);\nconst MessagesLabels = piecePart(THEME_NAME, 'Labels', Stack);\n\nconst UNREAD_DOT_PIXELS = 8;\nconst AVATAR_PIXELS = 40;\n\n/**\n * @param {object} props\n * @param {Array<{id: string, from: {name: string, email: string}, subject: string, preview: string, receivedAt: string, isUnread?: boolean, isStarred?: boolean, hasAttachments?: boolean, threadCount?: number, labels?: Array<string|{label: string, color?: string}>} & Record<string, any>>} props.messages\n *     cada mensaje puede traer sus campos propios (llegan a renderMessage y a messageActions tal cual). threadCount: cuántos\n *     mensajes trae la conversación (con 2 o más se pinta «(3)»); labels: texto o {label, color} del tema\n * @param {string|null} [props.selectedId] el mensaje abierto\n * @param {(messageId: string) => void} props.onSelect abrir un mensaje\n * @param {(messageId: string) => void} [props.onToggleStar]\n * @param {string[]} [props.selectedIds] los elegidos para una acción en grupo\n * @param {(messageIds: string[]) => void} [props.onSelectionChange] con él, cada mensaje se puede elegir picando su monograma\n * @param {(message: any) => Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.messageActions]\n *     las acciones del «⋯» de cada mensaje (archivar, posponer, mover…); sin ellas no hay «⋯»\n * @param {(message: any) => import('react').ReactNode} [props.renderMessage] lo de adentro de cada renglón, a su manera\n * @param {string} [props.emptyText] ya traducido; por omisión el del paquete\n * @param {object} [props.texts] los textos que cambian, con la forma de `inbox` en los textos del paquete\n */\nexport default function MessageList(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMessageList.defaultProps) y encima lo que llega aquí\n    const {\n    messages, selectedId = null, onSelect, onToggleStar, selectedIds = [], onSelectionChange, messageActions, renderMessage, emptyText, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('inbox', texts);\n    const formatters = useFormatters();\n\n    if (messages.length === 0) {\n        return <MessagesEmpty variant=\"body2\" color=\"text.secondary\" ownSx={{p: 3, textAlign: 'center'}}>{emptyText ?? t('empty')}</MessagesEmpty>;\n    }\n\n    const toggleSelected = (messageId, isChecked) => {\n        onSelectionChange(isChecked ? [...selectedIds, messageId] : selectedIds.filter((id) => id !== messageId));\n    };\n\n    return (\n        <List disablePadding aria-label={t('listLabel')}>\n            {messages.map((message) => {\n                const weight = message.isUnread ? 700 : 400;\n                const isChecked = selectedIds.includes(message.id);\n                const avatar = <MessagesSelectedAvatar ownSx={{width: AVATAR_PIXELS, height: AVATAR_PIXELS}}>{initialsOf(message.from.name)}</MessagesSelectedAvatar>;\n                return (\n                    <MessagesItem key={message.id} disablePadding secondaryAction={(onToggleStar || messageActions) && (\n                        <MessagesActions direction=\"row\" ownSx={{alignItems: 'center'}}>\n                            {onToggleStar && (\n                                <MessagesStarButton size=\"small\" onClick={() => onToggleStar(message.id)} aria-pressed={Boolean(message.isStarred)}\n                                            aria-label={message.isStarred ? t('unstar') : t('star')} ownSx={{color: message.isStarred ? 'warning.main' : 'text.secondary'}}>\n                                    {message.isStarred ? <StarRoundedIcon fontSize=\"small\" /> : <StarBorderRoundedIcon fontSize=\"small\" />}\n                                </MessagesStarButton>\n                            )}\n                            {messageActions && <ActionsMenu label={t('messageActions', {subject: message.subject})} actions={messageActions(message)} />}\n                        </MessagesActions>\n                    )} ownSx={{'& .MuiListItemSecondaryAction-root': {right: 4}}}>\n                        <MessagesItemButton selected={message.id === selectedId || isChecked} onClick={() => onSelect(message.id)} alignItems=\"flex-start\"\n                                        ownSx={{borderRadius: 2, pr: onToggleStar && messageActions ? 10 : 6}}>\n                            <MessagesAvatarSlot ownSx={{mt: 0.5}}>\n                                {/* elegir: el monograma es la casilla (el clic no abre el mensaje). Un botón con papel de casilla y\n                                    no el Checkbox de MUI: el tema le pinta a la casilla marcada un cuadro blanco detrás de su dibujo\n                                    y la palomita salía como un cuadro */}\n                                {onSelectionChange ? (\n                                    <MessagesAvatarButton role=\"checkbox\" aria-checked={isChecked} aria-label={t('select', {subject: message.subject})}\n                                                ownSx={{borderRadius: '50%'}}\n                                                onClick={(event) => {\n                                                    event.stopPropagation();\n                                                    toggleSelected(message.id, !isChecked);\n                                                }}>\n                                        {isChecked ? (\n                                            <MessagesAvatar ownSx={{width: AVATAR_PIXELS, height: AVATAR_PIXELS, bgcolor: 'primary.main', color: 'primary.contrastText'}}>\n                                                <CheckRoundedIcon />\n                                            </MessagesAvatar>\n                                        ) : avatar}\n                                    </MessagesAvatarButton>\n                                ) : avatar}\n                            </MessagesAvatarSlot>\n                            {renderMessage ? <MessagesBody ownSx={{minWidth: 0, flex: 1}}>{renderMessage(message)}</MessagesBody> : (\n                                <MessagesText ownSx={{minWidth: 0, flex: 1}}>\n                                    <MessagesTopRow direction=\"row\" spacing={1} ownSx={{alignItems: 'center'}}>\n                                        {message.isUnread && (\n                                            <MessagesUnreadDot component=\"span\" aria-label={t('unread')} ownSx={{width: UNREAD_DOT_PIXELS, height: UNREAD_DOT_PIXELS, borderRadius: '50%', bgcolor: 'primary.main', flexShrink: 0}} />\n                                        )}\n                                        <MessagesSender variant=\"body2\" noWrap ownSx={{fontWeight: weight, flex: 1}}>\n                                            {message.from.name}\n                                            {message.threadCount > 1 && (\n                                                <MessagesThreadCount component=\"span\" variant=\"caption\" color=\"text.secondary\" ownSx={{ml: 0.5}} aria-label={t('threadCount', {count: message.threadCount})}>\n                                                    ({message.threadCount})\n                                                </MessagesThreadCount>\n                                            )}\n                                        </MessagesSender>\n                                        {message.hasAttachments && <AttachFileRoundedIcon fontSize=\"inherit\" color=\"action\" aria-label={t('attachments')} />}\n                                        <MessagesDate variant=\"caption\" color=\"text.secondary\" ownSx={{flexShrink: 0, fontVariantNumeric: 'tabular-nums'}}>\n                                            {inboxDateOf(message.receivedAt, new Date(), formatters)}\n                                        </MessagesDate>\n                                    </MessagesTopRow>\n                                    <MessagesSubject variant=\"body2\" noWrap ownSx={{fontWeight: weight}}>{message.subject}</MessagesSubject>\n                                    <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{message.preview}</Typography>\n                                    {message.labels?.length > 0 && (\n                                        <MessagesLabels direction=\"row\" spacing={0.5} useFlexGap ownSx={{flexWrap: 'wrap', mt: 0.5}}>\n                                            {message.labels.map((rawLabel) => {\n                                                const label = tagOf(rawLabel);\n                                                return <Chip key={label.label} size=\"small\" variant=\"outlined\" color={label.color} label={label.label} />;\n                                            })}\n                                        </MessagesLabels>\n                                    )}\n                                </MessagesText>\n                            )}\n                        </MessagesItemButton>\n                    </MessagesItem>\n                );\n            })}\n        </List>\n    );\n}\n"],"names":["CheckRoundedIcon"],"mappings":"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"}
+{"version":3,"file":"MessageList.js","sources":["../../src/inbox/MessageList.jsx"],"sourcesContent":["// La lista de mensajes de una bandeja tipo correo: quién lo manda (y cuántos mensajes trae la conversación), el asunto con sus\n// etiquetas, el principio del texto, la fecha corta, la estrella y el clip si trae archivos. Los no leídos van en negritas con\n// su punto.\n//\n// Lo de un producto, todo hacia afuera (la lista no guarda nada ni llama a ningún servidor):\n//   - elegir varios: con onSelectionChange el monograma de cada mensaje se vuelve su casilla (como Gmail en el teléfono) y la\n//     pantalla pone las acciones de lo elegido (SelectionActions: archivar, borrar, marcar como leído…);\n//   - «⋯» de cada mensaje con las acciones que dé la pantalla (messageActions);\n//   - renderMessage para pintar lo de adentro de cada renglón a su manera, y texts para cualquier texto.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMessageList con defaultProps y\n// styleOverrides de sus partes: empty, selectedAvatar, item, actions, starButton, itemButton, avatarSlot, avatarButton,\n// avatar, body, text, topRow, unreadDot, sender, threadCount, date, subject, labels.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemAvatar from '@mui/material/ListItemAvatar';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\nimport CheckRoundedIcon from '@mui/icons-material/CheckRounded';\nimport StarBorderRoundedIcon from '@mui/icons-material/StarBorderRounded';\nimport StarRoundedIcon from '@mui/icons-material/StarRounded';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {inboxDateOf} from '@/inbox/inboxDates.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {tagOf} from '@/ui/labels/tagOf.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ActionsMenu from '@/ui/actions/ActionsMenu.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaMessageList)\nconst THEME_NAME = 'CalcitaMessageList';\nconst MessagesEmpty = piecePart(THEME_NAME, 'Empty', Typography);\nconst MessagesSelectedAvatar = piecePart(THEME_NAME, 'SelectedAvatar', Avatar);\nconst MessagesItem = piecePart(THEME_NAME, 'Item', ListItem);\nconst MessagesActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst MessagesStarButton = piecePart(THEME_NAME, 'StarButton', IconButton);\nconst MessagesItemButton = piecePart(THEME_NAME, 'ItemButton', ListItemButton);\nconst MessagesAvatarSlot = piecePart(THEME_NAME, 'AvatarSlot', ListItemAvatar);\nconst MessagesAvatarButton = piecePart(THEME_NAME, 'AvatarButton', ButtonBase);\nconst MessagesAvatar = piecePart(THEME_NAME, 'Avatar', Avatar);\nconst MessagesBody = piecePart(THEME_NAME, 'Body', Box);\nconst MessagesText = piecePart(THEME_NAME, 'Text', Box);\nconst MessagesTopRow = piecePart(THEME_NAME, 'TopRow', Stack);\nconst MessagesUnreadDot = piecePart(THEME_NAME, 'UnreadDot', Box);\nconst MessagesSender = piecePart(THEME_NAME, 'Sender', Typography);\nconst MessagesThreadCount = piecePart(THEME_NAME, 'ThreadCount', Typography);\nconst MessagesDate = piecePart(THEME_NAME, 'Date', Typography);\nconst MessagesSubject = piecePart(THEME_NAME, 'Subject', Typography);\nconst MessagesLabels = piecePart(THEME_NAME, 'Labels', Stack);\n\nconst UNREAD_DOT_PIXELS = 8;\nconst AVATAR_PIXELS = 40;\n\n/**\n * @param {object} props\n * @param {Array<{id: string, from: {name: string, email: string}, subject: string, preview: string, receivedAt: string, isUnread?: boolean, isStarred?: boolean, hasAttachments?: boolean, threadCount?: number, labels?: Array<string|{label: string, color?: string}>} & Record<string, any>>} props.messages\n *     cada mensaje puede traer sus campos propios (llegan a renderMessage y a messageActions tal cual). threadCount: cuántos\n *     mensajes trae la conversación (con 2 o más se pinta «(3)»); labels: texto o {label, color} del tema\n * @param {string|null} [props.selectedId] el mensaje abierto\n * @param {(messageId: string) => void} props.onSelect abrir un mensaje\n * @param {(messageId: string) => void} [props.onToggleStar]\n * @param {string[]} [props.selectedIds] los elegidos para una acción en grupo\n * @param {(messageIds: string[]) => void} [props.onSelectionChange] con él, cada mensaje se puede elegir picando su monograma\n * @param {(message: any) => Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.messageActions]\n *     las acciones del «⋯» de cada mensaje (archivar, posponer, mover…); sin ellas no hay «⋯»\n * @param {(message: any) => import('react').ReactNode} [props.renderMessage] lo de adentro de cada renglón, a su manera\n * @param {string} [props.emptyText] ya traducido; por omisión el del paquete\n * @param {object} [props.texts] los textos que cambian, con la forma de `inbox` en los textos del paquete\n */\nfunction MessageListContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMessageList.defaultProps) y encima lo que llega aquí\n    const {\n    messages, selectedId = null, onSelect, onToggleStar, selectedIds = [], onSelectionChange, messageActions, renderMessage, emptyText, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('inbox', texts);\n    const formatters = useFormatters();\n\n    if (messages.length === 0) {\n        return <MessagesEmpty variant=\"body2\" color=\"text.secondary\" ownSx={{p: 3, textAlign: 'center'}}>{emptyText ?? t('empty')}</MessagesEmpty>;\n    }\n\n    const toggleSelected = (messageId, isChecked) => {\n        onSelectionChange(isChecked ? [...selectedIds, messageId] : selectedIds.filter((id) => id !== messageId));\n    };\n\n    return (\n        <List disablePadding aria-label={t('listLabel')}>\n            {messages.map((message) => {\n                const weight = message.isUnread ? 700 : 400;\n                const isChecked = selectedIds.includes(message.id);\n                const avatar = <MessagesSelectedAvatar ownSx={{width: AVATAR_PIXELS, height: AVATAR_PIXELS}}>{initialsOf(message.from.name)}</MessagesSelectedAvatar>;\n                return (\n                    <MessagesItem key={message.id} disablePadding secondaryAction={(onToggleStar || messageActions) && (\n                        <MessagesActions direction=\"row\" ownSx={{alignItems: 'center'}}>\n                            {onToggleStar && (\n                                <MessagesStarButton size=\"small\" onClick={() => onToggleStar(message.id)} aria-pressed={Boolean(message.isStarred)}\n                                            aria-label={message.isStarred ? t('unstar') : t('star')} ownSx={{color: message.isStarred ? 'warning.main' : 'text.secondary'}}>\n                                    {message.isStarred ? <StarRoundedIcon fontSize=\"small\" /> : <StarBorderRoundedIcon fontSize=\"small\" />}\n                                </MessagesStarButton>\n                            )}\n                            {messageActions && <ActionsMenu label={t('messageActions', {subject: message.subject})} actions={messageActions(message)} />}\n                        </MessagesActions>\n                    )} ownSx={{'& .MuiListItemSecondaryAction-root': {right: 4}}}>\n                        <MessagesItemButton selected={message.id === selectedId || isChecked} onClick={() => onSelect(message.id)} alignItems=\"flex-start\"\n                                        ownSx={{borderRadius: 2, pr: onToggleStar && messageActions ? 10 : 6}}>\n                            <MessagesAvatarSlot ownSx={{mt: 0.5}}>\n                                {/* elegir: el monograma es la casilla (el clic no abre el mensaje). Un botón con papel de casilla y\n                                    no el Checkbox de MUI: el tema le pinta a la casilla marcada un cuadro blanco detrás de su dibujo\n                                    y la palomita salía como un cuadro */}\n                                {onSelectionChange ? (\n                                    <MessagesAvatarButton role=\"checkbox\" aria-checked={isChecked} aria-label={t('select', {subject: message.subject})}\n                                                ownSx={{borderRadius: '50%'}}\n                                                onClick={(event) => {\n                                                    event.stopPropagation();\n                                                    toggleSelected(message.id, !isChecked);\n                                                }}>\n                                        {isChecked ? (\n                                            <MessagesAvatar ownSx={{width: AVATAR_PIXELS, height: AVATAR_PIXELS, bgcolor: 'primary.main', color: 'primary.contrastText'}}>\n                                                <CheckRoundedIcon />\n                                            </MessagesAvatar>\n                                        ) : avatar}\n                                    </MessagesAvatarButton>\n                                ) : avatar}\n                            </MessagesAvatarSlot>\n                            {renderMessage ? <MessagesBody ownSx={{minWidth: 0, flex: 1}}>{renderMessage(message)}</MessagesBody> : (\n                                <MessagesText ownSx={{minWidth: 0, flex: 1}}>\n                                    <MessagesTopRow direction=\"row\" spacing={1} ownSx={{alignItems: 'center'}}>\n                                        {message.isUnread && (\n                                            <MessagesUnreadDot component=\"span\" aria-label={t('unread')} ownSx={{width: UNREAD_DOT_PIXELS, height: UNREAD_DOT_PIXELS, borderRadius: '50%', bgcolor: 'primary.main', flexShrink: 0}} />\n                                        )}\n                                        <MessagesSender variant=\"body2\" noWrap ownSx={{fontWeight: weight, flex: 1}}>\n                                            {message.from.name}\n                                            {message.threadCount > 1 && (\n                                                <MessagesThreadCount component=\"span\" variant=\"caption\" color=\"text.secondary\" ownSx={{ml: 0.5}} aria-label={t('threadCount', {count: message.threadCount})}>\n                                                    ({message.threadCount})\n                                                </MessagesThreadCount>\n                                            )}\n                                        </MessagesSender>\n                                        {message.hasAttachments && <AttachFileRoundedIcon fontSize=\"inherit\" color=\"action\" aria-label={t('attachments')} />}\n                                        <MessagesDate variant=\"caption\" color=\"text.secondary\" ownSx={{flexShrink: 0, fontVariantNumeric: 'tabular-nums'}}>\n                                            {inboxDateOf(message.receivedAt, new Date(), formatters)}\n                                        </MessagesDate>\n                                    </MessagesTopRow>\n                                    <MessagesSubject variant=\"body2\" noWrap ownSx={{fontWeight: weight}}>{message.subject}</MessagesSubject>\n                                    <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{message.preview}</Typography>\n                                    {message.labels?.length > 0 && (\n                                        <MessagesLabels direction=\"row\" spacing={0.5} useFlexGap ownSx={{flexWrap: 'wrap', mt: 0.5}}>\n                                            {message.labels.map((rawLabel) => {\n                                                const label = tagOf(rawLabel);\n                                                return <Chip key={label.label} size=\"small\" variant=\"outlined\" color={label.color} label={label.label} />;\n                                            })}\n                                        </MessagesLabels>\n                                    )}\n                                </MessagesText>\n                            )}\n                        </MessagesItemButton>\n                    </MessagesItem>\n                );\n            })}\n        </List>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst MessageList = withPieceSlots(MessageListContent, THEME_NAME);\nexport default MessageList;\n"],"names":["CheckRoundedIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,SAAS,UAAU;AAC/D,MAAM,yBAAyB,UAAU,YAAY,kBAAkB,MAAM;AAC7E,MAAM,eAAe,UAAU,YAAY,QAAQ,QAAQ;AAC3D,MAAM,kBAAkB,UAAU,YAAY,WAAW,KAAK;AAC9D,MAAM,qBAAqB,UAAU,YAAY,cAAc,UAAU;AACzE,MAAM,qBAAqB,UAAU,YAAY,cAAc,cAAc;AAC7E,MAAM,qBAAqB,UAAU,YAAY,cAAc,cAAc;AAC7E,MAAM,uBAAuB,UAAU,YAAY,gBAAgB,UAAU;AAC7E,MAAM,iBAAiB,UAAU,YAAY,UAAU,MAAM;AAC7D,MAAM,eAAe,UAAU,YAAY,QAAQ,GAAG;AACtD,MAAM,eAAe,UAAU,YAAY,QAAQ,GAAG;AACtD,MAAM,iBAAiB,UAAU,YAAY,UAAU,KAAK;AAC5D,MAAM,oBAAoB,UAAU,YAAY,aAAa,GAAG;AAChE,MAAM,iBAAiB,UAAU,YAAY,UAAU,UAAU;AACjE,MAAM,sBAAsB,UAAU,YAAY,eAAe,UAAU;AAC3E,MAAM,eAAe,UAAU,YAAY,QAAQ,UAAU;AAC7D,MAAM,kBAAkB,UAAU,YAAY,WAAW,UAAU;AACnE,MAAM,iBAAiB,UAAU,YAAY,UAAU,KAAK;AAE5D,MAAM,oBAAoB;AAC1B,MAAM,gBAAgB;AAkBtB,SAAS,mBAAmB,OAAO;AAE/B,QAAM;AAAA,IACN;AAAA,IAAU,aAAa;AAAA,IAAM;AAAA,IAAU;AAAA,IAAc,cAAc,CAAA;AAAA,IAAI;AAAA,IAAmB;AAAA,IAAgB;AAAA,IAAe;AAAA,IAAW;AAAA,IACpI,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,aAAa,cAAA;AAEnB,MAAI,SAAS,WAAW,GAAG;AACvB,+BAAQ,eAAA,EAAc,SAAQ,SAAQ,OAAM,kBAAiB,OAAO,EAAC,GAAG,GAAG,WAAW,YAAY,UAAA,aAAa,EAAE,OAAO,GAAE;AAAA,EAC9H;AAEA,QAAM,iBAAiB,CAAC,WAAW,cAAc;AAC7C,sBAAkB,YAAY,CAAC,GAAG,aAAa,SAAS,IAAI,YAAY,OAAO,CAAC,OAAO,OAAO,SAAS,CAAC;AAAA,EAC5G;AAEA,SACI,oBAAC,MAAA,EAAK,gBAAc,MAAC,cAAY,EAAE,WAAW,GACzC,UAAA,SAAS,IAAI,CAAC,YAAY;AACvB,UAAM,SAAS,QAAQ,WAAW,MAAM;AACxC,UAAM,YAAY,YAAY,SAAS,QAAQ,EAAE;AACjD,UAAM,SAAS,oBAAC,wBAAA,EAAuB,OAAO,EAAC,OAAO,eAAe,QAAQ,cAAA,GAAiB,UAAA,WAAW,QAAQ,KAAK,IAAI,GAAE;AAC5H,WACI,oBAAC,cAAA,EAA8B,gBAAc,MAAC,kBAAkB,gBAAgB,mBAC5E,qBAAC,iBAAA,EAAgB,WAAU,OAAM,OAAO,EAAC,YAAY,YAChD,UAAA;AAAA,MAAA,gBACG;AAAA,QAAC;AAAA,QAAA;AAAA,UAAmB,MAAK;AAAA,UAAQ,SAAS,MAAM,aAAa,QAAQ,EAAE;AAAA,UAAG,gBAAc,QAAQ,QAAQ,SAAS;AAAA,UACrG,cAAY,QAAQ,YAAY,EAAE,QAAQ,IAAI,EAAE,MAAM;AAAA,UAAG,OAAO,EAAC,OAAO,QAAQ,YAAY,iBAAiB,iBAAA;AAAA,UACpH,UAAA,QAAQ,YAAY,oBAAC,iBAAA,EAAgB,UAAS,SAAQ,IAAK,oBAAC,uBAAA,EAAsB,UAAS,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAG3G,kBAAkB,oBAAC,aAAA,EAAY,OAAO,EAAE,kBAAkB,EAAC,SAAS,QAAQ,SAAQ,GAAG,SAAS,eAAe,OAAO,EAAA,CAAG;AAAA,IAAA,GAC9H,GACD,OAAO,EAAC,sCAAsC,EAAC,OAAO,EAAA,KACrD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAmB,UAAU,QAAQ,OAAO,cAAc;AAAA,QAAW,SAAS,MAAM,SAAS,QAAQ,EAAE;AAAA,QAAG,YAAW;AAAA,QACtG,OAAO,EAAC,cAAc,GAAG,IAAI,gBAAgB,iBAAiB,KAAK,EAAA;AAAA,QAC/E,UAAA;AAAA,UAAA,oBAAC,sBAAmB,OAAO,EAAC,IAAI,IAAA,GAI3B,UAAA,oBACG;AAAA,YAAC;AAAA,YAAA;AAAA,cAAqB,MAAK;AAAA,cAAW,gBAAc;AAAA,cAAW,cAAY,EAAE,UAAU,EAAC,SAAS,QAAQ,SAAQ;AAAA,cACrG,OAAO,EAAC,cAAc,MAAA;AAAA,cACtB,SAAS,CAAC,UAAU;AAChB,sBAAM,gBAAA;AACN,+BAAe,QAAQ,IAAI,CAAC,SAAS;AAAA,cACzC;AAAA,cACP,sBACG,oBAAC,gBAAA,EAAe,OAAO,EAAC,OAAO,eAAe,QAAQ,eAAe,SAAS,gBAAgB,OAAO,0BACjG,UAAA,oBAACA,WAAA,EAAiB,GACtB,IACA;AAAA,YAAA;AAAA,UAAA,IAER,OAAA,CACR;AAAA,UACC,oCAAiB,cAAA,EAAa,OAAO,EAAC,UAAU,GAAG,MAAM,EAAA,GAAK,UAAA,cAAc,OAAO,EAAA,CAAE,yBACjF,cAAA,EAAa,OAAO,EAAC,UAAU,GAAG,MAAM,EAAA,GACrC,UAAA;AAAA,YAAA,qBAAC,gBAAA,EAAe,WAAU,OAAM,SAAS,GAAG,OAAO,EAAC,YAAY,SAAA,GAC3D,UAAA;AAAA,cAAA,QAAQ,gCACJ,mBAAA,EAAkB,WAAU,QAAO,cAAY,EAAE,QAAQ,GAAG,OAAO,EAAC,OAAO,mBAAmB,QAAQ,mBAAmB,cAAc,OAAO,SAAS,gBAAgB,YAAY,EAAA,GAAI;AAAA,cAE5L,qBAAC,gBAAA,EAAe,SAAQ,SAAQ,QAAM,MAAC,OAAO,EAAC,YAAY,QAAQ,MAAM,EAAA,GACpE,UAAA;AAAA,gBAAA,QAAQ,KAAK;AAAA,gBACb,QAAQ,cAAc,KACnB,qBAAC,qBAAA,EAAoB,WAAU,QAAO,SAAQ,WAAU,OAAM,kBAAiB,OAAO,EAAC,IAAI,OAAM,cAAY,EAAE,eAAe,EAAC,OAAO,QAAQ,YAAA,CAAY,GAAG,UAAA;AAAA,kBAAA;AAAA,kBACvJ,QAAQ;AAAA,kBAAY;AAAA,gBAAA,EAAA,CAC1B;AAAA,cAAA,GAER;AAAA,cACC,QAAQ,kBAAkB,oBAAC,uBAAA,EAAsB,UAAS,WAAU,OAAM,UAAS,cAAY,EAAE,aAAa,EAAA,CAAG;AAAA,cAClH,oBAAC,gBAAa,SAAQ,WAAU,OAAM,kBAAiB,OAAO,EAAC,YAAY,GAAG,oBAAoB,eAAA,GAC7F,sBAAY,QAAQ,gCAAgB,QAAQ,UAAU,EAAA,CAC3D;AAAA,YAAA,GACJ;AAAA,YACA,oBAAC,iBAAA,EAAgB,SAAQ,SAAQ,QAAM,MAAC,OAAO,EAAC,YAAY,OAAA,GAAU,UAAA,QAAQ,QAAA,CAAQ;AAAA,YACtF,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAAiB,QAAM,MAAE,UAAA,QAAQ,QAAA,CAAQ;AAAA,YAC1E,QAAQ,QAAQ,SAAS,yBACrB,gBAAA,EAAe,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,OAAO,EAAC,UAAU,QAAQ,IAAI,IAAA,GAClF,UAAA,QAAQ,OAAO,IAAI,CAAC,aAAa;AAC9B,oBAAM,QAAQ,MAAM,QAAQ;AAC5B,qBAAO,oBAAC,MAAA,EAAuB,MAAK,SAAQ,SAAQ,YAAW,OAAO,MAAM,OAAO,OAAO,MAAM,MAAA,GAA9E,MAAM,KAA+E;AAAA,YAC3G,CAAC,EAAA,CACL;AAAA,UAAA,EAAA,CAER;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAER,GA/De,QAAQ,EAgE3B;AAAA,EAER,CAAC,EAAA,CACL;AAER;AAGA,MAAM,cAAc,eAAe,oBAAoB,UAAU;"}

package/dist/inbox/MessageView.js

@@ -14,7 +14,7 @@ import { useFormatters } from "../toolkit/useFormatters.js";
 import { inboxDateOf } from "./inboxDates.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import { tagOf } from "../ui/labels/tagOf.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaMessageView";
 const MessageHeaderPart = piecePart(THEME_NAME, "Header", Stack);
@@ -67,7 +67,7 @@ function MessageBody({ entry, t, onAttachmentClick, renderBody }) {
     renderBody ? renderBody(entry) : /* @__PURE__ */ jsx(MessageBodyPart, { variant: "body1", component: "div", ownSx: { whiteSpace: "pre-wrap", overflowWrap: "anywhere" }, children: entry.body })
   ] });
 }
-function MessageView(props) {
+function MessageViewContent(props) {
   const { message, actions, footer, onAttachmentClick, onExpand, renderBody, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("inbox", texts);
@@ -116,6 +116,7 @@ function MessageView(props) {
     footer
   ] });
 }
+const MessageView = withPieceSlots(MessageViewContent, THEME_NAME);
 export {
   MessageView as default
 };

package/dist/inbox/MessageView.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageView.js","sources":["../../src/inbox/MessageView.jsx"],"sourcesContent":["// La lectura de un mensaje o de una conversación completa: el asunto con sus etiquetas y, debajo, cada mensaje de la\n// conversación (los anteriores encogidos en un renglón con quién y cuándo, como Gmail; al picarlos se abren). De cada uno:\n// quién lo manda (con su correo), para quién y con copia a quién, la fecha completa, sus archivos y el texto. Arriba, las\n// acciones que quiera el proyecto (responder, archivar, posponer, borrar); abajo, lo que quiera poner (una respuesta rápida).\n//\n// El texto se pinta como TEXTO, con sus saltos de renglón: nunca como HTML (un correo con HTML adentro sería un XSS). Si un\n// proyecto necesita HTML, lo pinta con renderBody y es SU responsabilidad limpiarlo antes (DOMPurify o su backend).\n//\n// Todo hacia afuera: onAttachmentClick al picar un archivo (descargarlo, verlo), onExpand al abrir un mensaje anterior (para\n// marcarlo como leído), renderBody, footer y texts.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMessageView con defaultProps y\n// styleOverrides de sus partes: header, headerText, recipients, body, empty, labels, attachments, divider, collapsed,\n// collapsedAvatar, collapsedText, collapsedSender, collapsedDate.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport Divider from '@mui/material/Divider';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {inboxDateOf} from '@/inbox/inboxDates.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {tagOf} from '@/ui/labels/tagOf.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.CalcitaMessageView)\nconst THEME_NAME = 'CalcitaMessageView';\nconst MessageHeaderPart = piecePart(THEME_NAME, 'Header', Stack);\nconst MessageHeaderText = piecePart(THEME_NAME, 'HeaderText', Box);\nconst MessageRecipients = piecePart(THEME_NAME, 'Recipients', Stack);\nconst MessageBodyPart = piecePart(THEME_NAME, 'Body', Typography);\nconst MessageEmpty = piecePart(THEME_NAME, 'Empty', Typography);\nconst MessageLabels = piecePart(THEME_NAME, 'Labels', Stack);\nconst MessageAttachments = piecePart(THEME_NAME, 'Attachments', Stack);\nconst MessageDivider = piecePart(THEME_NAME, 'Divider', Divider);\nconst MessageCollapsed = piecePart(THEME_NAME, 'Collapsed', ButtonBase);\nconst MessageCollapsedAvatar = piecePart(THEME_NAME, 'CollapsedAvatar', Avatar);\nconst MessageCollapsedText = piecePart(THEME_NAME, 'CollapsedText', Box);\nconst MessageCollapsedSender = piecePart(THEME_NAME, 'CollapsedSender', Typography);\nconst MessageCollapsedDate = piecePart(THEME_NAME, 'CollapsedDate', Typography);\n\nconst PREVIEW_LENGTH = 90;\n\n/** Quién manda, para quién, con copia a quién y cuándo. */\nfunction MessageHeader({entry, t}) {\n    const {formatDateTime} = useFormatters();\n    return (\n        <MessageHeaderPart direction=\"row\" spacing={1.5} ownSx={{alignItems: 'center'}}>\n            <Avatar>{initialsOf(entry.from.name)}</Avatar>\n            <MessageHeaderText ownSx={{minWidth: 0, flex: 1}}>\n                <Typography variant=\"subtitle2\" component=\"p\" noWrap>\n                    {entry.from.name} <Typography component=\"span\" variant=\"body2\" color=\"text.secondary\">&lt;{entry.from.email}&gt;</Typography>\n                </Typography>\n                {entry.to?.length > 0 && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{t('to', {to: entry.to.join(', ')})}</Typography>}\n                {entry.cc?.length > 0 && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{t('cc', {cc: entry.cc.join(', ')})}</Typography>}\n                {/* la fecha debajo y no a la derecha: en el teléfono apretaba el «Para» a dos renglones */}\n                <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{formatDateTime(entry.receivedAt)}</Typography>\n            </MessageHeaderText>\n        </MessageHeaderPart>\n    );\n}\n\n/** Un mensaje abierto: su encabezado, sus archivos y su texto. */\nfunction MessageBody({entry, t, onAttachmentClick, renderBody}) {\n    return (\n        <Stack spacing={2}>\n            <MessageHeader entry={entry} t={t} />\n            {entry.attachments?.length > 0 && (\n                <MessageRecipients direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap'}} aria-label={t('attachments')} role=\"group\">\n                    {entry.attachments.map((attachment) => (\n                        <Chip key={attachment.name} icon={<AttachFileRoundedIcon />} variant=\"outlined\"\n                              label={attachment.size ? `${attachment.name} · ${attachment.size}` : attachment.name}\n                              {...(onAttachmentClick && {onClick: () => onAttachmentClick(attachment, entry), 'aria-label': t('openAttachment', {name: attachment.name})})} />\n                    ))}\n                </MessageRecipients>\n            )}\n            {renderBody ? renderBody(entry) : (\n                <MessageBodyPart variant=\"body1\" component=\"div\" ownSx={{whiteSpace: 'pre-wrap', overflowWrap: 'anywhere'}}>{entry.body}</MessageBodyPart>\n            )}\n        </Stack>\n    );\n}\n\n/**\n * @param {object} props\n * @param {{id?: string, subject: string, from: {name: string, email: string}, to?: string[], cc?: string[], receivedAt: string, body: string, attachments?: Array<{name: string, size?: string} & Record<string, any>>, labels?: Array<string|{label: string, color?: string}>, thread?: Array<{id: string, from: {name: string, email: string}, to?: string[], cc?: string[], receivedAt: string, body: string, attachments?: Array<{name: string, size?: string}>}>}|null} props.message\n *     el mensaje más nuevo de la conversación; thread: los anteriores, del más viejo al más nuevo (encogidos). null: todavía\n *     no se elige ninguno\n * @param {import('react').ReactNode} [props.actions] los botones de arriba\n * @param {import('react').ReactNode} [props.footer] lo de abajo (una respuesta rápida, firmas…)\n * @param {(attachment: any, message: any) => void} [props.onAttachmentClick] al picar un archivo; sin él los archivos solo se ven\n * @param {(threadMessageId: string) => void} [props.onExpand] al abrir un mensaje anterior de la conversación\n * @param {(message: any) => import('react').ReactNode} [props.renderBody] el texto a su manera (HTML ya limpio por el proyecto)\n * @param {object} [props.texts] los textos que cambian, con la forma de `inbox` en los textos del paquete\n */\nexport default function MessageView(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMessageView.defaultProps) y encima lo que llega aquí\n    const {message, actions, footer, onAttachmentClick, onExpand, renderBody, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('inbox', texts);\n    const formatters = useFormatters();\n    // los mensajes anteriores que la persona abrió (empiezan encogidos), de qué conversación: al cambiar de mensaje se olvidan\n    const [expanded, setExpanded] = useState({messageId: null, ids: []});\n\n    if (!message) {\n        return <MessageEmpty variant=\"body2\" color=\"text.secondary\" ownSx={{p: 4, textAlign: 'center'}}>{t('noMessageSelected')}</MessageEmpty>;\n    }\n\n    const expandedIds = expanded.messageId === message.id ? expanded.ids : [];\n    const expand = (threadMessageId) => {\n        setExpanded({messageId: message.id, ids: [...expandedIds, threadMessageId]});\n        onExpand?.(threadMessageId);\n    };\n\n    return (\n        <Stack spacing={2} component=\"article\" aria-label={message.subject}>\n            {actions && <MessageLabels direction=\"row\" spacing={0.5} useFlexGap ownSx={{flexWrap: 'wrap', alignItems: 'center'}}>{actions}</MessageLabels>}\n            <Box>\n                <Typography variant=\"h5\" component=\"h2\">{message.subject}</Typography>\n                {message.labels?.length > 0 && (\n                    <MessageAttachments direction=\"row\" spacing={0.5} useFlexGap ownSx={{flexWrap: 'wrap', mt: 1}}>\n                        {message.labels.map((rawLabel) => {\n                            const label = tagOf(rawLabel);\n                            return <Chip key={label.label} size=\"small\" variant=\"outlined\" color={label.color} label={label.label} />;\n                        })}\n                    </MessageAttachments>\n                )}\n            </Box>\n            {message.thread?.length > 0 && (\n                <Typography variant=\"caption\" color=\"text.secondary\">{t('threadCount', {count: message.thread.length + 1})}</Typography>\n            )}\n            {/* los anteriores: encogidos en un renglón; abiertos, completos y con su línea abajo */}\n            {message.thread?.map((entry) => (expandedIds.includes(entry.id) ? (\n                <Box key={entry.id}>\n                    <MessageBody entry={entry} t={t} onAttachmentClick={onAttachmentClick} renderBody={renderBody} />\n                    <MessageDivider ownSx={{mt: 2}} />\n                </Box>\n            ) : (\n                <MessageCollapsed key={entry.id} onClick={() => expand(entry.id)} aria-label={t('expandMessage', {name: entry.from.name, date: inboxDateOf(entry.receivedAt, new Date(), formatters)})}\n                            ownSx={{justifyContent: 'flex-start', textAlign: 'left', borderRadius: 2, p: 1, mx: -1, gap: 1.5, '&:hover': {bgcolor: 'action.hover'}}}>\n                    <MessageCollapsedAvatar ownSx={{width: 32, height: 32, fontSize: 13}}>{initialsOf(entry.from.name)}</MessageCollapsedAvatar>\n                    <MessageCollapsedText ownSx={{minWidth: 0, flex: 1}}>\n                        <MessageCollapsedSender variant=\"body2\" ownSx={{fontWeight: 600}} noWrap>{entry.from.name}</MessageCollapsedSender>\n                        <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{entry.body.replace(/\\s+/g, ' ').slice(0, PREVIEW_LENGTH)}</Typography>\n                    </MessageCollapsedText>\n                    <MessageCollapsedDate variant=\"caption\" color=\"text.secondary\" ownSx={{flexShrink: 0}}>{inboxDateOf(entry.receivedAt, new Date(), formatters)}</MessageCollapsedDate>\n                </MessageCollapsed>\n            )))}\n            {message.thread?.length > 0 && <Divider />}\n            <MessageBody entry={message} t={t} onAttachmentClick={onAttachmentClick} renderBody={renderBody} />\n            {footer}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MessageView.js","sources":["../../src/inbox/MessageView.jsx"],"sourcesContent":["// La lectura de un mensaje o de una conversación completa: el asunto con sus etiquetas y, debajo, cada mensaje de la\n// conversación (los anteriores encogidos en un renglón con quién y cuándo, como Gmail; al picarlos se abren). De cada uno:\n// quién lo manda (con su correo), para quién y con copia a quién, la fecha completa, sus archivos y el texto. Arriba, las\n// acciones que quiera el proyecto (responder, archivar, posponer, borrar); abajo, lo que quiera poner (una respuesta rápida).\n//\n// El texto se pinta como TEXTO, con sus saltos de renglón: nunca como HTML (un correo con HTML adentro sería un XSS). Si un\n// proyecto necesita HTML, lo pinta con renderBody y es SU responsabilidad limpiarlo antes (DOMPurify o su backend).\n//\n// Todo hacia afuera: onAttachmentClick al picar un archivo (descargarlo, verlo), onExpand al abrir un mensaje anterior (para\n// marcarlo como leído), renderBody, footer y texts.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMessageView con defaultProps y\n// styleOverrides de sus partes: header, headerText, recipients, body, empty, labels, attachments, divider, collapsed,\n// collapsedAvatar, collapsedText, collapsedSender, collapsedDate.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport Divider from '@mui/material/Divider';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {inboxDateOf} from '@/inbox/inboxDates.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {tagOf} from '@/ui/labels/tagOf.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaMessageView)\nconst THEME_NAME = 'CalcitaMessageView';\nconst MessageHeaderPart = piecePart(THEME_NAME, 'Header', Stack);\nconst MessageHeaderText = piecePart(THEME_NAME, 'HeaderText', Box);\nconst MessageRecipients = piecePart(THEME_NAME, 'Recipients', Stack);\nconst MessageBodyPart = piecePart(THEME_NAME, 'Body', Typography);\nconst MessageEmpty = piecePart(THEME_NAME, 'Empty', Typography);\nconst MessageLabels = piecePart(THEME_NAME, 'Labels', Stack);\nconst MessageAttachments = piecePart(THEME_NAME, 'Attachments', Stack);\nconst MessageDivider = piecePart(THEME_NAME, 'Divider', Divider);\nconst MessageCollapsed = piecePart(THEME_NAME, 'Collapsed', ButtonBase);\nconst MessageCollapsedAvatar = piecePart(THEME_NAME, 'CollapsedAvatar', Avatar);\nconst MessageCollapsedText = piecePart(THEME_NAME, 'CollapsedText', Box);\nconst MessageCollapsedSender = piecePart(THEME_NAME, 'CollapsedSender', Typography);\nconst MessageCollapsedDate = piecePart(THEME_NAME, 'CollapsedDate', Typography);\n\nconst PREVIEW_LENGTH = 90;\n\n/** Quién manda, para quién, con copia a quién y cuándo. */\nfunction MessageHeader({entry, t}) {\n    const {formatDateTime} = useFormatters();\n    return (\n        <MessageHeaderPart direction=\"row\" spacing={1.5} ownSx={{alignItems: 'center'}}>\n            <Avatar>{initialsOf(entry.from.name)}</Avatar>\n            <MessageHeaderText ownSx={{minWidth: 0, flex: 1}}>\n                <Typography variant=\"subtitle2\" component=\"p\" noWrap>\n                    {entry.from.name} <Typography component=\"span\" variant=\"body2\" color=\"text.secondary\">&lt;{entry.from.email}&gt;</Typography>\n                </Typography>\n                {entry.to?.length > 0 && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{t('to', {to: entry.to.join(', ')})}</Typography>}\n                {entry.cc?.length > 0 && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{t('cc', {cc: entry.cc.join(', ')})}</Typography>}\n                {/* la fecha debajo y no a la derecha: en el teléfono apretaba el «Para» a dos renglones */}\n                <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{formatDateTime(entry.receivedAt)}</Typography>\n            </MessageHeaderText>\n        </MessageHeaderPart>\n    );\n}\n\n/** Un mensaje abierto: su encabezado, sus archivos y su texto. */\nfunction MessageBody({entry, t, onAttachmentClick, renderBody}) {\n    return (\n        <Stack spacing={2}>\n            <MessageHeader entry={entry} t={t} />\n            {entry.attachments?.length > 0 && (\n                <MessageRecipients direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap'}} aria-label={t('attachments')} role=\"group\">\n                    {entry.attachments.map((attachment) => (\n                        <Chip key={attachment.name} icon={<AttachFileRoundedIcon />} variant=\"outlined\"\n                              label={attachment.size ? `${attachment.name} · ${attachment.size}` : attachment.name}\n                              {...(onAttachmentClick && {onClick: () => onAttachmentClick(attachment, entry), 'aria-label': t('openAttachment', {name: attachment.name})})} />\n                    ))}\n                </MessageRecipients>\n            )}\n            {renderBody ? renderBody(entry) : (\n                <MessageBodyPart variant=\"body1\" component=\"div\" ownSx={{whiteSpace: 'pre-wrap', overflowWrap: 'anywhere'}}>{entry.body}</MessageBodyPart>\n            )}\n        </Stack>\n    );\n}\n\n/**\n * @param {object} props\n * @param {{id?: string, subject: string, from: {name: string, email: string}, to?: string[], cc?: string[], receivedAt: string, body: string, attachments?: Array<{name: string, size?: string} & Record<string, any>>, labels?: Array<string|{label: string, color?: string}>, thread?: Array<{id: string, from: {name: string, email: string}, to?: string[], cc?: string[], receivedAt: string, body: string, attachments?: Array<{name: string, size?: string}>}>}|null} props.message\n *     el mensaje más nuevo de la conversación; thread: los anteriores, del más viejo al más nuevo (encogidos). null: todavía\n *     no se elige ninguno\n * @param {import('react').ReactNode} [props.actions] los botones de arriba\n * @param {import('react').ReactNode} [props.footer] lo de abajo (una respuesta rápida, firmas…)\n * @param {(attachment: any, message: any) => void} [props.onAttachmentClick] al picar un archivo; sin él los archivos solo se ven\n * @param {(threadMessageId: string) => void} [props.onExpand] al abrir un mensaje anterior de la conversación\n * @param {(message: any) => import('react').ReactNode} [props.renderBody] el texto a su manera (HTML ya limpio por el proyecto)\n * @param {object} [props.texts] los textos que cambian, con la forma de `inbox` en los textos del paquete\n */\nfunction MessageViewContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMessageView.defaultProps) y encima lo que llega aquí\n    const {message, actions, footer, onAttachmentClick, onExpand, renderBody, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('inbox', texts);\n    const formatters = useFormatters();\n    // los mensajes anteriores que la persona abrió (empiezan encogidos), de qué conversación: al cambiar de mensaje se olvidan\n    const [expanded, setExpanded] = useState({messageId: null, ids: []});\n\n    if (!message) {\n        return <MessageEmpty variant=\"body2\" color=\"text.secondary\" ownSx={{p: 4, textAlign: 'center'}}>{t('noMessageSelected')}</MessageEmpty>;\n    }\n\n    const expandedIds = expanded.messageId === message.id ? expanded.ids : [];\n    const expand = (threadMessageId) => {\n        setExpanded({messageId: message.id, ids: [...expandedIds, threadMessageId]});\n        onExpand?.(threadMessageId);\n    };\n\n    return (\n        <Stack spacing={2} component=\"article\" aria-label={message.subject}>\n            {actions && <MessageLabels direction=\"row\" spacing={0.5} useFlexGap ownSx={{flexWrap: 'wrap', alignItems: 'center'}}>{actions}</MessageLabels>}\n            <Box>\n                <Typography variant=\"h5\" component=\"h2\">{message.subject}</Typography>\n                {message.labels?.length > 0 && (\n                    <MessageAttachments direction=\"row\" spacing={0.5} useFlexGap ownSx={{flexWrap: 'wrap', mt: 1}}>\n                        {message.labels.map((rawLabel) => {\n                            const label = tagOf(rawLabel);\n                            return <Chip key={label.label} size=\"small\" variant=\"outlined\" color={label.color} label={label.label} />;\n                        })}\n                    </MessageAttachments>\n                )}\n            </Box>\n            {message.thread?.length > 0 && (\n                <Typography variant=\"caption\" color=\"text.secondary\">{t('threadCount', {count: message.thread.length + 1})}</Typography>\n            )}\n            {/* los anteriores: encogidos en un renglón; abiertos, completos y con su línea abajo */}\n            {message.thread?.map((entry) => (expandedIds.includes(entry.id) ? (\n                <Box key={entry.id}>\n                    <MessageBody entry={entry} t={t} onAttachmentClick={onAttachmentClick} renderBody={renderBody} />\n                    <MessageDivider ownSx={{mt: 2}} />\n                </Box>\n            ) : (\n                <MessageCollapsed key={entry.id} onClick={() => expand(entry.id)} aria-label={t('expandMessage', {name: entry.from.name, date: inboxDateOf(entry.receivedAt, new Date(), formatters)})}\n                            ownSx={{justifyContent: 'flex-start', textAlign: 'left', borderRadius: 2, p: 1, mx: -1, gap: 1.5, '&:hover': {bgcolor: 'action.hover'}}}>\n                    <MessageCollapsedAvatar ownSx={{width: 32, height: 32, fontSize: 13}}>{initialsOf(entry.from.name)}</MessageCollapsedAvatar>\n                    <MessageCollapsedText ownSx={{minWidth: 0, flex: 1}}>\n                        <MessageCollapsedSender variant=\"body2\" ownSx={{fontWeight: 600}} noWrap>{entry.from.name}</MessageCollapsedSender>\n                        <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{entry.body.replace(/\\s+/g, ' ').slice(0, PREVIEW_LENGTH)}</Typography>\n                    </MessageCollapsedText>\n                    <MessageCollapsedDate variant=\"caption\" color=\"text.secondary\" ownSx={{flexShrink: 0}}>{inboxDateOf(entry.receivedAt, new Date(), formatters)}</MessageCollapsedDate>\n                </MessageCollapsed>\n            )))}\n            {message.thread?.length > 0 && <Divider />}\n            <MessageBody entry={message} t={t} onAttachmentClick={onAttachmentClick} renderBody={renderBody} />\n            {footer}\n        </Stack>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst MessageView = withPieceSlots(MessageViewContent, THEME_NAME);\nexport default MessageView;\n"],"names":[],"mappings":"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"}