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

package/lib/components/Email/EmailSelector.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState, useEffect } from 'react';
 import { ComboBox, createStringMatcher, menuHelpers, useI18n } from '@pega/cosmos-react-core';
-const EmailSelector = ({ participants, defaultSelections, label, mode, required, selections, externalValidator }) => {
+const EmailSelector = ({ participants, selectedItems, label, mode, required, onSelectedItemChange, externalValidator }) => {
     const [filterValue, setFilterValue] = useState('');
-    const [selectedItems, setSelectedItems] = useState([]);
     const [emailParticipants, setEmailParticipants] = useState(participants);
     const t = useI18n();
     const filterRegex = createStringMatcher(filterValue, 'contains');
@@ -35,25 +34,17 @@ const EmailSelector = ({ participants, defaultSelections, label, mode, required,
             : filteredItems;
     }, [emailParticipants, selectedItems, filterRegex]);
     const toggleSelectedItems = (id) => {
-        setSelectedItems(prev => {
-            if (prev.includes(id)) {
-                return prev.filter(value => value !== id);
-            }
+        let newSelectedItems = [...selectedItems];
+        if (selectedItems.includes(id)) {
+            // Unselect an already selected item
+            newSelectedItems = newSelectedItems.filter(value => value !== id);
+        }
+        else {
             setFilterValue('');
             const filteredItem = menuHelpers.getItem(emailsToRender, id);
-            if (!filteredItem?.secondary && !externalValidator) {
-                setEmailParticipants([
-                    ...emailParticipants,
-                    {
-                        shortName: '',
-                        fullName: '',
-                        emailAddress: filterValue
-                    }
-                ]);
-            }
-            if (!filteredItem?.secondary && externalValidator) {
-                const isValid = externalValidator?.(filterValue);
-                if (isValid) {
+            if (!filteredItem?.secondary) {
+                // New value addition to the list
+                if (!externalValidator) {
                     setEmailParticipants([
                         ...emailParticipants,
                         {
@@ -62,19 +53,36 @@ const EmailSelector = ({ participants, defaultSelections, label, mode, required,
                             emailAddress: filterValue
                         }
                     ]);
-                    return [...prev, id];
+                    newSelectedItems = [...newSelectedItems, id];
+                }
+                else {
+                    const isValid = externalValidator?.(filterValue);
+                    if (isValid) {
+                        setEmailParticipants([
+                            ...emailParticipants,
+                            {
+                                shortName: '',
+                                fullName: '',
+                                emailAddress: filterValue
+                            }
+                        ]);
+                        newSelectedItems = [...newSelectedItems, id];
+                    }
                 }
-                return [...prev];
             }
-            return [...prev, id];
-        });
+            else {
+                // Existing value to be selected
+                newSelectedItems = [...newSelectedItems, id];
+            }
+        }
+        onSelectedItemChange(newSelectedItems, label);
     };
     useEffect(() => {
-        if (defaultSelections && defaultSelections.length > 0)
-            setSelectedItems(defaultSelections);
-    }, [defaultSelections]);
+        if (selectedItems && selectedItems.length > 0)
+            onSelectedItemChange(selectedItems, label);
+    }, [selectedItems]);
     useEffect(() => {
-        selections(selectedItems, label);
+        onSelectedItemChange(selectedItems, label);
     }, [selectedItems]);
     const comboBoxProps = {
         value: filterValue,
@@ -97,7 +105,7 @@ const EmailSelector = ({ participants, defaultSelections, label, mode, required,
         mode,
         required
     };
-    return _jsx(ComboBox, { ...comboBoxProps }, void 0);
+    return _jsx(ComboBox, { ...comboBoxProps });
 };
 export default EmailSelector;
 //# sourceMappingURL=EmailSelector.js.map

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

@@ -1 +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  menuHelpers,\n  NoChildrenProp,\n  useI18n\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   * Callback to handle external entry validation\n   * If returned true considers the entry to be a valid entry\n   */\n  externalValidator?: EmailComposerProps['externalValidator'];\n}\n\nconst EmailSelector: FunctionComponent<\n  EmailSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required'>\n> = ({ participants, defaultSelections, label, mode, required, selections, externalValidator }) => {\n  const [filterValue, setFilterValue] = useState('');\n  const [selectedItems, setSelectedItems] = useState<EmailUser['emailAddress'][]>([]);\n  const [emailParticipants, setEmailParticipants] = useState(participants);\n  const t = useI18n();\n\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n\n  const emailsToRender = useMemo(() => {\n    const filteredItems = (\n      filterValue\n        ? emailParticipants.filter(({ emailAddress, fullName, shortName }) => {\n            return (\n              filterRegex.test(emailAddress) ||\n              filterRegex.test(fullName) ||\n              filterRegex.test(shortName)\n            );\n          })\n        : emailParticipants\n    ).map(({ emailAddress, fullName }) => {\n      return {\n        id: emailAddress,\n        primary: fullName,\n        secondary: [emailAddress],\n        selected: selectedItems.includes(emailAddress)\n      };\n    });\n\n    const isValid = externalValidator?.(filterValue);\n\n    return (filterValue && externalValidator && isValid) || (filterValue && !externalValidator)\n      ? [\n          {\n            id: filterValue,\n            primary: `${t('use')}: ${filterValue}`,\n            selected: selectedItems.includes(filterValue)\n          },\n          ...filteredItems\n        ]\n      : filteredItems;\n  }, [emailParticipants, selectedItems, filterRegex]);\n\n  const toggleSelectedItems = (id: string) => {\n    setSelectedItems(prev => {\n      if (prev.includes(id)) {\n        return prev.filter(value => value !== id);\n      }\n      setFilterValue('');\n      const filteredItem = menuHelpers.getItem(emailsToRender, id);\n      if (!filteredItem?.secondary && !externalValidator) {\n        setEmailParticipants([\n          ...emailParticipants,\n          {\n            shortName: '',\n            fullName: '',\n            emailAddress: filterValue\n          }\n        ]);\n      }\n      if (!filteredItem?.secondary && externalValidator) {\n        const isValid = externalValidator?.(filterValue);\n        if (isValid) {\n          setEmailParticipants([\n            ...emailParticipants,\n            {\n              shortName: '',\n              fullName: '',\n              emailAddress: filterValue\n            }\n          ]);\n          return [...prev, id];\n        }\n        return [...prev];\n      }\n      return [...prev, id];\n    });\n  };\n\n  useEffect(() => {\n    if (defaultSelections && defaultSelections.length > 0) 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: emailsToRender,\n      accent: filterRegex,\n      onItemClick: toggleSelectedItems\n    },\n    selected: {\n      items: selectedItems.map(value => ({ id: value, text: value })),\n      onRemove: toggleSelectedItems\n    },\n    label,\n    mode,\n    required\n  };\n\n  return <ComboBox {...comboBoxProps} />;\n};\n\nexport default EmailSelector;\n"]}
+{"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  menuHelpers,\n  NoChildrenProp,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport { EmailComposerProps, EmailUser } from './Email.types';\n\nexport interface EmailSelectorProps extends NoChildrenProp {\n  /** participants */\n  participants: EmailComposerProps['participants'];\n  /** default selections */\n  selectedItems: EmailUser['emailAddress'][];\n  /** selectedItems */\n  onSelectedItemChange: (selectedItems: EmailUser['emailAddress'][], label: ReactNode) => void;\n  /**\n   * Callback to handle external entry validation\n   * If returned true considers the entry to be a valid entry\n   */\n  externalValidator?: EmailComposerProps['externalValidator'];\n}\n\nconst EmailSelector: FunctionComponent<\n  EmailSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required'>\n> = ({\n  participants,\n  selectedItems,\n  label,\n  mode,\n  required,\n  onSelectedItemChange,\n  externalValidator\n}) => {\n  const [filterValue, setFilterValue] = useState('');\n  const [emailParticipants, setEmailParticipants] = useState(participants);\n  const t = useI18n();\n\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n\n  const emailsToRender = useMemo(() => {\n    const filteredItems = (\n      filterValue\n        ? emailParticipants.filter(({ emailAddress, fullName, shortName }) => {\n            return (\n              filterRegex.test(emailAddress) ||\n              filterRegex.test(fullName) ||\n              filterRegex.test(shortName)\n            );\n          })\n        : emailParticipants\n    ).map(({ emailAddress, fullName }) => {\n      return {\n        id: emailAddress,\n        primary: fullName,\n        secondary: [emailAddress],\n        selected: selectedItems.includes(emailAddress)\n      };\n    });\n\n    const isValid = externalValidator?.(filterValue);\n\n    return (filterValue && externalValidator && isValid) || (filterValue && !externalValidator)\n      ? [\n          {\n            id: filterValue,\n            primary: `${t('use')}: ${filterValue}`,\n            selected: selectedItems.includes(filterValue)\n          },\n          ...filteredItems\n        ]\n      : filteredItems;\n  }, [emailParticipants, selectedItems, filterRegex]);\n\n  const toggleSelectedItems = (id: string) => {\n    let newSelectedItems = [...selectedItems];\n\n    if (selectedItems.includes(id)) {\n      // Unselect an already selected item\n      newSelectedItems = newSelectedItems.filter(value => value !== id);\n    } else {\n      setFilterValue('');\n      const filteredItem = menuHelpers.getItem(emailsToRender, id);\n\n      if (!filteredItem?.secondary) {\n        // New value addition to the list\n        if (!externalValidator) {\n          setEmailParticipants([\n            ...emailParticipants,\n            {\n              shortName: '',\n              fullName: '',\n              emailAddress: filterValue\n            }\n          ]);\n          newSelectedItems = [...newSelectedItems, id];\n        } else {\n          const isValid = externalValidator?.(filterValue);\n          if (isValid) {\n            setEmailParticipants([\n              ...emailParticipants,\n              {\n                shortName: '',\n                fullName: '',\n                emailAddress: filterValue\n              }\n            ]);\n            newSelectedItems = [...newSelectedItems, id];\n          }\n        }\n      } else {\n        // Existing value to be selected\n        newSelectedItems = [...newSelectedItems, id];\n      }\n    }\n\n    onSelectedItemChange(newSelectedItems, label);\n  };\n\n  useEffect(() => {\n    if (selectedItems && selectedItems.length > 0) onSelectedItemChange(selectedItems, label);\n  }, [selectedItems]);\n\n  useEffect(() => {\n    onSelectedItemChange(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: emailsToRender,\n      accent: filterRegex,\n      onItemClick: toggleSelectedItems\n    },\n    selected: {\n      items: selectedItems.map(value => ({ id: value, text: value })),\n      onRemove: toggleSelectedItems\n    },\n    label,\n    mode,\n    required\n  };\n\n  return <ComboBox {...comboBoxProps} />;\n};\n\nexport default EmailSelector;\n"]}

package/lib/components/Email/EmailShell.js

@@ -35,15 +35,15 @@ const EmailShell = forwardRef((props, ref) => {
                     setActiveIndex(index);
                     if (onExpand)
                         onExpand();
-                }, isCollapsed: collapsed, ...rest }, void 0));
+                }, isCollapsed: collapsed, ...rest }));
         })
         : conversations?.map(conversation => {
-            return _jsx(EmailConversation, { ...conversation }, void 0);
+            return _jsx(EmailConversation, { ...conversation });
         });
     const singleConversation = conversations?.map(conversation => {
         return (_jsxs(StyledEmailConversation, { children: [!!conversation.unReadEmailCount && (_jsx(Text, { as: StyledUnReadCount, variant: 'secondary', children: t('new_emails_count', [conversation.unReadEmailCount], {
                         count: conversation.unReadEmailCount
-                    }) }, void 0)), conversation.emails?.map(email => {
+                    }) })), conversation.emails?.map(email => {
                     return _jsx(StyledEmailInConversation, { ...email }, email.id);
                 })] }, conversation.id));
     });
