@pega/cosmos-react-social 2.0.0-dev.2.1 → 2.0.0-dev.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"EmailComposer.js","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Select from '@pega/cosmos-react-core/lib/components/Select/Select';\nimport {\n  Button,\n  ComboBox,\n  EmojiPicker,\n  Flex,\n  Icon,\n  Popover,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  ForwardProps,\n  defaultThemeProp,\n  Tooltip,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\nimport Input from '@pega/cosmos-react-core/lib/components/Input/Input';\nimport { RichTextEditor } from '@pega/cosmos-react-rte';\n\nimport { EmailComposerProps } from './Email.types';\n\ninterface StyledAttachmentElementContainerProps {\n  disabled?: boolean;\n}\nexport const StyledAttachmentElementContainer = styled.div<StyledAttachmentElementContainerProps>(\n  ({ disabled, theme }) => {\n    return (\n      disabled &&\n      css`\n        &:focus {\n          box-shadow: ${theme.base.shadow.focus};\n          border-radius: 50%;\n          outline: none;\n        }\n      `\n    );\n  }\n);\nStyledAttachmentElementContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailComposer = styled.div``;\n\nconst EmailComposer: FunctionComponent<EmailComposerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailComposerProps>, ref: EmailComposerProps['ref']) => {\n    const {\n      from,\n      to,\n      onShowBCC,\n      onShowCC,\n      cc,\n      bcc,\n      subject,\n      body,\n      primaryMoreFields,\n      secondaryMoreFields,\n      maxAttachments = 0,\n      attachments = [],\n      onAddAttachment,\n      showEmoji,\n      onEmojiSelect,\n      onSend,\n      footerMoreActions,\n      ...restProps\n    } = props;\n\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const toggleEmoji = () => {\n      setShowEmojiPicker(!showEmojiPicker);\n    };\n\n    const EmojiPickerRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {\n      setShowEmojiPicker(false);\n    });\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        as={StyledEmailComposer}\n        ref={ref}\n        {...restProps}\n        container={{\n          itemGap: 1,\n          direction: 'column'\n        }}\n      >\n        <Select {...from} label={t('from')} />\n        <Flex\n          container={{\n            itemGap: 2,\n            alignItems: 'end'\n          }}\n        >\n          <Flex\n            container={{\n              itemGap: 1,\n              direction: 'column'\n            }}\n            item={{\n              grow: 1\n            }}\n          >\n            {to && <ComboBox {...to} label={t('to')} mode='multi-select' required />}\n          </Flex>\n          {onShowCC && (\n            <Button variant='link' onClick={onShowCC}>\n              CC\n            </Button>\n          )}\n          {onShowBCC && (\n            <Button variant='link' onClick={onShowBCC}>\n              BCC\n            </Button>\n          )}\n        </Flex>\n        {cc && <ComboBox {...cc} label='CC' mode='multi-select' />}\n        {bcc && <ComboBox {...bcc} label='BCC' mode='multi-select' />}\n        <Input {...subject} label={t('subject')} />\n        {primaryMoreFields}\n        <RichTextEditor autoFocus {...body} labelHidden />\n        {secondaryMoreFields}\n        {attachments.length > 0 && (\n          <Flex container={{ itemGap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} />\n            ))}\n          </Flex>\n        )}\n        <Flex\n          container={{\n            itemGap: 1\n          }}\n        >\n          {showEmoji && (\n            <Button\n              ref={setEmojiBtnEl}\n              onClick={toggleEmoji}\n              variant='simple'\n              icon\n              aria-label={t('add_emoji')}\n              title={t('add_emoji')}\n            >\n              <Icon name='face-happy' />\n            </Button>\n          )}\n          {maxAttachments > 0 && (\n            <StyledAttachmentElementContainer\n              disabled={attachments.length >= maxAttachments}\n              ref={setAttachmentsBtnEl}\n              tabIndex={attachments.length >= maxAttachments ? 0 : undefined}\n              role='button'\n            >\n              <Button\n                onClick={onAddAttachment}\n                disabled={attachments.length >= maxAttachments}\n                variant='simple'\n                icon\n                aria-label={\n                  attachments.length >= maxAttachments\n                    ? t('disable_attachment', maxAttachments)\n                    : t('add_attachment', maxAttachments)\n                }\n                title={t('add_attachment', maxAttachments)}\n              >\n                <Icon name='paper-clip' />\n              </Button>\n              {attachments.length >= maxAttachments && (\n                <Tooltip target={attachmentsBtnEl} showDelay='none' hideDelay='none' {...restProps}>\n                  {t('disable_attachment', maxAttachments)}\n                </Tooltip>\n              )}\n            </StyledAttachmentElementContainer>\n          )}\n          <Flex container item={{ grow: 1 }}>\n            {footerMoreActions}\n          </Flex>\n          <Button variant='primary' onClick={onSend}>\n            {t('send')}\n          </Button>\n        </Flex>\n        <Popover\n          show={showEmojiPicker}\n          target={emojiBtnEl}\n          placement='bottom-start'\n          modifiers={[\n            {\n              name: 'flip',\n              enabled: true\n            }\n          ]}\n        >\n          <EmojiPicker\n            ref={EmojiPickerRef}\n            onSelect={emoji => {\n              setShowEmojiPicker(false);\n              onEmojiSelect?.(emoji);\n            }}\n          />\n        </Popover>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailComposer;\n"]}
+{"version":3,"file":"EmailComposer.js","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useState,\n  ChangeEvent,\n  useMemo,\n  useRef,\n  useCallback,\n  useEffect,\n  ReactNode\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  useI18n,\n  Option,\n  defaultThemeProp,\n  FileUploadItem,\n  MenuButton,\n  FileUploadItemProps,\n  Select,\n  Input\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } 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, EmailUser } from './Email.types';\nimport EmailSelector from './EmailSelector';\n\nregisterIcon(paperClipIcon, replyAllIcon, replyIcon, forwardIcon);\n\nexport const StyledEmailComposer = styled.div``;\n\nexport const StyledResponseTypeIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledResponseTypeIcon.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nconst responseTypeIcons = {\n  reply: 'reply',\n  replyAll: 'reply-all',\n  forward: 'forward'\n};\n\nconst rteToolbar: RichTextEditorProps['toolbar'] = [\n  'inline-styling',\n  'headers',\n  'lists',\n  'images',\n  'cut-copy-paste',\n  'indentation'\n];\n\nconst EmailComposer: FunctionComponent<EmailComposerProps> = forwardRef(\n  (\n    {\n      participants,\n      cc,\n      bcc,\n      bodyContent,\n      maxAttachments = 0,\n      onCancel,\n      onSend,\n      to,\n      footerMoreActions,\n      templates,\n      ...restProps\n    }: PropsWithoutRef<EmailComposerProps>,\n    ref: EmailComposerProps['ref']\n  ) => {\n    const t = useI18n();\n    const [responseType, setResponseType] = useState(restProps.responseType);\n    const [showCC, setShowCC] = useState(\n      restProps.responseType !== 'reply' && !!cc && cc.length > 0\n    );\n    const [showBCC, setShowBCC] = useState(\n      restProps.responseType !== 'reply' && !!bcc && bcc.length > 0\n    );\n    const [subject, setSubject] = useState(restProps.subject);\n    const [autoReplyTemplate, setAutoReplyTemplate] = useState('');\n    const [attachments, setAttachments] = useState(restProps.attachments || []);\n\n    const rteEditorRef = useRef<RichTextEditorState>(null);\n    const fileUploadInputRef = useRef<HTMLInputElement>(null);\n\n    // inserts selected template in RTE\n    useEffect(() => {\n      if (templates?.[autoReplyTemplate]) {\n        rteEditorRef?.current?.clear();\n        setTimeout(() => {\n          rteEditorRef?.current?.insertHtml(templates?.[autoReplyTemplate], false);\n        }, 0);\n      }\n    }, [autoReplyTemplate]);\n\n    // resets To | CC | BCC combobox selection and toggles fields on responseType change reply | replyAll | forward\n    useEffect(() => {\n      setShowCC(responseType === 'replyAll' ? !!cc && cc.length > 0 : false);\n      setShowBCC(responseType === 'replyAll' && !!bcc && bcc?.length > 0 ? !!bcc : false);\n    }, [responseType]);\n\n    const templateOptions = useMemo(\n      () =>\n        templates && Object.keys(templates).map(option => <Option key={option}>{option}</Option>),\n      [templates]\n    );\n\n    const responseTypeMenuData = useMemo(() => {\n      const menuItems = [\n        {\n          id: 'reply',\n          primary: t('reply'),\n          visual: <StyledResponseTypeIcon name={responseTypeIcons.reply} />,\n          selected: responseType === 'reply',\n          onClick: () => {\n            setResponseType('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            setResponseType('replyAll');\n          }\n        }\n      ];\n      return {\n        menuItems,\n        selectedResponseType:\n          menuItems.find(item => item.selected)?.primary || menuItems[0].primary,\n        selectedResponseTypeIcon:\n          (responseType && responseTypeIcons[responseType]) || responseTypeIcons.reply\n      };\n    }, [responseType]);\n\n    const onImageAdded: RichTextEditorProps['onImageAdded'] = (image: File, id: string) => {\n      const src = URL.createObjectURL(image);\n      rteEditorRef.current?.appendImage({ src, alt: image.name }, id);\n    };\n\n    const onSubjectChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n      setSubject(e.target.value);\n    }, []);\n\n    const onTemplateChange = useCallback((e: ChangeEvent<HTMLSelectElement>) => {\n      setAutoReplyTemplate(e.target.value);\n    }, []);\n\n    const onAttachmentDelete = useCallback((name: FileUploadItemProps['name']) => {\n      setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));\n    }, []);\n\n    const onFileChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        setAttachments(prevAttachments => [\n          ...prevAttachments,\n          ...Array.from(e.target.files!).map(file => ({\n            name: file.name,\n            file\n          }))\n        ]);\n      }\n    }, []);\n\n    const [toAddresses, setToAddresses] = useState<EmailUser['emailAddress'][]>(\n      to?.[responseType!] || []\n    );\n    const [ccAddresses, setCcAddresses] = useState<EmailUser['emailAddress'][]>(\n      cc as EmailUser['emailAddress'][]\n    );\n    const [bccAddresses, setBccAddresses] = useState<EmailUser['emailAddress'][]>(\n      bcc as EmailUser['emailAddress'][]\n    );\n\n    const selectedItems = (selections: EmailUser['emailAddress'][], label: ReactNode) => {\n      if (label === 'To') {\n        setToAddresses(selections);\n      }\n      if (label === 'Cc') {\n        setCcAddresses(selections);\n      }\n      if (label === 'Bcc') {\n        setBccAddresses(selections);\n      }\n    };\n    const handleSend = useCallback(() => {\n      onSend({\n        to: toAddresses,\n        cc: showCC ? ccAddresses : undefined,\n        bcc: showBCC ? bccAddresses : undefined,\n        subject,\n        bodyContent: rteEditorRef.current?.getHtml() || '',\n        attachments\n      });\n    }, [toAddresses, ccAddresses, bccAddresses, subject, attachments, showCC, showBCC]);\n\n    return (\n      <Flex\n        as={StyledEmailComposer}\n        ref={ref}\n        {...restProps}\n        container={{\n          gap: 2,\n          direction: 'column'\n        }}\n      >\n        <div>\n          {responseType !== 'forward' && (\n            <MenuButton\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        </div>\n\n        <Flex\n          container={{\n            alignItems: 'start',\n            gap: 0.5\n          }}\n        >\n          <Flex\n            container={{\n              gap: 1,\n              direction: 'column'\n            }}\n            item={{\n              grow: 1\n            }}\n          >\n            <EmailSelector\n              participants={participants}\n              defaultSelections={to?.[responseType!]}\n              label={t('to')}\n              mode='multi-select'\n              required\n              selections={selectedItems}\n            />\n          </Flex>\n          {!showCC && (\n            <StyledToggleButton variant='simple' onClick={() => setShowCC(true)} icon>\n              {t('cc')}\n            </StyledToggleButton>\n          )}\n          {!showBCC && (\n            <StyledToggleButton variant='simple' onClick={() => setShowBCC(true)} icon>\n              {t('bcc')}\n            </StyledToggleButton>\n          )}\n        </Flex>\n\n        {showCC && (\n          <EmailSelector\n            participants={participants}\n            defaultSelections={cc}\n            label={t('cc')}\n            mode='multi-select'\n            selections={selectedItems}\n          />\n        )}\n        {showBCC && (\n          <EmailSelector\n            selections={selectedItems}\n            participants={participants}\n            defaultSelections={bcc}\n            label={t('bcc')}\n            mode='multi-select'\n          />\n        )}\n\n        <Input value={subject} onChange={onSubjectChange} label={t('subject')} />\n\n        <Select onChange={onTemplateChange} label={t('auto_reply')} value={autoReplyTemplate}>\n          <>\n            <Option>{t('insert')}</Option>\n            {templateOptions}\n          </>\n        </Select>\n        <RichTextEditor\n          autoFocus\n          ref={rteEditorRef}\n          toolbar={rteToolbar}\n          onImageAdded={onImageAdded}\n          labelHidden\n          label={t('email_message')}\n          defaultValue={bodyContent}\n        />\n        {attachments.length > 0 && (\n          <Flex container={{ gap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} onDelete={onAttachmentDelete} />\n            ))}\n          </Flex>\n        )}\n        <Flex\n          container={{\n            gap: 1\n          }}\n        >\n          <Flex container item={{ grow: 1 }}>\n            <Button variant='secondary' onClick={onCancel}>\n              {t('cancel')}\n            </Button>\n            {footerMoreActions}\n          </Flex>\n          <Flex container>\n            {maxAttachments > 0 && (\n              <Button\n                onClick={\n                  attachments.length < maxAttachments\n                    ? () => fileUploadInputRef.current?.click()\n                    : undefined\n                }\n                variant='link'\n                label={\n                  attachments.length >= maxAttachments\n                    ? t('email_disable_attachment', [maxAttachments])\n                    : t('email_add_attachment', [maxAttachments])\n                }\n              >\n                <Icon name='paper-clip' />\n              </Button>\n            )}\n            <Button variant='primary' onClick={handleSend}>\n              {t('send')}\n            </Button>\n          </Flex>\n        </Flex>\n        <input\n          type='file'\n          style={{ display: 'none' }}\n          ref={fileUploadInputRef}\n          onChange={onFileChange}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default EmailComposer;\n"]}

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

