@pega/cosmos-react-social 2.0.0-dev.10.0 → 2.0.0-dev.13.0

package/lib/components/Email/EmailComposer.js

@@ -1,28 +1,114 @@
 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, useRef, useState, useEffect, useMemo } 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 { Button, ComboBox, EmojiPicker, Flex, Icon, Text, Popover, useElement, useI18n, Option, useOuterEvent, defaultThemeProp, FileUploadItem, MenuButton } from '@pega/cosmos-react-core';
 import Input from '@pega/cosmos-react-core/lib/components/Input/Input';
 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;
+const useEmailDataProvider = (participants, defaultSelected = []) => {
+    const escapeChars = /[.*+\-?^${}()|[\]\\]/g;
+    const getFilterRegex = (inputValue) => {
+        return new RegExp(`^${inputValue.replace(escapeChars, '\\$&')}`, 'i');
+    };
+    const [emailUsers, setEmailUsers] = useState(participants.map((participant) => {
+        return {
+            ...participant,
+            selected: defaultSelected.includes(participant.emailAddress)
+        };
+    }));
+    const [emailFilterValue, setEmailFilterValue] = useState('');
+    const filterRegex = useMemo(() => getFilterRegex(emailFilterValue), [emailFilterValue]);
+    const emailsToRender = useMemo(() => {
+        return (emailFilterValue
+            ? emailUsers.filter(({ emailAddress, fullName, shortName }) => {
+                return (filterRegex.test(emailAddress) ||
+                    filterRegex.test(fullName) ||
+                    filterRegex.test(shortName));
+            })
+            : emailUsers).map(({ emailAddress, fullName, selected }) => {
+            return {
+                id: emailAddress,
+                primary: fullName,
+                secondary: [emailAddress],
+                selected: !!selected
+            };
+        });
+    }, [emailUsers, filterRegex]);
+    const selectedEmailUsers = useMemo(() => {
+        return emailUsers
+            .filter(emailAddress => emailAddress.selected)
+            .map(({ emailAddress }) => {
+            return {
+                text: emailAddress,
+                id: emailAddress
+            };
+        });
+    }, [emailUsers]);
+    const toggleSelectedEmailUser = (id) => {
+        setEmailUsers(prevEmailUsers => {
+            return prevEmailUsers.map(emailUser => {
+                if (emailUser.emailAddress === id) {
+                    return {
+                        ...emailUser,
+                        selected: !emailUser.selected
+                    };
+                }
+                return emailUser;
+            });
+        });
+    };
+    return {
+        value: emailFilterValue,
+        onChange: (e) => {
+            setEmailFilterValue(e.target.value);
+        },
+        onBlur: () => {
+            setEmailFilterValue('');
+        },
+        menu: {
+            items: emailsToRender,
+            accent: filterRegex,
+            onItemClick: toggleSelectedEmailUser
+        },
+        selected: {
+            items: selectedEmailUsers,
+            onRemove: toggleSelectedEmailUser
         }
-      `);
-});
-StyledAttachmentElementContainer.defaultProps = defaultThemeProp;
+    };
+};
 export const StyledEmailComposer = styled.div ``;
+export const StyledReplyIcon = styled(Icon)(({ theme }) => {
+    return css `
+    color: ${theme.base.palette.interactive};
+  `;
+});
+StyledReplyIcon.defaultProps = defaultThemeProp;
+export const StyledCCButton = styled(Button)(({ theme }) => {
+    return css `
+    margin-block-start: calc(2 * ${theme.base.spacing});
+    color: ${theme.base.palette.interactive};
+  `;
+});
+export const StyledAttachmentsContainer = styled(Flex)(({ theme }) => {
+    return css `
+    margin-block-start: calc(3 * ${theme.base.spacing});
+  `;
+});
+StyledCCButton.defaultProps = defaultThemeProp;
 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 { onReply, onReplyAll, isReplyAll, participants, from, to, cc, bcc, body, primaryMoreFields, secondaryMoreFields, maxAttachments = 0, attachments = [], onAddAttachment, showEmoji, onEmojiSelect, onCancel, onSend, footerMoreActions, templates, ...restProps } = props;
+    const [subject, setSubject] = useState(props.subject);
     const [emojiBtnEl, setEmojiBtnEl] = useElement();
-    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [showCC, setShowCC] = useState(false);
+    const [showBCC, setShowBCC] = useState(false);
+    const [selectedTemplate, setSelectedTemplate] = useState('');
+    const toEmailAddresses = useEmailDataProvider(participants, to);
+    const ccEmailAddresses = useEmailDataProvider(participants, cc);
+    const bccEmailAddresses = useEmailDataProvider(participants, bcc);
+    const children = templates && Object.keys(templates).map(option => _jsx(Option, { children: option }, option));
+    const header = subject || props.header;
     const toggleEmoji = () => {
         setShowEmojiPicker(!showEmojiPicker);
     };
@@ -30,46 +116,55 @@ const EmailComposer = forwardRef((props, ref) => {
     useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {
         setShowEmojiPicker(false);
     });
+    const onSubjectChange = (e) => {
+        setSubject(e.target.value);
+    };
+    const onTemplateChange = (e) => {
+        setSelectedTemplate(e.target.value);
+    };
+    const rteRef = body?.ref;
+    useEffect(() => {
+        return (templates?.[selectedTemplate] && rteRef?.current?.insertText(templates?.[selectedTemplate]));
+    }, [selectedTemplate]);
     const t = useI18n();
     return (_jsxs(Flex, Object.assign({ as: StyledEmailComposer, ref: ref }, restProps, { container: {
-            gap: 1,
+            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(Text, Object.assign({ variant: 'h4', "aria-label": `${t('email_header')} ${header}` }, { children: header }), void 0), _jsx("div", { children: _jsx(MenuButton, { text: isReplyAll ? t('reply_all') : t('reply'), variant: 'link', icon: isReplyAll ? 'reply-all' : 'reply', menu: {
+                        items: [
+                            {
+                                primary: t('reply_all'),
+                                id: 'reply all',
+                                visual: _jsx(StyledReplyIcon, { name: 'reply-all' }, void 0),
+                                onClick: onReplyAll
+                            },
+                            {
+                                primary: t('reply'),
+                                id: 'reply',
+                                visual: _jsx(StyledReplyIcon, { name: 'reply' }, void 0),
+                                onClick: onReply
+                            }
+                        ]
+                    } }, void 0) }, void 0), _jsxs(Flex, Object.assign({ container: {
+                    alignItems: 'start',
+                    gap: 0.5
                 } }, { children: [_jsx(Flex, Object.assign({ 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: to && _jsx(ComboBox, Object.assign({}, toEmailAddresses, { label: t('to'), mode: 'multi-select', required: true }), void 0) }), void 0), !showCC && (_jsx("span", { children: _jsx(StyledCCButton, Object.assign({ variant: 'simple', onClick: () => setShowCC(true), icon: true }, { children: t('cc') }), void 0) }, void 0)), !showBCC && (_jsx("span", { children: _jsx(StyledCCButton, Object.assign({ variant: 'simple', onClick: () => setShowBCC(true), icon: true }, { children: t('bcc') }), void 0) }, void 0))] }), void 0), showCC && _jsx(ComboBox, Object.assign({}, ccEmailAddresses, { label: t('cc'), mode: 'multi-select' }), void 0), showBCC && _jsx(ComboBox, Object.assign({}, bccEmailAddresses, { label: t('bcc'), mode: 'multi-select' }), void 0), _jsx(Input, { value: subject, onChange: onSubjectChange, label: t('subject') }, void 0), _jsx(Select, Object.assign({ onChange: onTemplateChange, label: t('auto_reply'), value: selectedTemplate }, { children: _jsxs(_Fragment, { children: [_jsx(Option, { children: t('insert') }, void 0), children] }, void 0) }), void 0), primaryMoreFields, _jsx(RichTextEditor, Object.assign({ autoFocus: true }, body, { defaultValue: selectedTemplate, labelHidden: true, label: t('email_message') }), void 0), secondaryMoreFields, attachments.length > 0 && (_jsx(StyledAttachmentsContainer, Object.assign({ container: { gap: 1, wrap: 'wrap' } }, { children: attachments.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name }))) }), void 0)), _jsxs(Flex, Object.assign({ 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
+                } }, { children: [_jsxs(Flex, Object.assign({ container: true, item: { grow: 1 } }, { children: [_jsx(Button, Object.assign({ variant: 'secondary', onClick: onCancel }, { children: t('cancel') }), void 0), footerMoreActions] }), void 0), _jsxs(Flex, Object.assign({ container: true }, { children: [maxAttachments > 0 && (_jsxs(Button, Object.assign({ onClick: attachments.length < maxAttachments ? onAddAttachment : undefined, variant: 'link', 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: [
+                                    : t('add_attachment', maxAttachments) }, { children: [_jsx(Icon, { name: 'paper-clip' }, void 0), " ", t('attach')] }), void 0)), showEmoji && (_jsx(Button, Object.assign({ ref: setEmojiBtnEl, onClick: toggleEmoji, variant: 'simple', icon: true, label: t('add_emoji') }, { children: _jsx(Icon, { name: 'face-happy' }, void 0) }), void 0)), _jsx(Button, Object.assign({ variant: 'primary', onClick: onSend }, { children: t('send') }), void 0)] }), 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);
+                        onEmojiSelect?.(emoji);
                     } }, void 0) }), void 0)] }), void 0));
 });
 export default EmailComposer;

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

@@ -1 +1 @@
-{"version":3,"file":"EmailComposer.js","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAC1E,OAAO,EACL,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,aAAa,EAEb,gBAAgB,EAChB,OAAO,EACP,cAAc,EACf,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,MAAM,oDAAoD,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAOxD,MAAM,CAAC,MAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CACxD,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACtB,OAAO,CACL,QAAQ;QACR,GAAG,CAAA;;wBAEe,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;OAIxC,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AACF,gCAAgC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjE,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEhD,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,EACT,QAAQ,EACR,EAAE,EACF,GAAG,EACH,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,mBAAmB,EACnB,cAAc,GAAG,CAAC,EAClB,WAAW,GAAG,EAAE,EAChB,eAAe,EACf,SAAS,EACT,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAE,CAAC;IACjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,UAAU,EAAE,CAAC;IAC7D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEpD,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC,EAAE,GAAG,EAAE;QAC5D,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,GAAG,IACJ,SAAS,IACb,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;YACN,SAAS,EAAE,QAAQ;SACpB,iBAED,KAAC,MAAM,oBAAK,IAAI,IAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,YAAI;YACtC,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,UAAU,EAAE,KAAK;iBAClB,iBAED,KAAC,IAAI,kBACH,SAAS,EAAE;4BACT,GAAG,EAAE,CAAC;4BACN,SAAS,EAAE,QAAQ;yBACpB,EACD,IAAI,EAAE;4BACJ,IAAI,EAAE,CAAC;yBACR,gBAEA,EAAE,IAAI,KAAC,QAAQ,oBAAK,EAAE,IAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,cAAc,EAAC,QAAQ,kBAAG,YACnE;oBACN,QAAQ,IAAI,CACX,KAAC,MAAM,kBAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,QAAQ,gCAE/B,CACV;oBACA,SAAS,IAAI,CACZ,KAAC,MAAM,kBAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,SAAS,iCAEhC,CACV,aACI;YACN,EAAE,IAAI,KAAC,QAAQ,oBAAK,EAAE,IAAE,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,YAAG;YACzD,GAAG,IAAI,KAAC,QAAQ,oBAAK,GAAG,IAAE,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,cAAc,YAAG;YAC7D,KAAC,KAAK,oBAAK,OAAO,IAAE,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,YAAI;YAC1C,iBAAiB;YAClB,KAAC,cAAc,kBAAC,SAAS,UAAK,IAAI,IAAE,WAAW,kBAAG;YACjD,mBAAmB;YACnB,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,gBACtC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAC7B,eAAC,cAAc,OAAK,UAAU,EAAE,GAAG,EAAE,UAAU,CAAC,IAAI,GAAI,CACzD,CAAC,YACG,CACR;YACD,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;iBACP,iBAEA,SAAS,IAAI,CACZ,KAAC,MAAM,kBACL,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAC,QAAQ,EAChB,IAAI,sBACQ,CAAC,CAAC,WAAW,CAAC,EAC1B,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,gBAErB,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,YACnB,CACV;oBACA,cAAc,GAAG,CAAC,IAAI,CACrB,MAAC,gCAAgC,kBAC/B,QAAQ,EAAE,WAAW,CAAC,MAAM,IAAI,cAAc,EAC9C,GAAG,EAAE,mBAAmB,EACxB,QAAQ,EAAE,WAAW,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC9D,IAAI,EAAC,QAAQ,iBAEb,KAAC,MAAM,kBACL,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,WAAW,CAAC,MAAM,IAAI,cAAc,EAC9C,OAAO,EAAC,QAAQ,EAChB,IAAI,sBAEF,WAAW,CAAC,MAAM,IAAI,cAAc;oCAClC,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE,cAAc,CAAC;oCACzC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,cAAc,CAAC,EAEzC,KAAK,EAAE,CAAC,CAAC,gBAAgB,EAAE,cAAc,CAAC,gBAE1C,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,YACnB;4BACR,WAAW,CAAC,MAAM,IAAI,cAAc,IAAI,CACvC,KAAC,OAAO,kBAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,IAAK,SAAS,cAC/E,CAAC,CAAC,oBAAoB,EAAE,cAAc,CAAC,YAChC,CACX,aACgC,CACpC;oBACD,KAAC,IAAI,kBAAC,SAAS,QAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,gBAC9B,iBAAiB,YACb;oBACP,KAAC,MAAM,kBAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,gBACtC,CAAC,CAAC,MAAM,CAAC,YACH,aACJ;YACP,KAAC,OAAO,kBACN,IAAI,EAAE,eAAe,EACrB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,IAAI;qBACd;iBACF,gBAED,KAAC,WAAW,IACV,GAAG,EAAE,cAAc,EACnB,QAAQ,EAAE,KAAK,CAAC,EAAE;wBAChB,kBAAkB,CAAC,KAAK,CAAC,CAAC;wBAC1B,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,CAAC;oBACzB,CAAC,WACD,YACM,aACL,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","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  useRef,\n  useState,\n  useEffect,\n  ChangeEvent,\n  useMemo\n} 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  Text,\n  Popover,\n  useElement,\n  useI18n,\n  Option,\n  useOuterEvent,\n  ForwardProps,\n  defaultThemeProp,\n  FileUploadItem,\n  MenuButton,\n  ComboBoxProps\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, EmailUser } from './Email.types';\n\ninterface EmailUserWithSelection extends EmailUser {\n  selected?: boolean;\n}\n\nconst useEmailDataProvider: (\n  participants: EmailComposerProps['participants'],\n  defaultSelected?: string[]\n) => ComboBoxProps = (participants, defaultSelected = []) => {\n  const escapeChars = /[.*+\\-?^${}()|[\\]\\\\]/g;\n\n  const getFilterRegex = (inputValue: string) => {\n    return new RegExp(`^${inputValue.replace(escapeChars, '\\\\$&')}`, 'i');\n  };\n\n  const [emailUsers, setEmailUsers] = useState<EmailUserWithSelection[]>(\n    participants.map((participant: EmailUser) => {\n      return {\n        ...(participant as EmailUser),\n        selected: defaultSelected.includes(participant.emailAddress)\n      };\n    }) as EmailUserWithSelection[]\n  );\n\n  const [emailFilterValue, setEmailFilterValue] = useState('');\n\n  const filterRegex = useMemo(() => getFilterRegex(emailFilterValue), [emailFilterValue]);\n\n  const emailsToRender = useMemo(() => {\n    return (\n      emailFilterValue\n        ? emailUsers.filter(({ emailAddress, fullName, shortName }) => {\n            return (\n              filterRegex.test(emailAddress) ||\n              filterRegex.test(fullName) ||\n              filterRegex.test(shortName)\n            );\n          })\n        : emailUsers\n    ).map(({ emailAddress, fullName, selected }) => {\n      return {\n        id: emailAddress,\n        primary: fullName,\n        secondary: [emailAddress],\n        selected: !!selected\n      };\n    });\n  }, [emailUsers, filterRegex]);\n\n  const selectedEmailUsers = useMemo(() => {\n    return emailUsers\n      .filter(emailAddress => emailAddress.selected)\n      .map(({ emailAddress }) => {\n        return {\n          text: emailAddress,\n          id: emailAddress\n        };\n      });\n  }, [emailUsers]);\n\n  const toggleSelectedEmailUser = (id: string) => {\n    setEmailUsers(prevEmailUsers => {\n      return prevEmailUsers.map(emailUser => {\n        if (emailUser.emailAddress === id) {\n          return {\n            ...emailUser,\n            selected: !emailUser.selected\n          };\n        }\n        return emailUser;\n      });\n    });\n  };\n\n  return {\n    value: emailFilterValue,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      setEmailFilterValue(e.target.value);\n    },\n    onBlur: () => {\n      setEmailFilterValue('');\n    },\n    menu: {\n      items: emailsToRender,\n      accent: filterRegex,\n      onItemClick: toggleSelectedEmailUser\n    },\n    selected: {\n      items: selectedEmailUsers,\n      onRemove: toggleSelectedEmailUser\n    }\n  };\n};\n\nexport const StyledEmailComposer = styled.div``;\n\nexport const StyledReplyIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledReplyIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCCButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nexport const StyledAttachmentsContainer = styled(Flex)(({ theme }) => {\n  return css`\n    margin-block-start: calc(3 * ${theme.base.spacing});\n  `;\n});\n\nStyledCCButton.defaultProps = defaultThemeProp;\n\nconst EmailComposer: FunctionComponent<EmailComposerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailComposerProps>, ref: EmailComposerProps['ref']) => {\n    const {\n      onReply,\n      onReplyAll,\n      isReplyAll,\n      participants,\n      from,\n      to,\n      cc,\n      bcc,\n      body,\n      primaryMoreFields,\n      secondaryMoreFields,\n      maxAttachments = 0,\n      attachments = [],\n      onAddAttachment,\n      showEmoji,\n      onEmojiSelect,\n      onCancel,\n      onSend,\n      footerMoreActions,\n      templates,\n      ...restProps\n    } = props;\n\n    const [subject, setSubject] = useState(props.subject);\n\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const [showCC, setShowCC] = useState(false);\n    const [showBCC, setShowBCC] = useState(false);\n    const [selectedTemplate, setSelectedTemplate] = useState('');\n\n    const toEmailAddresses = useEmailDataProvider(participants, to);\n    const ccEmailAddresses = useEmailDataProvider(participants, cc);\n    const bccEmailAddresses = useEmailDataProvider(participants, bcc);\n\n    const children =\n      templates && Object.keys(templates).map(option => <Option key={option}>{option}</Option>);\n\n    const header = subject || props.header;\n\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 onSubjectChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setSubject(e.target.value);\n    };\n\n    const onTemplateChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      setSelectedTemplate(e.target.value);\n    };\n\n    const rteRef: any = body?.ref;\n\n    useEffect(() => {\n      return (\n        templates?.[selectedTemplate] && rteRef?.current?.insertText(templates?.[selectedTemplate])\n      );\n    }, [selectedTemplate]);\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        as={StyledEmailComposer}\n        ref={ref}\n        {...restProps}\n        container={{\n          gap: 2,\n          direction: 'column'\n        }}\n      >\n        <Text variant='h4' aria-label={`${t('email_header')} ${header}`}>\n          {header}\n        </Text>\n        <div>\n          <MenuButton\n            text={isReplyAll ? t('reply_all') : t('reply')}\n            variant='link'\n            icon={isReplyAll ? 'reply-all' : 'reply'}\n            menu={{\n              items: [\n                {\n                  primary: t('reply_all'),\n                  id: 'reply all',\n                  visual: <StyledReplyIcon name='reply-all' />,\n                  onClick: onReplyAll\n                },\n                {\n                  primary: t('reply'),\n                  id: 'reply',\n                  visual: <StyledReplyIcon name='reply' />,\n                  onClick: onReply\n                }\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            {to && <ComboBox {...toEmailAddresses} label={t('to')} mode='multi-select' required />}\n          </Flex>\n          {!showCC && (\n            <span>\n              <StyledCCButton variant='simple' onClick={() => setShowCC(true)} icon>\n                {t('cc')}\n              </StyledCCButton>\n            </span>\n          )}\n          {!showBCC && (\n            <span>\n              <StyledCCButton variant='simple' onClick={() => setShowBCC(true)} icon>\n                {t('bcc')}\n              </StyledCCButton>\n            </span>\n          )}\n        </Flex>\n        {showCC && <ComboBox {...ccEmailAddresses} label={t('cc')} mode='multi-select' />}\n        {showBCC && <ComboBox {...bccEmailAddresses} label={t('bcc')} mode='multi-select' />}\n\n        <Input value={subject} onChange={onSubjectChange} label={t('subject')} />\n\n        <Select onChange={onTemplateChange} label={t('auto_reply')} value={selectedTemplate}>\n          <>\n            <Option>{t('insert')}</Option>\n            {children}\n          </>\n        </Select>\n        {primaryMoreFields}\n        <RichTextEditor\n          autoFocus\n          {...body}\n          defaultValue={selectedTemplate}\n          labelHidden\n          label={t('email_message')}\n        />\n        {secondaryMoreFields}\n        {attachments.length > 0 && (\n          <StyledAttachmentsContainer container={{ gap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} />\n            ))}\n          </StyledAttachmentsContainer>\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={attachments.length < maxAttachments ? onAddAttachment : undefined}\n                variant='link'\n                label={\n                  attachments.length >= maxAttachments\n                    ? t('disable_attachment', maxAttachments)\n                    : t('add_attachment', maxAttachments)\n                }\n              >\n                <Icon name='paper-clip' /> {t('attach')}\n              </Button>\n            )}\n            {showEmoji && (\n              <Button\n                ref={setEmojiBtnEl}\n                onClick={toggleEmoji}\n                variant='simple'\n                icon\n                label={t('add_emoji')}\n              >\n                <Icon name='face-happy' />\n              </Button>\n            )}\n            <Button variant='primary' onClick={onSend}>\n              {t('send')}\n            </Button>\n          </Flex>\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"]}

package/lib/components/Email/EmailConversation.js

@@ -157,29 +157,19 @@ const EmailConversation = forwardRef((props, ref) => {
         }
         return recipientElements;
     }, [to]);
-    return (_jsxs(StyledEmailConversation, Object.assign({}, restProps, { id: id, ref: ref }, { children: [_jsxs(Flex, Object.assign({ 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, Object.assign({ container: {
+    return (_jsxs(StyledEmailConversation, Object.assign({}, restProps, { id: id, ref: ref }, { children: [_jsxs(Flex, Object.assign({ 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, Object.assign({ container: {
                             wrap: 'nowrap',
                             alignItems: 'start',
                             direction: 'column'
                         }, item: {
                             grow: 1,
                             shrink: 1
-                        } }, { children: [_jsx(Text, Object.assign({ variant: 'primary', as: StyledEmailParticipantsText }, { children: `${isForwarded ? 'FW' : t('from')}: ${from.fullName}` }), void 0),
-                            _jsxs(Text, Object.assign({ variant: 'secondary', as: StyledEmailParticipantsText }, { children: [`${t('to')}: `,
-                                    generateRecipientList] }), void 0),
-                            !isSmallOrAbove && (_jsxs(Text, Object.assign({ 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, Object.assign({ container: {
+                        } }, { children: [_jsx(Text, Object.assign({ variant: 'primary', as: StyledEmailParticipantsText }, { children: `${isForwarded ? 'FW' : t('from')}: ${from.fullName}` }), void 0), _jsxs(Text, Object.assign({ variant: 'secondary', as: StyledEmailParticipantsText }, { children: [`${t('to')}: `, generateRecipientList] }), void 0), !isSmallOrAbove && (_jsxs(Text, Object.assign({ 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, Object.assign({ container: {
                             gap: 1,
                             alignItems: 'center'
                         }, item: {
                             shrink: 0
-                        } }, { children: isSmallOrAbove && (_jsxs(Text, Object.assign({ 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, 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, Object.assign({ 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, 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 &&
                         emails.map(email => {
                             return _jsx(StyledEmailInConversation, Object.assign({}, email), email.id);
                         })] }), void 0)] }), void 0));

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

@@ -1 +1 @@
-{"version":3,"file":"EmailConversation.js","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport {\n  ExpandCollapse,\n  Flex,\n  Icon,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  useAfterInitialEffect,\n  DateTimeDisplay,\n  readableHue,\n  useBreakpoint,\n  useConfiguration,\n  StyledIcon,\n  tryCatch,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nimport Email from './Email';\nimport { EmailConversationProps } from './Email.types';\n\nconst EmailParticipantTextCss = css`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledEmailParticipantsText = styled(Text)`\n  ${EmailParticipantTextCss}\n  color: ${props => props.theme.base.palette['foreground-color']};\n`;\n\nStyledEmailParticipantsText.defaultProps = defaultThemeProp;\n\nexport const StyledCompactTimeStampDisplay = styled(Text)`\n  ${EmailParticipantTextCss}\n  margin-top: calc(${props => props.theme.base.spacing} / 2);\n`;\nStyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledConversationHeader = styled.header<{ collapsed: boolean }>(\n  ({ theme, collapsed }) => {\n    return css`\n      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${theme.base.palette['border-line']};\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    `;\n  }\n);\nStyledConversationHeader.defaultProps = defaultThemeProp;\n\nexport const StyledUnReadCount = styled.div(({ theme: { base } }) => {\n  const readableBackground = readableHue(\n    base.palette['brand-primary'],\n    base.palette['primary-background']\n  );\n  const readableTextColor = readableColor(readableBackground);\n\n  return css`\n    align-self: flex-start;\n    background-color: ${readableBackground};\n    color: ${readableTextColor};\n    padding: 0 ${base.spacing};\n    font-weight: ${base['font-weight']['semi-bold']};\n\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    width: fit-content;\n    width: -moz-fit-content;\n\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  `;\n});\n\nStyledUnReadCount.defaultProps = defaultThemeProp;\n\nexport const StyledEmailConversation = styled.li(({ theme: { base } }) => {\n  return css`\n    margin-bottom: ${base.spacing};\n    border-radius: ${base['border-radius']};\n    overflow: hidden;\n    background-color: ${base.palette['primary-background']};\n    list-style-type: none;\n  `;\n});\nStyledEmailConversation.defaultProps = defaultThemeProp;\n\nexport const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base } }) => {\n  const readableBackground = readableHue(\n    base.palette['brand-primary'],\n    base.palette['primary-background']\n  );\n  return css`\n    padding: calc(2 * ${base.spacing}) 0;\n    border-bottom: 0.0625rem solid ${base.palette['border-line']};\n    position: relative;\n    ${unRead &&\n    css`\n      &::before {\n        content: '';\n        background-color: ${readableBackground};\n        position: absolute;\n        inset: 0;\n        height: calc(100% + 0.0625rem);\n        top: -0.0625rem;\n        width: 0.125rem;\n      }\n    `}\n  `;\n});\nStyledEmailInConversation.defaultProps = defaultThemeProp;\n\nconst StyledForwardIcon = styled.svg(({ theme }) => {\n  const readableStrokeColor = readableHue(\n    theme.base.colors.purple.medium,\n    theme.base.palette['primary-background']\n  );\n  return css`\n    color: ${readableStrokeColor};\n  `;\n});\nStyledForwardIcon.defaultProps = defaultThemeProp;\n\nconst StyledUnreadIndicator = styled.span<{ isVisible: boolean }>(({ theme, isVisible }) => {\n  const readableBackground = readableHue(\n    theme.base.palette['brand-primary'],\n    theme.base.palette['primary-background']\n  );\n\n  const diameter = '0.375rem';\n\n  return css`\n    width: ${isVisible ? diameter : 0};\n    margin: 0 ${isVisible ? 0 : '0.188rem'};\n    height: ${diameter};\n    display: inline-block;\n    border-radius: 50%;\n    background: ${readableBackground};\n    position: relative;\n    top: 0.375rem;\n    align-self: flex-start;\n  `;\n});\nStyledUnreadIndicator.defaultProps = defaultThemeProp;\n\nconst StyledConversationButton = styled.button(({ theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette['brand-primary'])\n  );\n  return css`\n    border-width: 0;\n    width: 100%;\n    padding: ${theme.base.spacing};\n    background: ${theme.base.palette['primary-background']};\n    position: sticky;\n    top: 0;\n    z-index: 1;\n\n    &[aria-expanded='true'] {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    &:focus {\n      background: ${theme.base.palette['secondary-background']};\n      outline: none;\n    }\n\n    &:hover {\n      background: ${hoverColor};\n      outline: none;\n    }\n\n    & > ${StyledIcon} {\n      align-self: flex-start;\n      color: ${theme.base.palette['foreground-color']};\n    }\n  `;\n});\n\nStyledConversationButton.defaultProps = defaultThemeProp;\n\nconst EmailConversation: FunctionComponent<EmailConversationProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailConversationProps>, ref: EmailConversationProps['ref']) => {\n    const {\n      id,\n      emails,\n      from,\n      to,\n      unReadEmailCount,\n      timeStamp,\n      isForwarded = false,\n      isCollapsed = false,\n      onCollapse,\n      onExpand,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const [collapsedState, setCollapsedState] = useState(isCollapsed);\n    useAfterInitialEffect(() => {\n      setCollapsedState(isCollapsed);\n    }, [isCollapsed]);\n    const onExpandCollapse = () => {\n      setCollapsedState(!collapsedState);\n    };\n\n    const headerRef = useRef<HTMLDivElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: headerRef });\n    const { locale } = useConfiguration();\n    const { rtl } = useDirection();\n\n    const caretDirection = rtl ? 'caret-left' : 'caret-right';\n    const generateRecipientList = useMemo(() => {\n      const recipientElements = to.slice(0, 2).map((recipient, i) => {\n        return `${recipient.shortName}${i < to.length - 1 ? ';' : ''} `;\n      });\n      if (to.length > 2) {\n        return [...recipientElements, `+${to.length - 2} more`];\n      }\n      return recipientElements;\n    }, [to]);\n\n    return (\n      <StyledEmailConversation {...restProps} id={id} ref={ref}>\n        <Flex\n          as={StyledConversationButton}\n          id={`conversation-heading${id}`}\n          aria-controls={id}\n          aria-expanded={!collapsedState}\n          container={{ gap: 1, alignItems: 'center', pad: 1 }}\n          onClick={onExpandCollapse}\n          ref={headerRef}\n        >\n          <Icon name={collapsedState ? caretDirection : 'caret-down'} />\n          <StyledUnreadIndicator isVisible={!!unReadEmailCount} />\n          <Flex\n            container={{\n              wrap: 'nowrap',\n              alignItems: 'start',\n              direction: 'column'\n            }}\n            item={{\n              grow: 1,\n              shrink: 1\n            }}\n          >\n            <Text variant='primary' as={StyledEmailParticipantsText}>\n              {`${isForwarded ? 'FW' : t('from')}: ${from.fullName}`}\n            </Text>\n            <Text variant='secondary' as={StyledEmailParticipantsText}>\n              {`${t('to')}: `}\n              {generateRecipientList}\n            </Text>\n            {!isSmallOrAbove && (\n              <Text variant='secondary' as={StyledCompactTimeStampDisplay}>\n                {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                  new Date(timeStamp)\n                )}, `}\n                <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n              </Text>\n            )}\n          </Flex>\n          <Flex\n            container={{\n              gap: 1,\n              alignItems: 'center'\n            }}\n            item={{\n              shrink: 0\n            }}\n          >\n            {isSmallOrAbove && (\n              <Text variant='secondary' as={StyledEmailParticipantsText}>\n                {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                  new Date(timeStamp)\n                )}, `}\n                <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n              </Text>\n            )}\n          </Flex>\n        </Flex>\n\n        <ExpandCollapse\n          as={Flex}\n          container={{ direction: 'column' }}\n          collapsed={collapsedState}\n          onBeforeCollapse={onCollapse}\n          onBeforeExpand={onExpand}\n          role='region'\n          aria-labelledby={`conversation-heading${id}`}\n          id={`conversation-content${id}`}\n        >\n          {!!unReadEmailCount && (\n            <Text as={StyledUnReadCount} id={`unread-emailCount-${id}`} variant='secondary'>\n              {t('n_new_emails', unReadEmailCount)}\n            </Text>\n          )}\n          {emails &&\n            emails.map(email => {\n              return <StyledEmailInConversation key={email.id} {...email} />;\n            })}\n        </ExpandCollapse>\n      </StyledEmailConversation>\n    );\n  }\n);\n\nexport default EmailConversation;\n"]}
+{"version":3,"file":"EmailConversation.js","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport {\n  ExpandCollapse,\n  Flex,\n  Icon,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  useAfterInitialEffect,\n  DateTimeDisplay,\n  readableHue,\n  useBreakpoint,\n  useConfiguration,\n  StyledIcon,\n  tryCatch,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nimport Email from './Email';\nimport { EmailConversationProps } from './Email.types';\n\nconst EmailParticipantTextCss = css`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledEmailParticipantsText = styled(Text)`\n  ${EmailParticipantTextCss}\n  color: ${props => props.theme.base.palette['foreground-color']};\n`;\n\nStyledEmailParticipantsText.defaultProps = defaultThemeProp;\n\nexport const StyledCompactTimeStampDisplay = styled(Text)`\n  ${EmailParticipantTextCss}\n  margin-top: calc(${props => props.theme.base.spacing} / 2);\n`;\nStyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledConversationHeader = styled.header<{ collapsed: boolean }>(\n  ({ theme, collapsed }) => {\n    return css`\n      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${theme.base.palette['border-line']};\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    `;\n  }\n);\nStyledConversationHeader.defaultProps = defaultThemeProp;\n\nexport const StyledUnReadCount = styled.div(({ theme: { base } }) => {\n  const readableBackground = readableHue(\n    base.palette['brand-primary'],\n    base.palette['primary-background']\n  );\n  const readableTextColor = readableColor(readableBackground);\n\n  return css`\n    align-self: flex-start;\n    background-color: ${readableBackground};\n    color: ${readableTextColor};\n    padding: 0 ${base.spacing};\n    font-weight: ${base['font-weight']['semi-bold']};\n\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    width: fit-content;\n    width: -moz-fit-content;\n\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  `;\n});\n\nStyledUnReadCount.defaultProps = defaultThemeProp;\n\nexport const StyledEmailConversation = styled.li(({ theme: { base } }) => {\n  return css`\n    margin-bottom: ${base.spacing};\n    border-radius: ${base['border-radius']};\n    overflow: hidden;\n    background-color: ${base.palette['primary-background']};\n    list-style-type: none;\n  `;\n});\nStyledEmailConversation.defaultProps = defaultThemeProp;\n\nexport const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base } }) => {\n  const readableBackground = readableHue(\n    base.palette['brand-primary'],\n    base.palette['primary-background']\n  );\n  return css`\n    padding: calc(2 * ${base.spacing}) 0;\n    border-bottom: 0.0625rem solid ${base.palette['border-line']};\n    position: relative;\n    ${unRead &&\n    css`\n      &::before {\n        content: '';\n        background-color: ${readableBackground};\n        position: absolute;\n        inset: 0;\n        height: calc(100% + 0.0625rem);\n        top: -0.0625rem;\n        width: 0.125rem;\n      }\n    `}\n  `;\n});\nStyledEmailInConversation.defaultProps = defaultThemeProp;\n\nconst StyledForwardIcon = styled.svg(({ theme }) => {\n  const readableStrokeColor = readableHue(\n    theme.base.colors.purple.medium,\n    theme.base.palette['primary-background']\n  );\n  return css`\n    color: ${readableStrokeColor};\n  `;\n});\nStyledForwardIcon.defaultProps = defaultThemeProp;\n\nconst StyledUnreadIndicator = styled.span<{ isVisible: boolean }>(({ theme, isVisible }) => {\n  const readableBackground = readableHue(\n    theme.base.palette['brand-primary'],\n    theme.base.palette['primary-background']\n  );\n\n  const diameter = '0.375rem';\n\n  return css`\n    width: ${isVisible ? diameter : 0};\n    margin: 0 ${isVisible ? 0 : '0.188rem'};\n    height: ${diameter};\n    display: inline-block;\n    border-radius: 50%;\n    background: ${readableBackground};\n    position: relative;\n    top: 0.375rem;\n    align-self: flex-start;\n  `;\n});\nStyledUnreadIndicator.defaultProps = defaultThemeProp;\n\nconst StyledConversationButton = styled.button(({ theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette['brand-primary'])\n  );\n  return css`\n    border-width: 0;\n    width: 100%;\n    padding: ${theme.base.spacing};\n    background: ${theme.base.palette['primary-background']};\n    position: sticky;\n    top: 0;\n    z-index: 1;\n\n    &[aria-expanded='true'] {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    &:focus {\n      background: ${theme.base.palette['secondary-background']};\n      outline: none;\n    }\n\n    &:hover {\n      background: ${hoverColor};\n      outline: none;\n    }\n\n    & > ${StyledIcon} {\n      align-self: flex-start;\n      color: ${theme.base.palette['foreground-color']};\n    }\n  `;\n});\n\nStyledConversationButton.defaultProps = defaultThemeProp;\n\nconst EmailConversation: FunctionComponent<EmailConversationProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailConversationProps>, ref: EmailConversationProps['ref']) => {\n    const {\n      id,\n      emails,\n      from,\n      to,\n      unReadEmailCount,\n      timeStamp,\n      isForwarded = false,\n      isCollapsed = false,\n      onCollapse,\n      onExpand,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const [collapsedState, setCollapsedState] = useState(isCollapsed);\n    useAfterInitialEffect(() => {\n      setCollapsedState(isCollapsed);\n    }, [isCollapsed]);\n    const onExpandCollapse = () => {\n      setCollapsedState(!collapsedState);\n    };\n\n    const headerRef = useRef<HTMLDivElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: headerRef });\n    const { locale } = useConfiguration();\n    const { rtl } = useDirection();\n\n    const caretDirection = rtl ? 'caret-left' : 'caret-right';\n    const generateRecipientList = useMemo(() => {\n      const recipientElements = to.slice(0, 2).map((recipient, i) => {\n        return `${recipient.shortName}${i < to.length - 1 ? ';' : ''} `;\n      });\n      if (to.length > 2) {\n        return [...recipientElements, `+${to.length - 2} more`];\n      }\n      return recipientElements;\n    }, [to]);\n\n    return (\n      <StyledEmailConversation {...restProps} id={id} ref={ref}>\n        <Flex\n          as={StyledConversationButton}\n          id={`conversation-heading${id}`}\n          aria-controls={id}\n          aria-expanded={!collapsedState}\n          container={{ gap: 1, alignItems: 'center', pad: 1 }}\n          onClick={onExpandCollapse}\n          ref={headerRef}\n        >\n          <Icon name={collapsedState ? caretDirection : 'caret-down'} />\n          <StyledUnreadIndicator isVisible={!!unReadEmailCount} />\n          <Flex\n            container={{\n              wrap: 'nowrap',\n              alignItems: 'start',\n              direction: 'column'\n            }}\n            item={{\n              grow: 1,\n              shrink: 1\n            }}\n          >\n            <Text variant='primary' as={StyledEmailParticipantsText}>\n              {`${isForwarded ? 'FW' : t('from')}: ${from.fullName}`}\n            </Text>\n            <Text variant='secondary' as={StyledEmailParticipantsText}>\n              {`${t('to')}: `}\n              {generateRecipientList}\n            </Text>\n            {!isSmallOrAbove && (\n              <Text variant='secondary' as={StyledCompactTimeStampDisplay}>\n                {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                  new Date(timeStamp)\n                )}, `}\n                <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n              </Text>\n            )}\n          </Flex>\n          <Flex\n            container={{\n              gap: 1,\n              alignItems: 'center'\n            }}\n            item={{\n              shrink: 0\n            }}\n          >\n            {isSmallOrAbove && (\n              <Text variant='secondary' as={StyledEmailParticipantsText}>\n                {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                  new Date(timeStamp)\n                )}, `}\n                <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n              </Text>\n            )}\n          </Flex>\n        </Flex>\n\n        <ExpandCollapse\n          as={Flex}\n          container={{ direction: 'column' }}\n          collapsed={collapsedState}\n          onBeforeCollapse={onCollapse}\n          onBeforeExpand={onExpand}\n          role='region'\n          aria-labelledby={`conversation-heading${id}`}\n          id={`conversation-content${id}`}\n        >\n          {!!unReadEmailCount && (\n            <Text as={StyledUnReadCount} id={`unread-emailCount-${id}`} variant='secondary'>\n              {t('n_new_emails', unReadEmailCount)}\n            </Text>\n          )}\n          {emails &&\n            emails.map(email => {\n              return <StyledEmailInConversation key={email.id} {...email} />;\n            })}\n        </ExpandCollapse>\n      </StyledEmailConversation>\n    );\n  }\n);\n\nexport default EmailConversation;\n"]}