@@ -51,7 +51,7 @@ const EmailShell = forwardRef((props, ref) => {
                     alignItems: 'center',
                     justify: 'between',
                     pad: 1
-                }, as: StyledEmailHeader, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'mail' }, void 0), _jsx(Text, { variant: 'h3', children: headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email') }, void 0)] }, void 0), headerProps?.actions] }, void 0)), _jsx(StyledEmailConversationList, { "aria-multiselectable": !autoCollapse, children: conversations && conversations?.length === 1 ? singleConversation : multiConversation }, void 0)] }, void 0));
+                }, as: StyledEmailHeader, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'mail' }), _jsx(Text, { variant: 'h3', children: headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email') })] }), headerProps?.actions] })), _jsx(StyledEmailConversationList, { "aria-multiselectable": !autoCollapse, children: conversations && conversations?.length === 1 ? singleConversation : multiConversation })] }));
 });
 export default EmailShell;
 //# sourceMappingURL=EmailShell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmailShell.js","sourceRoot":"","sources":["../../../src/components/Email/EmailShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Text,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail.icon';\n\nimport { EmailShellProps } from './Email.types';\nimport EmailConversation, {\n  StyledEmailConversation,\n  StyledEmailInConversation,\n  StyledUnReadCount\n} from './EmailConversation';\n\nregisterIcon(mailIcon);\n\nexport const StyledEmailHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps>(props => {\n  const { theme } = props;\n  return css`\n    min-width: 30rem;\n    height: 100%;\n    > ${StyledEmailHeader} {\n      padding: ${theme.base.spacing} 0;\n    }\n    > ${StyledEmailConversationList} {\n      height: 100%;\n      overflow-y: auto;\n      list-style-type: none;\n    }\n  `;\n});\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nconst EmailShell: FunctionComponent<EmailShellProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailShellProps>, ref: EmailShellProps['ref']) => {\n    const { conversations, headerProps, autoCollapse = false, ...restProps } = props;\n\n    const t = useI18n();\n\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    const multiConversation = autoCollapse\n      ? conversations?.map((conversation, index) => {\n          const { onExpand, isCollapsed, ...rest } = conversation;\n          const collapsed = index !== activeIndex;\n          return (\n            <EmailConversation\n              onExpand={() => {\n                setActiveIndex(index);\n                if (onExpand) onExpand();\n              }}\n              isCollapsed={collapsed}\n              {...rest}\n            />\n          );\n        })\n      : conversations?.map(conversation => {\n          return <EmailConversation {...conversation} />;\n        });\n\n    const singleConversation = conversations?.map(conversation => {\n      return (\n        <StyledEmailConversation key={conversation.id}>\n          {!!conversation.unReadEmailCount && (\n            <Text as={StyledUnReadCount} variant='secondary'>\n              {t('new_emails_count', [conversation.unReadEmailCount], {\n                count: conversation.unReadEmailCount\n              })}\n            </Text>\n          )}\n          {conversation.emails?.map(email => {\n            return <StyledEmailInConversation key={email.id} {...email} />;\n          })}\n        </StyledEmailConversation>\n      );\n    });\n\n    return (\n      <Flex as={StyledEmailShell} container={{ direction: 'column' }} ref={ref} {...restProps}>\n        {headerProps && (\n          <Flex\n            container={{\n              alignItems: 'center',\n              justify: 'between',\n              pad: 1\n            }}\n            as={StyledEmailHeader}\n          >\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='mail' />\n              <Text variant='h3'>\n                {headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email')}\n              </Text>\n            </Flex>\n            {headerProps?.actions}\n          </Flex>\n        )}\n        <StyledEmailConversationList aria-multiselectable={!autoCollapse}>\n          {conversations && conversations?.length === 1 ? singleConversation : multiConversation}\n        </StyledEmailConversationList>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailShell;\n"]}