@@ -1,11 +1,14 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { EmailConversationProps } from './Email.types';
-export declare const StyledEmailParticipantsText: import("styled-components").StyledComponent<React.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, {}, never>;
+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, {}, never>;
-export declare const StyledEmailInConversation: import("styled-components").StyledComponent<React.FunctionComponent<import("./Email.types").EmailProps & ForwardProps>, import("styled-components").DefaultTheme, {}, 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 +1 @@
-{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAGxF,OAAO,EASL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,eAAO,MAAM,2BAA2B,uLAKvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,4GAcnC,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAS5B,CAAC;AAGH,eAAO,MAAM,uBAAuB,wGAAc,CAAC;AAGnD,eAAO,MAAM,yBAAyB,8KAiBpC,CAAC;AAGH,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAgI/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAKlG,OAAO,EAQL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAGvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;SASzE,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAoB5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAQlC,CAAC;AAGH,eAAO,MAAM,yBAAyB,wKAsBpC,CAAC;AAwEH,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA2H/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Email/EmailConversation.js

@@ -1,64 +1,142 @@
-import React, { forwardRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Count, ExpandCollapse, Flex, Icon, Text, useI18n, defaultThemeProp, Sentiment, useAfterInitialEffect } from '@pega/cosmos-react-core';
-import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
+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 } from '@pega/cosmos-react-core';
 import Email from './Email';
