npm - @pega/cosmos-react-social - Versions diffs - 4.0.0-dev.1.2 → 4.0.0-dev.10.1 - Mend

@pega/cosmos-react-social 4.0.0-dev.1.2 → 4.0.0-dev.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/lib/components/Email/EmailComposer.js CHANGED Viewed

@@ -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 { forwardRef, useState, useMemo, useRef, useImperativeHandle, useEffect } from 'react';
+import { forwardRef, useState, useMemo, useRef, useImperativeHandle, useEffect, useCallback } 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';
@@ -59,27 +59,65 @@ 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 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, ...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 [emailTemplates, setEmailTemplates] = useState(templates
+        ? templates.map(template => {
+            if (template.templates) {
+                return {
+                    id: template.id,
+                    primary: template.title,
+                    items: template.templates?.map(item => {
+                        return {
+                            id: item.id,
+                            primary: item.title,
+                            selected: item.id === selectedTemplateId
+                        };
+                    })
+                };
+            }
+            return {
+                id: template.id,
+                primary: template.title,
+                selected: selectedTemplateId === template.id
+            };
+        })
+        : []);
+    const emailTemplatesToRender = useMemo(() => {
+        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, emailTemplates]);
+    const selectEmailTemplate = useCallback((id) => {
+        setFilterValue('');
+        setEmailTemplates(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
     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,10 +183,27 @@ const EmailComposer = forwardRef(({ participants, onCancel, onSend, onSave, onIm
     }));
     const hasCC = useMemo(() => !!cc?.value?.length, [cc]);
     const hasBCC = useMemo(() => !!bcc?.value?.length, [bcc]);
+    const selectedEmailTemplate = useMemo(() => {
+        const emailTemplate = menuHelpers.getSelected(emailTemplates)[0];
+        if (emailTemplate && emailTemplate.id) {
+            onChange('selectedTemplateId', emailTemplate.id);
+        }
+        return emailTemplate;
+    }, [emailTemplates]);
+    const clearSelection = () => {
+        setEmailTemplates(cur => menuHelpers.mapTree(cur, item => {
+            return {
+                ...item,
+                selected: false
+            };
+        }));
+    };
     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: {
+            }, 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: {
@@ -161,9 +216,22 @@ const EmailComposer = forwardRef(({ participants, onCancel, onSend, onSave, onIm
                                 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,
+                                }, 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('auto_reply'), value: filterValue, mode: 'single-select', menu: {
+                        items: emailTemplatesToRender,
+                        onItemClick: selectEmailTemplate,
+                        accent: filterRegex
+                    }, selected: selectedEmailTemplate
+                        ? {
+                            items: {
+                                id: selectedEmailTemplate.id,
+                                text: selectedEmailTemplate.primary
+                            }
+                        }
+                        : undefined, onChange: (e) => {
+                        if (!e.target.value)
+                            clearSelection();
+                        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,
@@ -186,7 +254,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 +267,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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 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"]}
1	+ {"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 useCallback\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} * 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 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 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 ...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 [emailTemplates, setEmailTemplates] = useState<MenuProps['items']>(\n templates\n ? templates.map(template => {\n if (template.templates) {\n return {\n id: template.id,\n primary: template.title,\n items: template.templates?.map(item => {\n return {\n id: item.id,\n primary: item.title,\n selected: item.id === selectedTemplateId\n };\n })\n };\n }\n return {\n id: template.id,\n primary: template.title,\n selected: selectedTemplateId === template.id\n };\n })\n : []\n );\n\n const emailTemplatesToRender = useMemo(() => {\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, emailTemplates]);\n\n const selectEmailTemplate = useCallback((id: MenuItemProps['id']) => {\n setFilterValue('');\n setEmailTemplates(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n }, []);\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 selectedEmailTemplate = useMemo(() => {\n const emailTemplate = menuHelpers.getSelected(emailTemplates)[0];\n if (emailTemplate && emailTemplate.id) {\n onChange('selectedTemplateId', emailTemplate.id);\n }\n return emailTemplate;\n }, [emailTemplates]);\n\n const clearSelection = () => {\n setEmailTemplates(cur =>\n menuHelpers.mapTree(cur, item => {\n return {\n ...item,\n selected: false\n };\n })\n );\n };\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 {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('auto_reply')}\n value={filterValue}\n mode='single-select'\n menu={{\n items: emailTemplatesToRender,\n onItemClick: selectEmailTemplate,\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) clearSelection();\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 />\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, 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/EmailNotificationPanel.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';
+import type { EmailNotificationPanelProps } from './Email.types';
+export declare const EmailNotificationPanelIcon: FunctionComponent<OmitStrict<EmailNotificationPanelProps, 'onClick'> & ForwardProps>;
+declare const EmailNotificationPanel: FunctionComponent<EmailNotificationPanelProps & ForwardProps>;
+export default EmailNotificationPanel;
+//# sourceMappingURL=EmailNotificationPanel.d.ts.map

package/lib/components/Email/EmailNotificationPanel.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"EmailNotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEL,YAAY,EAEZ,UAAU,EAKX,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAKjE,eAAO,MAAM,0BAA0B,EAAE,iBAAiB,CACxD,UAAU,CAAC,2BAA2B,EAAE,SAAS,CAAC,GAAG,YAAY,CAgBlE,CAAC;AAEF,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,2BAA2B,GAAG,YAAY,CAazF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/Email/EmailNotificationPanel.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Count, Icon, registerIcon, StyledAvatar, useTheme, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail-solid.icon';
+import { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';
+import { StyledEmailCountIcon } from './Email.styles';
+registerIcon(mailIcon);
+export const EmailNotificationPanelIcon = ({ status, label, count, ...restProps }) => {
+    const { base: { colors } } = useTheme();
+    return (_jsxs(StyledAvatar, { as: StyledAvatar, ...restProps, size: 'm', backgroundColor: colors.white, children: [_jsx(Icon, { name: 'mail-solid' }), _jsx(Count, { as: StyledEmailCountIcon, variant: 'urgent', children: count }), _jsx(VisuallyHiddenText, { children: label })] }));
+};
+const EmailNotificationPanel = ({ label, onClick, count, ...restProps }) => {
+    return (_jsx(NavigationListItem, { primary: label, visual: _jsx(EmailNotificationPanelIcon, { ...restProps, count: count, label: label }), onClick: onClick }));
+};
+export default EmailNotificationPanel;
+//# sourceMappingURL=EmailNotificationPanel.js.map

package/lib/components/Email/EmailNotificationPanel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"EmailNotificationPanel.js","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,KAAK,EAEL,IAAI,EAEJ,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,mEAAmE,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AAGpG,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,GAAG,QAAQ,EAAE,CAAC;IACf,OAAO,CACL,MAAC,YAAY,IAAC,EAAE,EAAE,YAAY,KAAM,SAAS,EAAE,IAAI,EAAC,GAAG,EAAC,eAAe,EAAE,MAAM,CAAC,KAAK,aACnF,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,EAE1B,KAAC,KAAK,IAAC,EAAE,EAAE,oBAAoB,EAAE,OAAO,EAAC,QAAQ,YAC9C,KAAK,GACA,EAER,KAAC,kBAAkB,cAAE,KAAK,GAAsB,IACnC,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAkE,CAAC,EAC7F,KAAK,EACL,OAAO,EACP,KAAK,EACL,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,KAAC,0BAA0B,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,EACjF,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n Count,\n ForwardProps,\n Icon,\n OmitStrict,\n registerIcon,\n StyledAvatar,\n useTheme,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail-solid.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\n\nimport type { EmailNotificationPanelProps } from './Email.types';\nimport { StyledEmailCountIcon } from './Email.styles';\n\nregisterIcon(mailIcon);\n\nexport const EmailNotificationPanelIcon: FunctionComponent<\n OmitStrict<EmailNotificationPanelProps, 'onClick'> & ForwardProps\n> = ({ status, label, count, ...restProps }) => {\n const {\n base: { colors }\n } = useTheme();\n return (\n <StyledAvatar as={StyledAvatar} {...restProps} size='m' backgroundColor={colors.white}>\n <Icon name='mail-solid' />\n\n <Count as={StyledEmailCountIcon} variant='urgent'>\n {count}\n </Count>\n\n <VisuallyHiddenText>{label}</VisuallyHiddenText>\n </StyledAvatar>\n );\n};\n\nconst EmailNotificationPanel: FunctionComponent<EmailNotificationPanelProps & ForwardProps> = ({\n label,\n onClick,\n count,\n ...restProps\n}) => {\n return (\n <NavigationListItem\n primary={label}\n visual={<EmailNotificationPanelIcon {...restProps} count={count} label={label} />}\n onClick={onClick}\n />\n );\n};\n\nexport default EmailNotificationPanel;\n"]}

package/lib/components/Email/EmailSelector.d.ts CHANGED Viewed

@@ -15,6 +15,7 @@ export interface EmailSelectorProps extends NoChildrenProp {
     externalValidator?: EmailComposerProps['externalValidator'];
     status?: FormControlProps['status'];
     info?: FormControlProps['info'];
+    compose?: boolean;
 }
 declare const EmailSelector: FunctionComponent<EmailSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required'>>;
 export default EmailSelector;

package/lib/components/Email/EmailSelector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEd,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,mBAAmB;IACnB,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,CAAC;IAC3C,oBAAoB;IACpB,oBAAoB,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7F;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;~~CACjC~~;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,~~CA8HxE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"EmailSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEd,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,mBAAmB;IACnB,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,CAAC;IAC3C,oBAAoB;IACpB,oBAAoB,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7F;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,CA4IxE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Email/EmailSelector.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { ComboBox, createStringMatcher, menuHelpers, useI18n, useAfterInitialEffect } from '@pega/cosmos-react-core';
-const EmailSelector = ({ participants, selectedItems, label, mode, required, onSelectedItemChange, externalValidator, status, info }) => {
+const EmailSelector = ({ participants, selectedItems, label, mode, required, onSelectedItemChange, externalValidator, status, info, compose }) => {
     const [filterValue, setFilterValue] = useState('');
     const [emailParticipants, setEmailParticipants] = useState(participants);
     const t = useI18n();
@@ -25,7 +25,8 @@ const EmailSelector = ({ participants, selectedItems, label, mode, required, onS
             };
         });
         const isValid = externalValidator?.(filterValue);
-        return (filterValue && externalValidator && isValid) || (filterValue && !externalValidator)
+        return ((filterValue && externalValidator && isValid) || (filterValue && !externalValidator)) &&
+            !compose
             ? [
                 {
                     id: filterValue,
@@ -37,7 +38,7 @@ const EmailSelector = ({ participants, selectedItems, label, mode, required, onS
             : filteredItems;
     }, [emailParticipants, selectedItems, filterRegex]);
     const toggleSelectedItems = (id) => {
-        let newSelectedItems = [...selectedItems];
+        let newSelectedItems = mode === 'single-select' ? [] : [...selectedItems];
         if (selectedItems.includes(id)) {
             // Unselect an already selected item
             newSelectedItems = newSelectedItems.filter(value => value !== id);
@@ -80,9 +81,20 @@ const EmailSelector = ({ participants, selectedItems, label, mode, required, onS
         }
         onSelectedItemChange(newSelectedItems, label);
     };
+    const getSelectedItems = () => {
+        if (mode === 'single-select') {
+            return { id: selectedItems[0], text: selectedItems[0] };
+        }
+        return selectedItems.map(value => ({ id: value, text: value }));
+    };
+    const clearSelection = () => {
+        onSelectedItemChange([], label);
+    };
     const comboBoxProps = {
         value: filterValue,
         onChange: (e) => {
+            if (!e.target.value)
+                clearSelection();
             setFilterValue(e.target.value);
         },
         onBlur: () => {
@@ -94,7 +106,7 @@ const EmailSelector = ({ participants, selectedItems, label, mode, required, onS
             onItemClick: toggleSelectedItems
         },
         selected: {
-            items: selectedItems.map(value => ({ id: value, text: value })),
+            items: getSelectedItems(),
             onRemove: toggleSelectedItems
         },
         label,

package/lib/components/Email/EmailSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailSelector.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAErF,OAAO,EACL,QAAQ,EAER,mBAAmB,EACnB,WAAW,EAEX,OAAO,EAEP,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;~~AAoBjC~~,MAAM,aAAa,GAEf,CAAC,EACH,YAAY,EACZ,aAAa,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,MAAM,EACN,IAAI,~~EACL~~,EAAE,EAAE;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,qBAAqB,CAAC,GAAG,EAAE;QACzB,oBAAoB,CAAC,YAAY,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IAEjE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,aAAa,GAAG,CACpB,WAAW;YACT,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;gBACjE,OAAO,CACL,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC;oBAC9B,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;oBAC1B,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAC5B,CAAC;YACJ,CAAC,CAAC;YACJ,CAAC,CAAC,iBAAiB,CACtB,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE;YACnC,OAAO;gBACL,EAAE,EAAE,YAAY;gBAChB,OAAO,EAAE,QAAQ;gBACjB,SAAS,EAAE,CAAC,YAAY,CAAC;gBACzB,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,YAAY,CAAC;aAC/C,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC,WAAW,CAAC,CAAC;QAEjD,OAAO,CAAC,WAAW,IAAI,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,iBAAiB,CAAC;~~YACzF~~,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,WAAW;oBACf,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,EAAE;oBACtC,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC;iBAC9C;gBACD,GAAG,aAAa;aACjB;YACH,CAAC,CAAC,aAAa,CAAC;IACpB,CAAC,EAAE,CAAC,iBAAiB,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpD,MAAM,mBAAmB,GAAG,CAAC,EAAU,EAAE,EAAE;QACzC,IAAI,gBAAgB,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC;~~QAE1C~~,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;YAC9B,oCAAoC;YACpC,gBAAgB,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC;SACnE;aAAM;YACL,cAAc,CAAC,EAAE,CAAC,CAAC;YACnB,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;YAE7D,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE;gBAC5B,iCAAiC;gBACjC,IAAI,CAAC,iBAAiB,EAAE;oBACtB,oBAAoB,CAAC;wBACnB,GAAG,iBAAiB;wBACpB;4BACE,SAAS,EAAE,EAAE;4BACb,QAAQ,EAAE,EAAE;4BACZ,YAAY,EAAE,WAAW;yBAC1B;qBACF,CAAC,CAAC;oBACH,gBAAgB,GAAG,CAAC,GAAG,gBAAgB,EAAE,EAAE,CAAC,CAAC;iBAC9C;qBAAM;oBACL,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC,WAAW,CAAC,CAAC;oBACjD,IAAI,OAAO,EAAE;wBACX,oBAAoB,CAAC;4BACnB,GAAG,iBAAiB;4BACpB;gCACE,SAAS,EAAE,EAAE;gCACb,QAAQ,EAAE,EAAE;gCACZ,YAAY,EAAE,WAAW;6BAC1B;yBACF,CAAC,CAAC;wBACH,gBAAgB,GAAG,CAAC,GAAG,gBAAgB,EAAE,EAAE,CAAC,CAAC;qBAC9C;iBACF;aACF;iBAAM;gBACL,gCAAgC;gBAChC,gBAAgB,GAAG,CAAC,GAAG,gBAAgB,EAAE,EAAE,CAAC,CAAC;aAC9C;SACF;QAED,oBAAoB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG;QACpB,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC7C,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC;QACD,MAAM,EAAE,GAAG,EAAE;YACX,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,cAAc;YACrB,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,mBAAmB;SACjC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,~~aAAa~~,~~CAAC,GAAG,CAAC,KAAK,CAAC,~~EAAE~~,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC~~;~~YAC/D~~,QAAQ,EAAE,mBAAmB;SAC9B;QACD,KAAK;QACL,IAAI;QACJ,QAAQ;QACR,MAAM;QACN,IAAI;KACL,CAAC;IAEF,OAAO,KAAC,QAAQ,OAAK,aAAa,GAAI,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, ChangeEvent, useMemo, useState, ReactNode } from 'react';\n\nimport {\n ComboBox,\n ComboBoxProps,\n createStringMatcher,\n menuHelpers,\n NoChildrenProp,\n useI18n,\n FormControlProps,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport { EmailComposerProps, EmailUser } from './Email.types';\n\nexport interface EmailSelectorProps extends NoChildrenProp {\n /** participants /\n participants: EmailComposerProps['participants'];\n /* default selections /\n selectedItems: EmailUser['emailAddress'][];\n /* selectedItems /\n onSelectedItemChange: (selectedItems: EmailUser['emailAddress'][], label: ReactNode) => void;\n /\n Callback to handle external entry validation\n * If returned true considers the entry to be a valid entry\n */\n externalValidator?: EmailComposerProps['externalValidator'];\n status?: FormControlProps['status'];\n info?: FormControlProps['info'];\n}\n\nconst EmailSelector: FunctionComponent<\n EmailSelectorProps & Pick<ComboBoxProps, 'label' \| 'mode' \| 'required'>\n> = ({\n participants,\n selectedItems,\n label,\n mode,\n required,\n onSelectedItemChange,\n externalValidator,\n status,\n info\n}) => {\n const [filterValue, setFilterValue] = useState('');\n const [emailParticipants, setEmailParticipants] = useState(participants);\n const t = useI18n();\n\n useAfterInitialEffect(() => {\n setEmailParticipants(participants);\n }, [participants]);\n\n const filterRegex = createStringMatcher(filterValue, 'contains');\n\n const emailsToRender = useMemo(() => {\n const filteredItems = (\n filterValue\n ? emailParticipants.filter(({ emailAddress, fullName, shortName }) => {\n return (\n filterRegex.test(emailAddress) \|\|\n filterRegex.test(fullName) \|\|\n filterRegex.test(shortName)\n );\n })\n : emailParticipants\n ).map(({ emailAddress, fullName }) => {\n return {\n id: emailAddress,\n primary: fullName,\n secondary: [emailAddress],\n selected: selectedItems.includes(emailAddress)\n };\n });\n\n const isValid = externalValidator?.(filterValue);\n\n return (filterValue && externalValidator && isValid) \|\| (filterValue && !externalValidator)\n ? [\n {\n id: filterValue,\n primary: `${t('use')}: ${filterValue}`,\n selected: selectedItems.includes(filterValue)\n },\n ...filteredItems\n ]\n : filteredItems;\n }, [emailParticipants, selectedItems, filterRegex]);\n\n const toggleSelectedItems = (id: string) => {\n let newSelectedItems = [...selectedItems];\n\n if (selectedItems.includes(id)) {\n // Unselect an already selected item\n newSelectedItems = newSelectedItems.filter(value => value !== id);\n } else {\n setFilterValue('');\n const filteredItem = menuHelpers.getItem(emailsToRender, id);\n\n if (!filteredItem?.secondary) {\n // New value addition to the list\n if (!externalValidator) {\n setEmailParticipants([\n ...emailParticipants,\n {\n shortName: '',\n fullName: '',\n emailAddress: filterValue\n }\n ]);\n newSelectedItems = [...newSelectedItems, id];\n } else {\n const isValid = externalValidator?.(filterValue);\n if (isValid) {\n setEmailParticipants([\n ...emailParticipants,\n {\n shortName: '',\n fullName: '',\n emailAddress: filterValue\n }\n ]);\n newSelectedItems = [...newSelectedItems, id];\n }\n }\n } else {\n // Existing value to be selected\n newSelectedItems = [...newSelectedItems, id];\n }\n }\n\n onSelectedItemChange(newSelectedItems, label);\n };\n\n const comboBoxProps = {\n value: filterValue,\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n setFilterValue(e.target.value);\n },\n onBlur: () => {\n setFilterValue('');\n },\n menu: {\n items: emailsToRender,\n accent: filterRegex,\n onItemClick: toggleSelectedItems\n },\n selected: {\n items: ~~selectedItems.map~~(~~value => ({ id: value, text: value }~~)),\n onRemove: toggleSelectedItems\n },\n label,\n mode,\n required,\n status,\n info\n };\n\n return <ComboBox {...comboBoxProps} />;\n};\n\nexport default EmailSelector;\n"]}
1	+ {"version":3,"file":"EmailSelector.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ChangeEvent, useMemo, useState, ReactNode } from 'react';\n\nimport {\n ComboBox,\n ComboBoxProps,\n createStringMatcher,\n menuHelpers,\n NoChildrenProp,\n useI18n,\n FormControlProps,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport { EmailComposerProps, EmailUser } from './Email.types';\n\nexport interface EmailSelectorProps extends NoChildrenProp {\n /** participants /\n participants: EmailComposerProps['participants'];\n /* default selections /\n selectedItems: EmailUser['emailAddress'][];\n /* selectedItems /\n onSelectedItemChange: (selectedItems: EmailUser['emailAddress'][], label: ReactNode) => void;\n /\n Callback to handle external entry validation\n * If returned true considers the entry to be a valid entry\n */\n externalValidator?: EmailComposerProps['externalValidator'];\n status?: FormControlProps['status'];\n info?: FormControlProps['info'];\n compose?: boolean;\n}\n\nconst EmailSelector: FunctionComponent<\n EmailSelectorProps & Pick<ComboBoxProps, 'label' \| 'mode' \| 'required'>\n> = ({\n participants,\n selectedItems,\n label,\n mode,\n required,\n onSelectedItemChange,\n externalValidator,\n status,\n info,\n compose\n}) => {\n const [filterValue, setFilterValue] = useState('');\n const [emailParticipants, setEmailParticipants] = useState(participants);\n const t = useI18n();\n\n useAfterInitialEffect(() => {\n setEmailParticipants(participants);\n }, [participants]);\n\n const filterRegex = createStringMatcher(filterValue, 'contains');\n\n const emailsToRender = useMemo(() => {\n const filteredItems = (\n filterValue\n ? emailParticipants.filter(({ emailAddress, fullName, shortName }) => {\n return (\n filterRegex.test(emailAddress) \|\|\n filterRegex.test(fullName) \|\|\n filterRegex.test(shortName)\n );\n })\n : emailParticipants\n ).map(({ emailAddress, fullName }) => {\n return {\n id: emailAddress,\n primary: fullName,\n secondary: [emailAddress],\n selected: selectedItems.includes(emailAddress)\n };\n });\n\n const isValid = externalValidator?.(filterValue);\n\n return ((filterValue && externalValidator && isValid) \|\| (filterValue && !externalValidator)) &&\n !compose\n ? [\n {\n id: filterValue,\n primary: `${t('use')}: ${filterValue}`,\n selected: selectedItems.includes(filterValue)\n },\n ...filteredItems\n ]\n : filteredItems;\n }, [emailParticipants, selectedItems, filterRegex]);\n\n const toggleSelectedItems = (id: string) => {\n let newSelectedItems = mode === 'single-select' ? [] : [...selectedItems];\n\n if (selectedItems.includes(id)) {\n // Unselect an already selected item\n newSelectedItems = newSelectedItems.filter(value => value !== id);\n } else {\n setFilterValue('');\n const filteredItem = menuHelpers.getItem(emailsToRender, id);\n\n if (!filteredItem?.secondary) {\n // New value addition to the list\n if (!externalValidator) {\n setEmailParticipants([\n ...emailParticipants,\n {\n shortName: '',\n fullName: '',\n emailAddress: filterValue\n }\n ]);\n newSelectedItems = [...newSelectedItems, id];\n } else {\n const isValid = externalValidator?.(filterValue);\n if (isValid) {\n setEmailParticipants([\n ...emailParticipants,\n {\n shortName: '',\n fullName: '',\n emailAddress: filterValue\n }\n ]);\n newSelectedItems = [...newSelectedItems, id];\n }\n }\n } else {\n // Existing value to be selected\n newSelectedItems = [...newSelectedItems, id];\n }\n }\n\n onSelectedItemChange(newSelectedItems, label);\n };\n\n const getSelectedItems = () => {\n if (mode === 'single-select') {\n return { id: selectedItems[0], text: selectedItems[0] };\n }\n return selectedItems.map(value => ({ id: value, text: value }));\n };\n\n const clearSelection = () => {\n onSelectedItemChange([], label);\n };\n\n const comboBoxProps = {\n value: filterValue,\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.value) clearSelection();\n setFilterValue(e.target.value);\n },\n onBlur: () => {\n setFilterValue('');\n },\n menu: {\n items: emailsToRender,\n accent: filterRegex,\n onItemClick: toggleSelectedItems\n },\n selected: {\n items: getSelectedItems(),\n onRemove: toggleSelectedItems\n },\n label,\n mode,\n required,\n status,\n info\n };\n\n return <ComboBox {...comboBoxProps} />;\n};\n\nexport default EmailSelector;\n"]}

package/lib/components/Email/EmailSummaryItem.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { EmailSummaryItemProps } from './Email.types';
 interface StyledEmailSummaryItemProps extends EmailSummaryItemProps {
     isEmailItemActive: boolean;
 }
-export declare const StyledEmailSummaryItem: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledEmailSummaryItemProps, never>;
+export declare const StyledEmailSummaryItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, StyledEmailSummaryItemProps & ForwardProps, never>;
 declare const EmailSummaryItem: FunctionComponent<EmailSummaryItemProps & ForwardProps>;
 export default EmailSummaryItem;
 //# sourceMappingURL=EmailSummaryItem.d.ts.map

package/lib/components/Email/EmailSummaryItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailSummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAI1E,OAAO,EAEL,YAAY,EAUb,MAAM,yBAAyB,CAAC;~~AAIjC~~,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;~~AAsCtD~~,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAID,eAAO,MAAM,sBAAsB,~~qIA6BjC~~,CAAC;~~AAMH~~,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,~~CAsG7E~~,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"EmailSummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAI1E,OAAO,EAEL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAyCtD,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAID,eAAO,MAAM,sBAAsB,gJAiClC,CAAC;AAMF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA6G7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Email/EmailSummaryItem.js CHANGED Viewed

@@ -3,13 +3,15 @@ import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { defaultThemeProp, Text, Flex, Count, Sentiment, MetaList, DateTimeDisplay, Status, tryCatch, useI18n } from '@pega/cosmos-react-core';
-import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 import { StyledMetaList } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';
 const StyledMessage = styled(Flex)(({ unreadEmailCount, theme }) => {
     return css `
+    width: ${theme.base['content-width'].md};
+    text-align: start;
     text-overflow: ellipsis;
     overflow: hidden;
     margin-inline-end: ${theme.base.spacing};
+    margin-block-end: ${theme.base.spacing};
     ${unreadEmailCount !== undefined &&
         unreadEmailCount > 0 &&
         css `
@@ -40,33 +42,35 @@ const StyledParticipants = styled(Flex)(({ unreadEmailCount, theme }) => {
   `;
 });
 const StyledStatuses = styled.div ``;
-export const StyledEmailSummaryItem = styled.button(({ theme }) => {
+export const StyledEmailSummaryItem = styled.li(({ theme }) => {
     const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
     return css `
-    width: 100%;
-    color: ${theme.base.palette['foreground-color']};
-    background-color: ${theme.base.palette['primary-background']};
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    ${StyledMetaList}, ${StyledMessageAndDate}, ${StyledStatuses} {
-      margin-block-start: ${theme.base.spacing};
-    }
-    & + & {
-      margin-inline-start: 0;
-    }
+      width: 100%;
+      color: ${theme.base.palette['foreground-color']};
+      background-color: ${theme.base.palette['primary-background']};
+      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+      outline: none;
+      cursor: pointer;
+      ${StyledMetaList}, ${StyledMessageAndDate}, ${StyledStatuses} {
+        margin-block-start: ${theme.base.spacing};
+      }
+      & + & {
+        margin-inline-start: 0;
+      }
-    &[aria-selected='true'],
-    &[data-current='true'] {
-      background-color: ${theme.base.palette['secondary-background']};
-    }
+      &[aria-selected='true'],
+      &[data-current='true'] {
+        background-color: ${theme.base.palette['secondary-background']};
+      }
-    &:hover,
-    &:focus-within {
-      background-color: ${hoverColor};
-    }
-    &:not(:last-child) {
-      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
-    }
-  `;
+      &:hover,
+      &:focus-within {
+        background-color: ${hoverColor};
+      }
+      &:not(:last-child) {
+        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+      }
+    `;
 });
 StyledEmailSummaryItem.defaultProps = defaultThemeProp;
 StyledParticipants.defaultProps = defaultThemeProp;
@@ -96,8 +100,14 @@ const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, messag
         }
         return participants;
     }, [activeParticipants]);
-    return (_jsxs(BareButton, { as: StyledEmailSummaryItem, ref: ref, ...restProps, id: id, onClick: () => onSelect(id), "aria-selected": active, "aria-label": `${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: -1, children: [_jsxs(StyledParticipants, { unreadEmailCount: unreadEmailCount, container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h4', children: emailParticipants }), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { variant: 'default', children: unreadEmailCount }))] }), _jsxs(Flex, { container: {
-                    justify: 'between'
+    const itemStatus = `${unreadEmailCount ? `${t('unread')}, ` : ''}${undelivered ? `${t('undelivered')}, ` : ''}${drafts ? `${t('drafts')}, ` : ''}`;
+    return (_jsxs(StyledEmailSummaryItem, { ref: ref, ...restProps, id: id, onClick: () => onSelect(id), onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                onSelect(id);
+            }
+        }, "aria-selected": active, "aria-label": `${itemStatus}${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: -1, children: [_jsxs(StyledParticipants, { unreadEmailCount: unreadEmailCount, container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h4', children: emailParticipants }), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { children: unreadEmailCount }))] }), _jsxs(Flex, { container: {
+                    justify: 'between',
+                    wrap: 'wrap'
                 }, as: StyledMessageAndDate, children: [_jsx(StyledMessage, { unreadEmailCount: unreadEmailCount, children: message }), _jsx(DateTimeDisplay, { value: timeStamp, variant: 'date', format: 'short' })] }), _jsx(MetaList, { items: items }), (undelivered || drafts) && (_jsxs(Flex, { container: {
                     justify: 'start',
                     gap: 1