@pega/cosmos-react-social 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/components/Email/EmailComposer.js

@@ -1,76 +1,188 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import Select from '@pega/cosmos-react-core/lib/components/Select/Select';
-import { Button, ComboBox, EmojiPicker, Flex, Icon, Popover, useElement, useI18n, useOuterEvent, defaultThemeProp, Tooltip, FileUploadItem } from '@pega/cosmos-react-core';
-import Input from '@pega/cosmos-react-core/lib/components/Input/Input';
+import { Button, Flex, Icon, registerIcon, useI18n, Option, defaultThemeProp, FileUploadItem, MenuButton, Select, Input, useUID } from '@pega/cosmos-react-core';
 import { RichTextEditor } from '@pega/cosmos-react-rte';
-export const StyledAttachmentElementContainer = styled.div(({ disabled, theme }) => {
-    return (disabled &&
-        css `
-        &:focus {
-          box-shadow: ${theme.base.shadow.focus};
-          border-radius: 50%;
-          outline: none;
-        }
-      `);
-});
-StyledAttachmentElementContainer.defaultProps = defaultThemeProp;
+import * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';
+import * as replyAllIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply-all.icon';
+import * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';
+import * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';
+import EmailSelector from './EmailSelector';
+registerIcon(paperClipIcon, replyAllIcon, replyIcon, forwardIcon);
 export const StyledEmailComposer = styled.div ``;