+{"version":3,"file":"EmailShell.js","sourceRoot":"","sources":["../../../src/components/Email/EmailShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Text,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail.icon';\n\nimport { EmailShellProps } from './Email.types';\nimport EmailConversation, {\n  StyledEmailConversation,\n  StyledEmailInConversation,\n  StyledUnReadCount\n} from './EmailConversation';\n\nregisterIcon(mailIcon);\n\nexport const StyledEmailHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps>(props => {\n  const { theme } = props;\n  return css`\n    min-width: 30rem;\n    height: 100%;\n    > ${StyledEmailHeader} {\n      padding: ${theme.base.spacing} 0;\n    }\n    > ${StyledEmailConversationList} {\n      height: 100%;\n      overflow-y: auto;\n      list-style-type: none;\n    }\n  `;\n});\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nconst EmailShell: FunctionComponent<EmailShellProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailShellProps>, ref: EmailShellProps['ref']) => {\n    const { conversations, headerProps, autoCollapse = false, ...restProps } = props;\n\n    const t = useI18n();\n\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    const multiConversation = autoCollapse\n      ? conversations?.map((conversation, index) => {\n          const { onExpand, isCollapsed, ...rest } = conversation;\n          const collapsed = index !== activeIndex;\n          return (\n            <EmailConversation\n              onExpand={() => {\n                setActiveIndex(index);\n                if (onExpand) onExpand();\n              }}\n              isCollapsed={collapsed}\n              {...rest}\n            />\n          );\n        })\n      : conversations?.map(conversation => {\n          return <EmailConversation {...conversation} />;\n        });\n\n    const singleConversation = conversations?.map(conversation => {\n      return (\n        <StyledEmailConversation key={conversation.id}>\n          {!!conversation.unReadEmailCount && (\n            <Text as={StyledUnReadCount} variant='secondary'>\n              {t('new_emails_count', [conversation.unReadEmailCount], {\n                count: conversation.unReadEmailCount\n              })}\n            </Text>\n          )}\n          {conversation.emails?.map(email => {\n            return <StyledEmailInConversation key={email.id} {...email} />;\n          })}\n        </StyledEmailConversation>\n      );\n    });\n\n    return (\n      <Flex as={StyledEmailShell} container={{ direction: 'column' }} ref={ref} {...restProps}>\n        {headerProps && (\n          <Flex\n            container={{\n              alignItems: 'center',\n              justify: 'between',\n              pad: 1\n            }}\n            as={StyledEmailHeader}\n          >\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='mail' />\n              <Text variant='h3'>\n                {headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email')}\n              </Text>\n            </Flex>\n            {headerProps?.actions}\n          </Flex>\n        )}\n        <StyledEmailConversationList aria-multiselectable={!autoCollapse}>\n          {conversations && conversations?.length === 1 ? singleConversation : multiConversation}\n        </StyledEmailConversationList>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailShell;\n"]}

package/lib/components/Email/EmailSummaryItem.js