package/lib/components/Email/EmailEntity.js

@@ -23,8 +23,7 @@ StyledEmailEntity.defaultProps = defaultThemeProp;
 const EmailEntity = forwardRef(({ entity, ...restProps }, ref) => {
     const [el, setEl] = useElement();
     const elementRef = useConsolidatedRef(setEl, ref);
-    return (_jsxs(StyledEmailEntity, Object.assign({}, restProps, { entity: entity, ref: elementRef, "aria-label": `${entity.entityName}=${entity.entityValue}` }, { children: [entity.entityValue,
-            _jsx(Tooltip, Object.assign({ target: el }, { children: `${entity.entityName}=${entity.entityValue}` }), void 0)] }), void 0));
+    return (_jsxs(StyledEmailEntity, Object.assign({}, restProps, { entity: entity, ref: elementRef, "aria-label": `${entity.entityName}=${entity.entityValue}` }, { children: [entity.entityValue, _jsx(Tooltip, Object.assign({ target: el }, { children: `${entity.entityName}=${entity.entityValue}` }), void 0)] }), void 0));
 });
 export default EmailEntity;
 //# sourceMappingURL=EmailEntity.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmailEntity.js","sourceRoot":"","sources":["../../../src/components/Email/EmailEntity.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAGL,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAO7D,MAAM,kBAAkB,GAAG,CAAC,OAAe,EAAE,eAAuB,EAAE,EAAE;IACtE,OAAO,WAAW,CAChB,2BAA2B,CAAC,OAAO,GAAG,2BAA2B,CAAC,MAAM,CAAC,EACzE,eAAe,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,eAAuB,EAAE,EAAE;IAChE,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACjE,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,MAAM,eAAe,GAAG,kBAAkB,CACxC,MAAM,CAAC,aAAa,EACpB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC/F,OAAO,GAAG,CAAA;wBACY,eAAe;aAC1B,SAAS;GACnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAqC,EAAE,GAA4B,EAAE,EAAE;IAC5F,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9C,MAAM,UAAU,GAAG,kBAAkB,CAAc,KAAK,EAAE,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,iBAAiB,oBACZ,SAAS,IACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,gBACH,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,WAAW,EAAE,iBAEvD,MAAM,CAAC,WAAW;YACnB,KAAC,OAAO,kBAAC,MAAM,EAAE,EAAE,gBAAG,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,WAAW,EAAE,YAAW,aAC3D,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  Tooltip,\n  tryCatch,\n  useConsolidatedRef,\n  useElement,\n  readableHue,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport { EntityHighlightMapping } from './Email.types';\nimport { EmailEntityBackgroundColors } from './Email.styles';\n\nexport interface EmailEntityProps extends BaseProps {\n  entity: EntityHighlightMapping;\n  ref?: Ref<HTMLElement>;\n}\n\nconst getBackgroundColor = (variant: number, backgroundColor: string) => {\n  return readableHue(\n    EmailEntityBackgroundColors[variant % EmailEntityBackgroundColors.length],\n    backgroundColor\n  );\n};\n\nconst getTextColor = (variant: number, backgroundColor: string) => {\n  const entityColor = getBackgroundColor(variant, backgroundColor);\n  return tryCatch(() => readableColor(entityColor));\n};\n\nconst StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n  const backgroundColor = getBackgroundColor(\n    entity.entityVariant,\n    theme.base.palette['primary-background']\n  );\n  const textColor = getTextColor(entity.entityVariant, theme.base.palette['primary-background']);\n  return css`\n    background-color: ${backgroundColor};\n    color: ${textColor};\n  `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\n\nconst EmailEntity: FunctionComponent<EmailEntityProps & ForwardProps> = forwardRef(\n  ({ entity, ...restProps }: PropsWithoutRef<EmailEntityProps>, ref: EmailEntityProps['ref']) => {\n    const [el, setEl] = useElement<HTMLElement>();\n    const elementRef = useConsolidatedRef<HTMLElement>(setEl, ref);\n\n    return (\n      <StyledEmailEntity\n        {...restProps}\n        entity={entity}\n        ref={elementRef}\n        aria-label={`${entity.entityName}=${entity.entityValue}`}\n      >\n        {entity.entityValue}\n        <Tooltip target={el}>{`${entity.entityName}=${entity.entityValue}`}</Tooltip>\n      </StyledEmailEntity>\n    );\n  }\n);\n\nexport default EmailEntity;\n"]}