-const EmailComposer = forwardRef((props, ref) => {
-    const { from, to, onShowBCC, onShowCC, cc, bcc, subject, body, primaryMoreFields, secondaryMoreFields, maxAttachments = 0, attachments = [], onAddAttachment, showEmoji, onEmojiSelect, onSend, footerMoreActions, ...restProps } = props;
-    const [emojiBtnEl, setEmojiBtnEl] = useElement();
-    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const toggleEmoji = () => {
-        setShowEmojiPicker(!showEmojiPicker);
-    };
-    const EmojiPickerRef = useRef(null);
-    useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {
-        setShowEmojiPicker(false);
-    });
+export const StyledResponseTypeIcon = styled(Icon)(({ theme }) => {
+    return css `
+    color: ${theme.base.palette.interactive};
+  `;
+});
+StyledResponseTypeIcon.defaultProps = defaultThemeProp;
+export const StyledToggleButton = styled(Button)(({ theme }) => {
+    return css `
+    margin-block-start: calc(2 * ${theme.base.spacing});
+    color: ${theme.base.palette.interactive};
+  `;
+});
+StyledToggleButton.defaultProps = defaultThemeProp;
+const responseTypeIcons = {
+    reply: 'reply',
+    replyAll: 'reply-all',
+    forward: 'forward'
+};
+const rteToolbar = [
+    'inline-styling',
+    'headers',
+    'lists',
+    'images',
+    'cut-copy-paste',
+    'indentation'
+];
+const EmailComposer = forwardRef(({ participants, bodyContent, maxAttachments = 0, onCancel, onSend, onImageAdded, externalValidator, to, footerMoreActions, templates, defaultTemplate, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsxs(Flex, Object.assign({ as: StyledEmailComposer, ref: ref }, restProps, { container: {
-            gap: 1,
+    const [cc, setCC] = useState(restProps.cc);
+    const [bcc, setBCC] = useState(restProps.bcc);
+    const [responseType, setResponseType] = useState(restProps.responseType);
+    const [showCC, setShowCC] = useState(restProps.responseType !== 'reply' && !!cc && cc.length > 0);
+    const [showBCC, setShowBCC] = useState(restProps.responseType !== 'reply' && !!bcc && bcc.length > 0);
+    const [subject, setSubject] = useState(restProps.subject);
+    const [autoReplyTemplate, setAutoReplyTemplate] = useState(defaultTemplate || '');
+    const [attachments, setAttachments] = useState(restProps.attachments || []);
+    const [toAddresses, setToAddresses] = useState(() => {
+        if (responseType && to?.[responseType])
+            return to?.[responseType];
+        return [];
+    });
+    const [ccAddresses, setCcAddresses] = useState(() => {
+        if (responseType === 'replyAll')
+            return cc;
+        return [];
+    });
+    const [bccAddresses, setBccAddresses] = useState(() => {
+        if (responseType === 'replyAll')
+            return bcc;
+        return [];
+    });
+    const initialCC = cc;
+    const initialBCC = bcc;
+    const rteEditorRef = useRef(null);
+    const fileUploadInputRef = useRef(null);
+    const uid = useUID();
+    // inserts selected template in RTE
+    useEffect(() => {
+        const selectedTemplate = templates?.find(template => template.title === autoReplyTemplate);
+        if (selectedTemplate) {
+            rteEditorRef?.current?.insertHtml(selectedTemplate.content, true);
+        }
+    }, [autoReplyTemplate]);
+    // resets To | CC | BCC combobox selection and toggles fields on responseType change reply | replyAll | forward
+    useEffect(() => {
+        setShowCC(responseType === 'replyAll' ? !!cc && cc.length > 0 : false);
+        setShowBCC(responseType === 'replyAll' && !!bcc && bcc?.length > 0 ? !!bcc : false);
+        if (responseType === 'replyAll') {
+            setCC(initialCC);
+            setBCC(initialBCC);
+        }
+        if (responseType === 'reply') {
+            setCcAddresses([]);
+            setBccAddresses([]);
+        }
+    }, [responseType]);
+    const templateOptions = useMemo(() => templates &&
+        templates.map(template => {
+            if (template.title === defaultTemplate) {
+                _jsx(Option, { selected: 'selected', children: template.title }, template.id);
+            }
+            return _jsx(Option, { children: template.id }, template.title);
+        }), [templates]);
+    const responseTypeMenuData = useMemo(() => {
+        const menuItems = [
+            {
+                id: 'reply',
+                primary: t('reply'),
+                visual: _jsx(StyledResponseTypeIcon, { name: responseTypeIcons.reply }, void 0),
+                selected: responseType === 'reply',
+                onClick: () => {
+                    setResponseType('reply');
+                }
+            },
+            {
+                id: 'replyAll',
+                primary: t('reply_all'),
+                visual: _jsx(StyledResponseTypeIcon, { name: responseTypeIcons.replyAll }, void 0),
+                selected: responseType === 'replyAll',
+                onClick: () => {
+                    setResponseType('replyAll');
+                }
+            }
+        ];
+        return {
+            menuItems,
+            selectedResponseType: menuItems.find(item => item.selected)?.primary || menuItems[0].primary,
+            selectedResponseTypeIcon: (responseType && responseTypeIcons[responseType]) || responseTypeIcons.reply
+        };
+    }, [responseType]);
+    const onSubjectChange = useCallback((e) => {
+        setSubject(e.target.value);
+    }, []);
+    const onTemplateChange = useCallback((e) => {
+        setAutoReplyTemplate(e.target.value);
+    }, []);
+    const onAttachmentDelete = useCallback((name) => {
+        setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
+    }, []);
+    const onFileChange = useCallback((e) => {
+        if (e.target.files) {
+            setAttachments(prevAttachments => [
+                ...prevAttachments,
+                ...Array.from(e.target.files).map(file => ({
+                    name: file.name,
+                    file
+                }))
+            ]);
+        }
+    }, []);
+    const selectedItems = (selections, label) => {
+        if (label === 'To') {
+            setToAddresses(selections);
+        }
+        if (label === 'Cc') {
+            setCcAddresses(selections);
+        }
+        if (label === 'Bcc') {
+            setBccAddresses(selections);
+        }
+    };
+    const handleSend = useCallback(() => {
+        onSend({
+            to: toAddresses,
+            cc: showCC ? ccAddresses : undefined,
+            bcc: showBCC ? bccAddresses : undefined,
+            subject,
+            bodyContent: rteEditorRef.current?.getHtml() || '',
+            attachments
+        });
+    }, [toAddresses, ccAddresses, bccAddresses, subject, attachments, showCC, showBCC]);
+    return (_jsxs(Flex, { as: StyledEmailComposer, ref: ref, ...restProps, container: {
+            gap: 2,
             direction: 'column'
-        } }, { children: [_jsx(Select, Object.assign({}, from, { label: t('from') }), void 0),
-            _jsxs(Flex, Object.assign({ container: {
-                    gap: 2,
-                    alignItems: 'end'
-                } }, { children: [_jsx(Flex, Object.assign({ container: {
+        }, children: [_jsx("div", { children: responseType !== 'forward' && (_jsx(MenuButton, { text: responseTypeMenuData.selectedResponseType, variant: 'link', icon: responseTypeMenuData.selectedResponseTypeIcon, menu: {
+                        mode: 'single-select',
+                        items: responseTypeMenuData.menuItems
+                    } }, void 0)) }, void 0), _jsxs(Flex, { container: {
+                    alignItems: 'start',
+                    gap: 0.5
+                }, children: [_jsx(Flex, { container: {
                             gap: 1,
                             direction: 'column'
                         }, item: {
                             grow: 1
-                        } }, { children: to && _jsx(ComboBox, Object.assign({}, to, { label: t('to'), mode: 'multi-select', required: true }), void 0) }), void 0),
-                    onShowCC && (_jsx(Button, Object.assign({ variant: 'link', onClick: onShowCC }, { children: "CC" }), void 0)),
-                    onShowBCC && (_jsx(Button, Object.assign({ variant: 'link', onClick: onShowBCC }, { children: "BCC" }), void 0))] }), void 0),
-            cc && _jsx(ComboBox, Object.assign({}, cc, { label: 'CC', mode: 'multi-select' }), void 0),
-            bcc && _jsx(ComboBox, Object.assign({}, bcc, { label: 'BCC', mode: 'multi-select' }), void 0),
-            _jsx(Input, Object.assign({}, subject, { label: t('subject') }), void 0),
-            primaryMoreFields,
-            _jsx(RichTextEditor, Object.assign({ autoFocus: true }, body, { labelHidden: true }), void 0),
-            secondaryMoreFields,
-            attachments.length > 0 && (_jsx(Flex, Object.assign({ container: { gap: 1, wrap: 'wrap' } }, { children: attachments.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name }))) }), void 0)),
-            _jsxs(Flex, Object.assign({ container: {
+                        }, children: _jsx(EmailSelector, { participants: participants, defaultSelections: to?.[responseType], label: t('to'), mode: 'multi-select', required: true, selections: selectedItems, externalValidator: externalValidator }, void 0) }, void 0), !showCC && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setShowCC(true), icon: true, children: t('cc') }, void 0)), !showBCC && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setShowBCC(true), icon: true, children: t('bcc') }, void 0))] }, void 0), showCC && (_jsx(EmailSelector, { participants: participants, defaultSelections: responseType === 'replyAll' ? cc : undefined, label: t('cc'), mode: 'multi-select', selections: selectedItems, externalValidator: externalValidator }, void 0)), showBCC && (_jsx(EmailSelector, { selections: selectedItems, participants: participants, defaultSelections: responseType === 'replyAll' ? bcc : undefined, label: t('bcc'), mode: 'multi-select', externalValidator: externalValidator }, void 0)), _jsx(Input, { value: subject, onChange: onSubjectChange, label: t('subject') }, void 0), _jsxs(Select, { onChange: onTemplateChange, label: t('auto_reply'), value: autoReplyTemplate, children: [_jsx(Option, { children: t('insert') }, uid), _jsx(_Fragment, { children: templateOptions }, void 0)] }, void 0), _jsx(RichTextEditor, { autoFocus: true, ref: rteEditorRef, toolbar: rteToolbar, onImageAdded: onImageAdded, labelHidden: true, label: t('email_message'), defaultValue: bodyContent }, void 0), attachments.length > 0 && (_jsx(Flex, { container: { gap: 1, wrap: 'wrap' }, children: attachments.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name, onDelete: onAttachmentDelete }))) }, void 0)), _jsxs(Flex, { container: {
                     gap: 1
-                } }, { children: [showEmoji && (_jsx(Button, Object.assign({ ref: setEmojiBtnEl, onClick: toggleEmoji, variant: 'simple', icon: true, "aria-label": t('add_emoji'), title: t('add_emoji') }, { children: _jsx(Icon, { name: 'face-happy' }, void 0) }), void 0)),
-                    maxAttachments > 0 && (_jsxs(StyledAttachmentElementContainer, Object.assign({ disabled: attachments.length >= maxAttachments, ref: setAttachmentsBtnEl, tabIndex: attachments.length >= maxAttachments ? 0 : undefined, role: 'button' }, { children: [_jsx(Button, Object.assign({ onClick: onAddAttachment, disabled: attachments.length >= maxAttachments, variant: 'simple', icon: true, "aria-label": attachments.length >= maxAttachments
-                                    ? t('disable_attachment', maxAttachments)
-                                    : t('add_attachment', maxAttachments), title: t('add_attachment', maxAttachments) }, { children: _jsx(Icon, { name: 'paper-clip' }, void 0) }), void 0),
-                            attachments.length >= maxAttachments && (_jsx(Tooltip, Object.assign({ target: attachmentsBtnEl, showDelay: 'none', hideDelay: 'none' }, restProps, { children: t('disable_attachment', maxAttachments) }), void 0))] }), void 0)),
-                    _jsx(Flex, Object.assign({ container: true, item: { grow: 1 } }, { children: footerMoreActions }), void 0),
-                    _jsx(Button, Object.assign({ variant: 'primary', onClick: onSend }, { children: t('send') }), void 0)] }), void 0),
-            _jsx(Popover, Object.assign({ show: showEmojiPicker, target: emojiBtnEl, placement: 'bottom-start', modifiers: [
-                    {
-                        name: 'flip',
-                        enabled: true
-                    }
-                ] }, { children: _jsx(EmojiPicker, { ref: EmojiPickerRef, onSelect: emoji => {
-                        setShowEmojiPicker(false);
-                        onEmojiSelect === null || onEmojiSelect === void 0 ? void 0 : onEmojiSelect(emoji);
-                    } }, void 0) }), void 0)] }), void 0));
+                }, children: [_jsxs(Flex, { container: true, item: { grow: 1 }, children: [_jsx(Button, { variant: 'secondary', onClick: onCancel, children: t('cancel') }, void 0), footerMoreActions] }, void 0), _jsxs(Flex, { container: true, children: [maxAttachments > 0 && (_jsx(Button, { onClick: attachments.length < maxAttachments
+                                    ? () => fileUploadInputRef.current?.click()
+                                    : undefined, variant: 'link', label: attachments.length >= maxAttachments
+                                    ? t('email_disable_attachment', [maxAttachments])
+                                    : t('email_add_attachment', [maxAttachments]), children: _jsx(Icon, { name: 'paper-clip' }, void 0) }, void 0)), _jsx(Button, { variant: 'primary', onClick: handleSend, children: t('send_label') }, void 0)] }, void 0)] }, void 0), _jsx("input", { type: 'file', style: { display: 'none' }, ref: fileUploadInputRef, onChange: onFileChange }, void 0)] }, void 0));
 });
 export default EmailComposer;
 //# sourceMappingURL=EmailComposer.js.map

