@pega/cosmos-react-social 3.0.0-dev.4.1 → 3.0.0-dev.4.2

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 {\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  useUID\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  max-height: 70vh;\n`;\n\nexport const StyledResponseTypeIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledResponseTypeIcon.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nconst 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      bodyContent,\n      onCancel,\n      onSend,\n      onImageAdded,\n      externalValidator,\n      onTemplateChange,\n      to,\n      footerMoreActions,\n      templates,\n      defaultTemplateId,\n      ...restProps\n    }: PropsWithoutRef<EmailComposerProps>,\n    ref: EmailComposerProps['ref']\n  ) => {\n    const t = useI18n();\n    const [cc, setCC] = useState(restProps.cc);\n    const [bcc, setBCC] = useState(restProps.bcc);\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(defaultTemplateId || '');\n    const [attachments, setAttachments] = useState(restProps.attachments || []);\n    const [toAddresses, setToAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType && to?.[responseType])\n        return to?.[responseType] as EmailUser['emailAddress'][];\n      return [];\n    });\n    const [ccAddresses, setCcAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType === 'replyAll') return cc as EmailUser['emailAddress'][];\n      return [];\n    });\n    const [bccAddresses, setBccAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType === 'replyAll') return bcc as EmailUser['emailAddress'][];\n      return [];\n    });\n\n    const initialCC = cc;\n    const initialBCC = bcc;\n\n    const rteEditorRef = useRef<RichTextEditorState>(null);\n    const fileUploadInputRef = useRef<HTMLInputElement>(null);\n    const uid = useUID();\n\n    // inserts selected template in RTE\n    useEffect(() => {\n      const selectedTemplate = templates?.find(template => template.id === autoReplyTemplate);\n      if (selectedTemplate) {\n        rteEditorRef?.current?.insertHtml(onTemplateChange?.(selectedTemplate.id) as string, true);\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      if (responseType === 'replyAll') {\n        setCC(initialCC);\n        setBCC(initialBCC);\n      }\n      if (responseType === 'reply') {\n        setCcAddresses([] as EmailUser['emailAddress'][]);\n        setBccAddresses([] as EmailUser['emailAddress'][]);\n      }\n    }, [responseType]);\n\n    const templateOptions = useMemo(\n      () =>\n        templates &&\n        templates.map(template => {\n          if (template.id === defaultTemplateId) {\n            <Option selected='selected' key={template.id} value={template.id}>\n              {template.title}\n            </Option>;\n          }\n          return (\n            <Option key={template.id} value={template.id}>\n              {template.title}\n            </Option>\n          );\n        }),\n      [templates]\n    );\n\n    const responseTypeMenuData = useMemo(() => {\n      const menuItems = [\n        {\n          id: 'reply',\n          primary: t('reply'),\n          visual: <StyledResponseTypeIcon name={responseTypeIcons.reply} />,\n          selected: responseType === 'reply',\n          onClick: () => {\n            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 onSubjectChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n      setSubject(e.target.value);\n    }, []);\n\n    const onTemplateSelectionChange = 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 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 = () => {\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        responseType\n      });\n    };\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              externalValidator={externalValidator}\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={responseType === 'replyAll' ? cc : undefined}\n            label={t('cc')}\n            mode='multi-select'\n            selections={selectedItems}\n            externalValidator={externalValidator}\n          />\n        )}\n        {showBCC && (\n          <EmailSelector\n            selections={selectedItems}\n            participants={participants}\n            defaultSelections={responseType === 'replyAll' ? bcc : undefined}\n            label={t('bcc')}\n            mode='multi-select'\n            externalValidator={externalValidator}\n          />\n        )}\n\n        <Input value={subject} onChange={onSubjectChange} label={t('subject')} />\n\n        <Select\n          onChange={onTemplateSelectionChange}\n          label={t('auto_reply')}\n          value={autoReplyTemplate}\n        >\n          <Option key={uid} value={uid}>\n            {t('insert')}\n          </Option>\n          <>{templateOptions}</>\n        </Select>\n\n        <RichTextEditor\n          autoFocus\n          ref={rteEditorRef}\n          toolbar={rteToolbar}\n          onImageAdded={onImageAdded}\n          labelHidden\n          label={t('email_message')}\n          defaultValue={bodyContent}\n          // Below rem values are derived from min 150px, max 300px minus the approx height of toolbar\n          height={{\n            min: '7rem',\n            max: '16.5rem'\n          }}\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            <Button\n              onClick={() => fileUploadInputRef.current?.click()}\n              variant='link'\n              label={t('file_upload_text_multiple')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n\n            <Button variant='primary' onClick={handleSend}>\n              {t('send_label')}\n            </Button>\n          </Flex>\n        </Flex>\n        <input\n          type='file'\n          style={{ display: 'none' }}\n          ref={fileUploadInputRef}\n          onChange={onFileChange}\n          multiple\n        />\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  useUID,\n  Progress\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<EmailComposerProps>(({ progress }) => {\n  return css`\n    max-height: 70vh;\n    ${progress\n      ? css`\n          visibility: hidden;\n        `\n      : css`\n          visibility: visible;\n        `}\n  `;\n});\n\nexport const StyledResponseTypeIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledResponseTypeIcon.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nconst 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      bodyContent,\n      onCancel,\n      onSend,\n      onImageAdded,\n      externalValidator,\n      onTemplateChange,\n      to,\n      footerMoreActions,\n      progress = false,\n      templates,\n      defaultTemplateId,\n      ...restProps\n    }: PropsWithoutRef<EmailComposerProps>,\n    ref: EmailComposerProps['ref']\n  ) => {\n    const t = useI18n();\n    const [cc, setCC] = useState(restProps.cc);\n    const [bcc, setBCC] = useState(restProps.bcc);\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(defaultTemplateId || '');\n    const [attachments, setAttachments] = useState(restProps.attachments || []);\n    const [toAddresses, setToAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType && to?.[responseType])\n        return to?.[responseType] as EmailUser['emailAddress'][];\n      return [];\n    });\n    const [ccAddresses, setCcAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType === 'replyAll') return cc as EmailUser['emailAddress'][];\n      return [];\n    });\n    const [bccAddresses, setBccAddresses] = useState<EmailUser['emailAddress'][]>(() => {\n      if (responseType === 'replyAll') return bcc as EmailUser['emailAddress'][];\n      return [];\n    });\n\n    const initialCC = cc;\n    const initialBCC = bcc;\n\n    const rteEditorRef = useRef<RichTextEditorState>(null);\n    const fileUploadInputRef = useRef<HTMLInputElement>(null);\n    const uid = useUID();\n\n    // inserts selected template in RTE\n    useEffect(() => {\n      const selectedTemplate = templates?.find(template => template.id === autoReplyTemplate);\n      if (selectedTemplate) {\n        rteEditorRef?.current?.insertHtml(onTemplateChange?.(selectedTemplate.id) as string, true);\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      if (responseType === 'replyAll') {\n        setCC(initialCC);\n        setBCC(initialBCC);\n      }\n      if (responseType === 'reply') {\n        setCcAddresses([] as EmailUser['emailAddress'][]);\n        setBccAddresses([] as EmailUser['emailAddress'][]);\n      }\n    }, [responseType]);\n\n    const templateOptions = useMemo(\n      () =>\n        templates &&\n        templates.map(template => {\n          if (template.id === defaultTemplateId) {\n            <Option selected='selected' key={template.id} value={template.id}>\n              {template.title}\n            </Option>;\n          }\n          return (\n            <Option key={template.id} value={template.id}>\n              {template.title}\n            </Option>\n          );\n        }),\n      [templates]\n    );\n\n    const responseTypeMenuData = useMemo(() => {\n      const menuItems = [\n        {\n          id: 'reply',\n          primary: t('reply'),\n          visual: <StyledResponseTypeIcon name={responseTypeIcons.reply} />,\n          selected: responseType === 'reply',\n          onClick: () => {\n            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 onSubjectChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n      setSubject(e.target.value);\n    }, []);\n\n    const onTemplateSelectionChange = 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 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 = () => {\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        responseType\n      });\n    };\n\n    const handleImageAdded = (image: File, id: string) => {\n      const src = URL.createObjectURL(image);\n      rteEditorRef.current?.appendImage({ src, alt: image.name }, id);\n      if (onImageAdded) onImageAdded(image, id);\n    };\n\n    return (\n      <>\n        <Flex\n          as={StyledEmailComposer}\n          ref={ref}\n          {...restProps}\n          container={{\n            gap: 2,\n            direction: 'column'\n          }}\n          progress={!!progress}\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                externalValidator={externalValidator}\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={responseType === 'replyAll' ? cc : undefined}\n              label={t('cc')}\n              mode='multi-select'\n              selections={selectedItems}\n              externalValidator={externalValidator}\n            />\n          )}\n          {showBCC && (\n            <EmailSelector\n              selections={selectedItems}\n              participants={participants}\n              defaultSelections={responseType === 'replyAll' ? bcc : undefined}\n              label={t('bcc')}\n              mode='multi-select'\n              externalValidator={externalValidator}\n            />\n          )}\n\n          <Input value={subject} onChange={onSubjectChange} label={t('subject')} />\n\n          <Select\n            onChange={onTemplateSelectionChange}\n            label={t('auto_reply')}\n            value={autoReplyTemplate}\n          >\n            <Option key={uid} value={uid}>\n              {t('insert')}\n            </Option>\n            <>{templateOptions}</>\n          </Select>\n\n          <RichTextEditor\n            autoFocus\n            ref={rteEditorRef}\n            toolbar={rteToolbar}\n            onImageAdded={handleImageAdded}\n            labelHidden\n            label={t('email_message')}\n            defaultValue={bodyContent}\n            // Below rem values are derived from min 150px, max 300px minus the approx height of toolbar\n            height={{\n              min: '7rem',\n              max: '16.5rem'\n            }}\n          />\n          {attachments.length > 0 && (\n            <Flex container={{ gap: 1, wrap: 'wrap' }}>\n              {attachments.map(attachment => (\n                <FileUploadItem\n                  {...attachment}\n                  key={attachment.name}\n                  onDelete={onAttachmentDelete}\n                />\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              <Button\n                onClick={() => fileUploadInputRef.current?.click()}\n                variant='link'\n                label={t('file_upload_text_multiple')}\n              >\n                <Icon name='paper-clip' />\n              </Button>\n\n              <Button variant='primary' onClick={handleSend}>\n                {t('send_label')}\n              </Button>\n            </Flex>\n          </Flex>\n          <input\n            type='file'\n            style={{ display: 'none' }}\n            ref={fileUploadInputRef}\n            onChange={onFileChange}\n            multiple\n          />\n        </Flex>\n        {!!progress && (\n          <Progress\n            visible={!!progress}\n            placement='local'\n            message={typeof progress === 'object' ? progress.message : t('loading')}\n          />\n        )}\n      </>\n    );\n  }\n);\n\nexport default EmailComposer;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"EmailSummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAI/D,OAAO,EAEL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAsCtD,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AACD,eAAO,MAAM,sBAAsB,qIA2BjC,CAAC;AAMH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA+E7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"EmailSummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAI1E,OAAO,EAEL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAsCtD,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AACD,eAAO,MAAM,sBAAsB,qIA2BjC,CAAC;AAMH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAoF7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Email/EmailSummaryItem.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
@@ -70,11 +70,19 @@ StyledParticipants.defaultProps = defaultThemeProp;
 StyledMessage.defaultProps = defaultThemeProp;
 const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, message, timeStamp, topic, urgency, active = false, onClick, unreadEmailCount, ...restProps }, ref) => {
     const t = useI18n();
-    const items = useMemo(() => [
-        _jsx(Status, { variant: 'info', children: topic }, 'info'),
-        _jsx(_Fragment, { children: sentiment && _jsx(Sentiment, { variant: sentiment.variant, labelHidden: true }, void 0) }, void 0),
-        _jsx(Text, { variant: 'secondary', children: `${t('priority')} ${urgency}` }, void 0)
-    ], [sentiment, topic, urgency]);
+    const items = useMemo(() => {
+        const itemList = [];
+        if (typeof topic === 'string' && topic.length > 0) {
+            itemList.push(_jsx(Status, { variant: 'info', children: topic }, 'info'));
+        }
+        if (sentiment) {
+            itemList.push(_jsx(Sentiment, { variant: sentiment.variant, labelHidden: true }, void 0));
+        }
+        if (typeof urgency === 'number') {
+            itemList.push(_jsx(Text, { variant: 'secondary', children: `${t('priority')} ${urgency}` }, void 0));
+        }
+        return itemList;
+    }, [sentiment, topic, urgency]);
     const emailParticipants = useMemo(() => {
         let participants = '';
         if (activeParticipants.length > 0) {
@@ -85,7 +93,7 @@ const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, messag
         }
         return participants;
     }, [activeParticipants]);
-    return (_jsxs(BareButton, { as: StyledEmailSummaryItem, ref: ref, ...restProps, id: id, onClick: onClick, active: active, "aria-selected": active, "aria-label": `${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: -1, children: [_jsxs(StyledParticipants, { unreadEmailCount: unreadEmailCount, container: { justify: 'between' }, children: [_jsx(Text, { variant: typeof unreadEmailCount === 'number' && unreadEmailCount > 0 ? 'h4' : 'primary', children: emailParticipants }, void 0), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { variant: 'default', children: unreadEmailCount }, void 0))] }, void 0), _jsxs(Flex, { container: {
+    return (_jsxs(BareButton, { as: StyledEmailSummaryItem, ref: ref, ...restProps, id: id, onClick: onClick, active: active, "aria-selected": active, "aria-label": `${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: -1, children: [_jsxs(StyledParticipants, { unreadEmailCount: unreadEmailCount, container: { justify: 'between' }, children: [_jsx(Text, { variant: 'h4', children: emailParticipants }, void 0), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { variant: 'default', children: unreadEmailCount }, void 0))] }, void 0), _jsxs(Flex, { container: {
                     justify: 'between'
                 }, as: StyledMessageAndDate, children: [_jsx(StyledMessage, { unreadEmailCount: unreadEmailCount, children: message }, void 0), _jsx(DateTimeDisplay, { value: timeStamp, variant: 'date', format: 'short' }, void 0)] }, void 0), _jsx(MetaList, { items: items }, void 0)] }, void 0));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"EmailSummaryItem.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  defaultThemeProp,\n  ForwardProps,\n  Text,\n  Flex,\n  Count,\n  Sentiment,\n  MetaList,\n  DateTimeDisplay,\n  Status,\n  tryCatch,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledMetaList } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';\n\nimport { EmailSummaryItemProps } from './Email.types';\n\nconst StyledMessage = styled(Flex)<EmailSummaryItemProps>(({ unreadEmailCount, theme }) => {\n  return css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    margin-inline-end: ${theme.base.spacing};\n    ${unreadEmailCount !== undefined &&\n    unreadEmailCount > 0 &&\n    css`\n      color: ${theme.base.palette.interactive};\n    `}\n  `;\n});\n\nconst StyledMessageAndDate = styled.div`\n  white-space: nowrap;\n`;\n\nconst StyledParticipants = styled(Flex)<EmailSummaryItemProps>(({ unreadEmailCount, theme }) => {\n  return css`\n    ${unreadEmailCount !== undefined &&\n    unreadEmailCount > 0 &&\n    css`\n      position: relative;\n      &::before {\n        content: '';\n        position: absolute;\n        inset-inline: calc(-1.5 * ${theme.base.spacing});\n        inset-block-start: calc(0.8 * ${theme.base.spacing});\n        width: 0.5rem;\n        height: 0.5rem;\n        border-radius: 50%;\n        background-color: ${theme.base.palette.interactive};\n      }\n    `}\n  `;\n});\ninterface StyledEmailSummaryItemProps extends EmailSummaryItemProps {\n  isEmailItemActive: boolean;\n}\nexport const StyledEmailSummaryItem = styled.button<StyledEmailSummaryItemProps>(({ theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    width: 100%;\n    color: ${theme.base.palette['foreground-color']};\n    background-color: ${theme.base.palette['primary-background']};\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    ${StyledMetaList}, ${StyledMessageAndDate} {\n      margin-block-start: ${theme.base.spacing};\n    }\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &[aria-selected='true'],\n    &[data-current='true'] {\n      background-color: ${theme.base.palette['secondary-background']};\n    }\n\n    &:hover,\n    &:focus-within {\n      background-color: ${hoverColor};\n    }\n  `;\n});\n\nStyledEmailSummaryItem.defaultProps = defaultThemeProp;\nStyledParticipants.defaultProps = defaultThemeProp;\nStyledMessage.defaultProps = defaultThemeProp;\n\nconst EmailSummaryItem: FunctionComponent<EmailSummaryItemProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      activeParticipants,\n      sentiment,\n      message,\n      timeStamp,\n      topic,\n      urgency,\n      active = false,\n      onClick,\n      unreadEmailCount,\n      ...restProps\n    },\n    ref: EmailSummaryItemProps['ref']\n  ) => {\n    const t = useI18n();\n    const items = useMemo(\n      () => [\n        <Status variant='info' key='info'>\n          {topic}\n        </Status>,\n        <>{sentiment && <Sentiment variant={sentiment.variant} labelHidden />}</>,\n        <Text variant='secondary'>{`${t('priority')} ${urgency}`}</Text>\n      ],\n      [sentiment, topic, urgency]\n    );\n\n    const emailParticipants = useMemo(() => {\n      let participants = '';\n      if (activeParticipants.length > 0) {\n        participants =\n          activeParticipants.length === 1\n            ? activeParticipants[0].fullName\n            : activeParticipants.map(participant => `${participant.shortName}`).join(', ');\n      }\n      return participants;\n    }, [activeParticipants]);\n\n    return (\n      <BareButton\n        as={StyledEmailSummaryItem}\n        ref={ref}\n        {...restProps}\n        id={id}\n        onClick={onClick}\n        active={active}\n        aria-selected={active}\n        aria-label={`${emailParticipants}, ${message} ${timeStamp} ${topic} ${\n          sentiment?.variant\n        } ${t('priority')} ${urgency}`}\n        tabIndex={-1}\n      >\n        <StyledParticipants unreadEmailCount={unreadEmailCount} container={{ justify: 'between' }}>\n          <Text\n            variant={\n              typeof unreadEmailCount === 'number' && unreadEmailCount > 0 ? 'h4' : 'primary'\n            }\n          >\n            {emailParticipants}\n          </Text>\n          {typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (\n            <Count variant='default'>{unreadEmailCount}</Count>\n          )}\n        </StyledParticipants>\n        <Flex\n          container={{\n            justify: 'between'\n          }}\n          as={StyledMessageAndDate}\n        >\n          <StyledMessage unreadEmailCount={unreadEmailCount}>{message}</StyledMessage>\n          <DateTimeDisplay value={timeStamp} variant='date' format='short' />\n        </Flex>\n        <MetaList items={items} />\n      </BareButton>\n    );\n  }\n);\n\nexport default EmailSummaryItem;\n"]}
+{"version":3,"file":"EmailSummaryItem.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  defaultThemeProp,\n  ForwardProps,\n  Text,\n  Flex,\n  Count,\n  Sentiment,\n  MetaList,\n  DateTimeDisplay,\n  Status,\n  tryCatch,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledMetaList } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';\n\nimport { EmailSummaryItemProps } from './Email.types';\n\nconst StyledMessage = styled(Flex)<EmailSummaryItemProps>(({ unreadEmailCount, theme }) => {\n  return css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    margin-inline-end: ${theme.base.spacing};\n    ${unreadEmailCount !== undefined &&\n    unreadEmailCount > 0 &&\n    css`\n      color: ${theme.base.palette.interactive};\n    `}\n  `;\n});\n\nconst StyledMessageAndDate = styled.div`\n  white-space: nowrap;\n`;\n\nconst StyledParticipants = styled(Flex)<EmailSummaryItemProps>(({ unreadEmailCount, theme }) => {\n  return css`\n    ${unreadEmailCount !== undefined &&\n    unreadEmailCount > 0 &&\n    css`\n      position: relative;\n      &::before {\n        content: '';\n        position: absolute;\n        inset-inline: calc(-1.5 * ${theme.base.spacing});\n        inset-block-start: calc(0.8 * ${theme.base.spacing});\n        width: 0.5rem;\n        height: 0.5rem;\n        border-radius: 50%;\n        background-color: ${theme.base.palette.interactive};\n      }\n    `}\n  `;\n});\ninterface StyledEmailSummaryItemProps extends EmailSummaryItemProps {\n  isEmailItemActive: boolean;\n}\nexport const StyledEmailSummaryItem = styled.button<StyledEmailSummaryItemProps>(({ theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    width: 100%;\n    color: ${theme.base.palette['foreground-color']};\n    background-color: ${theme.base.palette['primary-background']};\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    ${StyledMetaList}, ${StyledMessageAndDate} {\n      margin-block-start: ${theme.base.spacing};\n    }\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &[aria-selected='true'],\n    &[data-current='true'] {\n      background-color: ${theme.base.palette['secondary-background']};\n    }\n\n    &:hover,\n    &:focus-within {\n      background-color: ${hoverColor};\n    }\n  `;\n});\n\nStyledEmailSummaryItem.defaultProps = defaultThemeProp;\nStyledParticipants.defaultProps = defaultThemeProp;\nStyledMessage.defaultProps = defaultThemeProp;\n\nconst EmailSummaryItem: FunctionComponent<EmailSummaryItemProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      activeParticipants,\n      sentiment,\n      message,\n      timeStamp,\n      topic,\n      urgency,\n      active = false,\n      onClick,\n      unreadEmailCount,\n      ...restProps\n    },\n    ref: EmailSummaryItemProps['ref']\n  ) => {\n    const t = useI18n();\n    const items = useMemo(() => {\n      const itemList: ReactNode[] = [];\n\n      if (typeof topic === 'string' && topic.length > 0) {\n        itemList.push(\n          <Status variant='info' key='info'>\n            {topic}\n          </Status>\n        );\n      }\n\n      if (sentiment) {\n        itemList.push(<Sentiment variant={sentiment.variant} labelHidden />);\n      }\n\n      if (typeof urgency === 'number') {\n        itemList.push(<Text variant='secondary'>{`${t('priority')} ${urgency}`}</Text>);\n      }\n\n      return itemList;\n    }, [sentiment, topic, urgency]);\n\n    const emailParticipants = useMemo(() => {\n      let participants = '';\n      if (activeParticipants.length > 0) {\n        participants =\n          activeParticipants.length === 1\n            ? activeParticipants[0].fullName\n            : activeParticipants.map(participant => `${participant.shortName}`).join(', ');\n      }\n      return participants;\n    }, [activeParticipants]);\n\n    return (\n      <BareButton\n        as={StyledEmailSummaryItem}\n        ref={ref}\n        {...restProps}\n        id={id}\n        onClick={onClick}\n        active={active}\n        aria-selected={active}\n        aria-label={`${emailParticipants}, ${message} ${timeStamp} ${topic} ${\n          sentiment?.variant\n        } ${t('priority')} ${urgency}`}\n        tabIndex={-1}\n      >\n        <StyledParticipants unreadEmailCount={unreadEmailCount} container={{ justify: 'between' }}>\n          <Text variant='h4'>{emailParticipants}</Text>\n          {typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (\n            <Count variant='default'>{unreadEmailCount}</Count>\n          )}\n        </StyledParticipants>\n        <Flex\n          container={{\n            justify: 'between'\n          }}\n          as={StyledMessageAndDate}\n        >\n          <StyledMessage unreadEmailCount={unreadEmailCount}>{message}</StyledMessage>\n          <DateTimeDisplay value={timeStamp} variant='date' format='short' />\n        </Flex>\n        <MetaList items={items} />\n      </BareButton>\n    );\n  }\n);\n\nexport default EmailSummaryItem;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"EmailSummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAiDtD,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAwI7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"EmailSummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAkBb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AA+DtD,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAyL7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Email/EmailSummaryList.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createRef, useMemo, useState, useEffect, forwardRef, useRef } from 'react';
+import { createRef, useMemo, useState, useEffect, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton, Text, useActiveDescendant, useConsolidatedRef, useI18n, menuHelpers } from '@pega/cosmos-react-core';
+import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton, Text, useActiveDescendant, useLazyDescendant, useConsolidatedRef, useI18n, menuHelpers, Progress, useItemIntersection, usePrevious, VisuallyHiddenText, EmptyState, calculateFontSize, StyledText } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';
+import { StyledLoadMore } from './Email.styles';
 registerIcon(filterIcon);
 const StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {
     return css `
@@ -44,72 +45,112 @@ const StyledEmailSummaryList = styled.div(({ theme }) => {
   `;
 });
 StyledEmailSummaryList.defaultProps = defaultThemeProp;
-const EmailSummaryList = forwardRef(({ categories, onCategoryClick, items, unreadEmailCount, filters, onFilterChange, onItemClick, ...restProps }, ref) => {
+const StyledWorklist = styled(MenuButton)(({ theme }) => {
+    const { 'font-size': fontSize, 'font-scale': fontScale } = theme.base;
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    return css `
+    ${StyledText} {
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+      font-size: ${fontSizes.m};
+    }
+  `;
+});
+StyledWorklist.defaultProps = defaultThemeProp;
+const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories, onCategoryClick, items, unreadEmailCount, filters, onFilterChange, onItemClick, emptyMessage, ...restProps }, ref) => {
     const t = useI18n();
     const tablistRef = useConsolidatedRef(ref);
     const tabRefs = items.map(() => createRef());
+    const [focusReturnEl, setFocusReturnEl] = useState();
     const [focusDescendant, setFocusDescendant] = useState(null);
-    const previousActiveDescendant = useRef();
     const [listHasBeenViewed, setListHasBeenViewed] = useState(false);
     const [clickOnInitialView, setClickOnInitialView] = useState(false);
+    const prevEmail = usePrevious(items);
+    const [announcement, setAnnouncement] = useState('');
     const uadConfig = useMemo(() => ({
         focusEl: tablistRef.current,
         scope: tablistRef.current,
         selector: 'button[role="tab"]',
+        focusReturnEl,
+        clearFocusReturn: () => {
+            setFocusReturnEl(null);
+        },
         focusDescendantEl: focusDescendant,
         clearFocusDescendant: () => {
             setFocusDescendant(null);
             tablistRef.current?.focus();
         },
         pauseDescendantEvaluation: !listHasBeenViewed
-    }), [tablistRef.current, focusDescendant, listHasBeenViewed]);
-    const { activeDescendant } = useActiveDescendant(uadConfig);
+    }), [tablistRef.current, focusDescendant, focusReturnEl, listHasBeenViewed]);
+    const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [items.length]);
+    const previousActiveDescendant = usePrevious(activeDescendant);
+    useLazyDescendant({
+        loading,
+        descendants,
+        previousActiveDescendant,
+        activeDescendant,
+        focusReturnEl,
+        setFocusReturnEl,
+        scrollEl: tablistRef.current
+    });
     // Trigger click of new active descendant
     useEffect(() => {
-        const hasPreviousOrClickInitial = previousActiveDescendant.current || clickOnInitialView;
+        const hasPreviousOrClickInitial = previousActiveDescendant || clickOnInitialView;
         if (hasPreviousOrClickInitial && activeDescendant) {
             activeDescendant.click();
         }
-        previousActiveDescendant.current = activeDescendant;
     }, [activeDescendant]);
     const buttonText = useMemo(() => {
         return (menuHelpers.getSelected(categories)[0]?.primary ??
             menuHelpers.flatten(categories)[0].primary);
     }, [categories]);
-    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [_jsxs(StyledEmailSummaryListHeader, { children: [_jsx(Text, { variant: 'h2', children: t('inbox') }, void 0), _jsxs(StyledActionWrapper, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(MenuButton, { text: buttonText, variant: 'text', menu: {
+    useItemIntersection(tablistRef, items.length - 1, () => {
+        onLoadMore?.();
+    }, ':scope > button[role="tab"]');
+    useEffect(() => {
+        if (loading)
+            setAnnouncement(t('loading_email'));
+    }, [loading]);
+    useEffect(() => {
+        if (prevEmail) {
+            const difference = items.length - prevEmail.length;
+            if (difference)
+                setAnnouncement(t('new_emails_count', [difference], { count: difference }));
+        }
+    }, [items]);
+    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [_jsxs(StyledEmailSummaryListHeader, { children: [_jsx(Text, { variant: 'h2', children: t('inbox') }, void 0), _jsxs(StyledActionWrapper, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(StyledWorklist, { text: buttonText, variant: 'text', menu: {
                                     mode: 'single-select',
                                     items: categories,
                                     onItemClick: onCategoryClick
-                                } }, void 0), unreadEmailCount && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
+                                } }, void 0), typeof unreadEmailCount === 'number' && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
                                     count: unreadEmailCount
-                                }), variant: 'default', children: unreadEmailCount }, void 0)), _jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }, void 0) }, void 0)] }, void 0)] }, void 0), _jsx(StyledEmailSummaryList, { role: 'tablist', tabIndex: 0, ref: tablistRef, onFocus: e => {
+                                }), variant: 'default', children: unreadEmailCount }, void 0)), _jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }, void 0) }, void 0)] }, void 0)] }, void 0), items.length > 0 ? (_jsxs(StyledEmailSummaryList, { role: 'tablist', tabIndex: 0, ref: tablistRef, onFocus: e => {
                     if (!listHasBeenViewed && e.target.getAttribute('role') === 'tablist') {
                         setClickOnInitialView(true);
                         setListHasBeenViewed(true);
                     }
-                }, children: items.map((emailItem, i) => {
-                    const { id, ...emailItemProps } = emailItem;
-                    return (_jsx(EmailSummaryItem, { ref: tabRefs[i], id: id, role: 'tab', ...emailItemProps, onClick: (e) => {
-                            const mouseClick = e.detail !== 0;
-                            if (mouseClick) {
-                                const target = e.target;
-                                const focusAtEl = target.getAttribute('role') === 'tab'
-                                    ? target
-                                    : target.closest('button[role="tab"]');
-                                if (focusAtEl)
-                                    setFocusDescendant(focusAtEl);
-                                if (!listHasBeenViewed) {
-                                    if (i === 0)
-                                        setClickOnInitialView(true);
-                                    setListHasBeenViewed(true);
+                }, children: [_jsx(VisuallyHiddenText, { "aria-live": 'polite', children: announcement }, void 0), items.map((emailItem, i) => {
+                        const { id, ...emailItemProps } = emailItem;
+                        return (_jsx(EmailSummaryItem, { ref: tabRefs[i], id: id, role: 'tab', ...emailItemProps, onClick: (e) => {
+                                const mouseClick = e.detail !== 0;
+                                if (mouseClick) {
+                                    const target = e.target;
+                                    const focusAtEl = target.getAttribute('role') === 'tab'
+                                        ? target
+                                        : target.closest('button[role="tab"]');
+                                    if (focusAtEl)
+                                        setFocusDescendant(focusAtEl);
+                                    if (!listHasBeenViewed) {
+                                        if (i === 0)
+                                            setClickOnInitialView(true);
+                                        setListHasBeenViewed(true);
+                                    }
+                                }
+                                // Click is triggered by active descendant change, 'enter', & duplicate click
+                                if (!mouseClick || activeDescendant?.id === id) {
+                                    onItemClick(id);
                                 }
-                            }
-                            // Click is triggered by active descendant change, 'enter', & duplicate click
-                            if (!mouseClick || activeDescendant?.id === id) {
-                                onItemClick(id);
-                            }
-                        }, active: activeDescendant && activeDescendant.id === id }, id));
-                }) }, void 0)] }, void 0));
+                            }, active: activeDescendant && activeDescendant.id === id }, id));
+                    }), loading && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }, void 0) }, void 0))] }, void 0)) : (_jsx(EmptyState, { message: emptyMessage }, void 0))] }, void 0));
 });
 export default EmailSummaryList;
 //# sourceMappingURL=EmailSummaryList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmailSummaryList.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EAGP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,KAAK,EACL,gBAAgB,EAChB,IAAI,EAEJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,mBAAmB,EAEnB,kBAAkB,EAClB,OAAO,EACP,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAG5F,OAAO,gBAAgB,EAAE,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,YAAY,CAAC,UAAU,CAAC,CAAC;AAEzB,MAAM,+BAA+B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;GAC7D,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,+BAA+B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhE,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,cAAc,KAAK,CAAC,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9F,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,4BAA4B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7D,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1C,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAExC,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;;;;;;;;;QASJ,sBAAsB;4BACF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;GAGhD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,UAAU,EACV,eAAe,EACf,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,WAAW,EACX,GAAG,SAAS,EACb,EACD,GAAiC,EACjC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,SAAS,EAAqB,CAAC,CAAC;IAChE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IACjF,MAAM,wBAAwB,GAAG,MAAM,EAA2B,CAAC;IACnE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,KAAK,EAAE,UAAU,CAAC,OAAO;QACzB,QAAQ,EAAE,oBAAoB;QAC9B,iBAAiB,EAAE,eAAe;QAClC,oBAAoB,EAAE,GAAG,EAAE;YACzB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC9B,CAAC;QACD,yBAAyB,EAAE,CAAC,iBAAiB;KAC9C,CAAC,EACF,CAAC,UAAU,CAAC,OAAO,EAAE,eAAe,EAAE,iBAAiB,CAAC,CACzD,CAAC;IAEF,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAE5D,yCAAyC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,yBAAyB,GAAG,wBAAwB,CAAC,OAAO,IAAI,kBAAkB,CAAC;QAEzF,IAAI,yBAAyB,IAAI,gBAAgB,EAAE;YACjD,gBAAgB,CAAC,KAAK,EAAE,CAAC;SAC1B;QAED,wBAAwB,CAAC,OAAO,GAAG,gBAAgB,CAAC;IACtD,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,CACL,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO;YAC/C,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAC3C,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,MAAC,+BAA+B,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAM,SAAS,aAChF,MAAC,4BAA4B,eAC3B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,OAAO,CAAC,WAAQ,EACtC,MAAC,mBAAmB,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aAChE,KAAC,UAAU,IACT,IAAI,EAAE,UAAU,EAChB,OAAO,EAAC,MAAM,EACd,IAAI,EAAE;oCACJ,IAAI,EAAE,eAAe;oCACrB,KAAK,EAAE,UAAU;oCACjB,WAAW,EAAE,eAAe;iCAC7B,WACD,EACD,gBAAgB,IAAI,CACnB,KAAC,KAAK,kBACQ,CAAC,CAAC,oBAAoB,EAAE,CAAC,gBAAgB,CAAC,EAAE;oCACtD,KAAK,EAAE,gBAAgB;iCACxB,CAAC,EACF,OAAO,EAAC,SAAS,YAEhB,gBAAgB,WACX,CACT,EACD,KAAC,kBAAkB,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,IAAI,kBAClE,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,WAAG,WACH,YACD,YACO,EAE/B,KAAC,sBAAsB,IACrB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,IAAI,CAAC,iBAAiB,IAAI,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,EAAE;wBACrE,qBAAqB,CAAC,IAAI,CAAC,CAAC;wBAC5B,oBAAoB,CAAC,IAAI,CAAC,CAAC;qBAC5B;gBACH,CAAC,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE;oBAC1B,MAAM,EAAE,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,SAAS,CAAC;oBAC5C,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,EAAE,EAAE,EAAE,EAEN,IAAI,EAAC,KAAK,KACN,cAAc,EAClB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;4BACzB,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;4BAElC,IAAI,UAAU,EAAE;gCACd,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;gCACvC,MAAM,SAAS,GACb,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,KAAK;oCACnC,CAAC,CAAC,MAAM;oCACR,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;gCAC3C,IAAI,SAAS;oCAAE,kBAAkB,CAAC,SAAwB,CAAC,CAAC;gCAE5D,IAAI,CAAC,iBAAiB,EAAE;oCACtB,IAAI,CAAC,KAAK,CAAC;wCAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;oCACzC,oBAAoB,CAAC,IAAI,CAAC,CAAC;iCAC5B;6BACF;4BACD,6EAA6E;4BAC7E,IAAI,CAAC,UAAU,IAAI,gBAAgB,EAAE,EAAE,KAAK,EAAE,EAAE;gCAC9C,WAAW,CAAC,EAAE,CAAC,CAAC;6BACjB;wBACH,CAAC,EACD,MAAM,EAAE,gBAAgB,IAAI,gBAAgB,CAAC,EAAE,KAAK,EAAE,IAxBjD,EAAE,CAyBP,CACH,CAAC;gBACJ,CAAC,CAAC,WACqB,YACO,CACnC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import {\n  createRef,\n  useMemo,\n  useState,\n  useEffect,\n  forwardRef,\n  useRef,\n  FunctionComponent,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Count,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  MenuButton,\n  Text,\n  useActiveDescendant,\n  UseActiveDescendantConfig,\n  useConsolidatedRef,\n  useI18n,\n  menuHelpers\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\n\nimport { EmailSummaryListProps } from './Email.types';\nimport EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';\n\nregisterIcon(filterIcon);\n\nconst StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {\n  return css`\n    height: 100%;\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\nStyledEmailSummaryListContainer.defaultProps = defaultThemeProp;\n\nconst StyledEmailSummaryListHeader = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing}) ${theme.base.spacing};\n  `;\n});\nStyledEmailSummaryListHeader.defaultProps = defaultThemeProp;\n\nconst StyledActionWrapper = styled(Flex)(({ theme }) => {\n  return css`\n    padding-block-start: ${theme.base.spacing};\n  `;\n});\nStyledActionWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFilterButton = styled(Button)`\n  margin-inline-start: auto;\n`;\n\nconst StyledEmailSummaryList = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus {\n      ${StyledEmailSummaryItem}[data-current='true'] {\n        box-shadow: inset ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nconst EmailSummaryList: FunctionComponent<EmailSummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      categories,\n      onCategoryClick,\n      items,\n      unreadEmailCount,\n      filters,\n      onFilterChange,\n      onItemClick,\n      ...restProps\n    },\n    ref: EmailSummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n    const tablistRef = useConsolidatedRef(ref);\n    const tabRefs = items.map(() => createRef<HTMLButtonElement>());\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const previousActiveDescendant = useRef<HTMLElement | undefined>();\n    const [listHasBeenViewed, setListHasBeenViewed] = useState(false);\n    const [clickOnInitialView, setClickOnInitialView] = useState(false);\n\n    const uadConfig = useMemo<UseActiveDescendantConfig>(\n      () => ({\n        focusEl: tablistRef.current,\n        scope: tablistRef.current,\n        selector: 'button[role=\"tab\"]',\n        focusDescendantEl: focusDescendant,\n        clearFocusDescendant: () => {\n          setFocusDescendant(null);\n          tablistRef.current?.focus();\n        },\n        pauseDescendantEvaluation: !listHasBeenViewed\n      }),\n      [tablistRef.current, focusDescendant, listHasBeenViewed]\n    );\n\n    const { activeDescendant } = useActiveDescendant(uadConfig);\n\n    // Trigger click of new active descendant\n    useEffect(() => {\n      const hasPreviousOrClickInitial = previousActiveDescendant.current || clickOnInitialView;\n\n      if (hasPreviousOrClickInitial && activeDescendant) {\n        activeDescendant.click();\n      }\n\n      previousActiveDescendant.current = activeDescendant;\n    }, [activeDescendant]);\n\n    const buttonText = useMemo(() => {\n      return (\n        menuHelpers.getSelected(categories)[0]?.primary ??\n        menuHelpers.flatten(categories)[0].primary\n      );\n    }, [categories]);\n\n    return (\n      <StyledEmailSummaryListContainer container={{ direction: 'column' }} {...restProps}>\n        <StyledEmailSummaryListHeader>\n          <Text variant='h2'>{t('inbox')}</Text>\n          <StyledActionWrapper container={{ alignItems: 'center', gap: 0.5 }}>\n            <MenuButton\n              text={buttonText}\n              variant='text'\n              menu={{\n                mode: 'single-select',\n                items: categories,\n                onItemClick: onCategoryClick\n              }}\n            />\n            {unreadEmailCount && (\n              <Count\n                aria-label={t('unread_email_count', [unreadEmailCount], {\n                  count: unreadEmailCount\n                })}\n                variant='default'\n              >\n                {unreadEmailCount}\n              </Count>\n            )}\n            <StyledFilterButton variant='simple' label={t('email_filters')} icon>\n              <Icon name='filter' />\n            </StyledFilterButton>\n          </StyledActionWrapper>\n        </StyledEmailSummaryListHeader>\n\n        <StyledEmailSummaryList\n          role='tablist'\n          tabIndex={0}\n          ref={tablistRef}\n          onFocus={e => {\n            if (!listHasBeenViewed && e.target.getAttribute('role') === 'tablist') {\n              setClickOnInitialView(true);\n              setListHasBeenViewed(true);\n            }\n          }}\n        >\n          {items.map((emailItem, i) => {\n            const { id, ...emailItemProps } = emailItem;\n            return (\n              <EmailSummaryItem\n                ref={tabRefs[i]}\n                id={id}\n                key={id}\n                role='tab'\n                {...emailItemProps}\n                onClick={(e: MouseEvent) => {\n                  const mouseClick = e.detail !== 0;\n\n                  if (mouseClick) {\n                    const target = e.target as HTMLElement;\n                    const focusAtEl =\n                      target.getAttribute('role') === 'tab'\n                        ? target\n                        : target.closest('button[role=\"tab\"]');\n                    if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n\n                    if (!listHasBeenViewed) {\n                      if (i === 0) setClickOnInitialView(true);\n                      setListHasBeenViewed(true);\n                    }\n                  }\n                  // Click is triggered by active descendant change, 'enter', & duplicate click\n                  if (!mouseClick || activeDescendant?.id === id) {\n                    onItemClick(id);\n                  }\n                }}\n                active={activeDescendant && activeDescendant.id === id}\n              />\n            );\n          })}\n        </StyledEmailSummaryList>\n      </StyledEmailSummaryListContainer>\n    );\n  }\n);\n\nexport default EmailSummaryList;\n"]}
+{"version":3,"file":"EmailSummaryList.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createRef,\n  useMemo,\n  useState,\n  useEffect,\n  forwardRef,\n  FunctionComponent,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Count,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  MenuButton,\n  Text,\n  useActiveDescendant,\n  UseActiveDescendantConfig,\n  useLazyDescendant,\n  useConsolidatedRef,\n  useI18n,\n  menuHelpers,\n  Progress,\n  useItemIntersection,\n  usePrevious,\n  VisuallyHiddenText,\n  EmptyState,\n  calculateFontSize,\n  StyledText\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\n\nimport { EmailSummaryListProps } from './Email.types';\nimport EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';\nimport { StyledLoadMore } from './Email.styles';\n\nregisterIcon(filterIcon);\n\nconst StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {\n  return css`\n    height: 100%;\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\nStyledEmailSummaryListContainer.defaultProps = defaultThemeProp;\n\nconst StyledEmailSummaryListHeader = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing}) ${theme.base.spacing};\n  `;\n});\nStyledEmailSummaryListHeader.defaultProps = defaultThemeProp;\n\nconst StyledActionWrapper = styled(Flex)(({ theme }) => {\n  return css`\n    padding-block-start: ${theme.base.spacing};\n  `;\n});\nStyledActionWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFilterButton = styled(Button)`\n  margin-inline-start: auto;\n`;\n\nconst StyledEmailSummaryList = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus {\n      ${StyledEmailSummaryItem}[data-current='true'] {\n        box-shadow: inset ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nconst StyledWorklist = styled(MenuButton)(({ theme }) => {\n  const { 'font-size': fontSize, 'font-scale': fontScale } = theme.base;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n  return css`\n    ${StyledText} {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      font-size: ${fontSizes.m};\n    }\n  `;\n});\n\nStyledWorklist.defaultProps = defaultThemeProp;\n\nconst EmailSummaryList: FunctionComponent<EmailSummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      loading = false,\n      onLoadMore,\n      categories,\n      onCategoryClick,\n      items,\n      unreadEmailCount,\n      filters,\n      onFilterChange,\n      onItemClick,\n      emptyMessage,\n      ...restProps\n    },\n    ref: EmailSummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n    const tablistRef = useConsolidatedRef(ref);\n    const tabRefs = items.map(() => createRef<HTMLButtonElement>());\n    const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const [listHasBeenViewed, setListHasBeenViewed] = useState(false);\n    const [clickOnInitialView, setClickOnInitialView] = useState(false);\n    const prevEmail = usePrevious(items);\n    const [announcement, setAnnouncement] = useState('');\n\n    const uadConfig = useMemo<UseActiveDescendantConfig>(\n      () => ({\n        focusEl: tablistRef.current,\n        scope: tablistRef.current,\n        selector: 'button[role=\"tab\"]',\n        focusReturnEl,\n        clearFocusReturn: () => {\n          setFocusReturnEl(null);\n        },\n        focusDescendantEl: focusDescendant,\n        clearFocusDescendant: () => {\n          setFocusDescendant(null);\n          tablistRef.current?.focus();\n        },\n        pauseDescendantEvaluation: !listHasBeenViewed\n      }),\n      [tablistRef.current, focusDescendant, focusReturnEl, listHasBeenViewed]\n    );\n\n    const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [items.length]);\n\n    const previousActiveDescendant = usePrevious(activeDescendant);\n\n    useLazyDescendant({\n      loading,\n      descendants,\n      previousActiveDescendant,\n      activeDescendant,\n      focusReturnEl,\n      setFocusReturnEl,\n      scrollEl: tablistRef.current\n    });\n\n    // Trigger click of new active descendant\n    useEffect(() => {\n      const hasPreviousOrClickInitial = previousActiveDescendant || clickOnInitialView;\n\n      if (hasPreviousOrClickInitial && activeDescendant) {\n        activeDescendant.click();\n      }\n    }, [activeDescendant]);\n\n    const buttonText = useMemo(() => {\n      return (\n        menuHelpers.getSelected(categories)[0]?.primary ??\n        menuHelpers.flatten(categories)[0].primary\n      );\n    }, [categories]);\n\n    useItemIntersection(\n      tablistRef,\n      items.length - 1,\n      () => {\n        onLoadMore?.();\n      },\n      ':scope > button[role=\"tab\"]'\n    );\n\n    useEffect(() => {\n      if (loading) setAnnouncement(t('loading_email'));\n    }, [loading]);\n\n    useEffect(() => {\n      if (prevEmail) {\n        const difference = items.length - prevEmail.length;\n        if (difference) setAnnouncement(t('new_emails_count', [difference], { count: difference }));\n      }\n    }, [items]);\n\n    return (\n      <StyledEmailSummaryListContainer container={{ direction: 'column' }} {...restProps}>\n        <StyledEmailSummaryListHeader>\n          <Text variant='h2'>{t('inbox')}</Text>\n          <StyledActionWrapper container={{ alignItems: 'center', gap: 0.5 }}>\n            <StyledWorklist\n              text={buttonText}\n              variant='text'\n              menu={{\n                mode: 'single-select',\n                items: categories,\n                onItemClick: onCategoryClick\n              }}\n            />\n            {typeof unreadEmailCount === 'number' && (\n              <Count\n                aria-label={t('unread_email_count', [unreadEmailCount], {\n                  count: unreadEmailCount\n                })}\n                variant='default'\n              >\n                {unreadEmailCount}\n              </Count>\n            )}\n            <StyledFilterButton variant='simple' label={t('email_filters')} icon>\n              <Icon name='filter' />\n            </StyledFilterButton>\n          </StyledActionWrapper>\n        </StyledEmailSummaryListHeader>\n\n        {items.length > 0 ? (\n          <StyledEmailSummaryList\n            role='tablist'\n            tabIndex={0}\n            ref={tablistRef}\n            onFocus={e => {\n              if (!listHasBeenViewed && e.target.getAttribute('role') === 'tablist') {\n                setClickOnInitialView(true);\n                setListHasBeenViewed(true);\n              }\n            }}\n          >\n            <VisuallyHiddenText aria-live='polite'>{announcement}</VisuallyHiddenText>\n            {items.map((emailItem, i) => {\n              const { id, ...emailItemProps } = emailItem;\n              return (\n                <EmailSummaryItem\n                  ref={tabRefs[i]}\n                  id={id}\n                  key={id}\n                  role='tab'\n                  {...emailItemProps}\n                  onClick={(e: MouseEvent) => {\n                    const mouseClick = e.detail !== 0;\n\n                    if (mouseClick) {\n                      const target = e.target as HTMLElement;\n                      const focusAtEl =\n                        target.getAttribute('role') === 'tab'\n                          ? target\n                          : target.closest('button[role=\"tab\"]');\n                      if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n\n                      if (!listHasBeenViewed) {\n                        if (i === 0) setClickOnInitialView(true);\n                        setListHasBeenViewed(true);\n                      }\n                    }\n                    // Click is triggered by active descendant change, 'enter', & duplicate click\n                    if (!mouseClick || activeDescendant?.id === id) {\n                      onItemClick(id);\n                    }\n                  }}\n                  active={activeDescendant && activeDescendant.id === id}\n                />\n              );\n            })}\n            {loading && (\n              <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n                <Progress placement='inline' />\n              </Flex>\n            )}\n          </StyledEmailSummaryList>\n        ) : (\n          <EmptyState message={emptyMessage} />\n        )}\n      </StyledEmailSummaryListContainer>\n    );\n  }\n);\n\nexport default EmailSummaryList;\n"]}

package/lib/components/Feed/Feed.d.ts

@@ -42,6 +42,8 @@ export interface FeedProps extends NoChildrenProp {
     onFilterChange?: (filterId: string, on: boolean) => void;
     /** A callback that is triggered when the bottom of the Feed is scrolled into view so that additional posts may be displayed. */
     onLoadMore?: () => void;
+    /** Indicates if the posts are being currently loading */
+    loadingPosts?: boolean;
     /** A region to hold the new post component */
     newPostRegion?: ReactNode;
     /** A list of FeedPost components */

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAG7F,OAAO,EAIL,YAAY,EAUZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQ/D,MAAM,WAAW,MAAM;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC,yGAAyG;IACzG,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACjD,2EAA2E;IAC3E,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,8KAA8K;IAC9K,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2GAA2G;IAC3G,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC5C,yIAAyI;IACzI,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAChE,wFAAwF;IACxF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,gIAAgI;IAChI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AA6DD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CAgLtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAG7F,OAAO,EAIL,YAAY,EASZ,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQ/D,MAAM,WAAW,MAAM;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC,yGAAyG;IACzG,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACjD,2EAA2E;IAC3E,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,8KAA8K;IAC9K,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2GAA2G;IAC3G,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC5C,yIAAyI;IACzI,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAChE,wFAAwF;IACxF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,gIAAgI;IAChI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAiDD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CAmKtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Feed/Feed.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Flex, Grid, Icon, registerIcon, Popover, Switch, Text, Progress, StyledProgressRing, usePrevious } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Flex, Grid, Icon, registerIcon, Popover, Switch, Text, Progress, usePrevious, useItemIntersection, useUID } from '@pega/cosmos-react-core';
 import { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';
@@ -40,36 +40,21 @@ const StyledFilterList = styled.ul `
   min-width: 10rem;
 `;
 StyledFilterList.defaultProps = defaultThemeProp;
-const StyledLoadMore = styled.div(({ theme, visible }) => {
+const StyledLoadMore = styled.div(({ theme }) => {
     return css `
-    ${visible &&
-        css `
-      margin-top: calc(2 * ${theme.base.spacing});
-    `}
-
-    ${StyledProgressRing} {
-      min-height: 0;
-      min-width: 0;
-
-      ${visible &&
-        css `
-        min-height: 2rem;
-        min-width: 2rem;
-      `}
-    }
+    margin-top: ${theme.base.spacing};
+    min-height: 2rem;
+    min-width: 2rem;
   `;
 });
 StyledLoadMore.defaultProps = defaultThemeProp;
 const Feed = (props) => {
-    const { variant, children, userInfo, className, title, searchTypes, onDecoratorSearch, searchResults = [], onMentionClick, onTagClick, mentionContent, interactionRenderers = [], markdownMap, filters, onFilterChange, onLoadMore, newPostRegion, posts = [], ...restProps } = props;
+    const { loadingPosts = false, variant, children, userInfo, className, title, searchTypes, onDecoratorSearch, searchResults = [], onMentionClick, onTagClick, mentionContent, interactionRenderers = [], markdownMap, filters, onFilterChange, onLoadMore, newPostRegion, posts = [], ...restProps } = props;
     const t = useI18n();
     const [popoverEl, setPopoverEl] = useElement();
     const [buttonEl, setButtonEl] = useElement();
-    const [loadMoreEl, setLoadMoreEl] = useElement();
     const [mountPopover, setMountPopover] = useState(false);
-    const [feedOverflows, setFeedOverflows] = useState(false);
     const [showSearchResults, setShowSearchResults] = useState(false);
-    const feedOverflowsRef = useRef(false);
     const prevPosts = usePrevious(posts);
     const [announcementText, setAnnouncementText] = useState('');
     const filterRef = useRef(null);
@@ -87,35 +72,27 @@ const Feed = (props) => {
             document.removeEventListener('keydown', onKeydown);
         };
     }, []);
-    useEffect(() => {
-        if (loadMoreEl) {
-            const intersectionObserver = new IntersectionObserver(entries => {
-                if (!entries[0].isIntersecting) {
-                    setFeedOverflows(true);
-                    feedOverflowsRef.current = true;
-                }
-                else if (entries[0].isIntersecting && feedOverflowsRef.current) {
-                    onLoadMore?.();
-                }
-            });
-            intersectionObserver.observe(loadMoreEl);
-            return () => {
-                intersectionObserver.disconnect();
-            };
-        }
-    }, [loadMoreEl, feedOverflowsRef.current]);
+    const id = useUID();
+    useItemIntersection({ current: null }, posts.length - 1, () => {
+        onLoadMore?.();
+    }, `#${id} > div[role='region']`);
     const announce = useCallback((announcement) => {
         setAnnouncementText('');
         setTimeout(() => {
             setAnnouncementText(announcement);
         }, 0);
     }, []);
+    useEffect(() => {
+        if (loadingPosts)
+            announce(t('loading_post'));
+    }, [loadingPosts]);
     useEffect(() => {
         if (prevPosts) {
-            const difference = prevPosts?.length - posts.length;
-            if (difference > 0) {
+            const difference = posts.length - prevPosts?.length;
+            if (difference < 0)
                 announce(t('feed_post_removed'));
-            }
+            else if (difference > 0)
+                announce(t('feed_new_post_added', [difference], { count: difference }));
         }
     }, [posts]);
     return (_jsx(FeedContext.Provider, { value: {
@@ -137,7 +114,7 @@ const Feed = (props) => {
                                     ? 'filter-on'
                                     : 'filter' }, void 0) }, void 0))] }, void 0)), _jsx(Popover, { show: !!filters && mountPopover, ref: setPopoverEl, target: buttonEl, as: StyledFilterMenu, children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: 'fieldset', children: [_jsx(Text, { variant: 'h3', as: 'legend', children: t('filters') }, void 0), _jsx(Grid, { container: { gap: 1 }, as: StyledFilterList, ref: filterRef, children: filters?.map(filter => {
                                     return (_jsx("li", { children: _jsx(Switch, { ...filter, onChange: (event) => onFilterChange?.(event.target.id, event.target.checked) }, void 0) }, filter.id));
-                                }) }, void 0)] }, void 0) }, void 0), _jsxs("div", { children: [newPostRegion, posts] }, void 0), onLoadMore && (_jsx(Flex, { ref: setLoadMoreEl, as: StyledLoadMore, visible: feedOverflows, container: { justify: 'center' }, children: _jsx(Progress, { placement: 'inline' }, void 0) }, void 0))] }, void 0) }, void 0));
+                                }) }, void 0)] }, void 0) }, void 0), _jsxs("div", { id: id, children: [newPostRegion, posts] }, void 0), loadingPosts && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }, void 0) }, void 0))] }, void 0) }, void 0));
 };
 export default Feed;
 //# sourceMappingURL=Feed.js.map