@@ -76,10 +76,10 @@ const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, messag
             itemList.push(_jsx(Status, { variant: 'info', children: topic }, 'info'));
         }
         if (sentiment) {
-            itemList.push(_jsx(Sentiment, { variant: sentiment.variant, labelHidden: true }, void 0));
+            itemList.push(_jsx(Sentiment, { variant: sentiment.variant, labelHidden: true }));
         }
         if (typeof urgency === 'number') {
-            itemList.push(_jsx(Text, { variant: 'secondary', children: `${t('priority')} ${urgency}` }, void 0));
+            itemList.push(_jsx(Text, { variant: 'secondary', children: `${t('priority')} ${urgency}` }));
         }
         return itemList;
     }, [sentiment, topic, urgency]);
@@ -93,9 +93,9 @@ 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: 'h4', 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 }), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { variant: 'default', children: unreadEmailCount }))] }), _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));
+                }, as: StyledMessageAndDate, children: [_jsx(StyledMessage, { unreadEmailCount: unreadEmailCount, children: message }), _jsx(DateTimeDisplay, { value: timeStamp, variant: 'date', format: 'short' })] }), _jsx(MetaList, { items: items })] }));
 });
 export default EmailSummaryItem;
 //# sourceMappingURL=EmailSummaryItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmailSummaryItem.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EACL,gBAAgB,EAEhB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,EACf,MAAM,EACN,QAAQ,EACR,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAI1F,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwB,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;;;yBAGa,KAAK,CAAC,IAAI,CAAC,OAAO;MACrC,gBAAgB,KAAK,SAAS;QAChC,gBAAgB,GAAG,CAAC;QACpB,GAAG,CAAA;eACQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;KACxC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwB,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,SAAS;QAChC,gBAAgB,GAAG,CAAC;QACpB,GAAG,CAAA;;;;;oCAK6B,KAAK,CAAC,IAAI,CAAC,OAAO;wCACd,KAAK,CAAC,IAAI,CAAC,OAAO;;;;4BAI9B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;KAErD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAA8B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACpF,CAAC;IACF,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;wBAC3B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;wCACxB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;eAC1D,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;MAC1D,cAAc,KAAK,oBAAoB;4BACjB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;0BAQpB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;;;;0BAK1C,UAAU;;GAEjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACvD,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACnD,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,EAAE,EACF,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,GAAG,KAAK,EACd,OAAO,EACP,gBAAgB,EAChB,GAAG,SAAS,EACb,EACD,GAAiC,EACjC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAgB,EAAE,CAAC;QAEjC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACjD,QAAQ,CAAC,IAAI,CACX,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,YACnB,KAAK,IADmB,MAAM,CAExB,CACV,CAAC;SACH;QAED,IAAI,SAAS,EAAE;YACb,QAAQ,CAAC,IAAI,CAAC,KAAC,SAAS,IAAC,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,WAAW,iBAAG,CAAC,CAAC;SACtE;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,QAAQ,CAAC,IAAI,CAAC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,OAAO,EAAE,WAAQ,CAAC,CAAC;SACjF;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,YAAY,GAAG,EAAE,CAAC;QACtB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACjC,YAAY;gBACV,kBAAkB,CAAC,MAAM,KAAK,CAAC;oBAC7B,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,QAAQ;oBAChC,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACpF;QACD,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,MAAC,UAAU,IACT,EAAE,EAAE,sBAAsB,EAC1B,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,mBACC,MAAM,gBACT,GAAG,iBAAiB,KAAK,OAAO,IAAI,SAAS,IAAI,KAAK,IAChE,SAAS,EAAE,OACb,IAAI,CAAC,CAAC,UAAU,CAAC,IAAI,OAAO,EAAE,EAC9B,QAAQ,EAAE,CAAC,CAAC,aAEZ,MAAC,kBAAkB,IAAC,gBAAgB,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACvF,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,iBAAiB,WAAQ,EAC5C,OAAO,gBAAgB,KAAK,QAAQ,IAAI,gBAAgB,GAAG,CAAC,IAAI,CAC/D,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,gBAAgB,WAAS,CACpD,YACkB,EACrB,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,OAAO,EAAE,SAAS;iBACnB,EACD,EAAE,EAAE,oBAAoB,aAExB,KAAC,aAAa,IAAC,gBAAgB,EAAE,gBAAgB,YAAG,OAAO,WAAiB,EAC5E,KAAC,eAAe,IAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,WAAG,YAC9D,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,WAAI,YACf,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","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"]}
+{"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.js

@@ -117,18 +117,18 @@ const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories,
                 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: {
+    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [_jsxs(StyledEmailSummaryListHeader, { children: [_jsx(Text, { variant: 'h2', children: t('inbox') }), _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), typeof unreadEmailCount === 'number' && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
+                                } }), 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), items.length > 0 ? (_jsxs(StyledEmailSummaryList, { role: 'tablist', tabIndex: 0, ref: tablistRef, onFocus: e => {
+                                }), variant: 'default', children: unreadEmailCount })), _jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }) })] })] }), 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: [_jsx(VisuallyHiddenText, { "aria-live": 'polite', children: announcement }, void 0), items.map((emailItem, i) => {
+                }, children: [_jsx(VisuallyHiddenText, { "aria-live": 'polite', children: announcement }), 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;
@@ -150,7 +150,7 @@ const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories,
                                     onItemClick(id);
                                 }
                             }, 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));
+                    }), loading && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] })) : (_jsx(EmptyState, { message: emptyMessage }))] }));
 });
 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":"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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"]}
+{"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/Email/EntityList.js

@@ -10,11 +10,11 @@ const EntityList = forwardRef(({ content, header }, ref) => {
                 ...data,
                 value: (_jsx(Flex, { container: { gap: 0.5, wrap: 'wrap' }, children: data.value.map(entityObject => {
                         return _jsx(EmailEntity, { entity: entityObject.entity }, entityObject.id);
-                    }) }, void 0))
+                    }) }))
             }
             : data;
     });
