@pega/cosmos-react-social 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/Email/EmailComposer.js

@@ -1,9 +1,9 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useMemo, useRef, useImperativeHandle, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { stripUnit } from 'polished';
-import { Button, Flex, Icon, registerIcon, useI18n, Option, defaultThemeProp, FileUploadItem, MenuButton, Select, Input, useUID, Modal, useModalManager, useModalContext, Grid } from '@pega/cosmos-react-core';
+import { Button, Flex, Icon, registerIcon, useI18n, defaultThemeProp, FileUploadItem, MenuButton, Input, Modal, useModalManager, useModalContext, Grid, ComboBox, menuHelpers, createStringMatcher } from '@pega/cosmos-react-core';
 import { Editor } from '@pega/cosmos-react-rte';
 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';
@@ -43,7 +43,7 @@ export const StyledModal = styled(Modal)(({ state, theme }) => {
     if (state !== 'docked')
         return;
     return css `
-    max-height: calc(100vh - ${theme.base.spacing} * 2);
+    max-height: calc(100vh - ${theme.base.spacing} * 4);
   `;
 });
 StyledModal.defaultProps = defaultThemeProp;
@@ -59,27 +59,55 @@ const editorToolbar = [
     'images',
     'links'
 ];
-const ComposerModal = ({ modalContent, actions: modalActions, progress: modalProgress, subject, onCancel }) => {
+const ComposerModal = ({ modalContent, actions: modalActions, progress: modalProgress, subject, onCancel, compose }) => {
     const { state } = useModalContext();
-    return (_jsx(StyledModal, { heading: subject.value, onRequestDismiss: () => {
+    const t = useI18n();
+    return (_jsx(StyledModal, { heading: compose ? t('compose_label') : subject.value, onRequestDismiss: () => {
             onCancel();
             return false;
         }, actions: !modalProgress ? modalActions : undefined, progress: modalProgress, state: state, children: modalContent }));
 };
-const EmailComposer = forwardRef(({ participants, onCancel, onSend, onSave, onImageAdded, externalValidator, onChange, footerMoreActions, progress = false, templates, data: { to, cc, bcc, responseType, subject, bodyContent, selectedTemplateId, attachments }, handle, ...restProps }, ref) => {
+const createEmailTemplates = (selectedTemplateId, templates = []) => {
+    return templates.map(template => {
+        return {
+            id: template.id,
+            primary: template.title,
+            items: template.templates
+                ? createEmailTemplates(selectedTemplateId, template.templates)
+                : undefined,
+            selected: template.id === selectedTemplateId
+        };
+    });
+};
+const EmailComposer = forwardRef(({ participants, senderAccounts, onCancel, onSend, onSave, onImageAdded, externalValidator, onChange, footerMoreActions, progress = false, templates, data: { to, cc, bcc, responseType, subject, bodyContent, selectedTemplateId, attachments, emailAccount }, handle, onEditorInit, ...restProps }, ref) => {
     const t = useI18n();
     const { create: createModal } = useModalManager();
     const [userCCToggleState, setUserCCToggleState] = useState(false);
     const [userBCCToggleState, setUserBCCToggleState] = useState(false);
     const [editorContent, setEditorContent] = useState('');
+    const [filterValue, setFilterValue] = useState('');
+    const filterRegex = createStringMatcher(filterValue, 'contains');
+    const compose = useMemo(() => {
+        return !!(senderAccounts && senderAccounts.length > 0);
+    }, [senderAccounts]);
+    const emailTemplatesToRender = useMemo(() => {
+        const emailTemplates = createEmailTemplates(selectedTemplateId, templates);
+        const newItems = filterValue
+            ? menuHelpers.flatten(emailTemplates).filter(({ primary }) => {
+                return filterRegex.test(primary);
+            })
+            : emailTemplates;
+        return menuHelpers.mapTree(newItems, item => ({
+            ...item,
+            selected: item.items ? undefined : item.selected
+        }));
+    }, [filterValue, selectedTemplateId, templates]);
+    const selectedEmailTemplate = useMemo(() => {
+        return menuHelpers.getSelected(emailTemplatesToRender)[0];
+    }, [emailTemplatesToRender]);
     const editorRef = useRef(null);
     const fileUploadInputRef = useRef(null);
     const modalMethods = useRef();
-    const uid = useUID();
-    const templateOptions = useMemo(() => templates &&
-        templates.map(template => {
-            return (_jsx(Option, { selected: template.id === selectedTemplateId ? 'selected' : undefined, value: template.id, children: template.title }, template.id));
-        }), [templates]);
     const responseTypeMenuData = useMemo(() => {
         const menuItems = [
             {
@@ -145,37 +173,55 @@ const EmailComposer = forwardRef(({ participants, onCancel, onSend, onSave, onIm
     }));
     const hasCC = useMemo(() => !!cc?.value?.length, [cc]);
     const hasBCC = useMemo(() => !!bcc?.value?.length, [bcc]);
-    const content = (_jsx(_Fragment, { children: _jsxs(Flex, { as: StyledEmailComposer, ...restProps, container: {
-                gap: 2,
-                direction: 'column'
-            }, progress: !!progress, ref: ref, children: [responseType && (_jsx(StyledResponseType, { text: responseTypeMenuData.selectedResponseType, variant: 'link', icon: responseTypeMenuData.selectedResponseTypeIcon, menu: {
-                        mode: 'single-select',
-                        items: responseTypeMenuData.menuItems
-                    } })), _jsxs(Flex, { container: {
-                        alignItems: 'start',
-                        gap: 0.5
-                    }, children: [_jsx(Flex, { container: {
-                                gap: 1,
-                                direction: 'column'
-                            }, item: {
-                                grow: 1
-                            }, children: _jsx(EmailSelector, { participants: participants, selectedItems: to?.value || [], label: t('to'), mode: 'multi-select', required: true, onSelectedItemChange: (selectedItems) => {
-                                    onChange('to', selectedItems);
-                                }, externalValidator: externalValidator, status: to?.error ? 'error' : undefined, info: to?.error }) }), !(userCCToggleState || hasCC) && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setUserCCToggleState(true), icon: true, children: t('cc') })), !(userBCCToggleState || hasBCC) && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setUserBCCToggleState(true), icon: true, children: t('bcc') }))] }), (userCCToggleState || hasCC) && (_jsx(EmailSelector, { participants: participants, selectedItems: cc?.value || [], label: t('cc'), mode: 'multi-select', onSelectedItemChange: (selectedItems) => onChange('cc', selectedItems), externalValidator: externalValidator, status: cc?.error ? 'error' : undefined, info: cc?.error })), (userBCCToggleState || hasBCC) && (_jsx(EmailSelector, { participants: participants, selectedItems: bcc?.value || [], label: t('bcc'), mode: 'multi-select', onSelectedItemChange: (selectedItems) => onChange('bcc', selectedItems), externalValidator: externalValidator, status: bcc?.error ? 'error' : undefined, info: bcc?.error })), _jsx(Input, { value: subject.value, onChange: (e) => onChange('subject', e.target.value), label: t('subject'), status: subject.error ? 'error' : undefined, info: subject.error }), _jsxs(Select, { onChange: e => {
-                        onChange('selectedTemplateId', e.target.value);
-                    }, label: t('auto_reply'), value: selectedTemplateId, children: [_jsx(Option, { value: '', children: t('select') }, uid), _jsx(_Fragment, { children: templateOptions })] }), _jsx(Editor, { autoFocus: true, ref: editorRef, toolbar: editorToolbar, onImageAdded: onImageAdded, labelHidden: true, label: t('email_message'), defaultValue: editorContent || bodyContent.defaultValue, 
-                    // Below rem values are derived from min 150px, max 300px minus the approx height of toolbar
-                    height: {
-                        min: stripUnit('7rem') * 16,
-                        max: stripUnit('16.5rem') * 16
-                    }, status: bodyContent.error ? 'error' : undefined, info: bodyContent.error, onChange: () => {
-                        const currentHtml = editorRef?.current?.getHtml() || '';
-                        setEditorContent(currentHtml);
-                        onChange('bodyContent', currentHtml);
-                    } }), !!attachments?.length && (_jsx(Grid, { ref: ref, container: {
-                        cols: 'repeat(auto-fill, minmax(15rem, 1fr))',
-                        gap: 1
-                    }, children: attachments?.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name, onDelete: onAttachmentDelete }))) }))] }) }));
+    const content = (_jsxs(Flex, { as: StyledEmailComposer, ...restProps, container: {
+            gap: 2,
+            direction: 'column'
+        }, progress: !!progress, ref: ref, children: [senderAccounts && senderAccounts.length > 0 && (_jsx(EmailSelector, { participants: senderAccounts, selectedItems: emailAccount ? [emailAccount.value] : [], label: t('email_account'), mode: 'single-select', required: true, onSelectedItemChange: (selectedItems) => {
+                    onChange('emailAccount', selectedItems[0]);
+                }, status: emailAccount?.error ? 'error' : undefined, info: emailAccount?.error, compose: true })), responseType && (_jsx(StyledResponseType, { text: responseTypeMenuData.selectedResponseType, variant: 'link', icon: responseTypeMenuData.selectedResponseTypeIcon, menu: {
+                    mode: 'single-select',
+                    items: responseTypeMenuData.menuItems
+                } })), _jsxs(Flex, { container: {
+                    alignItems: 'start',
+                    gap: 0.5
+                }, children: [_jsx(Flex, { container: {
+                            gap: 1,
+                            direction: 'column'
+                        }, item: {
+                            grow: 1
+                        }, children: _jsx(EmailSelector, { participants: participants, selectedItems: to?.value || [], label: t('to'), mode: 'multi-select', required: true, onSelectedItemChange: (selectedItems) => {
+                                onChange('to', selectedItems);
+                            }, externalValidator: externalValidator, status: to?.error ? 'error' : undefined, info: to?.error }) }), !(userCCToggleState || hasCC) && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setUserCCToggleState(true), icon: true, children: t('cc') })), !(userBCCToggleState || hasBCC) && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setUserBCCToggleState(true), icon: true, children: t('bcc') }))] }), (userCCToggleState || hasCC) && (_jsx(EmailSelector, { participants: participants, selectedItems: cc?.value || [], label: t('cc'), mode: 'multi-select', onSelectedItemChange: (selectedItems) => onChange('cc', selectedItems), externalValidator: externalValidator, status: cc?.error ? 'error' : undefined, info: cc?.error })), (userBCCToggleState || hasBCC) && (_jsx(EmailSelector, { participants: participants, selectedItems: bcc?.value || [], label: t('bcc'), mode: 'multi-select', onSelectedItemChange: (selectedItems) => onChange('bcc', selectedItems), externalValidator: externalValidator, status: bcc?.error ? 'error' : undefined, info: bcc?.error })), _jsx(Input, { value: subject.value, onChange: (e) => onChange('subject', e.target.value), label: t('subject'), status: subject.error ? 'error' : undefined, info: subject.error }), _jsx(ComboBox, { label: t('response_templates'), value: filterValue, mode: 'single-select', menu: {
+                    items: emailTemplatesToRender,
+                    onItemClick: (id) => {
+                        setFilterValue('');
+                        onChange('selectedTemplateId', id);
+                    },
+                    accent: filterRegex
+                }, selected: selectedEmailTemplate
+                    ? {
+                        items: {
+                            id: selectedEmailTemplate.id,
+                            text: selectedEmailTemplate.primary
+                        }
+                    }
+                    : undefined, onChange: (e) => {
+                    if (!e.target.value)
+                        onChange('selectedTemplateId', '');
+                    setFilterValue(e.target.value);
+                } }), _jsx(Editor, { autoFocus: true, ref: editorRef, toolbar: editorToolbar, onImageAdded: onImageAdded, labelHidden: true, label: t('email_message'), defaultValue: editorContent || bodyContent.defaultValue, 
+                // Below rem values are derived from min 150px, max 300px minus the approx height of toolbar
+                height: {
+                    min: stripUnit('7rem') * 16,
+                    max: stripUnit('16.5rem') * 16
+                }, status: bodyContent.error ? 'error' : undefined, info: bodyContent.error, onChange: () => {
+                    const currentHtml = editorRef?.current?.getHtml() || '';
+                    setEditorContent(currentHtml);
+                    onChange('bodyContent', currentHtml);
+                }, onInit: onEditorInit }), !!attachments?.length && (_jsx(Grid, { ref: ref, container: {
+                    cols: 'repeat(auto-fill, minmax(15rem, 1fr))',
+                    gap: 1
+                }, children: attachments?.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name, onDelete: onAttachmentDelete }))) }))] }));
     const footerContent = (_jsx(Flex, { container: {
             gap: 1,
             direction: 'column'
@@ -186,7 +232,7 @@ const EmailComposer = forwardRef(({ participants, onCancel, onSend, onSave, onIm
                             }, children: t('cancel') }), footerMoreActions] }), _jsxs(Flex, { container: true, children: [_jsx(Button, { icon: true, onClick: () => fileUploadInputRef.current?.click(), variant: 'simple', label: t('file_upload_text_multiple'), children: _jsx(Icon, { name: 'paper-clip' }) }), onSave && _jsx(Button, { onClick: onSave, children: t('save_as_draft') }), _jsx(Button, { variant: 'primary', onClick: onSend, children: t('send_label') })] }), _jsx("input", { type: 'file', style: { display: 'none' }, ref: fileUploadInputRef, onChange: onFileChange, multiple: true })] }) }));
     // Create modal on mount
     useEffect(() => {
-        modalMethods.current = createModal(ComposerModal, { modalContent: content, actions: footerContent, progress, subject, onCancel }, { minimizable: true, maximizable: true, dockable: true });
+        modalMethods.current = createModal(ComposerModal, { modalContent: content, actions: footerContent, progress, subject, onCancel, compose }, { minimizable: true, maximizable: true, dockable: true });
         return () => {
             // Will close the modal on unmount
             modalMethods.current?.dismiss();
@@ -199,7 +245,8 @@ const EmailComposer = forwardRef(({ participants, onCancel, onSend, onSave, onIm
             actions: footerContent,
             progress,
             subject,
-            onCancel
+            onCancel,
+            compose
         });
     });
     return null;

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,EACL,UAAU,EAGV,QAAQ,EAER,OAAO,EACP,MAAM,EACN,mBAAmB,EACnB,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,cAAc,EACd,UAAU,EAEV,MAAM,EACN,KAAK,EACL,MAAM,EAEN,KAAK,EAEL,eAAe,EACf,eAAe,EACf,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,MAAM,EAA4B,MAAM,wBAAwB,CAAC;AAC1E,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAG9F,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjF,OAAO,GAAG,CAAA;MACN,QAAQ;QACR,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,sBAAsB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;mCACuB,KAAK,CAAC,IAAI,CAAC,OAAO;aACxC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;CAE5C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,IAAI,KAAK,KAAK,QAAQ;QAAE,OAAO;IAE/B,OAAO,GAAG,CAAA;+BACmB,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,aAAa,GAA2B;IAC5C,gBAAgB;IAChB,OAAO;IACP,aAAa;IACb,QAAQ;IACR,OAAO;CACR,CAAC;AAEF,MAAM,aAAa,GAMd,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3F,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IAEpC,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,CAAC,KAAK,EACtB,gBAAgB,EAAE,GAAG,EAAE;YACrB,QAAQ,EAAE,CAAC;YACX,OAAO,KAAK,CAAC;QACf,CAAC,EACD,OAAO,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAClD,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,KAAK,YAEX,YAAY,GACD,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAA0C,UAAU,CACrE,CACE,EACE,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,iBAAiB,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,WAAW,EAAE,EAC1F,MAAM,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAElD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvD,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,MAAM,kBAAkB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,MAAM,EAAgB,CAAC;IAC5C,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CACH,SAAS;QACT,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACvB,OAAO,CACL,KAAC,MAAM,IACL,QAAQ,EAAE,QAAQ,CAAC,EAAE,KAAK,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAErE,KAAK,EAAE,QAAQ,CAAC,EAAE,YAEjB,QAAQ,CAAC,KAAK,IAHV,QAAQ,CAAC,EAAE,CAIT,CACV,CAAC;QACJ,CAAC,CAAC,EACJ,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,SAAS,GAAG;YAChB;gBACE,EAAE,EAAE,OAAO;gBACX,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC;gBACnB,MAAM,EAAE,KAAC,sBAAsB,IAAC,IAAI,EAAE,iBAAiB,CAAC,KAAK,GAAI;gBACjE,QAAQ,EAAE,YAAY,KAAK,OAAO;gBAClC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;gBACpC,CAAC;aACF;YACD;gBACE,EAAE,EAAE,UAAU;gBACd,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC;gBACvB,MAAM,EAAE,KAAC,sBAAsB,IAAC,IAAI,EAAE,iBAAiB,CAAC,QAAQ,GAAI;gBACpE,QAAQ,EAAE,YAAY,KAAK,UAAU;gBACrC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;gBACvC,CAAC;aACF;YACD;gBACE,EAAE,EAAE,SAAS;gBACb,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC;gBACrB,MAAM,EAAE,KAAC,sBAAsB,IAAC,IAAI,EAAE,iBAAiB,CAAC,OAAO,GAAI;gBACnE,QAAQ,EAAE,YAAY,KAAK,SAAS;gBACpC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;gBACtC,CAAC;aACF;SACF,CAAC;QACF,OAAO;YACL,SAAS;YACT,oBAAoB,EAClB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO;YACxE,wBAAwB,EACtB,CAAC,YAAY,IAAI,iBAAiB,CAAC,YAAY,CAAC,CAAC,IAAI,iBAAiB,CAAC,KAAK;SAC/E,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,kBAAkB,GAAG,CAAC,IAAiC,EAAE,EAAE;QAC/D,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACjF,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE;QACxD,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACrF,QAAQ,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;SACjF;IACH,CAAC,CAAC;IAEF,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACjC,kBAAkB,EAAE,CAAC,gBAAwB,EAAE,EAAE;YAC/C,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;YACtD,iHAAiH;YACjH,QAAQ,CAAC,aAAa,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,CAAC;QACD,WAAW,EAAE,CAAC,SAAuC,EAAE,EAAU,EAAE,EAAE;YACnE,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;YAC9C,iGAAiG;YACjG,QAAQ,CAAC,aAAa,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE;YACb,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;QACnC,CAAC;QACD,wBAAwB,EAAE,GAAG,EAAE;YAC7B,SAAS,CAAC,OAAO,EAAE,wBAAwB,EAAE,EAAE,CAAC;QAClD,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,CACd,4BACE,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,KACnB,SAAS,EACb,SAAS,EAAE;gBACT,GAAG,EAAE,CAAC;gBACN,SAAS,EAAE,QAAQ;aACpB,EACD,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,GAAG,EAAE,GAAG,aAEP,YAAY,IAAI,CACf,KAAC,kBAAkB,IACjB,IAAI,EAAE,oBAAoB,CAAC,oBAAoB,EAC/C,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,oBAAoB,CAAC,wBAAwB,EACnD,IAAI,EAAE;wBACJ,IAAI,EAAE,eAAe;wBACrB,KAAK,EAAE,oBAAoB,CAAC,SAAS;qBACtC,GACD,CACH,EAED,MAAC,IAAI,IACH,SAAS,EAAE;wBACT,UAAU,EAAE,OAAO;wBACnB,GAAG,EAAE,GAAG;qBACT,aAED,KAAC,IAAI,IACH,SAAS,EAAE;gCACT,GAAG,EAAE,CAAC;gCACN,SAAS,EAAE,QAAQ;6BACpB,EACD,IAAI,EAAE;gCACJ,IAAI,EAAE,CAAC;6BACR,YAED,KAAC,aAAa,IACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,EAAE,EAAE,KAAK,IAAI,EAAE,EAC9B,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,EACd,IAAI,EAAC,cAAc,EACnB,QAAQ,QACR,oBAAoB,EAAE,CAAC,aAAuB,EAAE,EAAE;oCAChD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;gCAChC,CAAC,EACD,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACvC,IAAI,EAAE,EAAE,EAAE,KAAK,GACf,GACG,EACN,CAAC,CAAC,iBAAiB,IAAI,KAAK,CAAC,IAAI,CAChC,KAAC,kBAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,IAAI,kBACjF,CAAC,CAAC,IAAI,CAAC,GACW,CACtB,EACA,CAAC,CAAC,kBAAkB,IAAI,MAAM,CAAC,IAAI,CAClC,KAAC,kBAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,IAAI,kBAClF,CAAC,CAAC,KAAK,CAAC,GACU,CACtB,IACI,EAEN,CAAC,iBAAiB,IAAI,KAAK,CAAC,IAAI,CAC/B,KAAC,aAAa,IACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,EAAE,EAAE,KAAK,IAAI,EAAE,EAC9B,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,EACd,IAAI,EAAC,cAAc,EACnB,oBAAoB,EAAE,CAAC,aAAuB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,EAChF,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACvC,IAAI,EAAE,EAAE,EAAE,KAAK,GACf,CACH,EACA,CAAC,kBAAkB,IAAI,MAAM,CAAC,IAAI,CACjC,KAAC,aAAa,IACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,EAC/B,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,EACf,IAAI,EAAC,cAAc,EACnB,oBAAoB,EAAE,CAAC,aAAuB,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,EACjF,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACxC,IAAI,EAAE,GAAG,EAAE,KAAK,GAChB,CACH,EAED,KAAC,KAAK,IACJ,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACnF,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EACnB,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC3C,IAAI,EAAE,OAAO,CAAC,KAAK,GACnB,EAEF,MAAC,MAAM,IACL,QAAQ,EAAE,CAAC,CAAC,EAAE;wBACZ,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBACjD,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EACtB,KAAK,EAAE,kBAAkB,aAEzB,KAAC,MAAM,IAAW,KAAK,EAAC,EAAE,YACvB,CAAC,CAAC,QAAQ,CAAC,IADD,GAAG,CAEP,EACT,4BAAG,eAAe,GAAI,IACf,EAET,KAAC,MAAM,IACL,SAAS,QACT,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,aAAa,EACtB,YAAY,EAAE,YAAY,EAC1B,WAAW,QACX,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EACzB,YAAY,EAAE,aAAa,IAAI,WAAW,CAAC,YAAY;oBACvD,4FAA4F;oBAC5F,MAAM,EAAE;wBACN,GAAG,EAAG,SAAS,CAAC,MAAM,CAAY,GAAG,EAAE;wBACvC,GAAG,EAAG,SAAS,CAAC,SAAS,CAAY,GAAG,EAAE;qBAC3C,EACD,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,QAAQ,EAAE,GAAG,EAAE;wBACb,MAAM,WAAW,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wBACxD,gBAAgB,CAAC,WAAW,CAAC,CAAC;wBAC9B,QAAQ,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;oBACvC,CAAC,GACD,EACD,CAAC,CAAC,WAAW,EAAE,MAAM,IAAI,CACxB,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;wBACT,IAAI,EAAE,uCAAuC;wBAC7C,GAAG,EAAE,CAAC;qBACP,YAEA,WAAW,EAAE,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAC9B,eAAC,cAAc,OACT,UAAU,EACd,GAAG,EAAE,UAAU,CAAC,IAAI,EACpB,QAAQ,EAAE,kBAAkB,GAC5B,CACH,CAAC,GACG,CACR,IACI,GACN,CACJ,CAAC;IAEF,MAAM,aAAa,GAAG,CACpB,KAAC,IAAI,IACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;YACN,SAAS,EAAE,QAAQ;SACpB,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAEjB,MAAC,IAAI,IACH,SAAS,EAAE;gBACT,GAAG,EAAE,CAAC;aACP,aAED,MAAC,IAAI,IAAC,SAAS,QAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAC/B,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;gCACZ,QAAQ,EAAE,CAAC;4BACb,CAAC,YAEA,CAAC,CAAC,QAAQ,CAAC,GACL,EACR,iBAAiB,IACb,EACP,MAAC,IAAI,IAAC,SAAS,mBACb,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,EAClD,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,2BAA2B,CAAC,YAErC,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACnB,EAER,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,YAAG,CAAC,CAAC,eAAe,CAAC,GAAU,EACjE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,YACtC,CAAC,CAAC,YAAY,CAAC,GACT,IACJ,EACP,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,GAAG,EAAE,kBAAkB,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,SACR,IACG,GACF,CACR,CAAC;IAEF,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,OAAO,GAAG,WAAW,CAChC,aAAa,EACb,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAC9E,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CACzD,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,kCAAkC;YAClC,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;YAChC,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;YAC3B,YAAY,EAAE,OAAO;YACrB,OAAO,EAAE,aAAa;YACtB,QAAQ;YACR,OAAO;YACP,QAAQ;SACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useState,\n  ChangeEvent,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n  useEffect,\n  ReactNode\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { stripUnit } from 'polished';\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  ModalMethods,\n  Modal,\n  ModalProps,\n  useModalManager,\n  useModalContext,\n  Grid\n} from '@pega/cosmos-react-core';\nimport { Editor, EditorState, EditorProps } 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 } from './Email.types';\nimport EmailSelector from './EmailSelector';\n\nregisterIcon(paperClipIcon, replyAllIcon, replyIcon, forwardIcon);\n\nexport const StyledEmailComposer = styled.div<EmailComposerProps>(({ progress }) => {\n  return css`\n    ${progress\n      ? css`\n          visibility: hidden;\n        `\n      : css`\n          visibility: visible;\n        `}\n  `;\n});\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 StyledResponseType = styled(MenuButton)`\n  align-self: flex-start;\n`;\n\nStyledResponseType.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(Modal)(({ state, theme }) => {\n  if (state !== 'docked') return;\n\n  return css`\n    max-height: calc(100vh - ${theme.base.spacing} * 2);\n  `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n\nconst responseTypeIcons = {\n  reply: 'reply',\n  replyAll: 'reply-all',\n  forward: 'forward'\n};\n\nconst editorToolbar: EditorProps['toolbar'] = [\n  'inline-styling',\n  'lists',\n  'indentation',\n  'images',\n  'links'\n];\n\nconst ComposerModal: FunctionComponent<{\n  modalContent: JSX.Element;\n  actions: ReactNode;\n  progress: ModalProps['progress'];\n  subject: EmailComposerProps['data']['subject'];\n  onCancel: EmailComposerProps['onCancel'];\n}> = ({ modalContent, actions: modalActions, progress: modalProgress, subject, onCancel }) => {\n  const { state } = useModalContext();\n\n  return (\n    <StyledModal\n      heading={subject.value}\n      onRequestDismiss={() => {\n        onCancel();\n        return false;\n      }}\n      actions={!modalProgress ? modalActions : undefined}\n      progress={modalProgress}\n      state={state}\n    >\n      {modalContent}\n    </StyledModal>\n  );\n};\n\nconst EmailComposer: FunctionComponent<EmailComposerProps> = forwardRef(\n  (\n    {\n      participants,\n      onCancel,\n      onSend,\n      onSave,\n      onImageAdded,\n      externalValidator,\n      onChange,\n      footerMoreActions,\n      progress = false,\n      templates,\n      data: { to, cc, bcc, responseType, subject, bodyContent, selectedTemplateId, attachments },\n      handle,\n      ...restProps\n    }: PropsWithoutRef<EmailComposerProps>,\n    ref: EmailComposerProps['ref']\n  ) => {\n    const t = useI18n();\n    const { create: createModal } = useModalManager();\n\n    const [userCCToggleState, setUserCCToggleState] = useState(false);\n    const [userBCCToggleState, setUserBCCToggleState] = useState(false);\n    const [editorContent, setEditorContent] = useState('');\n\n    const editorRef = useRef<EditorState>(null);\n    const fileUploadInputRef = useRef<HTMLInputElement>(null);\n    const modalMethods = useRef<ModalMethods>();\n    const uid = useUID();\n\n    const templateOptions = useMemo(\n      () =>\n        templates &&\n        templates.map(template => {\n          return (\n            <Option\n              selected={template.id === selectedTemplateId ? 'selected' : undefined}\n              key={template.id}\n              value={template.id}\n            >\n              {template.title}\n            </Option>\n          );\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            onChange('responseType', '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            onChange('responseType', 'replyAll');\n          }\n        },\n        {\n          id: 'forward',\n          primary: t('forward'),\n          visual: <StyledResponseTypeIcon name={responseTypeIcons.forward} />,\n          selected: responseType === 'forward',\n          onClick: () => {\n            onChange('responseType', 'forward');\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 onAttachmentDelete = (name: FileUploadItemProps['name']) => {\n      onChange('attachments', attachments?.filter(item => item.name !== name) || []);\n    };\n\n    const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        const newFiles = Array.from(e.target.files).map(file => ({ name: file.name, file }));\n        onChange('attachments', attachments ? [...attachments, ...newFiles] : newFiles);\n      }\n    };\n\n    useImperativeHandle(handle, () => ({\n      replaceBodyContent: (contentToReplace: string) => {\n        editorRef.current?.insertHtml(contentToReplace, true);\n        // Triggering onChange manually with new content as onChange on RTE is not triggered automatically for insertHTML\n        onChange('bodyContent', editorRef.current?.getHtml() || '');\n      },\n      updateImage: (imageData: { src: string; alt: string }, id: string) => {\n        editorRef.current?.appendImage(imageData, id);\n        // Triggering onChange manually as onChange on RTE is not triggered automatically for appendImage\n        onChange('bodyContent', editorRef.current?.getHtml() || '');\n      },\n      activate: () => {\n        modalMethods.current?.activate();\n      },\n      setCursorLocationToStart: () => {\n        editorRef.current?.setCursorLocationToStart?.();\n      }\n    }));\n\n    const hasCC = useMemo(() => !!cc?.value?.length, [cc]);\n    const hasBCC = useMemo(() => !!bcc?.value?.length, [bcc]);\n\n    const content = (\n      <>\n        <Flex\n          as={StyledEmailComposer}\n          {...restProps}\n          container={{\n            gap: 2,\n            direction: 'column'\n          }}\n          progress={!!progress}\n          ref={ref}\n        >\n          {responseType && (\n            <StyledResponseType\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\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                selectedItems={to?.value || []}\n                label={t('to')}\n                mode='multi-select'\n                required\n                onSelectedItemChange={(selectedItems: string[]) => {\n                  onChange('to', selectedItems);\n                }}\n                externalValidator={externalValidator}\n                status={to?.error ? 'error' : undefined}\n                info={to?.error}\n              />\n            </Flex>\n            {!(userCCToggleState || hasCC) && (\n              <StyledToggleButton variant='simple' onClick={() => setUserCCToggleState(true)} icon>\n                {t('cc')}\n              </StyledToggleButton>\n            )}\n            {!(userBCCToggleState || hasBCC) && (\n              <StyledToggleButton variant='simple' onClick={() => setUserBCCToggleState(true)} icon>\n                {t('bcc')}\n              </StyledToggleButton>\n            )}\n          </Flex>\n\n          {(userCCToggleState || hasCC) && (\n            <EmailSelector\n              participants={participants}\n              selectedItems={cc?.value || []}\n              label={t('cc')}\n              mode='multi-select'\n              onSelectedItemChange={(selectedItems: string[]) => onChange('cc', selectedItems)}\n              externalValidator={externalValidator}\n              status={cc?.error ? 'error' : undefined}\n              info={cc?.error}\n            />\n          )}\n          {(userBCCToggleState || hasBCC) && (\n            <EmailSelector\n              participants={participants}\n              selectedItems={bcc?.value || []}\n              label={t('bcc')}\n              mode='multi-select'\n              onSelectedItemChange={(selectedItems: string[]) => onChange('bcc', selectedItems)}\n              externalValidator={externalValidator}\n              status={bcc?.error ? 'error' : undefined}\n              info={bcc?.error}\n            />\n          )}\n\n          <Input\n            value={subject.value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => onChange('subject', e.target.value)}\n            label={t('subject')}\n            status={subject.error ? 'error' : undefined}\n            info={subject.error}\n          />\n\n          <Select\n            onChange={e => {\n              onChange('selectedTemplateId', e.target.value);\n            }}\n            label={t('auto_reply')}\n            value={selectedTemplateId}\n          >\n            <Option key={uid} value=''>\n              {t('select')}\n            </Option>\n            <>{templateOptions}</>\n          </Select>\n\n          <Editor\n            autoFocus\n            ref={editorRef}\n            toolbar={editorToolbar}\n            onImageAdded={onImageAdded}\n            labelHidden\n            label={t('email_message')}\n            defaultValue={editorContent || bodyContent.defaultValue}\n            // Below rem values are derived from min 150px, max 300px minus the approx height of toolbar\n            height={{\n              min: (stripUnit('7rem') as number) * 16,\n              max: (stripUnit('16.5rem') as number) * 16\n            }}\n            status={bodyContent.error ? 'error' : undefined}\n            info={bodyContent.error}\n            onChange={() => {\n              const currentHtml = editorRef?.current?.getHtml() || '';\n              setEditorContent(currentHtml);\n              onChange('bodyContent', currentHtml);\n            }}\n          />\n          {!!attachments?.length && (\n            <Grid\n              ref={ref}\n              container={{\n                cols: 'repeat(auto-fill, minmax(15rem, 1fr))',\n                gap: 1\n              }}\n            >\n              {attachments?.map(attachment => (\n                <FileUploadItem\n                  {...attachment}\n                  key={attachment.name}\n                  onDelete={onAttachmentDelete}\n                />\n              ))}\n            </Grid>\n          )}\n        </Flex>\n      </>\n    );\n\n    const footerContent = (\n      <Flex\n        container={{\n          gap: 1,\n          direction: 'column'\n        }}\n        item={{ grow: 1 }}\n      >\n        <Flex\n          container={{\n            gap: 1\n          }}\n        >\n          <Flex container item={{ grow: 1 }}>\n            <Button\n              variant='secondary'\n              onClick={() => {\n                onCancel();\n              }}\n            >\n              {t('cancel')}\n            </Button>\n            {footerMoreActions}\n          </Flex>\n          <Flex container>\n            <Button\n              icon\n              onClick={() => fileUploadInputRef.current?.click()}\n              variant='simple'\n              label={t('file_upload_text_multiple')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n\n            {onSave && <Button onClick={onSave}>{t('save_as_draft')}</Button>}\n            <Button variant='primary' onClick={onSend}>\n              {t('send_label')}\n            </Button>\n          </Flex>\n          <input\n            type='file'\n            style={{ display: 'none' }}\n            ref={fileUploadInputRef}\n            onChange={onFileChange}\n            multiple\n          />\n        </Flex>\n      </Flex>\n    );\n\n    // Create modal on mount\n    useEffect(() => {\n      modalMethods.current = createModal(\n        ComposerModal,\n        { modalContent: content, actions: footerContent, progress, subject, onCancel },\n        { minimizable: true, maximizable: true, dockable: true }\n      );\n\n      return () => {\n        // Will close the modal on unmount\n        modalMethods.current?.dismiss();\n        modalMethods.current?.unmount();\n      };\n    }, []);\n\n    useEffect(() => {\n      modalMethods.current?.update({\n        modalContent: content,\n        actions: footerContent,\n        progress,\n        subject,\n        onCancel\n      });\n    });\n    return null;\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  useImperativeHandle,\n  useEffect,\n  ReactNode\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { stripUnit } from 'polished';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  useI18n,\n  defaultThemeProp,\n  FileUploadItem,\n  MenuButton,\n  FileUploadItemProps,\n  Input,\n  ModalMethods,\n  Modal,\n  ModalProps,\n  useModalManager,\n  useModalContext,\n  Grid,\n  ComboBox,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  createStringMatcher\n} from '@pega/cosmos-react-core';\nimport { Editor, EditorState, EditorProps } 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 } from './Email.types';\nimport EmailSelector from './EmailSelector';\n\nregisterIcon(paperClipIcon, replyAllIcon, replyIcon, forwardIcon);\n\nexport const StyledEmailComposer = styled.div<EmailComposerProps>(({ progress }) => {\n  return css`\n    ${progress\n      ? css`\n          visibility: hidden;\n        `\n      : css`\n          visibility: visible;\n        `}\n  `;\n});\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 StyledResponseType = styled(MenuButton)`\n  align-self: flex-start;\n`;\n\nStyledResponseType.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(Modal)(({ state, theme }) => {\n  if (state !== 'docked') return;\n\n  return css`\n    max-height: calc(100vh - ${theme.base.spacing} * 4);\n  `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n\nconst responseTypeIcons = {\n  reply: 'reply',\n  replyAll: 'reply-all',\n  forward: 'forward'\n};\n\nconst editorToolbar: EditorProps['toolbar'] = [\n  'inline-styling',\n  'lists',\n  'indentation',\n  'images',\n  'links'\n];\n\nconst ComposerModal: FunctionComponent<{\n  modalContent: JSX.Element;\n  actions: ReactNode;\n  progress: ModalProps['progress'];\n  subject: EmailComposerProps['data']['subject'];\n  onCancel: EmailComposerProps['onCancel'];\n  compose: boolean;\n}> = ({\n  modalContent,\n  actions: modalActions,\n  progress: modalProgress,\n  subject,\n  onCancel,\n  compose\n}) => {\n  const { state } = useModalContext();\n  const t = useI18n();\n  return (\n    <StyledModal\n      heading={compose ? t('compose_label') : subject.value}\n      onRequestDismiss={() => {\n        onCancel();\n        return false;\n      }}\n      actions={!modalProgress ? modalActions : undefined}\n      progress={modalProgress}\n      state={state}\n    >\n      {modalContent}\n    </StyledModal>\n  );\n};\n\nconst createEmailTemplates = (\n  selectedTemplateId: EmailComposerProps['data']['selectedTemplateId'],\n  templates: EmailComposerProps['templates'] = []\n): MenuProps['items'] => {\n  return templates.map(template => {\n    return {\n      id: template.id,\n      primary: template.title,\n      items: template.templates\n        ? createEmailTemplates(selectedTemplateId, template.templates)\n        : undefined,\n      selected: template.id === selectedTemplateId\n    };\n  });\n};\n\nconst EmailComposer: FunctionComponent<EmailComposerProps> = forwardRef(\n  (\n    {\n      participants,\n      senderAccounts,\n      onCancel,\n      onSend,\n      onSave,\n      onImageAdded,\n      externalValidator,\n      onChange,\n      footerMoreActions,\n      progress = false,\n      templates,\n      data: {\n        to,\n        cc,\n        bcc,\n        responseType,\n        subject,\n        bodyContent,\n        selectedTemplateId,\n        attachments,\n        emailAccount\n      },\n      handle,\n      onEditorInit,\n      ...restProps\n    }: PropsWithoutRef<EmailComposerProps>,\n    ref: EmailComposerProps['ref']\n  ) => {\n    const t = useI18n();\n    const { create: createModal } = useModalManager();\n\n    const [userCCToggleState, setUserCCToggleState] = useState(false);\n    const [userBCCToggleState, setUserBCCToggleState] = useState(false);\n    const [editorContent, setEditorContent] = useState('');\n    const [filterValue, setFilterValue] = useState('');\n\n    const filterRegex = createStringMatcher(filterValue, 'contains');\n\n    const compose = useMemo(() => {\n      return !!(senderAccounts && senderAccounts.length > 0);\n    }, [senderAccounts]);\n\n    const emailTemplatesToRender = useMemo(() => {\n      const emailTemplates = createEmailTemplates(selectedTemplateId, templates);\n      const newItems = filterValue\n        ? menuHelpers.flatten(emailTemplates).filter(({ primary }: MenuItemProps) => {\n            return filterRegex.test(primary);\n          })\n        : emailTemplates;\n\n      return menuHelpers.mapTree(newItems, item => ({\n        ...item,\n        selected: item.items ? undefined : item.selected\n      }));\n    }, [filterValue, selectedTemplateId, templates]);\n\n    const selectedEmailTemplate = useMemo(() => {\n      return menuHelpers.getSelected(emailTemplatesToRender)[0];\n    }, [emailTemplatesToRender]);\n\n    const editorRef = useRef<EditorState>(null);\n    const fileUploadInputRef = useRef<HTMLInputElement>(null);\n    const modalMethods = useRef<ModalMethods>();\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            onChange('responseType', '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            onChange('responseType', 'replyAll');\n          }\n        },\n        {\n          id: 'forward',\n          primary: t('forward'),\n          visual: <StyledResponseTypeIcon name={responseTypeIcons.forward} />,\n          selected: responseType === 'forward',\n          onClick: () => {\n            onChange('responseType', 'forward');\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 onAttachmentDelete = (name: FileUploadItemProps['name']) => {\n      onChange('attachments', attachments?.filter(item => item.name !== name) || []);\n    };\n\n    const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        const newFiles = Array.from(e.target.files).map(file => ({ name: file.name, file }));\n        onChange('attachments', attachments ? [...attachments, ...newFiles] : newFiles);\n      }\n    };\n\n    useImperativeHandle(handle, () => ({\n      replaceBodyContent: (contentToReplace: string) => {\n        editorRef.current?.insertHtml(contentToReplace, true);\n        // Triggering onChange manually with new content as onChange on RTE is not triggered automatically for insertHTML\n        onChange('bodyContent', editorRef.current?.getHtml() || '');\n      },\n      updateImage: (imageData: { src: string; alt: string }, id: string) => {\n        editorRef.current?.appendImage(imageData, id);\n        // Triggering onChange manually as onChange on RTE is not triggered automatically for appendImage\n        onChange('bodyContent', editorRef.current?.getHtml() || '');\n      },\n      activate: () => {\n        modalMethods.current?.activate();\n      },\n      setCursorLocationToStart: () => {\n        editorRef.current?.setCursorLocationToStart?.();\n      }\n    }));\n\n    const hasCC = useMemo(() => !!cc?.value?.length, [cc]);\n    const hasBCC = useMemo(() => !!bcc?.value?.length, [bcc]);\n\n    const content = (\n      <Flex\n        as={StyledEmailComposer}\n        {...restProps}\n        container={{\n          gap: 2,\n          direction: 'column'\n        }}\n        progress={!!progress}\n        ref={ref}\n      >\n        {senderAccounts && senderAccounts.length > 0 && (\n          <EmailSelector\n            participants={senderAccounts}\n            selectedItems={emailAccount ? [emailAccount.value] : []}\n            label={t('email_account')}\n            mode='single-select'\n            required\n            onSelectedItemChange={(selectedItems: string[]) => {\n              onChange('emailAccount', selectedItems[0]);\n            }}\n            status={emailAccount?.error ? 'error' : undefined}\n            info={emailAccount?.error}\n            compose\n          />\n        )}\n        {responseType && (\n          <StyledResponseType\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\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              selectedItems={to?.value || []}\n              label={t('to')}\n              mode='multi-select'\n              required\n              onSelectedItemChange={(selectedItems: string[]) => {\n                onChange('to', selectedItems);\n              }}\n              externalValidator={externalValidator}\n              status={to?.error ? 'error' : undefined}\n              info={to?.error}\n            />\n          </Flex>\n          {!(userCCToggleState || hasCC) && (\n            <StyledToggleButton variant='simple' onClick={() => setUserCCToggleState(true)} icon>\n              {t('cc')}\n            </StyledToggleButton>\n          )}\n          {!(userBCCToggleState || hasBCC) && (\n            <StyledToggleButton variant='simple' onClick={() => setUserBCCToggleState(true)} icon>\n              {t('bcc')}\n            </StyledToggleButton>\n          )}\n        </Flex>\n\n        {(userCCToggleState || hasCC) && (\n          <EmailSelector\n            participants={participants}\n            selectedItems={cc?.value || []}\n            label={t('cc')}\n            mode='multi-select'\n            onSelectedItemChange={(selectedItems: string[]) => onChange('cc', selectedItems)}\n            externalValidator={externalValidator}\n            status={cc?.error ? 'error' : undefined}\n            info={cc?.error}\n          />\n        )}\n        {(userBCCToggleState || hasBCC) && (\n          <EmailSelector\n            participants={participants}\n            selectedItems={bcc?.value || []}\n            label={t('bcc')}\n            mode='multi-select'\n            onSelectedItemChange={(selectedItems: string[]) => onChange('bcc', selectedItems)}\n            externalValidator={externalValidator}\n            status={bcc?.error ? 'error' : undefined}\n            info={bcc?.error}\n          />\n        )}\n\n        <Input\n          value={subject.value}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => onChange('subject', e.target.value)}\n          label={t('subject')}\n          status={subject.error ? 'error' : undefined}\n          info={subject.error}\n        />\n\n        <ComboBox\n          label={t('response_templates')}\n          value={filterValue}\n          mode='single-select'\n          menu={{\n            items: emailTemplatesToRender,\n            onItemClick: (id: MenuItemProps['id']) => {\n              setFilterValue('');\n              onChange('selectedTemplateId', id);\n            },\n            accent: filterRegex\n          }}\n          selected={\n            selectedEmailTemplate\n              ? {\n                  items: {\n                    id: selectedEmailTemplate.id,\n                    text: selectedEmailTemplate.primary\n                  }\n                }\n              : undefined\n          }\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            if (!e.target.value) onChange('selectedTemplateId', '');\n            setFilterValue(e.target.value);\n          }}\n        />\n\n        <Editor\n          autoFocus\n          ref={editorRef}\n          toolbar={editorToolbar}\n          onImageAdded={onImageAdded}\n          labelHidden\n          label={t('email_message')}\n          defaultValue={editorContent || bodyContent.defaultValue}\n          // Below rem values are derived from min 150px, max 300px minus the approx height of toolbar\n          height={{\n            min: (stripUnit('7rem') as number) * 16,\n            max: (stripUnit('16.5rem') as number) * 16\n          }}\n          status={bodyContent.error ? 'error' : undefined}\n          info={bodyContent.error}\n          onChange={() => {\n            const currentHtml = editorRef?.current?.getHtml() || '';\n            setEditorContent(currentHtml);\n            onChange('bodyContent', currentHtml);\n          }}\n          onInit={onEditorInit}\n        />\n        {!!attachments?.length && (\n          <Grid\n            ref={ref}\n            container={{\n              cols: 'repeat(auto-fill, minmax(15rem, 1fr))',\n              gap: 1\n            }}\n          >\n            {attachments?.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} onDelete={onAttachmentDelete} />\n            ))}\n          </Grid>\n        )}\n      </Flex>\n    );\n\n    const footerContent = (\n      <Flex\n        container={{\n          gap: 1,\n          direction: 'column'\n        }}\n        item={{ grow: 1 }}\n      >\n        <Flex\n          container={{\n            gap: 1\n          }}\n        >\n          <Flex container item={{ grow: 1 }}>\n            <Button\n              variant='secondary'\n              onClick={() => {\n                onCancel();\n              }}\n            >\n              {t('cancel')}\n            </Button>\n            {footerMoreActions}\n          </Flex>\n          <Flex container>\n            <Button\n              icon\n              onClick={() => fileUploadInputRef.current?.click()}\n              variant='simple'\n              label={t('file_upload_text_multiple')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n\n            {onSave && <Button onClick={onSave}>{t('save_as_draft')}</Button>}\n            <Button variant='primary' onClick={onSend}>\n              {t('send_label')}\n            </Button>\n          </Flex>\n          <input\n            type='file'\n            style={{ display: 'none' }}\n            ref={fileUploadInputRef}\n            onChange={onFileChange}\n            multiple\n          />\n        </Flex>\n      </Flex>\n    );\n\n    // Create modal on mount\n    useEffect(() => {\n      modalMethods.current = createModal(\n        ComposerModal,\n        { modalContent: content, actions: footerContent, progress, subject, onCancel, compose },\n        { minimizable: true, maximizable: true, dockable: true }\n      );\n\n      return () => {\n        // Will close the modal on unmount\n        modalMethods.current?.dismiss();\n        modalMethods.current?.unmount();\n      };\n    }, []);\n\n    useEffect(() => {\n      modalMethods.current?.update({\n        modalContent: content,\n        actions: footerContent,\n        progress,\n        subject,\n        onCancel,\n        compose\n      });\n    });\n    return null;\n  }\n);\n\nexport default EmailComposer;\n"]}

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,EAA8C,MAAM,OAAO,CAAC;AAKlG,OAAO,EAQL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAEvC,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;;;SAalC,CAAC;AAGH,eAAO,MAAM,yBAAyB,wKAwBpC,CAAC;AA6DH,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA6I/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,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAEvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;SAczE,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAsB7B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;;SAqBnC,CAAC;AAGF,eAAO,MAAM,yBAAyB,wKA4BrC,CAAC;AAuEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA6I/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Email/EmailConversation.js

@@ -21,114 +21,109 @@ export const StyledCompactTimeStampDisplay = styled(Text) `
   margin-top: calc(${props => props.theme.base.spacing} / 2);
 `;
 StyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;
-export const StyledConversationHeader = styled.header(({ theme, collapsed }) => {
+export const StyledConversationHeader = styled.header(({ theme: { base: { palette } }, collapsed }) => {
     return css `
-      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${theme.base.palette['border-line']};
+      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${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['primary-background']);
+export const StyledUnReadCount = styled.div(({ theme: { base: { spacing, palette, 'font-weight': { 'semi-bold': fontWeightSemiBold } } } }) => {
+    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
     const readableTextColor = readableColor(readableBackground);
     return css `
-    align-self: flex-start;
-    background-color: ${readableBackground};
-    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 */
-  `;
+      align-self: flex-start;
+      background-color: ${readableBackground};
+      color: ${readableTextColor};
+      padding: 0 ${spacing};
+      font-weight: ${fontWeightSemiBold};
+      width: fit-content;
+    `;
 });
 StyledUnReadCount.defaultProps = defaultThemeProp;
-export const StyledEmailConversation = styled.li(({ theme: { base }, singleConversation, showHeader }) => {
+export const StyledEmailConversation = styled.li(({ theme: { base: { spacing, palette, 'border-radius': baseBorderRadius } }, singleConversation, showHeader }) => {
     return css `
-    margin-bottom: ${base.spacing};
-    border-radius: ${singleConversation && showHeader
-        ? `0 0 ${base['border-radius']} ${base['border-radius']}`
-        : base['border-radius']};
-    overflow: hidden;
-    background-color: ${base.palette['primary-background']};
-    list-style-type: none;
-  `;
+      margin-bottom: ${spacing};
+      border-radius: ${singleConversation && showHeader
+        ? `0 0 ${baseBorderRadius} ${baseBorderRadius}`
+        : baseBorderRadius};
+      overflow: hidden;
+      background-color: ${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['primary-background']);
+export const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base: { spacing, palette } } }) => {
+    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
     return css `
-    padding: calc(2 * ${base.spacing}) 0;
-    position: relative;
-    :not(:last-child) {
-      border-bottom: 0.0625rem solid ${base.palette['border-line']};
-    }
-    ${unRead &&
-        css `
-      &::before {
-        content: '';
-        background-color: ${readableBackground};
-        position: absolute;
-        inset: 0;
-        height: calc(100% + 0.0625rem);
-        top: -0.0625rem;
-        width: 0.125rem;
+      padding: calc(2 * ${spacing}) 0;
+      position: relative;
+      :not(:last-child) {
+        border-bottom: 0.0625rem solid ${palette['border-line']};
       }
-    `}
-  `;
+      ${unRead &&
+        css `
+        &::before {
+          content: '';
+          background-color: ${readableBackground};
+          position: absolute;
+          inset: 0;
+          height: calc(100% + 0.0625rem);
+          top: -0.0625rem;
+          width: 0.125rem;
+        }
+      `}
+    `;
 });
 StyledEmailInConversation.defaultProps = defaultThemeProp;
-const StyledUnreadIndicator = styled.span(({ theme, isVisible }) => {
-    const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
+const StyledUnreadIndicator = styled.span(({ theme: { base: { palette } }, isVisible }) => {
+    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
     const diameter = '0.375rem';
     return css `
-    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;
-  `;
+      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']));
+const StyledConversationButton = styled.button(({ theme: { base: { spacing, palette } } }) => {
+    const hoverColor = tryCatch(() => mix(0.85, palette['primary-background'], 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;
+      border-width: 0;
+      width: 100%;
+      padding: ${spacing};
+      background: ${palette['primary-background']};
+      color: ${palette['foreground-color']};
+      position: sticky;
+      top: 0;
+      z-index: 1;
 
-    &[aria-expanded='true'] {
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    }
+      &[aria-expanded='true'] {
+        border-bottom: 0.0625rem solid ${palette['border-line']};
+      }
 
-    &:focus {
-      background: ${theme.base.palette['secondary-background']};
-      outline: none;
-    }
+      &:focus {
+        background: ${palette['secondary-background']};
+        outline: none;
+      }
 
-    &:hover {
-      background: ${hoverColor};
-      outline: none;
-    }
+      &:hover {
+        background: ${hoverColor};
+        outline: none;
+      }
 
-    & > ${StyledIcon} {
-      align-self: flex-start;
-      color: ${theme.base.palette['foreground-color']};
-    }
-  `;
+      & > ${StyledIcon} {
+        align-self: flex-start;
+      }
+    `;
 });
 StyledConversationButton.defaultProps = defaultThemeProp;
 const EmailConversation = forwardRef((props, ref) => {