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

package/lib/components/Chat/TypeIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeIndicator.js","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,OAAO,MAAM,WAAW,CAAC;AAGhC,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CACpB,KAA0C,EAC1C,GAA8B;IAE9B,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC;IACnE,OAAO,CACL,KAAC,OAAO,OACF,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,MAAM,QACN,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,gBACJ,SAAS,GACrB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nimport Message from './Message';\nimport { TypeIndicatorProps } from './Chat.types';\n\nconst TypeIndicator: FunctionComponent<TypeIndicatorProps & ForwardProps> = forwardRef(\n  function TypeIndicator(\n    props: PropsWithoutRef<TypeIndicatorProps>,\n    ref: TypeIndicatorProps['ref']\n  ) {\n    const { avatarInfo, message, senderId, senderType, agentVariant, ...restProps } = props;\n    const t = useI18n();\n\n    const ariaLabel = t('is_typing', [avatarInfo.name, message || '']);\n    return (\n      <Message\n        {...restProps}\n        senderType={senderType}\n        senderId={senderId}\n        direction='in'\n        avatarInfo={avatarInfo}\n        agentVariant={agentVariant}\n        typing\n        ref={ref}\n        message={message}\n        aria-label={ariaLabel}\n      />\n    );\n  }\n);\n\nexport default TypeIndicator;\n"]}

package/lib/components/Chat/index.d.ts