+{"version":3,"file":"EmailEntity.js","sourceRoot":"","sources":["../../../src/components/Email/EmailEntity.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAGL,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAO7D,MAAM,kBAAkB,GAAG,CAAC,OAAe,EAAE,eAAuB,EAAE,EAAE;IACtE,OAAO,WAAW,CAChB,2BAA2B,CAAC,OAAO,GAAG,2BAA2B,CAAC,MAAM,CAAC,EACzE,eAAe,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,eAAuB,EAAE,EAAE;IAChE,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACjE,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,MAAM,eAAe,GAAG,kBAAkB,CACxC,MAAM,CAAC,aAAa,EACpB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC/F,OAAO,GAAG,CAAA;wBACY,eAAe;aAC1B,SAAS;GACnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAqC,EAAE,GAA4B,EAAE,EAAE;IAC5F,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9C,MAAM,UAAU,GAAG,kBAAkB,CAAc,KAAK,EAAE,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,iBAAiB,oBACZ,SAAS,IACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,gBACH,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,WAAW,EAAE,iBAEvD,MAAM,CAAC,WAAW,EACnB,KAAC,OAAO,kBAAC,MAAM,EAAE,EAAE,gBAAG,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,WAAW,EAAE,YAAW,aAC3D,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  Tooltip,\n  tryCatch,\n  useConsolidatedRef,\n  useElement,\n  readableHue,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport { EntityHighlightMapping } from './Email.types';\nimport { EmailEntityBackgroundColors } from './Email.styles';\n\nexport interface EmailEntityProps extends BaseProps {\n  entity: EntityHighlightMapping;\n  ref?: Ref<HTMLElement>;\n}\n\nconst getBackgroundColor = (variant: number, backgroundColor: string) => {\n  return readableHue(\n    EmailEntityBackgroundColors[variant % EmailEntityBackgroundColors.length],\n    backgroundColor\n  );\n};\n\nconst getTextColor = (variant: number, backgroundColor: string) => {\n  const entityColor = getBackgroundColor(variant, backgroundColor);\n  return tryCatch(() => readableColor(entityColor));\n};\n\nconst StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n  const backgroundColor = getBackgroundColor(\n    entity.entityVariant,\n    theme.base.palette['primary-background']\n  );\n  const textColor = getTextColor(entity.entityVariant, theme.base.palette['primary-background']);\n  return css`\n    background-color: ${backgroundColor};\n    color: ${textColor};\n  `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\n\nconst EmailEntity: FunctionComponent<EmailEntityProps & ForwardProps> = forwardRef(\n  ({ entity, ...restProps }: PropsWithoutRef<EmailEntityProps>, ref: EmailEntityProps['ref']) => {\n    const [el, setEl] = useElement<HTMLElement>();\n    const elementRef = useConsolidatedRef<HTMLElement>(setEl, ref);\n\n    return (\n      <StyledEmailEntity\n        {...restProps}\n        entity={entity}\n        ref={elementRef}\n        aria-label={`${entity.entityName}=${entity.entityValue}`}\n      >\n        {entity.entityValue}\n        <Tooltip target={el}>{`${entity.entityName}=${entity.entityValue}`}</Tooltip>\n      </StyledEmailEntity>\n    );\n  }\n);\n\nexport default EmailEntity;\n"]}