-    return (_jsxs(Card, { ref: ref, children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: header.icon }, void 0), _jsx(Text, { variant: 'h3', children: header.text }, void 0)] }, void 0), _jsx(CardContent, { children: _jsx(StyledEntityList, { fields: fields, variant: 'stacked' }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Card, { ref: ref, children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: header.icon }), _jsx(Text, { variant: 'h3', children: header.text })] }), _jsx(CardContent, { children: _jsx(StyledEntityList, { fields: fields, variant: 'stacked' }) })] }));
 });
 export default EntityList;
 //# sourceMappingURL=EntityList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EntityList.js","sourceRoot":"","sources":["../../../src/components/Email/EntityList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAEvE,OAAO,EAEL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,EAAE,OAAO,EAAE,MAAM,EAAoC,EAAE,GAA2B,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK;YACf,CAAC,CAAC;gBACE,GAAG,IAAI;gBACP,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,YACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;wBAC7B,OAAO,KAAC,WAAW,IAAuB,MAAM,EAAE,YAAY,CAAC,MAAM,IAA5C,YAAY,CAAC,EAAE,CAAiC,CAAC;oBAC5E,CAAC,CAAC,WACG,CACR;aACF;YACH,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,aACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACrD,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,WAAI,EAC3B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,IAAI,WAAQ,YAC5B,EACb,KAAC,WAAW,cACV,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,SAAS,WAAG,WAC1C,YACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  Flex,\n  Icon,\n  Card,\n  CardHeader,\n  CardContent\n} from '@pega/cosmos-react-core';\n\nimport { StyledEntityList } from './Email.styles';\nimport EmailEntity from './EmailEntity';\nimport { EntityListProps } from './Email.types';\n\nconst EntityList: FunctionComponent<EntityListProps & ForwardProps> = forwardRef(\n  ({ content, header }: PropsWithoutRef<EntityListProps>, ref: EntityListProps['ref']) => {\n    const fields = content.map(data => {\n      return data.value\n        ? {\n            ...data,\n            value: (\n              <Flex container={{ gap: 0.5, wrap: 'wrap' }}>\n                {data.value.map(entityObject => {\n                  return <EmailEntity key={entityObject.id} entity={entityObject.entity} />;\n                })}\n              </Flex>\n            )\n          }\n        : data;\n    });\n\n    return (\n      <Card ref={ref}>\n        <CardHeader container={{ alignItems: 'center', gap: 1 }}>\n          <Icon name={header.icon} />\n          <Text variant='h3'>{header.text}</Text>\n        </CardHeader>\n        <CardContent>\n          <StyledEntityList fields={fields} variant='stacked' />\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default EntityList;\n"]}
+{"version":3,"file":"EntityList.js","sourceRoot":"","sources":["../../../src/components/Email/EntityList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAEvE,OAAO,EAEL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,EAAE,OAAO,EAAE,MAAM,EAAoC,EAAE,GAA2B,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK;YACf,CAAC,CAAC;gBACE,GAAG,IAAI;gBACP,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,YACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;wBAC7B,OAAO,KAAC,WAAW,IAAuB,MAAM,EAAE,YAAY,CAAC,MAAM,IAA5C,YAAY,CAAC,EAAE,CAAiC,CAAC;oBAC5E,CAAC,CAAC,GACG,CACR;aACF;YACH,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,aACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACrD,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,EAC3B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,IAAI,GAAQ,IAC5B,EACb,KAAC,WAAW,cACV,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,SAAS,GAAG,GAC1C,IACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  Flex,\n  Icon,\n  Card,\n  CardHeader,\n  CardContent\n} from '@pega/cosmos-react-core';\n\nimport { StyledEntityList } from './Email.styles';\nimport EmailEntity from './EmailEntity';\nimport { EntityListProps } from './Email.types';\n\nconst EntityList: FunctionComponent<EntityListProps & ForwardProps> = forwardRef(\n  ({ content, header }: PropsWithoutRef<EntityListProps>, ref: EntityListProps['ref']) => {\n    const fields = content.map(data => {\n      return data.value\n        ? {\n            ...data,\n            value: (\n              <Flex container={{ gap: 0.5, wrap: 'wrap' }}>\n                {data.value.map(entityObject => {\n                  return <EmailEntity key={entityObject.id} entity={entityObject.entity} />;\n                })}\n              </Flex>\n            )\n          }\n        : data;\n    });\n\n    return (\n      <Card ref={ref}>\n        <CardHeader container={{ alignItems: 'center', gap: 1 }}>\n          <Icon name={header.icon} />\n          <Text variant='h3'>{header.text}</Text>\n        </CardHeader>\n        <CardContent>\n          <StyledEntityList fields={fields} variant='stacked' />\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default EntityList;\n"]}

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

@@ -1,5 +1,5 @@
 export { default } from './Email';
-export { EmailUser, EmailProps, EmailComposerProps, EmailConversationProps, EmailShellProps, EntityListProps } from './Email.types';
+export { EmailUser, EmailProps, EmailComposerProps, EmailConversationProps, EmailShellProps, EntityListProps, EmailTemplate } from './Email.types';
 export { default as EmailConversation } from './EmailConversation';
 export { default as EmailShell } from './EmailShell';
 export { default as EmailComposer } from './EmailComposer';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EACL,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,eAAe,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EACL,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,aAAa,EACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AASlC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './Email';\nexport {\n  EmailUser,\n  EmailProps,\n  EmailComposerProps,\n  EmailConversationProps,\n  EmailShellProps,\n  EntityListProps\n} from './Email.types';\nexport { default as EmailConversation } from './EmailConversation';\nexport { default as EmailShell } from './EmailShell';\nexport { default as EmailComposer } from './EmailComposer';\nexport { default as EmailSummaryItem } from './EmailSummaryItem';\nexport { default as EmailSummaryList } from './EmailSummaryList';\nexport { default as EntityList } from './EntityList';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAUlC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './Email';\nexport {\n  EmailUser,\n  EmailProps,\n  EmailComposerProps,\n  EmailConversationProps,\n  EmailShellProps,\n  EntityListProps,\n  EmailTemplate\n} from './Email.types';\nexport { default as EmailConversation } from './EmailConversation';\nexport { default as EmailShell } from './EmailShell';\nexport { default as EmailComposer } from './EmailComposer';\nexport { default as EmailSummaryItem } from './EmailSummaryItem';\nexport { default as EmailSummaryList } from './EmailSummaryList';\nexport { default as EntityList } from './EntityList';\n"]}

package/lib/components/Feed/Feed.js