package/lib/components/Email/EmailComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailComposer.js","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Select from '@pega/cosmos-react-core/lib/components/Select/Select';\nimport {\n  Button,\n  ComboBox,\n  EmojiPicker,\n  Flex,\n  Icon,\n  Popover,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  ForwardProps,\n  defaultThemeProp,\n  Tooltip,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\nimport Input from '@pega/cosmos-react-core/lib/components/Input/Input';\nimport { RichTextEditor } from '@pega/cosmos-react-rte';\n\nimport { EmailComposerProps } from './Email.types';\n\ninterface StyledAttachmentElementContainerProps {\n  disabled?: boolean;\n}\nexport const StyledAttachmentElementContainer = styled.div<StyledAttachmentElementContainerProps>(\n  ({ disabled, theme }) => {\n    return (\n      disabled &&\n      css`\n        &:focus {\n          box-shadow: ${theme.base.shadow.focus};\n          border-radius: 50%;\n          outline: none;\n        }\n      `\n    );\n  }\n);\nStyledAttachmentElementContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailComposer = styled.div``;\n\nconst EmailComposer: FunctionComponent<EmailComposerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailComposerProps>, ref: EmailComposerProps['ref']) => {\n    const {\n      from,\n      to,\n      onShowBCC,\n      onShowCC,\n      cc,\n      bcc,\n      subject,\n      body,\n      primaryMoreFields,\n      secondaryMoreFields,\n      maxAttachments = 0,\n      attachments = [],\n      onAddAttachment,\n      showEmoji,\n      onEmojiSelect,\n      onSend,\n      footerMoreActions,\n      ...restProps\n    } = props;\n\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const toggleEmoji = () => {\n      setShowEmojiPicker(!showEmojiPicker);\n    };\n\n    const EmojiPickerRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {\n      setShowEmojiPicker(false);\n    });\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        as={StyledEmailComposer}\n        ref={ref}\n        {...restProps}\n        container={{\n          gap: 1,\n          direction: 'column'\n        }}\n      >\n        <Select {...from} label={t('from')} />\n        <Flex\n          container={{\n            gap: 2,\n            alignItems: 'end'\n          }}\n        >\n          <Flex\n            container={{\n              gap: 1,\n              direction: 'column'\n            }}\n            item={{\n              grow: 1\n            }}\n          >\n            {to && <ComboBox {...to} label={t('to')} mode='multi-select' required />}\n          </Flex>\n          {onShowCC && (\n            <Button variant='link' onClick={onShowCC}>\n              CC\n            </Button>\n          )}\n          {onShowBCC && (\n            <Button variant='link' onClick={onShowBCC}>\n              BCC\n            </Button>\n          )}\n        </Flex>\n        {cc && <ComboBox {...cc} label='CC' mode='multi-select' />}\n        {bcc && <ComboBox {...bcc} label='BCC' mode='multi-select' />}\n        <Input {...subject} label={t('subject')} />\n        {primaryMoreFields}\n        <RichTextEditor autoFocus {...body} labelHidden />\n        {secondaryMoreFields}\n        {attachments.length > 0 && (\n          <Flex container={{ gap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} />\n            ))}\n          </Flex>\n        )}\n        <Flex\n          container={{\n            gap: 1\n          }}\n        >\n          {showEmoji && (\n            <Button\n              ref={setEmojiBtnEl}\n              onClick={toggleEmoji}\n              variant='simple'\n              icon\n              aria-label={t('add_emoji')}\n              title={t('add_emoji')}\n            >\n              <Icon name='face-happy' />\n            </Button>\n          )}\n          {maxAttachments > 0 && (\n            <StyledAttachmentElementContainer\n              disabled={attachments.length >= maxAttachments}\n              ref={setAttachmentsBtnEl}\n              tabIndex={attachments.length >= maxAttachments ? 0 : undefined}\n              role='button'\n            >\n              <Button\n                onClick={onAddAttachment}\n                disabled={attachments.length >= maxAttachments}\n                variant='simple'\n                icon\n                aria-label={\n                  attachments.length >= maxAttachments\n                    ? t('disable_attachment', maxAttachments)\n                    : t('add_attachment', maxAttachments)\n                }\n                title={t('add_attachment', maxAttachments)}\n              >\n                <Icon name='paper-clip' />\n              </Button>\n              {attachments.length >= maxAttachments && (\n                <Tooltip target={attachmentsBtnEl} showDelay='none' hideDelay='none' {...restProps}>\n                  {t('disable_attachment', maxAttachments)}\n                </Tooltip>\n              )}\n            </StyledAttachmentElementContainer>\n          )}\n          <Flex container item={{ grow: 1 }}>\n            {footerMoreActions}\n          </Flex>\n          <Button variant='primary' onClick={onSend}>\n            {t('send')}\n          </Button>\n        </Flex>\n        <Popover\n          show={showEmojiPicker}\n          target={emojiBtnEl}\n          placement='bottom-start'\n          modifiers={[\n            {\n              name: 'flip',\n              enabled: true\n            }\n          ]}\n        >\n          <EmojiPicker\n            ref={EmojiPickerRef}\n            onSelect={emoji => {\n              setShowEmojiPicker(false);\n              onEmojiSelect?.(emoji);\n            }}\n          />\n        </Popover>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailComposer;\n"]}
+{"version":3,"file":"EmailComposer.js","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useState,\n  ChangeEvent,\n  useMemo,\n  useRef,\n  useCallback,\n  useEffect,\n  ReactNode\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  useI18n,\n  Option,\n  defaultThemeProp,\n  FileUploadItem,\n  MenuButton,\n  FileUploadItemProps,\n  Select,\n  Input,\n  useUID\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\nimport * as replyAllIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply-all.icon';\nimport * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';\nimport * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';\n\nimport { EmailComposerProps, EmailUser } from './Email.types';\nimport EmailSelector from './EmailSelector';\n\nregisterIcon(paperClipIcon, replyAllIcon, replyIcon, forwardIcon);\n\nexport const StyledEmailComposer = styled.div``;\n\nexport const StyledResponseTypeIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledResponseTypeIcon.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nconst responseTypeIcons = {\n  reply: 'reply',\n  replyAll: 'reply-all',\n  forward: 'forward'\n};\n\nconst rteToolbar: RichTextEditorProps['toolbar'] = [\n  'inline-styling',\n  'headers',\n  'lists',\n  'images',\n  'cut-copy-paste',\n  'indentation'\n];\n\nconst EmailComposer: FunctionComponent<EmailComposerProps> = forwardRef(\n  (\n    {\n      participants,\n      bodyContent,\n      maxAttachments = 0,\n      onCancel,\n      onSend,\n      onImageAdded,\n      externalValidator,\n      to,\n      footerMoreActions,\n      templates,\n      defaultTemplate,\n      ...restProps\n    }: PropsWithoutRef<EmailComposerProps>,\n    ref: EmailComposerProps['ref']\n  ) => {\n    const t = useI18n();\n    const [cc, setCC] = useState(restProps.cc);\n    const [bcc, setBCC] = useState(restProps.bcc);\n    const [responseType, setResponseType] = useState(restProps.responseType);\n    const [showCC, setShowCC] = useState(\n      restProps.responseType !== 'reply' && !!cc && cc.length > 0\n    );\n    const [showBCC, setShowBCC] = useState(\n      restProps.responseType !== 'reply' && !!bcc && bcc.length > 0\n    );\n    const [subject, setSubject] = useState(restProps.subject);\n    const [autoReplyTemplate, setAutoReplyTemplate] = useState(defaultTemplate || '');\n    const [attachments, setAttachments] = useState(restProps.attachments || []);\n\n    const [toAddresses, setToAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType && to?.[responseType])\n        return to?.[responseType] as EmailUser['emailAddress'][];\n      return [];\n    });\n    const [ccAddresses, setCcAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType === 'replyAll') return cc as EmailUser['emailAddress'][];\n      return [];\n    });\n    const [bccAddresses, setBccAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType === 'replyAll') return bcc as EmailUser['emailAddress'][];\n      return [];\n    });\n\n    const initialCC = cc;\n    const initialBCC = bcc;\n\n    const rteEditorRef = useRef<RichTextEditorState>(null);\n    const fileUploadInputRef = useRef<HTMLInputElement>(null);\n    const uid = useUID();\n\n    // inserts selected template in RTE\n    useEffect(() => {\n      const selectedTemplate = templates?.find(template => template.title === autoReplyTemplate);\n      if (selectedTemplate) {\n        rteEditorRef?.current?.insertHtml(selectedTemplate.content, true);\n      }\n    }, [autoReplyTemplate]);\n\n    // resets To | CC | BCC combobox selection and toggles fields on responseType change reply | replyAll | forward\n    useEffect(() => {\n      setShowCC(responseType === 'replyAll' ? !!cc && cc.length > 0 : false);\n      setShowBCC(responseType === 'replyAll' && !!bcc && bcc?.length > 0 ? !!bcc : false);\n      if (responseType === 'replyAll') {\n        setCC(initialCC);\n        setBCC(initialBCC);\n      }\n      if (responseType === 'reply') {\n        setCcAddresses([] as EmailUser['emailAddress'][]);\n        setBccAddresses([] as EmailUser['emailAddress'][]);\n      }\n    }, [responseType]);\n\n    const templateOptions = useMemo(\n      () =>\n        templates &&\n        templates.map(template => {\n          if (template.title === defaultTemplate) {\n            <Option selected='selected' key={template.id}>\n              {template.title}\n            </Option>;\n          }\n          return <Option key={template.title}>{template.id}</Option>;\n        }),\n      [templates]\n    );\n\n    const responseTypeMenuData = useMemo(() => {\n      const menuItems = [\n        {\n          id: 'reply',\n          primary: t('reply'),\n          visual: <StyledResponseTypeIcon name={responseTypeIcons.reply} />,\n          selected: responseType === 'reply',\n          onClick: () => {\n            setResponseType('reply');\n          }\n        },\n        {\n          id: 'replyAll',\n          primary: t('reply_all'),\n          visual: <StyledResponseTypeIcon name={responseTypeIcons.replyAll} />,\n          selected: responseType === 'replyAll',\n          onClick: () => {\n            setResponseType('replyAll');\n          }\n        }\n      ];\n      return {\n        menuItems,\n        selectedResponseType:\n          menuItems.find(item => item.selected)?.primary || menuItems[0].primary,\n        selectedResponseTypeIcon:\n          (responseType && responseTypeIcons[responseType]) || responseTypeIcons.reply\n      };\n    }, [responseType]);\n\n    const onSubjectChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n      setSubject(e.target.value);\n    }, []);\n\n    const onTemplateChange = useCallback((e: ChangeEvent<HTMLSelectElement>) => {\n      setAutoReplyTemplate(e.target.value);\n    }, []);\n\n    const onAttachmentDelete = useCallback((name: FileUploadItemProps['name']) => {\n      setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));\n    }, []);\n\n    const onFileChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        setAttachments(prevAttachments => [\n          ...prevAttachments,\n          ...Array.from(e.target.files!).map(file => ({\n            name: file.name,\n            file\n          }))\n        ]);\n      }\n    }, []);\n\n    const selectedItems = (selections: EmailUser['emailAddress'][], label: ReactNode) => {\n      if (label === 'To') {\n        setToAddresses(selections);\n      }\n      if (label === 'Cc') {\n        setCcAddresses(selections);\n      }\n      if (label === 'Bcc') {\n        setBccAddresses(selections);\n      }\n    };\n    const handleSend = useCallback(() => {\n      onSend({\n        to: toAddresses,\n        cc: showCC ? ccAddresses : undefined,\n        bcc: showBCC ? bccAddresses : undefined,\n        subject,\n        bodyContent: rteEditorRef.current?.getHtml() || '',\n        attachments\n      });\n    }, [toAddresses, ccAddresses, bccAddresses, subject, attachments, showCC, showBCC]);\n\n    return (\n      <Flex\n        as={StyledEmailComposer}\n        ref={ref}\n        {...restProps}\n        container={{\n          gap: 2,\n          direction: 'column'\n        }}\n      >\n        <div>\n          {responseType !== 'forward' && (\n            <MenuButton\n              text={responseTypeMenuData.selectedResponseType}\n              variant='link'\n              icon={responseTypeMenuData.selectedResponseTypeIcon}\n              menu={{\n                mode: 'single-select',\n                items: responseTypeMenuData.menuItems\n              }}\n            />\n          )}\n        </div>\n\n        <Flex\n          container={{\n            alignItems: 'start',\n            gap: 0.5\n          }}\n        >\n          <Flex\n            container={{\n              gap: 1,\n              direction: 'column'\n            }}\n            item={{\n              grow: 1\n            }}\n          >\n            <EmailSelector\n              participants={participants}\n              defaultSelections={to?.[responseType!]}\n              label={t('to')}\n              mode='multi-select'\n              required\n              selections={selectedItems}\n              externalValidator={externalValidator}\n            />\n          </Flex>\n          {!showCC && (\n            <StyledToggleButton variant='simple' onClick={() => setShowCC(true)} icon>\n              {t('cc')}\n            </StyledToggleButton>\n          )}\n          {!showBCC && (\n            <StyledToggleButton variant='simple' onClick={() => setShowBCC(true)} icon>\n              {t('bcc')}\n            </StyledToggleButton>\n          )}\n        </Flex>\n\n        {showCC && (\n          <EmailSelector\n            participants={participants}\n            defaultSelections={responseType === 'replyAll' ? cc : undefined}\n            label={t('cc')}\n            mode='multi-select'\n            selections={selectedItems}\n            externalValidator={externalValidator}\n          />\n        )}\n        {showBCC && (\n          <EmailSelector\n            selections={selectedItems}\n            participants={participants}\n            defaultSelections={responseType === 'replyAll' ? bcc : undefined}\n            label={t('bcc')}\n            mode='multi-select'\n            externalValidator={externalValidator}\n          />\n        )}\n\n        <Input value={subject} onChange={onSubjectChange} label={t('subject')} />\n\n        <Select onChange={onTemplateChange} label={t('auto_reply')} value={autoReplyTemplate}>\n          <Option key={uid}>{t('insert')}</Option>\n          <>{templateOptions}</>\n        </Select>\n\n        <RichTextEditor\n          autoFocus\n          ref={rteEditorRef}\n          toolbar={rteToolbar}\n          onImageAdded={onImageAdded}\n          labelHidden\n          label={t('email_message')}\n          defaultValue={bodyContent}\n        />\n        {attachments.length > 0 && (\n          <Flex container={{ gap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} onDelete={onAttachmentDelete} />\n            ))}\n          </Flex>\n        )}\n        <Flex\n          container={{\n            gap: 1\n          }}\n        >\n          <Flex container item={{ grow: 1 }}>\n            <Button variant='secondary' onClick={onCancel}>\n              {t('cancel')}\n            </Button>\n            {footerMoreActions}\n          </Flex>\n          <Flex container>\n            {maxAttachments > 0 && (\n              <Button\n                onClick={\n                  attachments.length < maxAttachments\n                    ? () => fileUploadInputRef.current?.click()\n                    : undefined\n                }\n                variant='link'\n                label={\n                  attachments.length >= maxAttachments\n                    ? t('email_disable_attachment', [maxAttachments])\n                    : t('email_add_attachment', [maxAttachments])\n                }\n              >\n                <Icon name='paper-clip' />\n              </Button>\n            )}\n            <Button variant='primary' onClick={handleSend}>\n              {t('send_label')}\n            </Button>\n          </Flex>\n        </Flex>\n        <input\n          type='file'\n          style={{ display: 'none' }}\n          ref={fileUploadInputRef}\n          onChange={onFileChange}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default EmailComposer;\n"]}

