@pega/cosmos-react-social 5.0.0-dev.4.7 → 5.0.0-dev.4.9

package/lib/components/Email/EmailComposer.js

@@ -1,255 +0,0 @@
-import { createElement as _createElement } from "react";
-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, 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';
-import * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';
-import * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';
-import EmailSelector from './EmailSelector';
-registerIcon(paperClipIcon, replyAllIcon, replyIcon, forwardIcon);
-export const StyledEmailComposer = styled.div(({ progress }) => {
-    return css `
-    ${progress
-        ? css `
-          visibility: hidden;
-        `
-        : css `
-          visibility: visible;
-        `}
-  `;
-});
-export const StyledResponseTypeIcon = styled(Icon)(({ theme }) => {
-    return css `
-    color: ${theme.base.palette.interactive};
-  `;
-});
-StyledResponseTypeIcon.defaultProps = defaultThemeProp;
-export const StyledToggleButton = styled(Button)(({ theme }) => {
-    return css `
-    margin-block-start: calc(2 * ${theme.base.spacing});
-    color: ${theme.base.palette.interactive};
-  `;
-});
-StyledToggleButton.defaultProps = defaultThemeProp;
-const StyledResponseType = styled(MenuButton) `
-  align-self: flex-start;
-`;
-StyledResponseType.defaultProps = defaultThemeProp;
-export const StyledModal = styled(Modal)(({ state, theme }) => {
-    if (state !== 'docked')
-        return;
-    return css `
-    max-height: calc(100vh - ${theme.base.spacing} * 4);
-  `;
-});
-StyledModal.defaultProps = defaultThemeProp;
-const responseTypeIcons = {
-    reply: 'reply',
-    replyAll: 'reply-all',
-    forward: 'forward'
-};
-const editorToolbar = [
-    'inline-styling',
-    'lists',
-    'indentation',
-    'images',
-    'links'
-];
-const ComposerModal = ({ modalContent, actions: modalActions, progress: modalProgress, subject, onCancel, compose }) => {
-    const { state } = useModalContext();
-    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 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(function EmailComposer({ 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 responseTypeMenuData = useMemo(() => {
-        const menuItems = [
-            {
-                id: 'reply',
-                primary: t('reply'),
-                visual: _jsx(StyledResponseTypeIcon, { name: responseTypeIcons.reply }),
-                selected: responseType === 'reply',
-                onClick: () => {
-                    onChange('responseType', 'reply');
-                }
-            },
-            {
-                id: 'replyAll',
-                primary: t('reply_all'),
-                visual: _jsx(StyledResponseTypeIcon, { name: responseTypeIcons.replyAll }),
-                selected: responseType === 'replyAll',
-                onClick: () => {
-                    onChange('responseType', 'replyAll');
-                }
-            },
-            {
-                id: 'forward',
-                primary: t('forward'),
-                visual: _jsx(StyledResponseTypeIcon, { name: responseTypeIcons.forward }),
-                selected: responseType === 'forward',
-                onClick: () => {
-                    onChange('responseType', 'forward');
-                }
-            }
-        ];
-        return {
-            menuItems,
-            selectedResponseType: menuItems.find(item => item.selected)?.primary || menuItems[0].primary,
-            selectedResponseTypeIcon: (responseType && responseTypeIcons[responseType]) || responseTypeIcons.reply
-        };
-    }, [responseType]);
-    const onAttachmentDelete = (name) => {
-        onChange('attachments', attachments?.filter(item => item.name !== name) || []);
-    };
-    const onFileChange = (e) => {
-        if (e.target.files) {
-            const newFiles = Array.from(e.target.files).map(file => ({ name: file.name, file }));
-            onChange('attachments', attachments ? [...attachments, ...newFiles] : newFiles);
-        }
-    };
-    useImperativeHandle(handle, () => ({
-        replaceBodyContent: (contentToReplace) => {
-            editorRef.current?.insertHtml(contentToReplace, true);
-            // Triggering onChange manually with new content as onChange on RTE is not triggered automatically for insertHTML
-            onChange('bodyContent', editorRef.current?.getHtml() || '', true);
-        },
-        updateImage: (imageData, id) => {
-            editorRef.current?.appendImage(imageData, id);
-            // Triggering onChange manually as onChange on RTE is not triggered automatically for appendImage
-            onChange('bodyContent', editorRef.current?.getHtml() || '', true);
-        },
-        activate: () => {
-            modalMethods.current?.activate();
-        },
-        setCursorLocationToStart: () => {
-            editorRef.current?.setCursorLocationToStart?.();
-        }
-    }));
-    const hasCC = useMemo(() => !!cc?.value?.length, [cc]);
-    const hasBCC = useMemo(() => !!bcc?.value?.length, [bcc]);
-    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'
-        }, item: { grow: 1 }, children: _jsxs(Flex, { container: {
-                gap: 1
-            }, children: [_jsxs(Flex, { container: true, item: { grow: 1 }, children: [_jsx(Button, { variant: 'secondary', onClick: () => {
-                                onCancel();
-                            }, 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') })] }), _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, compose }, { minimizable: true, maximizable: true, dockable: true });
-        return () => {
-            // Will close the modal on unmount
-            modalMethods.current?.dismiss();
-            modalMethods.current?.unmount();
-        };
-    }, []);
-    useEffect(() => {
-        modalMethods.current?.update({
-            modalContent: content,
-            actions: footerContent,
-            progress,
-            subject,
-            onCancel,
-            compose
-        });
-    });
-    return null;
-});
-export default EmailComposer;
-//# sourceMappingURL=EmailComposer.js.map

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

@@ -1 +0,0 @@
-{"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 = 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(function EmailComposer(\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: 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() || '', true);\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() || '', true);\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')}\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\nexport default EmailComposer;\n"]}

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

@@ -1,17 +0,0 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { EmailConversationProps } from './Email.types';
-export declare const StyledEmailParticipantsText: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCompactTimeStampDisplay: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledConversationHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
-    collapsed: boolean;
-}, never>;
-export declare const StyledUnReadCount: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledEmailConversation: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    singleConversation?: boolean | undefined;
-    showHeader?: boolean | undefined;
-}, never>;
-export declare const StyledEmailInConversation: import("styled-components").StyledComponent<FunctionComponent<import("./Email.types").EmailProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const EmailConversation: FunctionComponent<EmailConversationProps & ForwardProps>;
-export default EmailConversation;
-//# sourceMappingURL=EmailConversation.d.ts.map

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

@@ -1 +0,0 @@
-{"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,CAgJ/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Email/EmailConversation.js

@@ -1,174 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { mix, readableColor } from 'polished';
-import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
-import { ExpandCollapse, Flex, Icon, registerIcon, Text, useI18n, defaultThemeProp, useAfterInitialEffect, DateTimeDisplay, readableHue, useBreakpoint, useConfiguration, StyledIcon, tryCatch, useDirection, Status } from '@pega/cosmos-react-core';
-import Email from './Email';
-registerIcon(caretDownIcon);
-const EmailParticipantTextCss = css `
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-`;
-export const StyledEmailParticipantsText = styled(Text) `
-  ${EmailParticipantTextCss}
-`;
-StyledEmailParticipantsText.defaultProps = defaultThemeProp;
-export const StyledCompactTimeStampDisplay = styled(Text) `
-  ${EmailParticipantTextCss}
-  margin-top: calc(${props => props.theme.base.spacing} / 2);
-`;
-StyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;
-export const StyledConversationHeader = styled.header(({ theme: { base: { palette } }, collapsed }) => {
-    return css `
-      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: { 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 ${spacing};
-      font-weight: ${fontWeightSemiBold};
-      width: fit-content;
-    `;
-});
-StyledUnReadCount.defaultProps = defaultThemeProp;
-export const StyledEmailConversation = styled.li(({ theme: { base: { spacing, palette, 'border-radius': baseBorderRadius } }, singleConversation, showHeader }) => {
-    return css `
-      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: { spacing, palette } } }) => {
-    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
-    return css `
-      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: { 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;
-    `;
-});
-StyledUnreadIndicator.defaultProps = defaultThemeProp;
-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: ${spacing};
-      background: ${palette['primary-background']};
-      color: ${palette['foreground-color']};
-      position: sticky;
-      top: 0;
-      z-index: 1;
-
-      &[aria-expanded='true'] {
-        border-bottom: 0.0625rem solid ${palette['border-line']};
-      }
-
-      &:focus {
-        background: ${palette['secondary-background']};
-        outline: none;
-      }
-
-      &:hover {
-        background: ${hoverColor};
-        outline: none;
-      }
-
-      & > ${StyledIcon} {
-        align-self: flex-start;
-      }
-    `;
-});
-StyledConversationButton.defaultProps = defaultThemeProp;
-const EmailConversation = forwardRef(function EmailConversation(props, ref) {
-    const { id, emails, from, to, unReadEmailCount, timeStamp, isForwarded = false, isCollapsed = false, onCollapse, onExpand, undelivered, drafts, ...restProps } = props;
-    const t = useI18n();
-    const [collapsedState, setCollapsedState] = useState(isCollapsed);
-    useAfterInitialEffect(() => {
-        setCollapsedState(isCollapsed);
-    }, [isCollapsed]);
-    const onExpandCollapse = () => {
-        setCollapsedState(!collapsedState);
-    };
-    const headerRef = useRef(null);
-    const isSmallOrAbove = useBreakpoint('sm', {
-        breakpointRef: headerRef,
-        themeProp: 'content-width'
-    });
-    const { locale } = useConfiguration();
-    const { rtl } = useDirection();
-    const caretDirection = rtl ? 'caret-left' : 'caret-right';
-    const generateRecipientList = useMemo(() => {
-        const recipientElements = to.slice(0, 2).map((recipient, i) => {
-            return `${recipient.shortName}${i < to.length - 1 ? ';' : ''} `;
-        });
-        if (to.length > 2) {
-            return [...recipientElements, `+${to.length - 2} more`];
-        }
-        return recipientElements;
-    }, [to]);
-    return (_jsxs(StyledEmailConversation, { ...restProps, id: id, ref: ref, children: [_jsxs(Flex, { as: StyledConversationButton, id: `conversation-heading${id}`, "aria-controls": id, "aria-expanded": !collapsedState, container: { gap: 1, alignItems: 'center', pad: 1 }, onClick: onExpandCollapse, ref: headerRef, children: [_jsx(Icon, { name: collapsedState ? caretDirection : 'caret-down' }), _jsx(StyledUnreadIndicator, { isVisible: !!unReadEmailCount }), _jsxs(Flex, { container: {
-                            wrap: 'nowrap',
-                            alignItems: 'start',
-                            direction: 'column'
-                        }, item: {
-                            grow: 1,
-                            shrink: 1
-                        }, children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { variant: 'primary', as: StyledEmailParticipantsText, children: `${isForwarded ? 'FW' : t('from')}: ${from.fullName}` }), (undelivered || drafts) && (_jsxs(_Fragment, { children: [undelivered && _jsx(Status, { variant: 'urgent', children: t('undelivered') }), drafts && (_jsx(Status, { variant: 'pending', children: t('draft', [], { count: Infinity }) }))] }))] }), _jsxs(Text, { variant: 'secondary', as: StyledEmailParticipantsText, children: [`${t('to')}: `, generateRecipientList] }), !isSmallOrAbove && (_jsxs(Text, { variant: 'secondary', as: StyledCompactTimeStampDisplay, children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp })] }))] }), _jsx(Flex, { container: {
-                            gap: 1,
-                            alignItems: 'center'
-                        }, item: {
-                            shrink: 0
-                        }, children: isSmallOrAbove && (_jsxs(Text, { variant: 'secondary', as: StyledEmailParticipantsText, children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp })] })) })] }), _jsxs(ExpandCollapse, { as: Flex, container: { direction: 'column' }, collapsed: collapsedState, onBeforeCollapse: onCollapse, onBeforeExpand: onExpand, role: 'region', "aria-labelledby": `conversation-heading${id}`, id: `conversation-content${id}`, children: [!!unReadEmailCount && (_jsx(Text, { as: StyledUnReadCount, id: `unread-emailCount-${id}`, variant: 'secondary', children: t('new_emails_count', [unReadEmailCount], { count: unReadEmailCount }) })), emails &&
-                        emails.map(email => {
-                            return _jsx(StyledEmailInConversation, { ...email }, email.id);
-                        })] })] }));
-});
-export default EmailConversation;
-//# sourceMappingURL=EmailConversation.js.map

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

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

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