-export const StyledEmailParticipantsText = styled(Text) `
+registerIcon(caretDownIcon);
+const EmailParticipantTextCss = css `
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
 `;
-export const StyledConversationHeader = styled.header(({ theme }) => {
+export const StyledEmailParticipantsText = styled(Text) `
+  ${EmailParticipantTextCss}
+  color: ${props => props.theme.base.palette['foreground-color']};
+`;
+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, collapsed }) => {
     return css `
-    background-color: ${theme.components.email['background-color']};
-    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    position: sticky;
-    top: 0;
-    z-index: 1;
-
-    ${StyledCount} {
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-    }
-  `;
+      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${theme.base.palette['border-line']};
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    `;
 });
 StyledConversationHeader.defaultProps = defaultThemeProp;
 export const StyledUnReadCount = styled.div(({ theme: { base } }) => {
+    const readableBackground = readableHue(base.palette['brand-primary'], base.palette['primary-background']);
+    const readableTextColor = readableColor(readableBackground);
     return css `
     align-self: flex-start;
-    background-color: ${base.colors.green.dark};
-    color: ${base.palette.light};
+    background-color: ${readableBackground};
+    color: ${readableTextColor};
     padding: 0 ${base.spacing};
     font-weight: ${base['font-weight']['semi-bold']};
+
+    /* stylelint-disable declaration-block-no-duplicate-properties */
     width: fit-content;
+    width: -moz-fit-content;
+
+    /* stylelint-enable declaration-block-no-duplicate-properties */
   `;
 });
 StyledUnReadCount.defaultProps = defaultThemeProp;