package/lib/components/Email/EmailConversation.d.ts

@@ -3,7 +3,9 @@ import { ForwardProps } from '@pega/cosmos-react-core';
 import { EmailConversationProps } from './Email.types';
 export declare const StyledEmailParticipantsText: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCompactTimeStampDisplay: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledConversationHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledConversationHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
+    collapsed: boolean;
+}, never>;
 export declare const StyledUnReadCount: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailConversation: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailInConversation: import("styled-components").StyledComponent<FunctionComponent<import("./Email.types").EmailProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;

package/lib/components/Email/EmailConversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAIzF,OAAO,EASL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AASvD,eAAO,MAAM,2BAA2B,iLAEvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB,4GAenC,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAe5B,CAAC;AAGH,eAAO,MAAM,uBAAuB,wGAAc,CAAC;AAGnD,eAAO,MAAM,yBAAyB,wKAsBpC,CAAC;AA4BH,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA2I/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAKlG,OAAO,EAQL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAGvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;SASzE,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAoB5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAQlC,CAAC;AAGH,eAAO,MAAM,yBAAyB,wKAsBpC,CAAC;AAwEH,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA2H/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Email/EmailConversation.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { Button, Count, ExpandCollapse, Flex, Icon, Text, useI18n, defaultThemeProp, useAfterInitialEffect, DateTimeDisplay, readableHue, useBreakpoint } from '@pega/cosmos-react-core';
-import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
+import { mix, readableColor } from 'polished';
+import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import { ExpandCollapse, Flex, Icon, registerIcon, Text, useI18n, defaultThemeProp, useAfterInitialEffect, DateTimeDisplay, readableHue, useBreakpoint, useConfiguration, StyledIcon, tryCatch, useDirection } from '@pega/cosmos-react-core';
 import Email from './Email';