@@ -110,11 +110,11 @@ const Feed = (props) => {
             markdownMap,
             userInfo,
             announce
-        }, children: _jsxs(StyledFeed, { ...restProps, children: [_jsx(FeedAnnouncer, { children: announcementText }, void 0), (title || (filters && !!filters.length)) && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, as: StyledHeading, children: [title ? _jsx(Text, { variant: 'h2', children: title }, void 0) : _jsx("div", {}, void 0), filters && (_jsx(Button, { as: FeedButton, ref: setButtonEl, variant: 'simple', icon: true, onClick: () => setMountPopover(curr => !curr), label: `${title || ''} ${t('filters')}`, emphasized: true, children: _jsx(Icon, { name: filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)
+        }, children: _jsxs(StyledFeed, { ...restProps, children: [_jsx(FeedAnnouncer, { children: announcementText }), (title || (filters && !!filters.length)) && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, as: StyledHeading, children: [title ? _jsx(Text, { variant: 'h2', children: title }) : _jsx("div", {}), filters && (_jsx(Button, { as: FeedButton, ref: setButtonEl, variant: 'simple', icon: true, onClick: () => setMountPopover(curr => !curr), label: `${title || ''} ${t('filters')}`, emphasized: true, children: _jsx(Icon, { name: filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)
                                     ? '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", { 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));
+                                    : 'filter' }) }))] })), _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') }), _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) }) }, filter.id));
+                                }) })] }) }), _jsxs("div", { id: id, children: [newPostRegion, posts] }), loadingPosts && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] }) }));
 };
 export default Feed;
 //# sourceMappingURL=Feed.js.map