@@ -1,11 +0,0 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { EmailEntityProps } from './Email.types';
-declare const EmailEntity: FunctionComponent<EmailEntityProps & ForwardProps>;
-export declare class EmailEntityWeb extends HTMLElement {
-    removeElements(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}
-export default EmailEntity;
-//# sourceMappingURL=EmailEntity.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"EmailEntity.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailEntity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AAG/E,OAAO,EACL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAuCnE,CAAC;AAEF,qBAAa,cAAe,SAAQ,WAAW;IAC7C,cAAc;IAMd,iBAAiB;IAoBjB,oBAAoB;CAGrB;AAMD,eAAe,WAAW,CAAC"}

package/lib/components/Email/EmailEntity.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { Tooltip, useConsolidatedRef, useElement, useI18n, useConfiguration, formatListToLocaleString, Icon } from '@pega/cosmos-react-core';
-import { StyledEmailEntity } from './Email.styles';
-const EmailEntity = forwardRef(function EmailEntity({ entity, ...restProps }, ref) {
-    const [el, setEl] = useElement();
-    const elementRef = useConsolidatedRef(setEl, ref);
-    const t = useI18n();
-    const { locale } = useConfiguration();
-    const tooltipRef = useRef(null);
-    return (_jsxs(StyledEmailEntity, { ...restProps, entity: entity, ref: elementRef, "aria-label": Array.isArray(entity.description)
-            ? formatListToLocaleString(entity.description, t, locale)
-            : entity.description, onContextMenu: () => {
-            if (tooltipRef.current)
-                tooltipRef.current.hidden = true;
-        }, contentEditable: false, children: [entity.value, entity.icon && _jsx(Icon, { name: entity.icon }), entity.description && entity.description.length > 0 && (_jsx(Tooltip, { target: el, ref: tooltipRef, hideDelay: 'short', children: Array.isArray(entity.description)
-                    ? formatListToLocaleString(entity.description, t, locale, {
-                        separator: '\n'
-                    })
-                    : entity.description }))] }));
-});
-export class EmailEntityWeb extends HTMLElement {
-    removeElements() {
-        while (this.firstChild) {
-            this.removeChild(this.firstChild);
-        }
-    }
-    connectedCallback() {
-        const inner = this.innerHTML;
-        this.removeElements();
-        const variant = Number(this.getAttribute('data-variant'));
-        const descAttribute = this.getAttribute('data-description');
-        const description = descAttribute !== null ? JSON.parse(descAttribute) : undefined;
-        const type = this.getAttribute('data-type') || '';
-        render(_jsx(EmailEntity, { entity: {
-                value: inner,
-                type,
-                variant,
-                description
-            } }), this);
-    }
-    disconnectedCallback() {
-        unmountComponentAtNode(this);
-    }
-}
-if (!customElements.get('pega-email-entity')) {
-    customElements.define('pega-email-entity', EmailEntityWeb);
-}
-export default EmailEntity;
-//# sourceMappingURL=EmailEntity.js.map