+registerIcon(caretDownIcon);
 const EmailParticipantTextCss = css `
   white-space: nowrap;
   overflow: hidden;
@@ -13,31 +14,25 @@ const EmailParticipantTextCss = css `
 `;
 export const StyledEmailParticipantsText = styled(Text) `
   ${EmailParticipantTextCss}
+  color: ${props => props.theme.base.palette['foreground-color']};
 `;
+StyledEmailParticipantsText.defaultProps = defaultThemeProp;
 export const StyledCompactTimeStampDisplay = styled(Text) `
   ${EmailParticipantTextCss}
   margin-top: calc(${props => props.theme.base.spacing} / 2);
 `;
 StyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;
-export const StyledConversationHeader = styled.header(({ theme }) => {
+export const StyledConversationHeader = styled.header(({ theme, collapsed }) => {
     return css `
-    background-color: ${theme.base.palette['primary-background']};
-    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    position: sticky;
-    top: 0;
-    z-index: 1;
-
-    ${StyledCount} {
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-      align-items: center;
-    }
-  `;
+      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${theme.base.palette['border-line']};
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    `;
 });
 StyledConversationHeader.defaultProps = defaultThemeProp;
 export const StyledUnReadCount = styled.div(({ theme: { base } }) => {
-    const readableBackground = readableHue(base.palette['brand-primary'], base.palette['background-color']);
+    const readableBackground = readableHue(base.palette['brand-primary'], base.palette['primary-background']);
     const readableTextColor = readableColor(readableBackground);
     return css `
     align-self: flex-start;
@@ -45,14 +40,27 @@ export const StyledUnReadCount = styled.div(({ theme: { base } }) => {
     color: ${readableTextColor};
     padding: 0 ${base.spacing};
     font-weight: ${base['font-weight']['semi-bold']};
+
+    /* stylelint-disable declaration-block-no-duplicate-properties */
     width: fit-content;
+    width: -moz-fit-content;
+
+    /* stylelint-enable declaration-block-no-duplicate-properties */
   `;
 });
 StyledUnReadCount.defaultProps = defaultThemeProp;