package/lib/components/Feed/Feed.js.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, ReactNode, FC, useState, useRef, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Popover,\n  Switch,\n  Text,\n  Progress,\n  usePrevious,\n  NoChildrenProp,\n  useItemIntersection,\n  useUID\n} from '@pega/cosmos-react-core';\nimport { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport { FeedContext, FeedContextValue } from './Feed.context';\nimport { StyledFeedNewPost } from './FeedNewPost';\nimport { StyledFeedPost } from './FeedPost';\nimport FeedButton from './FeedButton';\nimport FeedAnnouncer from './FeedAnnouncer';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nexport interface Filter {\n  /** Sets DOM id for the control and associates label element via 'for' attribute. */\n  id: string;\n  /** Pass a string or a fragment with an Icon and string for the filter label. */\n  label: ReactNode;\n  /**\n   * Disables the filter.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Sets on prop via onFilterChange.\n   * @default false\n   */\n  on?: boolean;\n}\n\nexport interface FeedProps extends NoChildrenProp {\n  /** Title for the feed. */\n  title?: string;\n  /** Information related to the user of the Feed. */\n  userInfo: FeedContextValue['userInfo'];\n  /** A set of search types that can be used to determine which data set to conduct a mention search on. */\n  searchTypes?: FeedContextValue['searchTypes'];\n  /** A callback that runs when a decorator search has been run inside of the feed. */\n  onDecoratorSearch?: FeedContextValue['onSearch'];\n  /** Results that will be shown in a Popover for a mention or tag search. */\n  searchResults?: FeedContextValue['searchResults'];\n  /** A callback that is triggered when a mention is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component. */\n  onMentionClick?: FeedContextValue['onMentionClick'];\n  /** A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. */\n  onTagClick?: FeedContextValue['onTagClick'];\n  /** A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern. */\n  interactionRenderers?: FeedContextValue['interactionRenderers'];\n  /** A mapping for various element types to render custom components for within posts. */\n  markdownMap?: FeedContextValue['markdownMap'];\n  /** A set of filters to apply to the Feed. */\n  filters?: Filter[];\n  /** A callback that runs when the filter is toggled. */\n  onFilterChange?: (filterId: string, on: boolean) => void;\n  /** A callback that is triggered when the bottom of the Feed is scrolled into view so that additional posts may be displayed. */\n  onLoadMore?: () => void;\n  /** Indicates if the posts are being currently loading */\n  loadingPosts?: boolean;\n  /** A region to hold the new post component */\n  newPostRegion?: ReactNode;\n  /** A list of FeedPost components */\n  posts?: ReactNode[];\n}\n\nconst StyledFeed = styled.div(props => {\n  return css`\n    ${StyledFeedNewPost}:not(:last-child), ${StyledFeedPost}:not(:last-child) {\n      margin-bottom: calc(2 * ${props.theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeed.defaultProps = defaultThemeProp;\n\nconst StyledHeading = styled.div(props => {\n  return css`\n    margin: ${props.theme.base.spacing} 0;\n  `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nconst StyledFilterMenu = styled.div(props => {\n  return css`\n    padding: calc(2 * ${props.theme.base.spacing});\n\n    fieldset {\n      border: none;\n    }\n  `;\n});\n\nStyledFilterMenu.defaultProps = defaultThemeProp;\n\nconst StyledFilterList = styled.ul`\n  list-style-type: none;\n  min-width: 10rem;\n`;\n\nStyledFilterList.defaultProps = defaultThemeProp;\n\nconst StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin-top: ${theme.base.spacing};\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst Feed: FC<ForwardProps & FeedProps> = (props: ForwardProps & FeedProps) => {\n  const {\n    loadingPosts = false,\n    variant,\n    children,\n    userInfo,\n    className,\n    title,\n    searchTypes,\n    onDecoratorSearch,\n    searchResults = [],\n    onMentionClick,\n    onTagClick,\n    mentionContent,\n    interactionRenderers = [],\n    markdownMap,\n    filters,\n    onFilterChange,\n    onLoadMore,\n    newPostRegion,\n    posts = [],\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const [mountPopover, setMountPopover] = useState(false);\n  const [showSearchResults, setShowSearchResults] = useState(false);\n  const prevPosts = usePrevious(posts);\n  const [announcementText, setAnnouncementText] = useState('');\n\n  const filterRef = useRef(null);\n  useArrows(filterRef);\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    setMountPopover(false);\n  });\n\n  const onKeydown = ({ key }: KeyboardEvent) => {\n    if (key === 'Escape') setMountPopover(false);\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const id = useUID();\n  useItemIntersection(\n    { current: null },\n    posts.length - 1,\n    () => {\n      onLoadMore?.();\n    },\n    `#${id} > div[role='region']`\n  );\n\n  const announce = useCallback((announcement: string) => {\n    setAnnouncementText('');\n    setTimeout(() => {\n      setAnnouncementText(announcement);\n    }, 0);\n  }, []);\n\n  useEffect(() => {\n    if (loadingPosts) announce(t('loading_post'));\n  }, [loadingPosts]);\n\n  useEffect(() => {\n    if (prevPosts) {\n      const difference = posts.length - prevPosts?.length;\n      if (difference < 0) announce(t('feed_post_removed'));\n      else if (difference > 0)\n        announce(t('feed_new_post_added', [difference], { count: difference }));\n    }\n  }, [posts]);\n\n  return (\n    <FeedContext.Provider\n      value={{\n        searchTypes,\n        onSearch: e => {\n          if (onDecoratorSearch) onDecoratorSearch(e);\n        },\n        searchResults,\n        showSearchResults,\n        setShowSearchResults,\n        onMentionClick,\n        onTagClick,\n        interactionRenderers,\n        markdownMap,\n        userInfo,\n        announce\n      }}\n    >\n      <StyledFeed {...restProps}>\n        <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n        {(title || (filters && !!filters.length)) && (\n          <Flex container={{ justify: 'between', alignItems: 'center' }} as={StyledHeading}>\n            {title ? <Text variant='h2'>{title}</Text> : <div />}\n            {filters && (\n              <Button\n                as={FeedButton}\n                ref={setButtonEl}\n                variant='simple'\n                icon\n                onClick={() => setMountPopover(curr => !curr)}\n                label={`${title || ''} ${t('filters')}`}\n                emphasized\n              >\n                <Icon\n                  name={\n                    filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)\n                      ? 'filter-on'\n                      : 'filter'\n                  }\n                />\n              </Button>\n            )}\n          </Flex>\n        )}\n        <Popover\n          show={!!filters && mountPopover}\n          ref={setPopoverEl}\n          target={buttonEl}\n          as={StyledFilterMenu}\n        >\n          <Flex container={{ direction: 'column', gap: 2 }} as='fieldset'>\n            <Text variant='h3' as='legend'>\n              {t('filters')}\n            </Text>\n            <Grid container={{ gap: 1 }} as={StyledFilterList} ref={filterRef}>\n              {filters?.map(filter => {\n                return (\n                  <li key={filter.id}>\n                    <Switch\n                      {...filter}\n                      onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                        onFilterChange?.(event.target.id, event.target.checked)\n                      }\n                    />\n                  </li>\n                );\n              })}\n            </Grid>\n          </Flex>\n        </Popover>\n\n        <div id={id}>\n          {newPostRegion}\n          {posts}\n        </div>\n\n        {loadingPosts && (\n          <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n            <Progress placement='inline' />\n          </Flex>\n        )}\n      </StyledFeed>\n    </FeedContext.Provider>\n  );\n};\n\nexport default Feed;\n"]}
+{"version":3,"file":"Feed.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, ReactNode, FC, useState, useRef, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Popover,\n  Switch,\n  Text,\n  Progress,\n  usePrevious,\n  NoChildrenProp,\n  useItemIntersection,\n  useUID\n} from '@pega/cosmos-react-core';\nimport { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport { FeedContext, FeedContextValue } from './Feed.context';\nimport { StyledFeedNewPost } from './FeedNewPost';\nimport { StyledFeedPost } from './FeedPost';\nimport FeedButton from './FeedButton';\nimport FeedAnnouncer from './FeedAnnouncer';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nexport interface Filter {\n  /** Sets DOM id for the control and associates label element via 'for' attribute. */\n  id: string;\n  /** Pass a string or a fragment with an Icon and string for the filter label. */\n  label: ReactNode;\n  /**\n   * Disables the filter.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Sets on prop via onFilterChange.\n   * @default false\n   */\n  on?: boolean;\n}\n\nexport interface FeedProps extends NoChildrenProp {\n  /** Title for the feed. */\n  title?: string;\n  /** Information related to the user of the Feed. */\n  userInfo: FeedContextValue['userInfo'];\n  /** A set of search types that can be used to determine which data set to conduct a mention search on. */\n  searchTypes?: FeedContextValue['searchTypes'];\n  /** A callback that runs when a decorator search has been run inside of the feed. */\n  onDecoratorSearch?: FeedContextValue['onSearch'];\n  /** Results that will be shown in a Popover for a mention or tag search. */\n  searchResults?: FeedContextValue['searchResults'];\n  /** A callback that is triggered when a mention is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component. */\n  onMentionClick?: FeedContextValue['onMentionClick'];\n  /** A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. */\n  onTagClick?: FeedContextValue['onTagClick'];\n  /** A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern. */\n  interactionRenderers?: FeedContextValue['interactionRenderers'];\n  /** A mapping for various element types to render custom components for within posts. */\n  markdownMap?: FeedContextValue['markdownMap'];\n  /** A set of filters to apply to the Feed. */\n  filters?: Filter[];\n  /** A callback that runs when the filter is toggled. */\n  onFilterChange?: (filterId: string, on: boolean) => void;\n  /** A callback that is triggered when the bottom of the Feed is scrolled into view so that additional posts may be displayed. */\n  onLoadMore?: () => void;\n  /** Indicates if the posts are being currently loading */\n  loadingPosts?: boolean;\n  /** A region to hold the new post component */\n  newPostRegion?: ReactNode;\n  /** A list of FeedPost components */\n  posts?: ReactNode[];\n}\n\nconst StyledFeed = styled.div(props => {\n  return css`\n    ${StyledFeedNewPost}:not(:last-child), ${StyledFeedPost}:not(:last-child) {\n      margin-bottom: calc(2 * ${props.theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeed.defaultProps = defaultThemeProp;\n\nconst StyledHeading = styled.div(props => {\n  return css`\n    margin: ${props.theme.base.spacing} 0;\n  `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nconst StyledFilterMenu = styled.div(props => {\n  return css`\n    padding: calc(2 * ${props.theme.base.spacing});\n\n    fieldset {\n      border: none;\n    }\n  `;\n});\n\nStyledFilterMenu.defaultProps = defaultThemeProp;\n\nconst StyledFilterList = styled.ul`\n  list-style-type: none;\n  min-width: 10rem;\n`;\n\nStyledFilterList.defaultProps = defaultThemeProp;\n\nconst StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin-top: ${theme.base.spacing};\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst Feed: FC<ForwardProps & FeedProps> = (props: ForwardProps & FeedProps) => {\n  const {\n    loadingPosts = false,\n    variant,\n    children,\n    userInfo,\n    className,\n    title,\n    searchTypes,\n    onDecoratorSearch,\n    searchResults = [],\n    onMentionClick,\n    onTagClick,\n    mentionContent,\n    interactionRenderers = [],\n    markdownMap,\n    filters,\n    onFilterChange,\n    onLoadMore,\n    newPostRegion,\n    posts = [],\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const [mountPopover, setMountPopover] = useState(false);\n  const [showSearchResults, setShowSearchResults] = useState(false);\n  const prevPosts = usePrevious(posts);\n  const [announcementText, setAnnouncementText] = useState('');\n\n  const filterRef = useRef(null);\n  useArrows(filterRef);\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    setMountPopover(false);\n  });\n\n  const onKeydown = ({ key }: KeyboardEvent) => {\n    if (key === 'Escape') setMountPopover(false);\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const id = useUID();\n  useItemIntersection(\n    { current: null },\n    posts.length - 1,\n    () => {\n      onLoadMore?.();\n    },\n    `#${id} > div[role='region']`\n  );\n\n  const announce = useCallback((announcement: string) => {\n    setAnnouncementText('');\n    setTimeout(() => {\n      setAnnouncementText(announcement);\n    }, 0);\n  }, []);\n\n  useEffect(() => {\n    if (loadingPosts) announce(t('loading_post'));\n  }, [loadingPosts]);\n\n  useEffect(() => {\n    if (prevPosts) {\n      const difference = posts.length - prevPosts?.length;\n      if (difference < 0) announce(t('feed_post_removed'));\n      else if (difference > 0)\n        announce(t('feed_new_post_added', [difference], { count: difference }));\n    }\n  }, [posts]);\n\n  return (\n    <FeedContext.Provider\n      value={{\n        searchTypes,\n        onSearch: e => {\n          if (onDecoratorSearch) onDecoratorSearch(e);\n        },\n        searchResults,\n        showSearchResults,\n        setShowSearchResults,\n        onMentionClick,\n        onTagClick,\n        interactionRenderers,\n        markdownMap,\n        userInfo,\n        announce\n      }}\n    >\n      <StyledFeed {...restProps}>\n        <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n        {(title || (filters && !!filters.length)) && (\n          <Flex container={{ justify: 'between', alignItems: 'center' }} as={StyledHeading}>\n            {title ? <Text variant='h2'>{title}</Text> : <div />}\n            {filters && (\n              <Button\n                as={FeedButton}\n                ref={setButtonEl}\n                variant='simple'\n                icon\n                onClick={() => setMountPopover(curr => !curr)}\n                label={`${title || ''} ${t('filters')}`}\n                emphasized\n              >\n                <Icon\n                  name={\n                    filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)\n                      ? 'filter-on'\n                      : 'filter'\n                  }\n                />\n              </Button>\n            )}\n          </Flex>\n        )}\n        <Popover\n          show={!!filters && mountPopover}\n          ref={setPopoverEl}\n          target={buttonEl}\n          as={StyledFilterMenu}\n        >\n          <Flex container={{ direction: 'column', gap: 2 }} as='fieldset'>\n            <Text variant='h3' as='legend'>\n              {t('filters')}\n            </Text>\n            <Grid container={{ gap: 1 }} as={StyledFilterList} ref={filterRef}>\n              {filters?.map(filter => {\n                return (\n                  <li key={filter.id}>\n                    <Switch\n                      {...filter}\n                      onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                        onFilterChange?.(event.target.id, event.target.checked)\n                      }\n                    />\n                  </li>\n                );\n              })}\n            </Grid>\n          </Flex>\n        </Popover>\n\n        <div id={id}>\n          {newPostRegion}\n          {posts}\n        </div>\n\n        {loadingPosts && (\n          <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n            <Progress placement='inline' />\n          </Flex>\n        )}\n      </StyledFeed>\n    </FeedContext.Provider>\n  );\n};\n\nexport default Feed;\n"]}

package/lib/components/Feed/FeedAnnouncer.js

@@ -5,7 +5,7 @@ const StyledFeedAnnouncer = styled.span `
   ${hideVisually}
 `;
 const FeedAnnouncer = ({ children }) => {
-    return _jsx(StyledFeedAnnouncer, { "aria-live": 'polite', children: children }, void 0);
+    return _jsx(StyledFeedAnnouncer, { "aria-live": 'polite', children: children });
 };
 export default FeedAnnouncer;
 //# sourceMappingURL=FeedAnnouncer.js.map

package/lib/components/Feed/FeedAnnouncer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedAnnouncer.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAnnouncer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAA;IACnC,YAAY;CACf,CAAC;AAEF,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7D,OAAO,KAAC,mBAAmB,iBAAW,QAAQ,YAAE,QAAQ,WAAuB,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { hideVisually } from 'polished';\nimport { FC } from 'react';\nimport styled from 'styled-components';\n\ninterface FeedAnnouncerProps {\n  children: string;\n}\n\nconst StyledFeedAnnouncer = styled.span`\n  ${hideVisually}\n`;\n\nconst FeedAnnouncer: FC<FeedAnnouncerProps> = ({ children }) => {\n  return <StyledFeedAnnouncer aria-live='polite'>{children}</StyledFeedAnnouncer>;\n};\n\nexport default FeedAnnouncer;\n"]}
+{"version":3,"file":"FeedAnnouncer.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAnnouncer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAA;IACnC,YAAY;CACf,CAAC;AAEF,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7D,OAAO,KAAC,mBAAmB,iBAAW,QAAQ,YAAE,QAAQ,GAAuB,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { hideVisually } from 'polished';\nimport { FC } from 'react';\nimport styled from 'styled-components';\n\ninterface FeedAnnouncerProps {\n  children: string;\n}\n\nconst StyledFeedAnnouncer = styled.span`\n  ${hideVisually}\n`;\n\nconst FeedAnnouncer: FC<FeedAnnouncerProps> = ({ children }) => {\n  return <StyledFeedAnnouncer aria-live='polite'>{children}</StyledFeedAnnouncer>;\n};\n\nexport default FeedAnnouncer;\n"]}