package/lib/components/Email/EmailShell.js

@@ -25,22 +25,20 @@ const EmailShell = forwardRef((props, ref) => {
     const t = useI18n();
     const [activeIndex, setActiveIndex] = useState(0);
     const multiConversation = autoCollapse
-        ? conversations === null || conversations === void 0 ? void 0 : conversations.map((conversation, index) => {
+        ? conversations?.map((conversation, index) => {
             const { onExpand, isCollapsed, ...rest } = conversation;
-            const collapsed = !(index === activeIndex);
+            const collapsed = index !== activeIndex;
             return (_jsx(EmailConversation, Object.assign({ onExpand: () => {
                     setActiveIndex(index);
                     if (onExpand)
                         onExpand();
                 }, isCollapsed: collapsed }, rest), void 0));
         })
-        : conversations === null || conversations === void 0 ? void 0 : conversations.map(conversation => {
+        : conversations?.map(conversation => {
             return _jsx(EmailConversation, Object.assign({}, conversation), void 0);
         });
-    const singleConversation = conversations === null || conversations === void 0 ? void 0 : conversations.map(conversation => {
-        var _a;
-        return (_jsxs(StyledEmailConversation, { children: [!!conversation.unReadEmailCount && (_jsx(Text, Object.assign({ as: StyledUnReadCount, variant: 'secondary' }, { children: t('n_new_emails', conversation.unReadEmailCount) }), void 0)),
-                (_a = conversation === null || conversation === void 0 ? void 0 : conversation.emails) === null || _a === void 0 ? void 0 : _a.map(email => {
+    const singleConversation = conversations?.map(conversation => {
+        return (_jsxs(StyledEmailConversation, { children: [!!conversation.unReadEmailCount && (_jsx(Text, Object.assign({ as: StyledUnReadCount, variant: 'secondary' }, { children: t('n_new_emails', conversation.unReadEmailCount) }), void 0)), conversation?.emails?.map(email => {
                     return _jsx(StyledEmailInConversation, Object.assign({}, email), void 0);
                 })] }, void 0));
     });
@@ -48,10 +46,7 @@ const EmailShell = forwardRef((props, ref) => {
                     alignItems: 'center',
                     justify: 'between',
                     pad: 1
-                }, as: StyledEmailHeader }, { children: [_jsxs(Flex, Object.assign({ container: { gap: 1, alignItems: 'center' } }, { children: [_jsx(Icon, { name: 'mail' }, void 0),
-                            _jsx(Text, Object.assign({ variant: 'h3' }, { children: (headerProps === null || headerProps === void 0 ? void 0 : headerProps.subject) ? `${t('subject')}: ${headerProps === null || headerProps === void 0 ? void 0 : headerProps.subject} ` : t('email') }), void 0)] }), void 0),
-                    headerProps === null || headerProps === void 0 ? void 0 : headerProps.actions] }), void 0)),
-            _jsx(StyledEmailConversationList, Object.assign({ "aria-multiselectable": !autoCollapse }, { children: conversations && (conversations === null || conversations === void 0 ? void 0 : conversations.length) === 1 ? singleConversation : multiConversation }), void 0)] }), void 0));
+                }, as: StyledEmailHeader }, { children: [_jsxs(Flex, Object.assign({ container: { gap: 1, alignItems: 'center' } }, { children: [_jsx(Icon, { name: 'mail' }, void 0), _jsx(Text, Object.assign({ variant: 'h3' }, { children: headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email') }), void 0)] }), void 0), headerProps?.actions] }), void 0)), _jsx(StyledEmailConversationList, Object.assign({ "aria-multiselectable": !autoCollapse }, { children: conversations && conversations?.length === 1 ? singleConversation : multiConversation }), void 0)] }), void 0));
 });
 export default EmailShell;
 //# sourceMappingURL=EmailShell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmailShell.js","sourceRoot":"","sources":["../../../src/components/Email/EmailShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, ForwardProps, Icon, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport { EmailShellProps } from './Email.types';\nimport EmailConversation, {\n  StyledEmailConversation,\n  StyledEmailInConversation,\n  StyledUnReadCount\n} from './EmailConversation';\n\nexport const StyledEmailHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps>(props => {\n  const { theme } = props;\n  return css`\n    height: 100%;\n    > ${StyledEmailHeader} {\n      padding: ${theme.base.spacing} 0;\n    }\n    > ${StyledEmailConversationList} {\n      height: 100%;\n      overflow-y: auto;\n      list-style-type: none;\n    }\n  `;\n});\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nconst EmailShell: FunctionComponent<EmailShellProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailShellProps>, ref: EmailShellProps['ref']) => {\n    const { conversations, headerProps, autoCollapse = false, ...restProps } = props;\n\n    const t = useI18n();\n\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    const multiConversation = autoCollapse\n      ? conversations?.map((conversation, index) => {\n          const { onExpand, isCollapsed, ...rest } = conversation;\n          const collapsed = !(index === activeIndex);\n          return (\n            <EmailConversation\n              onExpand={() => {\n                setActiveIndex(index);\n                if (onExpand) onExpand();\n              }}\n              isCollapsed={collapsed}\n              {...rest}\n            />\n          );\n        })\n      : conversations?.map(conversation => {\n          return <EmailConversation {...conversation} />;\n        });\n\n    const singleConversation = conversations?.map(conversation => {\n      return (\n        <StyledEmailConversation>\n          {!!conversation.unReadEmailCount && (\n            <Text as={StyledUnReadCount} variant='secondary'>\n              {t('n_new_emails', conversation.unReadEmailCount)}\n            </Text>\n          )}\n          {conversation?.emails?.map(email => {\n            return <StyledEmailInConversation {...email} />;\n          })}\n        </StyledEmailConversation>\n      );\n    });\n\n    return (\n      <Flex as={StyledEmailShell} container={{ direction: 'column' }} ref={ref} {...restProps}>\n        {headerProps && (\n          <Flex\n            container={{\n              alignItems: 'center',\n              justify: 'between',\n              pad: 1\n            }}\n            as={StyledEmailHeader}\n          >\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='mail' />\n              <Text variant='h3'>\n                {headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email')}\n              </Text>\n            </Flex>\n            {headerProps?.actions}\n          </Flex>\n        )}\n        <StyledEmailConversationList aria-multiselectable={!autoCollapse}>\n          {conversations && conversations?.length === 1 ? singleConversation : multiConversation}\n        </StyledEmailConversationList>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailShell;\n"]}
+{"version":3,"file":"EmailShell.js","sourceRoot":"","sources":["../../../src/components/Email/EmailShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, ForwardProps, Icon, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport { EmailShellProps } from './Email.types';\nimport EmailConversation, {\n  StyledEmailConversation,\n  StyledEmailInConversation,\n  StyledUnReadCount\n} from './EmailConversation';\n\nexport const StyledEmailHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps>(props => {\n  const { theme } = props;\n  return css`\n    height: 100%;\n    > ${StyledEmailHeader} {\n      padding: ${theme.base.spacing} 0;\n    }\n    > ${StyledEmailConversationList} {\n      height: 100%;\n      overflow-y: auto;\n      list-style-type: none;\n    }\n  `;\n});\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nconst EmailShell: FunctionComponent<EmailShellProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailShellProps>, ref: EmailShellProps['ref']) => {\n    const { conversations, headerProps, autoCollapse = false, ...restProps } = props;\n\n    const t = useI18n();\n\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    const multiConversation = autoCollapse\n      ? conversations?.map((conversation, index) => {\n          const { onExpand, isCollapsed, ...rest } = conversation;\n          const collapsed = index !== activeIndex;\n          return (\n            <EmailConversation\n              onExpand={() => {\n                setActiveIndex(index);\n                if (onExpand) onExpand();\n              }}\n              isCollapsed={collapsed}\n              {...rest}\n            />\n          );\n        })\n      : conversations?.map(conversation => {\n          return <EmailConversation {...conversation} />;\n        });\n\n    const singleConversation = conversations?.map(conversation => {\n      return (\n        <StyledEmailConversation>\n          {!!conversation.unReadEmailCount && (\n            <Text as={StyledUnReadCount} variant='secondary'>\n              {t('n_new_emails', conversation.unReadEmailCount)}\n            </Text>\n          )}\n          {conversation?.emails?.map(email => {\n            return <StyledEmailInConversation {...email} />;\n          })}\n        </StyledEmailConversation>\n      );\n    });\n\n    return (\n      <Flex as={StyledEmailShell} container={{ direction: 'column' }} ref={ref} {...restProps}>\n        {headerProps && (\n          <Flex\n            container={{\n              alignItems: 'center',\n              justify: 'between',\n              pad: 1\n            }}\n            as={StyledEmailHeader}\n          >\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='mail' />\n              <Text variant='h3'>\n                {headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email')}\n              </Text>\n            </Flex>\n            {headerProps?.actions}\n          </Flex>\n        )}\n        <StyledEmailConversationList aria-multiselectable={!autoCollapse}>\n          {conversations && conversations?.length === 1 ? singleConversation : multiConversation}\n        </StyledEmailConversationList>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailShell;\n"]}

package/lib/components/Email/EmailSummaryItem.js

@@ -55,7 +55,7 @@ export const StyledEmailSummaryItem = styled.button(({ theme }) => {
     }
 
     &[aria-selected='true'],
-    &[aria-current='true'] {
+    &[data-current='true'] {
       background-color: ${theme.base.palette['secondary-background']};
     }
 
@@ -85,13 +85,9 @@ const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, messag
         }
         return participants;
     }, [activeParticipants]);
-    return (_jsxs(BareButton, Object.assign({ as: StyledEmailSummaryItem, ref: ref }, restProps, { id: id, onClick: onClick, active: active, "aria-selected": active, "aria-label": `${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment === null || sentiment === void 0 ? void 0 : sentiment.variant} ${t('priority')} ${urgency}`, tabIndex: -1 }, { children: [_jsxs(StyledParticipants, Object.assign({ unreadEmailCount: unreadEmailCount, container: { justify: 'between' } }, { children: [_jsx(Text, Object.assign({ variant: typeof unreadEmailCount === 'number' && unreadEmailCount > 0 ? 'h4' : 'primary' }, { children: emailParticipants }), void 0),
-                    typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, Object.assign({ variant: 'default' }, { children: unreadEmailCount }), void 0))] }), void 0),
-            _jsxs(Flex, Object.assign({ container: {
+    return (_jsxs(BareButton, Object.assign({ as: StyledEmailSummaryItem, ref: ref }, restProps, { id: id, onClick: onClick, active: active, "aria-selected": active, "aria-label": `${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: -1 }, { children: [_jsxs(StyledParticipants, Object.assign({ unreadEmailCount: unreadEmailCount, container: { justify: 'between' } }, { children: [_jsx(Text, Object.assign({ variant: typeof unreadEmailCount === 'number' && unreadEmailCount > 0 ? 'h4' : 'primary' }, { children: emailParticipants }), void 0), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, Object.assign({ variant: 'default' }, { children: unreadEmailCount }), void 0))] }), void 0), _jsxs(Flex, Object.assign({ container: {
                     justify: 'between'
-                }, as: StyledMessageAndDate }, { children: [_jsx(StyledMessage, Object.assign({ unreadEmailCount: unreadEmailCount }, { children: message }), void 0),
-                    _jsx(DateTimeDisplay, { value: timeStamp, variant: 'date', format: 'short' }, void 0)] }), void 0),
-            _jsx(MetaList, { items: items }, void 0)] }), void 0));
+                }, as: StyledMessageAndDate }, { children: [_jsx(StyledMessage, Object.assign({ unreadEmailCount: unreadEmailCount }, { children: message }), void 0), _jsx(DateTimeDisplay, { value: timeStamp, variant: 'date', format: 'short' }, void 0)] }), void 0), _jsx(MetaList, { items: items }, void 0)] }), void 0));
 });
 export default EmailSummaryItem;
 //# sourceMappingURL=EmailSummaryItem.js.map