-export const StyledEmailConversation = styled.li ``;
+export const StyledEmailConversation = styled.li(({ theme: { base } }) => {
+    return css `
+    margin-bottom: ${base.spacing};
+    border-radius: ${base['border-radius']};
+    overflow: hidden;
+    background-color: ${base.palette['primary-background']};
+    list-style-type: none;
+  `;
+});
 StyledEmailConversation.defaultProps = defaultThemeProp;
 export const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base } }) => {
+    const readableBackground = readableHue(base.palette['brand-primary'], base.palette['primary-background']);
     return css `
-    padding: calc(2 * ${base.spacing});
+    padding: calc(2 * ${base.spacing}) 0;
     border-bottom: 0.0625rem solid ${base.palette['border-line']};
     position: relative;
     ${unRead &&
         css `
       &::before {
         content: '';
-        background-color: ${base.colors.green.dark};
+        background-color: ${readableBackground};
         position: absolute;
         inset: 0;
-        height: 100%;
+        height: calc(100% + 0.0625rem);
+        top: -0.0625rem;
         width: 0.125rem;
       }
     `}
   `;
 });
 StyledEmailInConversation.defaultProps = defaultThemeProp;
+const StyledForwardIcon = styled.svg(({ theme }) => {
+    const readableStrokeColor = readableHue(theme.base.colors.purple.medium, theme.base.palette['primary-background']);
+    return css `
+    color: ${readableStrokeColor};
+  `;
+});
+StyledForwardIcon.defaultProps = defaultThemeProp;
+const StyledUnreadIndicator = styled.span(({ theme, isVisible }) => {
+    const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.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 }) => {
+    const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette['brand-primary']));
+    return css `
+    border-width: 0;
+    width: 100%;
+    padding: ${theme.base.spacing};
+    background: ${theme.base.palette['primary-background']};
+    position: sticky;
+    top: 0;
+    z-index: 1;
+
+    &[aria-expanded='true'] {
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    }
+
+    &:focus {
+      background: ${theme.base.palette['secondary-background']};
+      outline: none;
+    }
+
+    &:hover {
+      background: ${hoverColor};
+      outline: none;
+    }
+
+    & > ${StyledIcon} {
+      align-self: flex-start;
+      color: ${theme.base.palette['foreground-color']};
+    }
+  `;
+});
+StyledConversationButton.defaultProps = defaultThemeProp;
 const EmailConversation = forwardRef((props, ref) => {
-    const { id, emails, from, to, unReadEmailCount, timeStamp, sentiment, isForwarded = false, isCollapsed = false, onCollapse, onExpand, ...restProps } = props;
+    const { id, emails, from, to, unReadEmailCount, timeStamp, isForwarded = false, isCollapsed = false, onCollapse, onExpand, ...restProps } = props;
     const t = useI18n();
     const [collapsedState, setCollapsedState] = useState(isCollapsed);
     useAfterInitialEffect(() => {
@@ -67,58 +145,36 @@ const EmailConversation = forwardRef((props, ref) => {
     const onExpandCollapse = () => {
         setCollapsedState(!collapsedState);
     };
-    return (React.createElement(StyledEmailConversation, { ...restProps, id: id, ref: ref },
-        React.createElement(Flex, { as: StyledConversationHeader, container: { itemGap: 1, alignItems: 'center', pad: 1 } },
-            React.createElement(Flex, { container: {
-                    alignItems: 'center',
-                    itemGap: 1
-                }, item: {
-                    shrink: 0
-                } },
-                React.createElement(Button, { variant: 'simple', id: `conversation-heading${id}`, "aria-controls": id, "aria-expanded": !collapsedState, icon: true, onClick: onExpandCollapse },
-                    React.createElement(Icon, { name: collapsedState ? 'caret-right' : 'caret-down' })),
-                sentiment ? (React.createElement(Sentiment, { ...sentiment, labelHidden: true })) : (isForwarded && React.createElement(Icon, { name: 'forward', "aria-label": t('forwarded_email') }))),
-            React.createElement(Flex, { container: {
-                    wrap: 'nowrap',
-                    alignItems: 'start',
-                    direction: 'column'
-                }, item: {
-                    grow: 1,
-                    shrink: 1
-                } },
-                React.createElement(Text, { variant: 'primary', as: StyledEmailParticipantsText }, [
-                    `${t('from')}: `,
-                    ...from.map((participant, i) => {
-                        return React.createElement(React.Fragment, null, `${participant.fullName}${i < from.length - 1 ? ',' : ''} `);
-                    })
-                ]),
-                React.createElement(Text, { variant: 'secondary', as: StyledEmailParticipantsText }, [
-                    `${t('to')}: `,
-                    (() => {
-                        const recipientElements = to.slice(0, 2).map((recipient, i) => {
-                            return React.createElement(React.Fragment, null, `${recipient.shortName}${i < to.length - 1 ? ',' : ''} `);
-                        });
-                        if (to.length > 2) {
-                            return [...recipientElements, React.createElement(React.Fragment, null, `${to.length - 2} more`)];
-                        }
-                        return recipientElements;
-                    })()
-                ])),
-            React.createElement(Flex, { container: {
-                    itemGap: 1
-                }, item: {
-                    shrink: 0
-                } },
-                !!unReadEmailCount && (React.createElement(Count, { "aria-label": `${unReadEmailCount}unread emails` }, unReadEmailCount)),
-                React.createElement(Text, { variant: 'secondary' },
-                    " ",
-                    timeStamp))),
-        React.createElement(ExpandCollapse, { as: Flex, container: { direction: 'column' }, collapsed: collapsedState, onBeforeCollapse: onCollapse, onBeforeExpand: onExpand, role: 'region', "aria-labelledby": `conversation-heading${id}`, id: `conversation-content${id}` },
-            !!unReadEmailCount && (React.createElement(Text, { as: StyledUnReadCount, variant: 'secondary' }, t('n_new_emails', unReadEmailCount))),
-            emails &&
-                emails.map(email => {
-                    return React.createElement(StyledEmailInConversation, { ...email });
-                }))));
+    const headerRef = useRef(null);
+    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: headerRef });
+    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' }, void 0), _jsx(StyledUnreadIndicator, { isVisible: !!unReadEmailCount }, void 0), _jsxs(Flex, { container: {
+                            wrap: 'nowrap',
+                            alignItems: 'start',
+                            direction: 'column'
+                        }, item: {
+                            grow: 1,
+                            shrink: 1
+                        }, children: [_jsx(Text, { variant: 'primary', as: StyledEmailParticipantsText, children: `${isForwarded ? 'FW' : t('from')}: ${from.fullName}` }, void 0), _jsxs(Text, { variant: 'secondary', as: StyledEmailParticipantsText, children: [`${t('to')}: `, generateRecipientList] }, void 0), !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 }, void 0)] }, void 0))] }, void 0), _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 }, void 0)] }, void 0)) }, void 0)] }, void 0), _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 }) }, void 0)), emails &&
+                        emails.map(email => {
+                            return _jsx(StyledEmailInConversation, { ...email }, email.id);
+                        })] }, void 0)] }, void 0));
 });
 export default EmailConversation;
 //# sourceMappingURL=EmailConversation.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailEntity.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailEntity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA6BnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Email/EmailEntity.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Tooltip, useConsolidatedRef, useElement, useI18n, useConfiguration, formatListToLocaleString } from '@pega/cosmos-react-core';