@@ -0,0 +1,15 @@
+export { default } from './Chat';
+export type { ChatProps } from './Chat';
+export { default as ChatHeader } from './ChatHeader';
+export type { ChatHeaderProps } from './ChatHeader';
+export { default as ChatBody, NewMessageSeparatorId } from './ChatBody';
+export { default as ChatComposer } from './ChatComposer';
+export type { ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';
+export { default as SuggestedReplyPicker } from './SuggestedReplyPicker';
+export type { SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';
+export type { AttachmentItemProps, ChatSettingsPanelProps, MediaPageLinks, MessageProps, MessageHeaderProps, ChatBodyProps, ChatBodyListItemProps, ChatBodyHandleValue, TypeIndicatorProps, SystemMessageProps } from './Chat.types';
+export { default as Message } from './Message';
+export { default as SystemMessage } from './SystemMessage';
+export { default as TypeIndicator } from './TypeIndicator';
+export { default as ChatSettingsPanel } from './ChatSettingsPanel';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Chat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxF,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/Chat/index.js

@@ -0,0 +1,10 @@
+export { default } from './Chat';
+export { default as ChatHeader } from './ChatHeader';
+export { default as ChatBody, NewMessageSeparatorId } from './ChatBody';
+export { default as ChatComposer } from './ChatComposer';
+export { default as SuggestedReplyPicker } from './SuggestedReplyPicker';
+export { default as Message } from './Message';
+export { default as SystemMessage } from './SystemMessage';
+export { default as TypeIndicator } from './TypeIndicator';
+export { default as ChatSettingsPanel } from './ChatSettingsPanel';
+//# sourceMappingURL=index.js.map

package/lib/components/Chat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAczE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './Chat';\nexport type { ChatProps } from './Chat';\nexport { default as ChatHeader } from './ChatHeader';\nexport type { ChatHeaderProps } from './ChatHeader';\nexport { default as ChatBody, NewMessageSeparatorId } from './ChatBody';\nexport { default as ChatComposer } from './ChatComposer';\nexport type { ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';\nexport { default as SuggestedReplyPicker } from './SuggestedReplyPicker';\nexport type { SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';\nexport type {\n  AttachmentItemProps,\n  ChatSettingsPanelProps,\n  MediaPageLinks,\n  MessageProps,\n  MessageHeaderProps,\n  ChatBodyProps,\n  ChatBodyListItemProps,\n  ChatBodyHandleValue,\n  TypeIndicatorProps,\n  SystemMessageProps\n} from './Chat.types';\nexport { default as Message } from './Message';\nexport { default as SystemMessage } from './SystemMessage';\nexport { default as TypeIndicator } from './TypeIndicator';\nexport { default as ChatSettingsPanel } from './ChatSettingsPanel';\n"]}

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

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+import { ContextMenuPopoverProps } from './Email.types';
+declare const ContextMenuPopover: FunctionComponent<ContextMenuPopoverProps>;
+export default ContextMenuPopover;
+//# sourceMappingURL=ContextMenuPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuPopover.d.ts","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AASnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CA6ElE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/Email/ContextMenuPopover.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Popover, Menu, Text, useI18n } from '@pega/cosmos-react-core';
+import { StyledEmailMoreInfoPopover, StyledContextMenuFieldSelector, StyledContextMenu } from './Email.styles';
+const ContextMenuPopover = forwardRef(function ContextMenuPopover({ cursorPosition, contextMenu, targetNode, show }, ref) {
+    const t = useI18n();
+    const selection = document.getSelection();
+    const targetElement = targetNode instanceof Element ? targetNode : targetNode?.parentElement;
+    if (targetElement && targetElement.tagName.toLowerCase() === 'mark') {
+        selection?.removeAllRanges();
+    }
+    if (selection && !selection.toString() && targetNode) {
+        const range = document.createRange();
+        range.selectNodeContents(targetNode);
+        selection?.removeAllRanges();
+        selection.addRange(range);
+    }
+    const { onItemClick, items } = contextMenu;
+    const onItemSelect = (contextMenuItemId, e) => {
+        e.stopPropagation();
+        const selectedcontextMenuItem = items.find(({ id }) => id === contextMenuItemId);
+        if (selectedcontextMenuItem && selection) {
+            onItemClick({
+                fieldName: selectedcontextMenuItem.primary,
+                fieldValue: selection.toString()
+            });
+        }
+    };
+    const itemsToRender = items.map(item => {
+        return {
+            ...item,
+            visual: item.selected ? (_jsx(StyledContextMenuFieldSelector, { selected: true })) : (_jsx(StyledContextMenuFieldSelector, {}))
+        };
+    });
+    return (_jsx(Popover, { as: StyledEmailMoreInfoPopover, target: {
+            getBoundingClientRect: () => {
+                const { x, y } = cursorPosition;
+                return {
+                    width: 0,
+                    height: 0,
+                    top: y,
+                    right: x,
+                    bottom: y,
+                    left: x,
+                    x,
+                    y,
+                    toJSON: () => { }
+                };
+            }
+        }, show: show, placement: 'bottom', ref: ref, children: _jsx(StyledContextMenu, { children: _jsx(Menu, { ...contextMenu, header: _jsx(Text, { variant: 'h5', children: t('copy_to') }), items: itemsToRender, onItemClick: onItemSelect }) }) }));
+});
+export default ContextMenuPopover;
+//# sourceMappingURL=ContextMenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuPopover.js","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, MouseEvent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Popover, Menu, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport {\n  StyledEmailMoreInfoPopover,\n  StyledContextMenuFieldSelector,\n  StyledContextMenu\n} from './Email.styles';\nimport { ContextMenuPopoverProps } from './Email.types';\n\nconst ContextMenuPopover: FunctionComponent<ContextMenuPopoverProps> = forwardRef(\n  function ContextMenuPopover(\n    { cursorPosition, contextMenu, targetNode, show }: PropsWithoutRef<ContextMenuPopoverProps>,\n    ref: ContextMenuPopoverProps['ref']\n  ) {\n    const t = useI18n();\n    const selection = document.getSelection();\n\n    const targetElement = targetNode instanceof Element ? targetNode : targetNode?.parentElement;\n    if (targetElement && targetElement.tagName.toLowerCase() === 'mark') {\n      selection?.removeAllRanges();\n    }\n\n    if (selection && !selection.toString() && targetNode) {\n      const range = document.createRange();\n      range.selectNodeContents(targetNode as Node);\n      selection?.removeAllRanges();\n      selection.addRange(range);\n    }\n    const { onItemClick, items } = contextMenu;\n    const onItemSelect = (contextMenuItemId: string, e: MouseEvent) => {\n      e.stopPropagation();\n      const selectedcontextMenuItem = items.find(({ id }) => id === contextMenuItemId);\n\n      if (selectedcontextMenuItem && selection) {\n        onItemClick({\n          fieldName: selectedcontextMenuItem.primary,\n          fieldValue: selection.toString()\n        });\n      }\n    };\n\n    const itemsToRender = items.map(item => {\n      return {\n        ...item,\n        visual: item.selected ? (\n          <StyledContextMenuFieldSelector selected />\n        ) : (\n          <StyledContextMenuFieldSelector />\n        )\n      };\n    });\n\n    return (\n      <Popover\n        as={StyledEmailMoreInfoPopover}\n        target={{\n          getBoundingClientRect: () => {\n            const { x, y } = cursorPosition;\n            return {\n              width: 0,\n              height: 0,\n              top: y,\n              right: x,\n              bottom: y,\n              left: x,\n              x,\n              y,\n              toJSON: () => {}\n            };\n          }\n        }}\n        show={show}\n        placement='bottom'\n        ref={ref}\n      >\n        <StyledContextMenu>\n          <Menu\n            {...contextMenu}\n            header={<Text variant='h5'>{t('copy_to')}</Text>}\n            items={itemsToRender}\n            onItemClick={onItemSelect}\n          />\n        </StyledContextMenu>\n      </Popover>\n    );\n  }\n);\n\nexport default ContextMenuPopover;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EA2Bb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAa,UAAU,EAAiC,MAAM,eAAe,CAAC;AAiBrF,OAAO,eAAe,CAAC;AAiCvB,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAmftD,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/components/Email/Email.js

@@ -0,0 +1,244 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, Fragment, useRef, useState, useMemo, useEffect, useImperativeHandle } from 'react';
+import { Text, SummaryItem, Avatar, Flex, EmailDisplay, Button, Icon, Sentiment, useOuterEvent, Popover, useElement, CardContent, useI18n, FileDisplay, useBreakpoint, DateTimeDisplay, useConfiguration, MetaList, useScrollToggle, Status, Banner, useTheme, useEscape, HTML } from '@pega/cosmos-react-core';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
+import ContextMenuPopover from './ContextMenuPopover';
+import { StyledEmail, StyledEmailDisplay, StyledEmailHeader, StyledFromEmailDisplay, StyledEmailMoreInfoButton, StyledEmailMoreInfoPopover, StyledEmailPrimaryFieldValueList, StyledEmailBody, StyledEmailSecondaryFieldValueList, StyledSuggestedRepliesButton, StyledSuggestedRepliesMenuButton, StyledForwardedContentToggle, StyledEmailActions } from './Email.styles';
+import highlightEntities from './utils/EntityHighlighter';
+import './EmailEntity';
+const EmailDisplayList = ({ emailUsers, showEmailAddress, showShortName }) => {
+    return (_jsx(_Fragment, { children: emailUsers.map(({ emailAddress, fullName, shortName }, i) => (_jsxs(Fragment, { children: [i === 0 ? '' : '; ', _jsx(EmailDisplay, { value: emailAddress, displayText: `${showShortName ? shortName : fullName}${showEmailAddress ? ` <${emailAddress}>` : ''}`, variant: 'text', as: StyledEmailDisplay })] }, emailAddress))) }));
+};
+const OVERFLOW_TO_EMAIL_COUNT = 2;
+const OVERFLOW_EMAIL_SUGGESTION_COUNT = 2;
+const Email = forwardRef(function Email(props, ref) {
+    const { id, from, to = [], cc = [], bcc = [], timeStamp, sentiment, subject, forwardedContent, attachments = [], suggestions = [], entityHighlightMapping = [], onReply, onForward, onReplyAll, onEditDraft, onDeleteDraft, onSuggestionClick, contextMenu, status, banner, body, ...restProps } = props;
+    const t = useI18n();
+    const theme = useTheme();
+    const [emailMoreInfoBtnRef, setEmailMoreInfoBtnRef] = useElement(null);
+    const [showEmailMoreInfo, setShowEmailMoreInfo] = useState(false);
+    const [showForwardedContent, setShowForwardedContent] = useState(false);
+    const [emailMoreInfoPopover, setEmailMoreInfoPopover] = useElement(null);
+    const emailMoreInfoFields = [];
+    // Only way to set this is through imperative handle
+    const [contextMenuItems, setContextMenuItems] = useState([]);
+    const [contextMenuLoading, setContextMenuLoading] = useState(false);
+    const [contextMenuPopoverOpen, setContextMenuPopoverOpen] = useState(false);
+    const { disableScroll, enableScroll } = useScrollToggle();
+    const [contextMenuPopoverEl, setContextMenuPopoverEl] = useElement();
+    useImperativeHandle(contextMenu?.handle, () => ({
+        setItems: (ctxMenuItems) => {
+            setContextMenuItems(ctxMenuItems || []);
+        },
+        setLoading(loading) {
+            setContextMenuLoading(loading);
+        },
+        setOpen(visible) {
+            setContextMenuPopoverOpen(visible);
+        }
+    }));
+    const headerRef = useRef(null);
+    const isSmallOrAbove = useBreakpoint('sm', {
+        breakpointRef: headerRef,
+        themeProp: 'content-width'
+    });
+    const { locale } = useConfiguration();
+    const [currentTarget, setCurrentTarget] = useState();
+    useOuterEvent('mousedown', [contextMenuPopoverEl], () => {
+        if (contextMenuPopoverOpen)
+            setContextMenuPopoverOpen(false);
+    });
+    // Handler for right click on email body
+    const onContextMenu = (e) => {
+        if (e.target instanceof HTMLElement && e.target.textContent?.trim()) {
+            setCurrentTarget({
+                targetNode: e.target,
+                cursorPosition: {
+                    x: e.pageX - window.scrollX,
+                    y: e.pageY - window.scrollY
+                }
+            });
+        }
+        contextMenu?.onContextMenu(id, e);
+    };
+    const onItemClick = (selectedValue) => {
+        setContextMenuPopoverOpen(false);
+        contextMenu?.onItemClick(selectedValue);
+    };
+    if (from) {
+        emailMoreInfoFields.push({
+            id: 'from',
+            name: t('from'),
+            value: from.emailAddress
+        });
+    }
+    if (to.length > 0) {
+        emailMoreInfoFields.push({
+            id: 'to',
+            name: t('to'),
+            value: _jsx(EmailDisplayList, { emailUsers: to, showEmailAddress: true })
+        });
+    }
+    if (cc.length > 0) {
+        emailMoreInfoFields.push({
+            id: 'cc',
+            name: 'CC',
+            value: _jsx(EmailDisplayList, { emailUsers: cc, showEmailAddress: true })
+        });
+    }
+    if (bcc.length > 0) {
+        emailMoreInfoFields.push({
+            id: 'BCC',
+            name: 'BCC',
+            value: _jsx(EmailDisplayList, { emailUsers: bcc, showEmailAddress: true })
+        });
+    }
+    if (timeStamp) {
+        emailMoreInfoFields.push({
+            id: 'date',
+            name: t('date'),
+            value: (_jsxs(Text, { children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp })] }))
+        });
+    }
+    useOuterEvent('mousedown', [emailMoreInfoPopover], () => {
+        setShowEmailMoreInfo(false);
+    });
+    useEscape(() => {
+        setShowEmailMoreInfo(false);
+    });
+    const secondaryFields = [];
+    if (attachments.length > 0) {
+        secondaryFields.push({
+            id: 'attachments',
+            name: '',
+            value: (_jsx(Flex, { container: { gap: 1, wrap: 'wrap' }, children: attachments.map(attachmentProps => (_createElement(FileDisplay, { ...attachmentProps, key: attachmentProps.value }))) }))
+        });
+    }
+    if (suggestions.length > 0) {
+        secondaryFields.push({
+            id: 'suggested_replies',
+            name: '',
+            value: (_jsxs(Flex, { container: { wrap: 'wrap' }, children: [suggestions
+                        .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)
+                        .map(({ id: suggestionId, title }) => (_jsx(StyledSuggestedRepliesButton, { variant: 'secondary', onClick: () => {
+                            onSuggestionClick?.(id, suggestionId);
+                        }, children: title }, suggestionId))), suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (_jsx(StyledSuggestedRepliesMenuButton, { text: t('other_responses'), variant: 'secondary', menu: {
+                            items: suggestions
+                                .slice(OVERFLOW_EMAIL_SUGGESTION_COUNT)
+                                .map(({ id: suggestionId, title }) => {
+                                return {
+                                    primary: title,
+                                    id: suggestionId,
+                                    onClick: () => {
+                                        onSuggestionClick?.(id, suggestionId);
+                                    }
+                                };
+                            })
+                        } }, 'other_responses'))] }))
+        });
+    }
+    let renderedBody = body;
+    renderedBody = useMemo(() => {
+        // Apply entity highlighting only on string body
+        if (typeof body === 'string') {
+            let bodyString = body;
+            if (subject) {
+                bodyString = `<div style="font-weight: ${theme.base['font-weight']['semi-bold']}">${t('subject_label', [subject])}</div><br>${body}`;
+            }
+            if (entityHighlightMapping) {
+                bodyString = highlightEntities(bodyString, entityHighlightMapping);
+            }
+            return (_jsxs(_Fragment, { children: [_jsx(HTML, { content: bodyString, customTags: ['pega-email-entity'], "aria-label": t('unique_entities', [entityHighlightMapping?.length ?? 0], {
+                            count: entityHighlightMapping?.length ?? 0
+                        }), role: 'group' }), contextMenu && currentTarget && (_jsx(ContextMenuPopover, { cursorPosition: currentTarget.cursorPosition, contextMenu: {
+                            ...contextMenu,
+                            items: contextMenuItems,
+                            loading: contextMenuLoading,
+                            onItemClick
+                        }, targetNode: currentTarget.targetNode, show: contextMenuPopoverOpen, ref: setContextMenuPopoverEl }))] }));
+        }
+    }, [
+        currentTarget,
+        contextMenu,
+        contextMenuPopoverOpen,
+        contextMenuItems,
+        contextMenuLoading,
+        entityHighlightMapping
+    ]);
+    const emailMetaListItems = [
+        _jsxs(Text, { variant: 'secondary', children: [`${t('to')}: `, _jsx(EmailDisplayList, { emailUsers: to.slice(0, OVERFLOW_TO_EMAIL_COUNT), showShortName: true }), to.length > OVERFLOW_TO_EMAIL_COUNT &&
+                    `; +${t('more_count', [to.length - OVERFLOW_TO_EMAIL_COUNT])}`] }),
+        _jsxs(Text, { variant: 'secondary', children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp })] })
+    ];
+    useEffect(() => {
+        if (contextMenuPopoverOpen)
+            disableScroll();
+        else
+            enableScroll();
+    }, [contextMenuPopoverOpen]);
+    const actions = useMemo(() => {
+        const applicableActions = [];
+        if (status !== 'draft') {
+            if (onReply) {
+                applicableActions.push(_jsx(Button, { variant: 'simple', icon: true, label: t('reply'), onClick: () => {
+                        onReply?.(id);
+                    }, children: _jsx(Icon, { name: 'reply' }) }));
+            }
+            if (onReplyAll) {
+                applicableActions.push(_jsx(Button, { icon: true, variant: 'simple', label: t('reply_all'), onClick: () => {
+                        onReplyAll?.(id);
+                    }, children: _jsx(Icon, { name: 'reply-all' }) }));
+            }
+            if (onForward) {
+                applicableActions.push(_jsx(Button, { variant: 'simple', icon: true, label: t('forward'), onClick: () => {
+                        onForward?.(id);
+                    }, children: _jsx(Icon, { name: 'forward' }) }));
+            }
+        }
+        if (status === 'draft') {
+            if (onEditDraft) {
+                applicableActions.push(_jsx(Button, { variant: 'simple', icon: true, label: t('edit'), onClick: () => {
+                        onEditDraft?.(id);
+                    }, children: _jsx(Icon, { name: 'pencil' }) }));
+            }
+            if (onDeleteDraft) {
+                applicableActions.push(_jsx(Button, { variant: 'simple', icon: true, label: t('delete'), onClick: () => {
+                        onDeleteDraft?.(id);
+                    }, children: _jsx(Icon, { name: 'trash' }) }));
+            }
+        }
+        return applicableActions;
+    }, [status, onEditDraft, onDeleteDraft, onReply, onReplyAll, onForward]);
+    return (_jsxs(Flex, { as: StyledEmail, container: {
+            direction: 'column',
+            gap: 1
+        }, ref: ref, ...restProps, children: [_jsx(SummaryItem, { as: StyledEmailHeader, visual: _jsx(Avatar, { ...from.avatarProps, name: from.fullName }), ref: headerRef, primary: _jsxs(Flex, { container: {
+                        gap: 1,
+                        alignItems: 'center'
+                    }, children: [_jsx(StyledFromEmailDisplay, { value: from.emailAddress, displayText: from.fullName, variant: 'text' }), sentiment && _jsx(Sentiment, { ...sentiment, labelHidden: true }), status && isSmallOrAbove && (_jsx(Status, { variant: status === 'draft' ? 'pending' : 'urgent', children: status === 'draft' ? t('draft', [], { count: 1 }) : t(status) }))] }), secondary: _jsxs(Flex, { container: {
+                        gap: 0,
+                        alignItems: 'start',
+                        direction: 'column'
+                    }, children: [_jsxs(Flex, { container: {
+                                gap: 0,
+                                alignItems: 'start'
+                            }, children: [_jsx(MetaList, { items: isSmallOrAbove ? emailMetaListItems : [emailMetaListItems[0]] }), _jsx(Button, { icon: true, variant: 'simple', as: StyledEmailMoreInfoButton, ref: setEmailMoreInfoBtnRef, onClick: () => {
+                                        setShowEmailMoreInfo(true);
+                                    }, label: t('show_more'), children: _jsx(Icon, { name: 'arrow-micro-down' }) }), _jsx(Popover, { as: StyledEmailMoreInfoPopover, show: showEmailMoreInfo, ref: setEmailMoreInfoPopover, target: emailMoreInfoBtnRef, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(StyledEmailPrimaryFieldValueList, { fields: emailMoreInfoFields }) }) })] }), !isSmallOrAbove && timeStamp && emailMetaListItems[1], status && !isSmallOrAbove && (_jsx(Flex, { container: { pad: [0.5, 0, 0] }, children: _jsx(Status, { variant: status === 'draft' ? 'pending' : 'urgent', children: status === 'draft' ? t('draft', [], { count: 1 }) : t(status) }) }))] }), actions: _jsxs(Flex, { as: StyledEmailActions, container: {
+                        pad: 1,
+                        alignItems: 'center'
+                    }, children: [...actions] }) }), banner && _jsx(Banner, { variant: 'urgent', ...banner }), _jsxs(Flex, { container: {
+                    direction: 'column',
+                    gap: 2,
+                    pad: [0, 2]
+                }, onContextMenu: contextMenu ? onContextMenu : undefined, children: [_jsx(StyledEmailBody, { children: renderedBody }), forwardedContent && forwardedContent.length > 0 && (_jsxs(_Fragment, { children: [_jsx(StyledForwardedContentToggle, { variant: 'simple', icon: true, onClick: () => {
+                                    setShowForwardedContent(prev => !prev);
+                                }, label: showForwardedContent
+                                    ? t('collapse_forwarded_message')
+                                    : t('expand_forwarded_message'), compact: true, children: _jsx(Icon, { name: 'more-alt' }) }), showForwardedContent && _jsx(RichTextViewer, { content: forwardedContent, type: 'html' })] }))] }), secondaryFields.length > 0 && (_jsx(Flex, { container: {
+                    pad: [0, 2]
+                }, children: _jsx(StyledEmailSecondaryFieldValueList, { fields: secondaryFields }) }))] }));
+});
+export default Email;
+//# sourceMappingURL=Email.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  MouseEvent,\n  useImperativeHandle\n} from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  SummaryItem,\n  Avatar,\n  Flex,\n  EmailDisplay,\n  Button,\n  Icon,\n  FieldValueListProps,\n  Sentiment,\n  useOuterEvent,\n  Popover,\n  useElement,\n  CardContent,\n  useI18n,\n  FileDisplay,\n  useBreakpoint,\n  DateTimeDisplay,\n  useConfiguration,\n  MetaList,\n  MetaListProps,\n  useScrollToggle,\n  Status,\n  Banner,\n  useTheme,\n  useEscape,\n  HTML\n} from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport ContextMenuPopover from './ContextMenuPopover';\nimport { EmailUser, EmailProps, TargetProps, ContextMenuProps } from './Email.types';\nimport {\n  StyledEmail,\n  StyledEmailDisplay,\n  StyledEmailHeader,\n  StyledFromEmailDisplay,\n  StyledEmailMoreInfoButton,\n  StyledEmailMoreInfoPopover,\n  StyledEmailPrimaryFieldValueList,\n  StyledEmailBody,\n  StyledEmailSecondaryFieldValueList,\n  StyledSuggestedRepliesButton,\n  StyledSuggestedRepliesMenuButton,\n  StyledForwardedContentToggle,\n  StyledEmailActions\n} from './Email.styles';\nimport highlightEntities from './utils/EntityHighlighter';\nimport './EmailEntity';\n\nconst EmailDisplayList = ({\n  emailUsers,\n  showEmailAddress,\n  showShortName\n}: {\n  emailUsers: EmailUser[];\n  showEmailAddress?: boolean;\n  showShortName?: boolean;\n}) => {\n  return (\n    <>\n      {emailUsers.map(({ emailAddress, fullName, shortName }, i) => (\n        <Fragment key={emailAddress}>\n          {i === 0 ? '' : '; '}\n          <EmailDisplay\n            value={emailAddress}\n            displayText={`${showShortName ? shortName : fullName}${\n              showEmailAddress ? ` <${emailAddress}>` : ''\n            }`}\n            variant='text'\n            as={StyledEmailDisplay}\n          />\n        </Fragment>\n      ))}\n    </>\n  );\n};\n\nconst OVERFLOW_TO_EMAIL_COUNT = 2;\nconst OVERFLOW_EMAIL_SUGGESTION_COUNT = 2;\n\nconst Email: FunctionComponent<EmailProps & ForwardProps> = forwardRef(function Email(\n  props: PropsWithoutRef<EmailProps>,\n  ref: EmailProps['ref']\n) {\n  const {\n    id,\n    from,\n    to = [],\n    cc = [],\n    bcc = [],\n    timeStamp,\n    sentiment,\n    subject,\n    forwardedContent,\n    attachments = [],\n    suggestions = [],\n    entityHighlightMapping = [],\n    onReply,\n    onForward,\n    onReplyAll,\n    onEditDraft,\n    onDeleteDraft,\n    onSuggestionClick,\n    contextMenu,\n    status,\n    banner,\n    body,\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const theme = useTheme();\n\n  const [emailMoreInfoBtnRef, setEmailMoreInfoBtnRef] = useElement<HTMLButtonElement>(null);\n  const [showEmailMoreInfo, setShowEmailMoreInfo] = useState(false);\n  const [showForwardedContent, setShowForwardedContent] = useState(false);\n  const [emailMoreInfoPopover, setEmailMoreInfoPopover] = useElement<HTMLDivElement>(null);\n  const emailMoreInfoFields: FieldValueListProps['fields'] = [];\n  // Only way to set this is through imperative handle\n  const [contextMenuItems, setContextMenuItems] = useState<ContextMenuProps['items']>([]);\n  const [contextMenuLoading, setContextMenuLoading] = useState<boolean>(false);\n\n  const [contextMenuPopoverOpen, setContextMenuPopoverOpen] = useState(false);\n  const { disableScroll, enableScroll } = useScrollToggle();\n  const [contextMenuPopoverEl, setContextMenuPopoverEl] = useElement<HTMLElement>();\n\n  useImperativeHandle(contextMenu?.handle, () => ({\n    setItems: (ctxMenuItems: ContextMenuProps['items']) => {\n      setContextMenuItems(ctxMenuItems || []);\n    },\n    setLoading(loading) {\n      setContextMenuLoading(loading);\n    },\n    setOpen(visible) {\n      setContextMenuPopoverOpen(visible);\n    }\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 [currentTarget, setCurrentTarget] = useState<TargetProps | undefined>();\n\n  useOuterEvent('mousedown', [contextMenuPopoverEl], () => {\n    if (contextMenuPopoverOpen) setContextMenuPopoverOpen(false);\n  });\n\n  // Handler for right click on email body\n  const onContextMenu = (e: MouseEvent<HTMLDivElement>) => {\n    if (e.target instanceof HTMLElement && e.target.textContent?.trim()) {\n      setCurrentTarget({\n        targetNode: e.target,\n        cursorPosition: {\n          x: e.pageX - window.scrollX,\n          y: e.pageY - window.scrollY\n        }\n      });\n    }\n    contextMenu?.onContextMenu(id, e);\n  };\n\n  const onItemClick: ContextMenuProps['onItemClick'] = (selectedValue: {\n    fieldName: string;\n    fieldValue: string;\n  }) => {\n    setContextMenuPopoverOpen(false);\n    contextMenu?.onItemClick(selectedValue);\n  };\n\n  if (from) {\n    emailMoreInfoFields.push({\n      id: 'from',\n      name: t('from'),\n      value: from.emailAddress\n    });\n  }\n\n  if (to.length > 0) {\n    emailMoreInfoFields.push({\n      id: 'to',\n      name: t('to'),\n      value: <EmailDisplayList emailUsers={to} showEmailAddress />\n    });\n  }\n\n  if (cc.length > 0) {\n    emailMoreInfoFields.push({\n      id: 'cc',\n      name: 'CC',\n      value: <EmailDisplayList emailUsers={cc} showEmailAddress />\n    });\n  }\n\n  if (bcc.length > 0) {\n    emailMoreInfoFields.push({\n      id: 'BCC',\n      name: 'BCC',\n      value: <EmailDisplayList emailUsers={bcc} showEmailAddress />\n    });\n  }\n\n  if (timeStamp) {\n    emailMoreInfoFields.push({\n      id: 'date',\n      name: t('date'),\n      value: (\n        <Text>\n          {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `}\n          <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n        </Text>\n      )\n    });\n  }\n\n  useOuterEvent('mousedown', [emailMoreInfoPopover], () => {\n    setShowEmailMoreInfo(false);\n  });\n\n  useEscape(() => {\n    setShowEmailMoreInfo(false);\n  });\n\n  const secondaryFields: FieldValueListProps['fields'] = [];\n\n  if (attachments.length > 0) {\n    secondaryFields.push({\n      id: 'attachments',\n      name: '',\n      value: (\n        <Flex container={{ gap: 1, wrap: 'wrap' }}>\n          {attachments.map(attachmentProps => (\n            <FileDisplay {...attachmentProps} key={attachmentProps.value} />\n          ))}\n        </Flex>\n      )\n    });\n  }\n\n  if (suggestions.length > 0) {\n    secondaryFields.push({\n      id: 'suggested_replies',\n      name: '',\n      value: (\n        <Flex container={{ wrap: 'wrap' }}>\n          {suggestions\n            .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)\n            .map(({ id: suggestionId, title }) => (\n              <StyledSuggestedRepliesButton\n                variant='secondary'\n                key={suggestionId}\n                onClick={() => {\n                  onSuggestionClick?.(id, suggestionId);\n                }}\n              >\n                {title}\n              </StyledSuggestedRepliesButton>\n            ))}\n          {suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (\n            <StyledSuggestedRepliesMenuButton\n              text={t('other_responses')}\n              key='other_responses'\n              variant='secondary'\n              menu={{\n                items: suggestions\n                  .slice(OVERFLOW_EMAIL_SUGGESTION_COUNT)\n                  .map(({ id: suggestionId, title }) => {\n                    return {\n                      primary: title,\n                      id: suggestionId,\n                      onClick: () => {\n                        onSuggestionClick?.(id, suggestionId);\n                      }\n                    };\n                  })\n              }}\n            />\n          )}\n        </Flex>\n      )\n    });\n  }\n\n  let renderedBody: ReactNode = body;\n\n  renderedBody = useMemo(() => {\n    // Apply entity highlighting only on string body\n    if (typeof body === 'string') {\n      let bodyString = body;\n\n      if (subject) {\n        bodyString = `<div style=\"font-weight: ${theme.base['font-weight']['semi-bold']}\">${t(\n          'subject_label',\n          [subject]\n        )}</div><br>${body}`;\n      }\n\n      if (entityHighlightMapping) {\n        bodyString = highlightEntities(bodyString, entityHighlightMapping);\n      }\n\n      return (\n        <>\n          <HTML\n            content={bodyString}\n            customTags={['pega-email-entity']}\n            aria-label={t('unique_entities', [entityHighlightMapping?.length ?? 0], {\n              count: entityHighlightMapping?.length ?? 0\n            })}\n            role='group'\n          />\n\n          {contextMenu && currentTarget && (\n            <ContextMenuPopover\n              cursorPosition={currentTarget.cursorPosition}\n              contextMenu={{\n                ...contextMenu,\n                items: contextMenuItems,\n                loading: contextMenuLoading,\n                onItemClick\n              }}\n              targetNode={currentTarget.targetNode}\n              show={contextMenuPopoverOpen}\n              ref={setContextMenuPopoverEl}\n            />\n          )}\n        </>\n      );\n    }\n  }, [\n    currentTarget,\n    contextMenu,\n    contextMenuPopoverOpen,\n    contextMenuItems,\n    contextMenuLoading,\n    entityHighlightMapping\n  ]);\n\n  const emailMetaListItems: MetaListProps['items'] = [\n    <Text variant='secondary'>\n      {`${t('to')}: `}\n      <EmailDisplayList emailUsers={to.slice(0, OVERFLOW_TO_EMAIL_COUNT)} showShortName />\n      {to.length > OVERFLOW_TO_EMAIL_COUNT &&\n        `; +${t('more_count', [to.length - OVERFLOW_TO_EMAIL_COUNT])}`}\n    </Text>,\n    <Text variant='secondary'>\n      {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `}\n      <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n    </Text>\n  ];\n\n  useEffect(() => {\n    if (contextMenuPopoverOpen) disableScroll();\n    else enableScroll();\n  }, [contextMenuPopoverOpen]);\n\n  const actions = useMemo(() => {\n    const applicableActions: ReactNode[] = [];\n    if (status !== 'draft') {\n      if (onReply) {\n        applicableActions.push(\n          <Button\n            variant='simple'\n            icon\n            label={t('reply')}\n            onClick={() => {\n              onReply?.(id);\n            }}\n          >\n            <Icon name='reply' />\n          </Button>\n        );\n      }\n      if (onReplyAll) {\n        applicableActions.push(\n          <Button\n            icon\n            variant='simple'\n            label={t('reply_all')}\n            onClick={() => {\n              onReplyAll?.(id);\n            }}\n          >\n            <Icon name='reply-all' />\n          </Button>\n        );\n      }\n      if (onForward) {\n        applicableActions.push(\n          <Button\n            variant='simple'\n            icon\n            label={t('forward')}\n            onClick={() => {\n              onForward?.(id);\n            }}\n          >\n            <Icon name='forward' />\n          </Button>\n        );\n      }\n    }\n    if (status === 'draft') {\n      if (onEditDraft) {\n        applicableActions.push(\n          <Button\n            variant='simple'\n            icon\n            label={t('edit')}\n            onClick={() => {\n              onEditDraft?.(id);\n            }}\n          >\n            <Icon name='pencil' />\n          </Button>\n        );\n      }\n      if (onDeleteDraft) {\n        applicableActions.push(\n          <Button\n            variant='simple'\n            icon\n            label={t('delete')}\n            onClick={() => {\n              onDeleteDraft?.(id);\n            }}\n          >\n            <Icon name='trash' />\n          </Button>\n        );\n      }\n    }\n    return applicableActions;\n  }, [status, onEditDraft, onDeleteDraft, onReply, onReplyAll, onForward]);\n\n  return (\n    <Flex\n      as={StyledEmail}\n      container={{\n        direction: 'column',\n        gap: 1\n      }}\n      ref={ref}\n      {...restProps}\n    >\n      <SummaryItem\n        as={StyledEmailHeader}\n        visual={<Avatar {...from.avatarProps} name={from.fullName} />}\n        ref={headerRef}\n        primary={\n          <Flex\n            container={{\n              gap: 1,\n              alignItems: 'center'\n            }}\n          >\n            <StyledFromEmailDisplay\n              value={from.emailAddress}\n              displayText={from.fullName}\n              variant='text'\n            />\n            {sentiment && <Sentiment {...sentiment} labelHidden />}\n            {status && isSmallOrAbove && (\n              <Status variant={status === 'draft' ? 'pending' : 'urgent'}>\n                {/* Passing mock count so that translation engine select correct form of draft,\n                   with [](second argument) as empty so that count is not shown */}\n                {status === 'draft' ? t('draft', [], { count: 1 }) : t(status)}\n              </Status>\n            )}\n          </Flex>\n        }\n        secondary={\n          <Flex\n            container={{\n              gap: 0,\n              alignItems: 'start',\n              direction: 'column'\n            }}\n          >\n            <Flex\n              container={{\n                gap: 0,\n                alignItems: 'start'\n              }}\n            >\n              <MetaList items={isSmallOrAbove ? emailMetaListItems : [emailMetaListItems[0]]} />\n\n              <Button\n                icon\n                variant='simple'\n                as={StyledEmailMoreInfoButton}\n                ref={setEmailMoreInfoBtnRef}\n                onClick={() => {\n                  setShowEmailMoreInfo(true);\n                }}\n                label={t('show_more')}\n              >\n                <Icon name='arrow-micro-down' />\n              </Button>\n              <Popover\n                as={StyledEmailMoreInfoPopover}\n                show={showEmailMoreInfo}\n                ref={setEmailMoreInfoPopover}\n                target={emailMoreInfoBtnRef}\n                placement='bottom'\n              >\n                <CardContent>\n                  <StyledEmailPrimaryFieldValueList fields={emailMoreInfoFields} />\n                </CardContent>\n              </Popover>\n            </Flex>\n            {!isSmallOrAbove && timeStamp && emailMetaListItems[1]}\n            {status && !isSmallOrAbove && (\n              <Flex container={{ pad: [0.5, 0, 0] }}>\n                <Status variant={status === 'draft' ? 'pending' : 'urgent'}>\n                  {/* Passing mock count so that translation engine select correct form of draft,\n                        with [](second argument) as empty so that count is not shown */}\n                  {status === 'draft' ? t('draft', [], { count: 1 }) : t(status)}\n                </Status>\n              </Flex>\n            )}\n          </Flex>\n        }\n        actions={\n          <Flex\n            as={StyledEmailActions}\n            container={{\n              pad: 1,\n              alignItems: 'center'\n            }}\n          >\n            {...actions}\n          </Flex>\n        }\n      />\n      {banner && <Banner variant='urgent' {...banner} />}\n      <Flex\n        container={{\n          direction: 'column',\n          gap: 2,\n          pad: [0, 2]\n        }}\n        onContextMenu={contextMenu ? onContextMenu : undefined}\n      >\n        {/* Attach the handler only when context menu enabled by providing the prop */}\n        <StyledEmailBody>{renderedBody}</StyledEmailBody>\n        {forwardedContent && forwardedContent.length > 0 && (\n          <>\n            <StyledForwardedContentToggle\n              variant='simple'\n              icon\n              onClick={() => {\n                setShowForwardedContent(prev => !prev);\n              }}\n              label={\n                showForwardedContent\n                  ? t('collapse_forwarded_message')\n                  : t('expand_forwarded_message')\n              }\n              compact\n            >\n              <Icon name='more-alt' />\n            </StyledForwardedContentToggle>\n            {showForwardedContent && <RichTextViewer content={forwardedContent} type='html' />}\n          </>\n        )}\n      </Flex>\n      {secondaryFields.length > 0 && (\n        <Flex\n          container={{\n            pad: [0, 2]\n          }}\n        >\n          <StyledEmailSecondaryFieldValueList fields={secondaryFields} />\n        </Flex>\n      )}\n    </Flex>\n  );\n});\n\nexport default Email;\n"]}

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

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { EmailEntityProps, EmailShellProps } from './Email.types';
+export declare const StyledEmailMoreInfoButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSuggestedRepliesButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSuggestedRepliesMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").MenuButtonProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFromEmailDisplay: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").EmailDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailDisplay: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailPrimaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailSecondaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailMoreInfoPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSecondarySeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmail: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailEntity: import("styled-components").StyledComponent<"mark", import("styled-components").DefaultTheme, EmailEntityProps, never>;
+export declare const StyledEntityList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledForwardedContentToggle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLoadMore: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContextMenuFieldSelector: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    selected?: boolean | undefined;
+}, never>;
+export declare const StyledEmailShellHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailConversationList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailShell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, EmailShellProps & {
+    singleConversation?: boolean | undefined;
+}, never>;
+export declare const StyledContextMenu: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailCaseViewHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledUtilitiesContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    showExpandedUtilities: boolean;
+}, never>;
+export declare const StyledGridContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    showExpandedUtilities?: boolean | undefined;
+    hasHeader: boolean;
+}, never>;
+export declare const StyledCollapsedUtilitiesToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExpandedUtilitiesToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDrawerUtilitiesToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExpandedUtilities: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    showExpandedUtilities: boolean;
+}, never>;
+export declare const StyledEmailActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledUtilities: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    showExpandedUtilities: boolean;
+}, never>;
+export declare const StyledEmailCaseViewColumns: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    hasHeader?: boolean | undefined;
+}, never>;
+export declare const StyledEmailCaseViewDrawer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailCaseViewContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailManagerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailCountIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@pega/cosmos-react-core").CountProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailSummaryList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailNotificationList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Email.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Email.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":";AAyBA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGlE,eAAO,MAAM,yBAAyB,4GAIrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAW5B,CAAC;AAIH,eAAO,MAAM,4BAA4B,qOAUvC,CAAC;AAIH,eAAO,MAAM,gCAAgC;;uDAU3C,CAAC;AAIH,eAAO,MAAM,eAAe,yGAAe,CAAC;AAE5C,eAAO,MAAM,sBAAsB,2OAMjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0GAE9B,CAAC;AAEF,eAAO,MAAM,gCAAgC;;uDAE5C,CAAC;AAEF,eAAO,MAAM,kCAAkC;;uDAY7C,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAEtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,yGAInC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,iBAAiB,wHAc5B,CAAC;AAIH,eAAO,MAAM,gBAAgB;;uDAU3B,CAAC;AAIH,eAAO,MAAM,4BAA4B,qOAExC,CAAC;AAEF,eAAO,MAAM,cAAc,yGAMzB,CAAC;AAIH,eAAO,MAAM,8BAA8B;;SAmBzC,CAAC;AAIH,eAAO,MAAM,sBAAsB,4GAAkB,CAAC;AACtD,eAAO,MAAM,2BAA2B,wGAAc,CAAC;AACvD,eAAO,MAAM,gBAAgB;;SA6B5B,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,yGAIrB,CAAC;AAIH,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAEH,eAAO,MAAM,yBAAyB,4GAMpC,CAAC;AAEH,eAAO,MAAM,wBAAwB;2BAAuC,OAAO;SAelF,CAAC;AAEF,eAAO,MAAM,mBAAmB;;eAEnB,OAAO;SAgClB,CAAC;AAIH,eAAO,MAAM,8BAA8B,4GAKzC,CAAC;AAIH,eAAO,MAAM,6BAA6B,4GAMxC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4GAMtC,CAAC;AAIH,eAAO,MAAM,uBAAuB;2BAAuC,OAAO;SAUjF,CAAC;AAEF,eAAO,MAAM,kBAAkB,yGAS7B,CAAC;AAEH,eAAO,MAAM,eAAe;2BAAuC,OAAO;SAUzE,CAAC;AAIF,eAAO,MAAM,0BAA0B;;SAerC,CAAC;AAEH,eAAO,MAAM,yBAAyB,yGAUpC,CAAC;AAIH,eAAO,MAAM,4BAA4B,yGAIvC,CAAC;AAIH,eAAO,MAAM,2BAA2B,yGAOtC,CAAC;AAIH,eAAO,MAAM,oBAAoB;;uDAO/B,CAAC;AAIH,eAAO,MAAM,sBAAsB,wGAejC,CAAC;AAGH,eAAO,MAAM,2BAA2B,wGAiBtC,CAAC"}