-export const StyledEmailConversation = styled.li ``;
+export const StyledEmailConversation = styled.li(({ theme: { base } }) => {
+    return css `
+    margin-bottom: ${base.spacing};
+    border-radius: ${base['border-radius']};
+    overflow: hidden;
+    background-color: ${base.palette['primary-background']};
+    list-style-type: none;
+  `;
+});
 StyledEmailConversation.defaultProps = defaultThemeProp;
 export const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base } }) => {
-    const readableBackground = readableHue(base.palette['brand-primary'], base.palette['background-color']);
+    const readableBackground = readableHue(base.palette['brand-primary'], base.palette['primary-background']);
     return css `
     padding: calc(2 * ${base.spacing}) 0;
     border-bottom: 0.0625rem solid ${base.palette['border-line']};
@@ -79,16 +87,54 @@ const StyledForwardIcon = styled.svg(({ theme }) => {
   `;
 });
 StyledForwardIcon.defaultProps = defaultThemeProp;
-const StyledUnreadIndicator = styled.span(({ theme }) => {
+const StyledUnreadIndicator = styled.span(({ theme, isVisible }) => {
     const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
+    const diameter = '0.375rem';
     return css `
-    width: 0.5em;
-    height: 0.5em;
+    width: ${isVisible ? diameter : 0};
+    margin: 0 ${isVisible ? 0 : '0.188rem'};
+    height: ${diameter};
+    display: inline-block;
     border-radius: 50%;
     background: ${readableBackground};
+    position: relative;
+    top: 0.375rem;
+    align-self: flex-start;
   `;
 });
 StyledUnreadIndicator.defaultProps = defaultThemeProp;
+const StyledConversationButton = styled.button(({ theme }) => {
+    const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette['brand-primary']));
+    return css `
+    border-width: 0;
+    width: 100%;
+    padding: ${theme.base.spacing};
+    background: ${theme.base.palette['primary-background']};
+    position: sticky;
+    top: 0;
+    z-index: 1;
+
+    &[aria-expanded='true'] {
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    }
+
+    &:focus {
+      background: ${theme.base.palette['secondary-background']};
+      outline: none;
+    }
+
+    &:hover {
+      background: ${hoverColor};
+      outline: none;
+    }
+
+    & > ${StyledIcon} {
+      align-self: flex-start;
+      color: ${theme.base.palette['foreground-color']};
+    }
+  `;
+});
+StyledConversationButton.defaultProps = defaultThemeProp;
 const EmailConversation = forwardRef((props, ref) => {
     const { id, emails, from, to, unReadEmailCount, timeStamp, isForwarded = false, isCollapsed = false, onCollapse, onExpand, ...restProps } = props;
     const t = useI18n();
@@ -101,48 +147,34 @@ const EmailConversation = forwardRef((props, ref) => {
     };
     const headerRef = useRef(null);
     const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: headerRef });
-    return (_jsxs(StyledEmailConversation, Object.assign({}, restProps, { id: id, ref: ref }, { children: [_jsxs(Flex, Object.assign({ as: StyledConversationHeader, container: { gap: 1, alignItems: 'center', pad: 1 }, ref: headerRef }, { children: [_jsx(Flex, Object.assign({ container: {
-                            alignItems: 'center',
-                            gap: 1
-                        }, item: {
-                            shrink: 0,
-                            alignSelf: 'start'
-                        } }, { children: _jsx(Button, Object.assign({ variant: 'simple', id: `conversation-heading${id}`, "aria-controls": id, "aria-expanded": !collapsedState, icon: true, onClick: onExpandCollapse }, { children: _jsx(Icon, { name: collapsedState ? 'caret-right' : 'caret-down' }, void 0) }), void 0) }), void 0),
-                    _jsxs(Flex, Object.assign({ container: {
+    const { locale } = useConfiguration();
+    const { rtl } = useDirection();
+    const caretDirection = rtl ? 'caret-left' : 'caret-right';
+    const generateRecipientList = useMemo(() => {
+        const recipientElements = to.slice(0, 2).map((recipient, i) => {
+            return `${recipient.shortName}${i < to.length - 1 ? ';' : ''} `;
+        });
+        if (to.length > 2) {
+            return [...recipientElements, `+${to.length - 2} more`];
+        }
+        return recipientElements;
+    }, [to]);
+    return (_jsxs(StyledEmailConversation, { ...restProps, id: id, ref: ref, children: [_jsxs(Flex, { as: StyledConversationButton, id: `conversation-heading${id}`, "aria-controls": id, "aria-expanded": !collapsedState, container: { gap: 1, alignItems: 'center', pad: 1 }, onClick: onExpandCollapse, ref: headerRef, children: [_jsx(Icon, { name: collapsedState ? caretDirection : 'caret-down' }, void 0), _jsx(StyledUnreadIndicator, { isVisible: !!unReadEmailCount }, void 0), _jsxs(Flex, { container: {
                             wrap: 'nowrap',
                             alignItems: 'start',
                             direction: 'column'
                         }, item: {
                             grow: 1,
                             shrink: 1
-                        } }, { children: [_jsx(Text, Object.assign({ variant: 'primary', as: StyledEmailParticipantsText }, { children: `${t('from')}: ${from.fullName}` }), void 0),
-                            _jsx(Text, Object.assign({ variant: 'secondary', as: StyledEmailParticipantsText }, { children: [
-                                    `${t('to')}: `,
-                                    (() => {
-                                        const recipientElements = to.slice(0, 2).map((recipient, i) => {
-                                            return _jsx(_Fragment, { children: `${recipient.shortName}${i < to.length - 1 ? ';' : ''} ` }, void 0);
-                                        });
-                                        if (to.length > 2) {
-                                            return [...recipientElements, _jsx(_Fragment, { children: `+${to.length - 2} more` }, void 0)];
-                                        }
-                                        return recipientElements;
-                                    })()
-                                ] }), void 0),
-                            !isSmallOrAbove && (_jsx(Text, Object.assign({ variant: 'secondary', as: StyledCompactTimeStampDisplay }, { children: _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0) }), void 0))] }), void 0),
-                    _jsxs(Flex, Object.assign({ container: {
+                        }, children: [_jsx(Text, { variant: 'primary', as: StyledEmailParticipantsText, children: `${isForwarded ? 'FW' : t('from')}: ${from.fullName}` }, void 0), _jsxs(Text, { variant: 'secondary', as: StyledEmailParticipantsText, children: [`${t('to')}: `, generateRecipientList] }, void 0), !isSmallOrAbove && (_jsxs(Text, { variant: 'secondary', as: StyledCompactTimeStampDisplay, children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0)] }, void 0))] }, void 0), _jsx(Flex, { container: {
                             gap: 1,
                             alignItems: 'center'
                         }, item: {
                             shrink: 0
-                        } }, { children: [isSmallOrAbove && (_jsx(Text, Object.assign({ variant: 'secondary', as: StyledEmailParticipantsText }, { children: _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0) }), void 0)),
-                            isForwarded && (_jsx(Icon, { name: 'forward', "aria-label": t('forwarded_email'), as: StyledForwardIcon }, void 0)),
-                            !!unReadEmailCount && (_jsxs(_Fragment, { children: [_jsx(StyledUnreadIndicator, {}, void 0),
-                                    _jsx(Count, Object.assign({ "aria-labelledby": `unread-emailCount-${id}` }, { children: unReadEmailCount }), void 0)] }, void 0))] }), void 0)] }), void 0),
-            _jsxs(ExpandCollapse, Object.assign({ as: Flex, container: { direction: 'column' }, collapsed: collapsedState, onBeforeCollapse: onCollapse, onBeforeExpand: onExpand, role: 'region', "aria-labelledby": `conversation-heading${id}`, id: `conversation-content${id}` }, { children: [!!unReadEmailCount && (_jsx(Text, Object.assign({ as: StyledUnReadCount, id: `unread-emailCount-${id}`, variant: 'secondary' }, { children: t('n_new_emails', unReadEmailCount) }), void 0)),
-                    emails &&
+                        }, children: isSmallOrAbove && (_jsxs(Text, { variant: 'secondary', as: StyledEmailParticipantsText, children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0)] }, void 0)) }, void 0)] }, void 0), _jsxs(ExpandCollapse, { as: Flex, container: { direction: 'column' }, collapsed: collapsedState, onBeforeCollapse: onCollapse, onBeforeExpand: onExpand, role: 'region', "aria-labelledby": `conversation-heading${id}`, id: `conversation-content${id}`, children: [!!unReadEmailCount && (_jsx(Text, { as: StyledUnReadCount, id: `unread-emailCount-${id}`, variant: 'secondary', children: t('new_emails_count', [unReadEmailCount], { count: unReadEmailCount }) }, void 0)), emails &&
                         emails.map(email => {
-                            return _jsx(StyledEmailInConversation, Object.assign({}, email), void 0);
-                        })] }), void 0)] }), void 0));
+                            return _jsx(StyledEmailInConversation, { ...email }, email.id);
+                        })] }, void 0)] }, void 0));
 });
 export default EmailConversation;
 //# sourceMappingURL=EmailConversation.js.map