+import { StyledEmailEntity } from './Email.styles';
+const EmailEntity = forwardRef(({ entity, ...restProps }, ref) => {
+    const [el, setEl] = useElement();
+    const elementRef = useConsolidatedRef(setEl, ref);
+    const t = useI18n();
+    const { locale } = useConfiguration();
+    return (_jsxs(StyledEmailEntity, { ...restProps, entity: entity, ref: elementRef, "aria-label": Array.isArray(entity.description)
+            ? formatListToLocaleString(entity.description, t, locale)
+            : entity.description, children: [entity.value, _jsx(Tooltip, { target: el, children: Array.isArray(entity.description)
+                    ? formatListToLocaleString(entity.description, t, locale, {
+                        separator: '\n'
+                    })
+                    : entity.description }, void 0)] }, void 0));
+});
+export default EmailEntity;
+//# sourceMappingURL=EmailEntity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailEntity.js","sourceRoot":"","sources":["../../../src/components/Email/EmailEntity.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAEvE,OAAO,EAEL,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,wBAAwB,EACzB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAqC,EAAE,GAA4B,EAAE,EAAE;IAC5F,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9C,MAAM,UAAU,GAAG,kBAAkB,CAAc,KAAK,EAAE,GAAG,CAAC,CAAC;IAC/D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,MAAC,iBAAiB,OACZ,SAAS,EACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,gBAEb,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;YAC/B,CAAC,CAAC,wBAAwB,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,MAAM,CAAC;YACzD,CAAC,CAAC,MAAM,CAAC,WAAW,aAGvB,MAAM,CAAC,KAAK,EACb,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,YAChB,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC;oBAChC,CAAC,CAAC,wBAAwB,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE;wBACtD,SAAS,EAAE,IAAI;qBAChB,CAAC;oBACJ,CAAC,CAAC,MAAM,CAAC,WAAW,WACd,YACQ,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n  ForwardProps,\n  Tooltip,\n  useConsolidatedRef,\n  useElement,\n  useI18n,\n  useConfiguration,\n  formatListToLocaleString\n} from '@pega/cosmos-react-core';\n\nimport { StyledEmailEntity } from './Email.styles';\nimport { EmailEntityProps } from './Email.types';\n\nconst EmailEntity: FunctionComponent<EmailEntityProps & ForwardProps> = forwardRef(\n  ({ entity, ...restProps }: PropsWithoutRef<EmailEntityProps>, ref: EmailEntityProps['ref']) => {\n    const [el, setEl] = useElement<HTMLElement>();\n    const elementRef = useConsolidatedRef<HTMLElement>(setEl, ref);\n    const t = useI18n();\n    const { locale } = useConfiguration();\n\n    return (\n      <StyledEmailEntity\n        {...restProps}\n        entity={entity}\n        ref={elementRef}\n        aria-label={\n          Array.isArray(entity.description)\n            ? formatListToLocaleString(entity.description, t, locale)\n            : entity.description\n        }\n      >\n        {entity.value}\n        <Tooltip target={el}>\n          {Array.isArray(entity.description)\n            ? formatListToLocaleString(entity.description, t, locale, {\n                separator: '\\n'\n              })\n            : entity.description}\n        </Tooltip>\n      </StyledEmailEntity>\n    );\n  }\n);\n\nexport default EmailEntity;\n"]}

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

