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

package/lib/components/Email/EmailConversation.js

@@ -159,22 +159,22 @@ const EmailConversation = forwardRef((props, ref) => {
         }
         return recipientElements;
     }, [to]);
-    return (_jsxs(StyledEmailConversation, Object.assign({}, restProps, { id: id, ref: ref }, { children: [_jsxs(Flex, Object.assign({ as: StyledConversationButton, id: `conversation-heading${id}`, "aria-controls": id, "aria-expanded": !collapsedState, container: { gap: 1, alignItems: 'center', pad: 1 }, onClick: onExpandCollapse, ref: headerRef }, { children: [_jsx(Icon, { name: collapsedState ? caretDirection : 'caret-down' }, void 0), _jsx(StyledUnreadIndicator, { isVisible: !!unReadEmailCount }, void 0), _jsxs(Flex, Object.assign({ container: {
+    return (_jsxs(StyledEmailConversation, { ...restProps, id: id, ref: ref, children: [_jsxs(Flex, { as: StyledConversationButton, id: `conversation-heading${id}`, "aria-controls": id, "aria-expanded": !collapsedState, container: { gap: 1, alignItems: 'center', pad: 1 }, onClick: onExpandCollapse, ref: headerRef, children: [_jsx(Icon, { name: collapsedState ? caretDirection : 'caret-down' }, void 0), _jsx(StyledUnreadIndicator, { isVisible: !!unReadEmailCount }, void 0), _jsxs(Flex, { container: {
                             wrap: 'nowrap',
                             alignItems: 'start',
                             direction: 'column'
                         }, item: {
                             grow: 1,
                             shrink: 1
-                        } }, { children: [_jsx(Text, Object.assign({ variant: 'primary', as: StyledEmailParticipantsText }, { children: `${isForwarded ? 'FW' : t('from')}: ${from.fullName}` }), void 0), _jsxs(Text, Object.assign({ variant: 'secondary', as: StyledEmailParticipantsText }, { children: [`${t('to')}: `, generateRecipientList] }), void 0), !isSmallOrAbove && (_jsxs(Text, Object.assign({ variant: 'secondary', as: StyledCompactTimeStampDisplay }, { children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0)] }), void 0))] }), void 0), _jsx(Flex, Object.assign({ container: {
+                        }, children: [_jsx(Text, { variant: 'primary', as: StyledEmailParticipantsText, children: `${isForwarded ? 'FW' : t('from')}: ${from.fullName}` }, void 0), _jsxs(Text, { variant: 'secondary', as: StyledEmailParticipantsText, children: [`${t('to')}: `, generateRecipientList] }, void 0), !isSmallOrAbove && (_jsxs(Text, { variant: 'secondary', as: StyledCompactTimeStampDisplay, children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0)] }, void 0))] }, void 0), _jsx(Flex, { container: {
                             gap: 1,
                             alignItems: 'center'
                         }, item: {
                             shrink: 0
-                        } }, { children: isSmallOrAbove && (_jsxs(Text, Object.assign({ variant: 'secondary', as: StyledEmailParticipantsText }, { children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0)] }), void 0)) }), void 0)] }), void 0), _jsxs(ExpandCollapse, Object.assign({ as: Flex, container: { direction: 'column' }, collapsed: collapsedState, onBeforeCollapse: onCollapse, onBeforeExpand: onExpand, role: 'region', "aria-labelledby": `conversation-heading${id}`, id: `conversation-content${id}` }, { children: [!!unReadEmailCount && (_jsx(Text, Object.assign({ as: StyledUnReadCount, id: `unread-emailCount-${id}`, variant: 'secondary' }, { children: t('new_emails_count', [unReadEmailCount], { count: unReadEmailCount }) }), void 0)), emails &&
+                        }, children: isSmallOrAbove && (_jsxs(Text, { variant: 'secondary', as: StyledEmailParticipantsText, children: [`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp }, void 0)] }, void 0)) }, void 0)] }, void 0), _jsxs(ExpandCollapse, { as: Flex, container: { direction: 'column' }, collapsed: collapsedState, onBeforeCollapse: onCollapse, onBeforeExpand: onExpand, role: 'region', "aria-labelledby": `conversation-heading${id}`, id: `conversation-content${id}`, children: [!!unReadEmailCount && (_jsx(Text, { as: StyledUnReadCount, id: `unread-emailCount-${id}`, variant: 'secondary', children: t('new_emails_count', [unReadEmailCount], { count: unReadEmailCount }) }, void 0)), emails &&
                         emails.map(email => {
-                            return _jsx(StyledEmailInConversation, Object.assign({}, email), email.id);
-                        })] }), void 0)] }), void 0));
+                            return _jsx(StyledEmailInConversation, { ...email }, email.id);
+                        })] }, void 0)] }, void 0));
 });
 export default EmailConversation;
 //# sourceMappingURL=EmailConversation.js.map

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

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

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

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

package/lib/components/Email/EmailEntity.js

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

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

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

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

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

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

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

package/lib/components/Email/EmailSelector.js

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

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

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

package/lib/components/Email/EmailShell.js

@@ -30,27 +30,27 @@ const EmailShell = forwardRef((props, ref) => {
         ? conversations?.map((conversation, index) => {
             const { onExpand, isCollapsed, ...rest } = conversation;
             const collapsed = index !== activeIndex;
-            return (_jsx(EmailConversation, Object.assign({ onExpand: () => {
+            return (_jsx(EmailConversation, { onExpand: () => {
                     setActiveIndex(index);
                     if (onExpand)
                         onExpand();
-                }, isCollapsed: collapsed }, rest), void 0));
+                }, isCollapsed: collapsed, ...rest }, void 0));
         })
         : conversations?.map(conversation => {
-            return _jsx(EmailConversation, Object.assign({}, conversation), void 0);
+            return _jsx(EmailConversation, { ...conversation }, void 0);
         });
     const singleConversation = conversations?.map(conversation => {
-        return (_jsxs(StyledEmailConversation, { children: [!!conversation.unReadEmailCount && (_jsx(Text, Object.assign({ as: StyledUnReadCount, variant: 'secondary' }, { children: t('new_emails_count', [conversation.unReadEmailCount], {
+        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 => {
-                    return _jsx(StyledEmailInConversation, Object.assign({}, email), void 0);
-                })] }, void 0));
+                    }) }, void 0)), conversation.emails?.map(email => {
+                    return _jsx(StyledEmailInConversation, { ...email }, email.id);
+                })] }, conversation.id));
     });
-    return (_jsxs(Flex, Object.assign({ as: StyledEmailShell, container: { direction: 'column' }, ref: ref }, restProps, { children: [headerProps && (_jsxs(Flex, Object.assign({ container: {
+    return (_jsxs(Flex, { as: StyledEmailShell, container: { direction: 'column' }, ref: ref, ...restProps, children: [headerProps && (_jsxs(Flex, { container: {
                     alignItems: 'center',
                     justify: 'between',
                     pad: 1
-                }, as: StyledEmailHeader }, { children: [_jsxs(Flex, Object.assign({ container: { gap: 1, alignItems: 'center' } }, { children: [_jsx(Icon, { name: 'mail' }, void 0), _jsx(Text, Object.assign({ variant: 'h3' }, { children: headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email') }), void 0)] }), void 0), headerProps?.actions] }), void 0)), _jsx(StyledEmailConversationList, Object.assign({ "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' }, 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));
 });
 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    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>\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 {...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    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

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

package/lib/components/Email/EmailSummaryList.js

@@ -76,20 +76,20 @@ const EmailSummaryList = forwardRef(({ categories, onCategoryClick, items, unrea
         return (menuHelpers.getSelected(categories)[0]?.primary ??
             menuHelpers.flatten(categories)[0].primary);
     }, [categories]);
-    return (_jsxs(StyledEmailSummaryListContainer, Object.assign({ container: { direction: 'column' } }, restProps, { children: [_jsxs(StyledEmailSummaryListHeader, { children: [_jsx(Text, Object.assign({ variant: 'h2' }, { children: t('inbox') }), void 0), _jsxs(StyledActionWrapper, Object.assign({ container: { alignItems: 'center', gap: 0.5 } }, { children: [_jsx(MenuButton, { text: buttonText, variant: 'text', menu: {
+    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [_jsxs(StyledEmailSummaryListHeader, { children: [_jsx(Text, { variant: 'h2', children: t('inbox') }, void 0), _jsxs(StyledActionWrapper, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(MenuButton, { text: buttonText, variant: 'text', menu: {
                                     mode: 'single-select',
                                     items: categories,
                                     onItemClick: onCategoryClick
-                                } }, void 0), unreadEmailCount && (_jsx(Count, Object.assign({ "aria-label": t('unread_email_count', [unreadEmailCount], {
+                                } }, void 0), unreadEmailCount && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
                                     count: unreadEmailCount
-                                }), variant: 'default' }, { children: unreadEmailCount }), void 0)), _jsx(StyledFilterButton, Object.assign({ variant: 'simple', label: t('email_filters'), icon: true }, { children: _jsx(Icon, { name: 'filter' }, void 0) }), void 0)] }), void 0)] }, void 0), _jsx(StyledEmailSummaryList, Object.assign({ role: 'tablist', tabIndex: 0, ref: tablistRef, onFocus: e => {
+                                }), variant: 'default', children: unreadEmailCount }, void 0)), _jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }, void 0) }, void 0)] }, void 0)] }, void 0), _jsx(StyledEmailSummaryList, { role: 'tablist', tabIndex: 0, ref: tablistRef, onFocus: e => {
                     if (!listHasBeenViewed && e.target.getAttribute('role') === 'tablist') {
                         setClickOnInitialView(true);
                         setListHasBeenViewed(true);
                     }
-                } }, { children: items.map((emailItem, i) => {
+                }, children: items.map((emailItem, i) => {
                     const { id, ...emailItemProps } = emailItem;
-                    return (_jsx(EmailSummaryItem, Object.assign({ ref: tabRefs[i], id: id, role: 'tab' }, emailItemProps, { onClick: (e) => {
+                    return (_jsx(EmailSummaryItem, { ref: tabRefs[i], id: id, role: 'tab', ...emailItemProps, onClick: (e) => {
                             const mouseClick = e.detail !== 0;
                             if (mouseClick) {
                                 const target = e.target;
@@ -108,8 +108,8 @@ const EmailSummaryList = forwardRef(({ categories, onCategoryClick, items, unrea
                             if (!mouseClick || activeDescendant?.id === id) {
                                 onItemClick(id);
                             }
-                        }, active: activeDescendant && activeDescendant.id === id }), id));
-                }) }), void 0)] }), void 0));
+                        }, active: activeDescendant && activeDescendant.id === id }, id));
+                }) }, void 0)] }, void 0));
 });
 export default EmailSummaryList;
 //# sourceMappingURL=EmailSummaryList.js.map

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

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

package/lib/components/Feed/Feed.js

@@ -101,7 +101,7 @@ const Feed = (props) => {
         }
     }, [loadMoreEl, feedOverflowsRef.current]);
     const t = useI18n();
-    return (_jsx(FeedContext.Provider, Object.assign({ value: {
+    return (_jsx(FeedContext.Provider, { value: {
             searchTypes,
             onSearch: e => {
                 if (onDecoratorSearch)
@@ -115,11 +115,11 @@ const Feed = (props) => {
             interactionRenderers,
             markdownMap,
             userInfo
-        } }, { children: _jsxs(StyledFeed, Object.assign({}, restProps, { children: [(title || (filters && !!filters.length)) && (_jsxs(Flex, Object.assign({ container: { justify: 'between', alignItems: 'center' }, as: StyledHeading }, { children: [title ? _jsx(Text, Object.assign({ variant: 'h2' }, { children: title }), void 0) : _jsx("div", {}, void 0), filters && (_jsx(Button, Object.assign({ 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: [(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)
                                     ? 'filter-on'
-                                    : 'filter' }, void 0) }), void 0))] }), void 0)), _jsx(Popover, Object.assign({ show: !!filters && mountPopover, ref: setPopoverEl, target: buttonEl, as: StyledFilterMenu }, { children: _jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 2 }, as: 'fieldset' }, { children: [_jsx(Text, Object.assign({ variant: 'h3', as: 'legend' }, { children: t('filters') }), void 0), _jsx(Grid, Object.assign({ container: { gap: 1 }, as: StyledFilterList, ref: filterRef }, { children: filters?.map(filter => {
-                                    return (_jsx("li", { children: _jsx(Switch, Object.assign({}, filter, { onChange: (event) => onFilterChange?.(event.target.id, event.target.checked) }), void 0) }, filter.id));
-                                }) }), void 0)] }), void 0) }), void 0), _jsx("div", { children: children }, void 0), onLoadMore && (_jsx(Flex, Object.assign({ ref: setLoadMoreEl, as: StyledLoadMore, visible: feedOverflows, container: { justify: 'center' } }, { children: _jsx(Progress, { placement: 'inline' }, void 0) }), void 0))] }), void 0) }), void 0));
+                                    : '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), _jsx("div", { children: children }, void 0), onLoadMore && (_jsx(Flex, { ref: setLoadMoreEl, as: StyledLoadMore, visible: feedOverflows, container: { justify: 'center' }, children: _jsx(Progress, { placement: 'inline' }, void 0) }, void 0))] }, void 0) }, void 0));
 };
 export default Feed;
 //# sourceMappingURL=Feed.js.map