@@ -0,0 +1,14 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { EmailComposerProps, EmailUser } from './Email.types';
+export interface EmailSelectorProps extends NoChildrenProp {
+    /** participants */
+    participants: EmailComposerProps['participants'];
+    /** default selections */
+    defaultSelections?: EmailUser['emailAddress'][];
+    /** selectedItems */
+    selections: (selections: EmailUser['emailAddress'][], label: ReactNode) => void;
+}
+declare const EmailSelector: FunctionComponent<EmailSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required'>>;
+export default EmailSelector;
+//# sourceMappingURL=EmailSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6C,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhG,OAAO,EAEL,aAAa,EAEb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,mBAAmB;IACnB,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,CAAC;IAChD,oBAAoB;IACpB,UAAU,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACjF;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,CAmExE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Email/EmailSelector.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState, useEffect } from 'react';
+import { ComboBox, createStringMatcher } from '@pega/cosmos-react-core';
+const EmailSelector = ({ participants, defaultSelections = [], label, mode, required, selections }) => {
+    const [filterValue, setFilterValue] = useState('');
+    const [selectedItems, setSelectedItems] = useState([]);
+    const filterRegex = createStringMatcher(filterValue, 'contains');
+    const filteredItems = useMemo(() => {
+        return (filterValue
+            ? participants.filter(({ emailAddress, fullName, shortName }) => {
+                return (filterRegex.test(emailAddress) ||
+                    filterRegex.test(fullName) ||
+                    filterRegex.test(shortName));
+            })
+            : participants).map(({ emailAddress, fullName }) => {
+            return {
+                id: emailAddress,
+                primary: fullName,
+                secondary: [emailAddress],
+                selected: selectedItems.includes(emailAddress)
+            };
+        });
+    }, [participants, selectedItems, filterRegex]);
+    const toggleSelectedItems = (id) => {
+        setSelectedItems(prev => {
+            if (prev.includes(id)) {
+                return [...prev.filter(value => value !== id)];
+            }
+            return [...prev, id];
+        });
+    };
+    useEffect(() => {
+        setSelectedItems(defaultSelections);
+    }, [defaultSelections]);
+    useEffect(() => {
+        selections(selectedItems, label);
+    }, [selectedItems]);
+    const comboBoxProps = {
+        value: filterValue,
+        onChange: (e) => {
+            setFilterValue(e.target.value);
+        },
+        onBlur: () => {
+            setFilterValue('');
+        },
+        menu: {
+            items: filteredItems,
+            accent: filterRegex,
+            onItemClick: toggleSelectedItems
+        },
+        selected: {
+            items: selectedItems.map(value => ({ id: value, text: value })),
+            onRemove: toggleSelectedItems
+        },
+        label,
+        mode,
+        required
+    };
+    return _jsx(ComboBox, { ...comboBoxProps }, void 0);
+};
+export default EmailSelector;
+//# sourceMappingURL=EmailSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailSelector.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ChangeEvent, useMemo, useState, useEffect, ReactNode } from 'react';\n\nimport {\n  ComboBox,\n  ComboBoxProps,\n  createStringMatcher,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { EmailComposerProps, EmailUser } from './Email.types';\n\nexport interface EmailSelectorProps extends NoChildrenProp {\n  /** participants */\n  participants: EmailComposerProps['participants'];\n  /** default selections */\n  defaultSelections?: EmailUser['emailAddress'][];\n  /** selectedItems */\n  selections: (selections: EmailUser['emailAddress'][], label: ReactNode) => void;\n}\n\nconst EmailSelector: FunctionComponent<\n  EmailSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required'>\n> = ({ participants, defaultSelections = [], label, mode, required, selections }) => {\n  const [filterValue, setFilterValue] = useState('');\n  const [selectedItems, setSelectedItems] = useState<EmailUser['emailAddress'][]>([]);\n\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n  const filteredItems = useMemo(() => {\n    return (\n      filterValue\n        ? participants.filter(({ emailAddress, fullName, shortName }) => {\n            return (\n              filterRegex.test(emailAddress) ||\n              filterRegex.test(fullName) ||\n              filterRegex.test(shortName)\n            );\n          })\n        : participants\n    ).map(({ emailAddress, fullName }) => {\n      return {\n        id: emailAddress,\n        primary: fullName,\n        secondary: [emailAddress],\n        selected: selectedItems.includes(emailAddress)\n      };\n    });\n  }, [participants, selectedItems, filterRegex]);\n\n  const toggleSelectedItems = (id: string) => {\n    setSelectedItems(prev => {\n      if (prev.includes(id)) {\n        return [...prev.filter(value => value !== id)];\n      }\n      return [...prev, id];\n    });\n  };\n\n  useEffect(() => {\n    setSelectedItems(defaultSelections);\n  }, [defaultSelections]);\n\n  useEffect(() => {\n    selections(selectedItems, label);\n  }, [selectedItems]);\n\n  const comboBoxProps = {\n    value: filterValue,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      setFilterValue(e.target.value);\n    },\n    onBlur: () => {\n      setFilterValue('');\n    },\n    menu: {\n      items: filteredItems,\n      accent: filterRegex,\n      onItemClick: toggleSelectedItems\n    },\n    selected: {\n      items: selectedItems.map(value => ({ id: value, text: value })),\n      onRemove: toggleSelectedItems\n    },\n    label,\n    mode,\n    required\n  };\n\n  return <ComboBox {...comboBoxProps} />;\n};\n\nexport default EmailSelector;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"EmailShell.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailShell.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAGxF,OAAO,EAGL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAOhD,eAAO,MAAM,iBAAiB,4GAAkB,CAAC;AACjD,eAAO,MAAM,2BAA2B,wGAAc,CAAC;AACvD,eAAO,MAAM,gBAAgB,sHAiB3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAoEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EmailShell.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAGjF,OAAO,EAGL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAShD,eAAO,MAAM,iBAAiB,4GAAkB,CAAC;AACjD,eAAO,MAAM,2BAA2B,wGAAc,CAAC;AACvD,eAAO,MAAM,gBAAgB,sHAa3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAsEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}