@pega/cosmos-react-social 4.0.0-dev.2.0 → 4.0.0-dev.21.0

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

@@ -1 +1 @@
-{"version":3,"file":"EmailConversation.js","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,EACL,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,gBAAgB,EAEhB,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,MAAM,EACP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,MAAM,SAAS,CAAC;AAG5B,YAAY,CAAC,aAAa,CAAC,CAAC;AAE5B,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACnD,uBAAuB;CAC1B,CAAC;AAEF,2BAA2B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5D,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACrD,uBAAuB;qBACN,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACrD,CAAC;AACF,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CACnD,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACvB,OAAO,GAAG,CAAA;uBACS,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,UAAU,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;KAIxF,CAAC;AACJ,CAAC,CACF,CAAC;AACF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IAClE,MAAM,kBAAkB,GAAG,WAAW,CACpC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAC7B,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACnC,CAAC;IACF,MAAM,iBAAiB,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE5D,OAAO,GAAG,CAAA;;wBAEY,kBAAkB;aAC7B,iBAAiB;iBACb,IAAI,CAAC,OAAO;mBACV,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;;;GAOhD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAG7C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,kBAAkB,EAAE,UAAU,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;qBACS,IAAI,CAAC,OAAO;qBACZ,kBAAkB,IAAI,UAAU;QAC/C,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,EAAE;QACzD,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;;wBAEL,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACrF,MAAM,kBAAkB,GAAG,WAAW,CACpC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAC7B,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACnC,CAAC;IACF,OAAO,GAAG,CAAA;wBACY,IAAI,CAAC,OAAO;;;uCAGG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;MAE5D,MAAM;QACR,GAAG,CAAA;;;4BAGqB,kBAAkB;;;;;;;KAOzC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACzF,MAAM,kBAAkB,GAAG,WAAW,CACpC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IAEF,MAAM,QAAQ,GAAG,UAAU,CAAC;IAE5B,OAAO,GAAG,CAAA;aACC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACrB,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU;cAC5B,QAAQ;;;kBAGJ,kBAAkB;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,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,eAAe,CAAC,CAAC,CACzF,CAAC;IACF,OAAO,GAAG,CAAA;;;eAGG,KAAK,CAAC,IAAI,CAAC,OAAO;kBACf,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;;;;uCAMnB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;oBAIpD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;;;;oBAK1C,UAAU;;;;UAIpB,UAAU;;eAEL,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAAkC,EAAE,EAAE;IACrF,MAAM,EACJ,EAAE,EACF,MAAM,EACN,IAAI,EACJ,EAAE,EACF,gBAAgB,EAChB,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,WAAW,GAAG,KAAK,EACnB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClE,qBAAqB,CAAC,GAAG,EAAE;QACzB,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAClB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,EAAE;QACzC,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC;IAC1D,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,MAAM,iBAAiB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE;YAC5D,OAAO,GAAG,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;QAClE,CAAC,CAAC,CAAC;QACH,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YACjB,OAAO,CAAC,GAAG,iBAAiB,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;SACzD;QACD,OAAO,iBAAiB,CAAC;IAC3B,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAET,OAAO,CACL,MAAC,uBAAuB,OAAK,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,aACtD,MAAC,IAAI,IACH,EAAE,EAAE,wBAAwB,EAC5B,EAAE,EAAE,uBAAuB,EAAE,EAAE,mBAChB,EAAE,mBACF,CAAC,cAAc,EAC9B,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EACnD,OAAO,EAAE,gBAAgB,EACzB,GAAG,EAAE,SAAS,aAEd,KAAC,IAAI,IAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,GAAI,EAC9D,KAAC,qBAAqB,IAAC,SAAS,EAAE,CAAC,CAAC,gBAAgB,GAAI,EACxD,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,IAAI,EAAE,QAAQ;4BACd,UAAU,EAAE,OAAO;4BACnB,SAAS,EAAE,QAAQ;yBACpB,EACD,IAAI,EAAE;4BACJ,IAAI,EAAE,CAAC;4BACP,MAAM,EAAE,CAAC;yBACV,aAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,IAAI,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,2BAA2B,YACpD,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,QAAQ,EAAE,GACjD,EAEN,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAC1B,8BACG,WAAW,IAAI,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,YAAE,CAAC,CAAC,aAAa,CAAC,GAAU,EAGnE,MAAM,IAAI,CACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,YAAE,CAAC,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,GAAU,CACzE,IACA,CACJ,IACI,EACP,MAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,2BAA2B,aACtD,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,EACd,qBAAqB,IACjB,EACN,CAAC,cAAc,IAAI,CAClB,MAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,6BAA6B,aACxD,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,MAAM,CAC9D,IAAI,IAAI,CAAC,SAAS,CAAC,CACpB,IAAI,EACL,KAAC,eAAe,IAAC,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAE,SAAS,GAAI,IAClE,CACR,IACI,EACP,KAAC,IAAI,IACH,SAAS,EAAE;4BACT,GAAG,EAAE,CAAC;4BACN,UAAU,EAAE,QAAQ;yBACrB,EACD,IAAI,EAAE;4BACJ,MAAM,EAAE,CAAC;yBACV,YAEA,cAAc,IAAI,CACjB,MAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,2BAA2B,aACtD,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,MAAM,CAC9D,IAAI,IAAI,CAAC,SAAS,CAAC,CACpB,IAAI,EACL,KAAC,eAAe,IAAC,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAE,SAAS,GAAI,IAClE,CACR,GACI,IACF,EAEP,MAAC,cAAc,IACb,EAAE,EAAE,IAAI,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,UAAU,EAC5B,cAAc,EAAE,QAAQ,EACxB,IAAI,EAAC,QAAQ,qBACI,uBAAuB,EAAE,EAAE,EAC5C,EAAE,EAAE,uBAAuB,EAAE,EAAE,aAE9B,CAAC,CAAC,gBAAgB,IAAI,CACrB,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE,qBAAqB,EAAE,EAAE,EAAE,OAAO,EAAC,WAAW,YAC5E,CAAC,CAAC,kBAAkB,EAAE,CAAC,gBAAgB,CAAC,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,GAClE,CACR,EACA,MAAM;wBACL,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;4BACjB,OAAO,KAAC,yBAAyB,OAAoB,KAAK,IAAnB,KAAK,CAAC,EAAE,CAAe,CAAC;wBACjE,CAAC,CAAC,IACW,IACO,CAC3B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","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  Status\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`;\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<{\n  singleConversation?: boolean;\n  showHeader?: boolean;\n}>(({ theme: { base }, singleConversation, showHeader }) => {\n  return css`\n    margin-bottom: ${base.spacing};\n    border-radius: ${singleConversation && showHeader\n      ? `0 0 ${base['border-radius']} ${base['border-radius']}`\n      : 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    position: relative;\n    :not(:last-child) {\n      border-bottom: 0.0625rem solid ${base.palette['border-line']};\n    }\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 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      undelivered,\n      drafts,\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', {\n      breakpointRef: headerRef,\n      themeProp: 'content-width'\n    });\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            <Flex container={{ gap: 1 }}>\n              <Text variant='primary' as={StyledEmailParticipantsText}>\n                {`${isForwarded ? 'FW' : t('from')}: ${from.fullName}`}\n              </Text>\n\n              {(undelivered || drafts) && (\n                <>\n                  {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n                  {/* Passing Infinity for count so the correct plural translation is chosen\n                  along with an empty tokens array so that a count is not shown. */}\n                  {drafts && (\n                    <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>\n                  )}\n                </>\n              )}\n            </Flex>\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  Status\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`;\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  ({\n    theme: {\n      base: { palette }\n    },\n    collapsed\n  }) => {\n    return css`\n      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${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(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette,\n        'font-weight': { 'semi-bold': fontWeightSemiBold }\n      }\n    }\n  }) => {\n    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\n    const readableTextColor = readableColor(readableBackground);\n\n    return css`\n      align-self: flex-start;\n      background-color: ${readableBackground};\n      color: ${readableTextColor};\n      padding: 0 ${spacing};\n      font-weight: ${fontWeightSemiBold};\n      width: fit-content;\n    `;\n  }\n);\n\nStyledUnReadCount.defaultProps = defaultThemeProp;\n\nexport const StyledEmailConversation = styled.li<{\n  singleConversation?: boolean;\n  showHeader?: boolean;\n}>(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': baseBorderRadius }\n    },\n    singleConversation,\n    showHeader\n  }) => {\n    return css`\n      margin-bottom: ${spacing};\n      border-radius: ${singleConversation && showHeader\n        ? `0 0 ${baseBorderRadius} ${baseBorderRadius}`\n        : baseBorderRadius};\n      overflow: hidden;\n      background-color: ${palette['primary-background']};\n      list-style-type: none;\n    `;\n  }\n);\nStyledEmailConversation.defaultProps = defaultThemeProp;\n\nexport const StyledEmailInConversation = styled(Email)(\n  ({\n    unRead,\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\n    return css`\n      padding: calc(2 * ${spacing}) 0;\n      position: relative;\n      :not(:last-child) {\n        border-bottom: 0.0625rem solid ${palette['border-line']};\n      }\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  }\n);\nStyledEmailInConversation.defaultProps = defaultThemeProp;\n\nconst StyledUnreadIndicator = styled.span<{ isVisible: boolean }>(\n  ({\n    theme: {\n      base: { palette }\n    },\n    isVisible\n  }) => {\n    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\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  }\n);\nStyledUnreadIndicator.defaultProps = defaultThemeProp;\n\nconst StyledConversationButton = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    const hoverColor = tryCatch(() =>\n      mix(0.85, palette['primary-background'], palette['brand-primary'])\n    );\n    return css`\n      border-width: 0;\n      width: 100%;\n      padding: ${spacing};\n      background: ${palette['primary-background']};\n      color: ${palette['foreground-color']};\n      position: sticky;\n      top: 0;\n      z-index: 1;\n\n      &[aria-expanded='true'] {\n        border-bottom: 0.0625rem solid ${palette['border-line']};\n      }\n\n      &:focus {\n        background: ${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      }\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      undelivered,\n      drafts,\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', {\n      breakpointRef: headerRef,\n      themeProp: 'content-width'\n    });\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            <Flex container={{ gap: 1 }}>\n              <Text variant='primary' as={StyledEmailParticipantsText}>\n                {`${isForwarded ? 'FW' : t('from')}: ${from.fullName}`}\n              </Text>\n\n              {(undelivered || drafts) && (\n                <>\n                  {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n                  {/* Passing Infinity for count so the correct plural translation is chosen\n                  along with an empty tokens array so that a count is not shown. */}\n                  {drafts && (\n                    <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>\n                  )}\n                </>\n              )}\n            </Flex>\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/EmailManager.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useLayoutEffect } from 'react';
 import { EmptyState, Flex, Grid, Icon, registerIcon, Text } from '@pega/cosmos-react-core';
 import { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';
@@ -15,7 +15,7 @@ const EmailManager = ({ header, list, emailCaseDetails, ...restProps }) => {
     return (_jsxs(StyledEmailManagerContainer, { ...restProps, children: [header && (_jsxs(Flex, { container: { alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }, as: StyledHeader, ref: headerRef, children: [header.icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: header.icon }) })), _jsx(Text, { variant: 'h1', children: header.title })] })), _jsxs(Grid, { as: StyledGridContainer, container: {
                     cols: 'minmax(20rem, 1fr) minmax(0, 3fr)',
                     gap: 2
-                }, style: { '--headerOffsetHeight': `${headerOffsetHeight}px` }, item: { area: 'container' }, hasHeader: !!header, children: [_jsx(StyledList, { children: list }), _jsx("div", { children: emailCaseDetails ? _jsx(_Fragment, { children: emailCaseDetails }) : _jsx(EmptyState, {}) })] })] }));
+                }, style: { '--headerOffsetHeight': `${headerOffsetHeight}px` }, item: { area: 'container' }, hasHeader: !!header, children: [_jsx(StyledList, { children: list }), _jsx("div", { children: emailCaseDetails || _jsx(EmptyState, {}) })] })] }));
 };
 export default EmailManager;
 //# sourceMappingURL=EmailManager.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmailManager.js","sourceRoot":"","sources":["../../../src/components/Email/EmailManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAmB,MAAM,OAAO,CAAC;AAE/E,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,oEAAoE,CAAC;AACpG,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAC9G,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAG5G,OAAO,EACL,2BAA2B,EAC3B,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACX,MAAM,gBAAgB,CAAC;AAExB,YAAY,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,YAAY,GAAyC,CAAC,EAC1D,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,GAAG,SAAS,EACuB,EAAE,EAAE;IACvC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhE,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC;IAC/D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,2BAA2B,OAAK,SAAS,aACvC,MAAM,IAAI,CACT,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC9D,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,SAAS,aAEb,MAAM,CAAC,IAAI,IAAI,CACd,KAAC,cAAc,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,GACZ,CAClB,EACD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,KAAK,GAAQ,IACnC,CACR,EACD,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;oBACT,IAAI,EAAE,mCAAmC;oBACzC,GAAG,EAAE,CAAC;iBACP,EACD,KAAK,EAAE,EAAE,sBAAsB,EAAE,GAAG,kBAAkB,IAAI,EAAE,EAC5D,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAC3B,SAAS,EAAE,CAAC,CAAC,MAAM,aAEnB,KAAC,UAAU,cAAE,IAAI,GAAc,EAC/B,wBAAM,gBAAgB,CAAC,CAAC,CAAC,4BAAG,gBAAgB,GAAI,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAO,IACnE,IACqB,CAC/B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC, useState, useRef, useLayoutEffect, PropsWithoutRef } from 'react';\n\nimport {\n  EmptyState,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Text\n} from '@pega/cosmos-react-core';\nimport { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';\nimport * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';\n\nimport { EmailManagerProps } from './Email.types';\nimport {\n  StyledEmailManagerContainer,\n  StyledGridContainer,\n  StyledHeader,\n  StyledList\n} from './Email.styles';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nconst EmailManager: FC<EmailManagerProps & ForwardProps> = ({\n  header,\n  list,\n  emailCaseDetails,\n  ...restProps\n}: PropsWithoutRef<EmailManagerProps>) => {\n  const headerRef = useRef<HTMLDivElement>(null);\n  const [headerOffsetHeight, setHeaderOffsetHeight] = useState(0);\n\n  useLayoutEffect(() => {\n    setHeaderOffsetHeight(headerRef?.current?.offsetHeight || 0);\n  }, []);\n\n  return (\n    <StyledEmailManagerContainer {...restProps}>\n      {header && (\n        <Flex\n          container={{ alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }}\n          as={StyledHeader}\n          ref={headerRef}\n        >\n          {header.icon && (\n            <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n              <Icon name={header.icon} />\n            </StyledPageIcon>\n          )}\n          <Text variant='h1'>{header.title}</Text>\n        </Flex>\n      )}\n      <Grid\n        as={StyledGridContainer}\n        container={{\n          cols: 'minmax(20rem, 1fr) minmax(0, 3fr)',\n          gap: 2\n        }}\n        style={{ '--headerOffsetHeight': `${headerOffsetHeight}px` }}\n        item={{ area: 'container' }}\n        hasHeader={!!header}\n      >\n        <StyledList>{list}</StyledList>\n        <div>{emailCaseDetails ? <>{emailCaseDetails}</> : <EmptyState />}</div>\n      </Grid>\n    </StyledEmailManagerContainer>\n  );\n};\n\nexport default EmailManager;\n"]}
+{"version":3,"file":"EmailManager.js","sourceRoot":"","sources":["../../../src/components/Email/EmailManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAmB,MAAM,OAAO,CAAC;AAE/E,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,oEAAoE,CAAC;AACpG,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAC9G,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAG5G,OAAO,EACL,2BAA2B,EAC3B,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACX,MAAM,gBAAgB,CAAC;AAExB,YAAY,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,YAAY,GAAyC,CAAC,EAC1D,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,GAAG,SAAS,EACuB,EAAE,EAAE;IACvC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhE,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC;IAC/D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,2BAA2B,OAAK,SAAS,aACvC,MAAM,IAAI,CACT,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC9D,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,SAAS,aAEb,MAAM,CAAC,IAAI,IAAI,CACd,KAAC,cAAc,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,GACZ,CAClB,EACD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,KAAK,GAAQ,IACnC,CACR,EACD,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;oBACT,IAAI,EAAE,mCAAmC;oBACzC,GAAG,EAAE,CAAC;iBACP,EACD,KAAK,EAAE,EAAE,sBAAsB,EAAE,GAAG,kBAAkB,IAAI,EAAE,EAC5D,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAC3B,SAAS,EAAE,CAAC,CAAC,MAAM,aAEnB,KAAC,UAAU,cAAE,IAAI,GAAc,EAC/B,wBAAM,gBAAgB,IAAI,KAAC,UAAU,KAAG,GAAO,IAC1C,IACqB,CAC/B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC, useState, useRef, useLayoutEffect, PropsWithoutRef } from 'react';\n\nimport {\n  EmptyState,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Text\n} from '@pega/cosmos-react-core';\nimport { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';\nimport * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';\n\nimport { EmailManagerProps } from './Email.types';\nimport {\n  StyledEmailManagerContainer,\n  StyledGridContainer,\n  StyledHeader,\n  StyledList\n} from './Email.styles';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nconst EmailManager: FC<EmailManagerProps & ForwardProps> = ({\n  header,\n  list,\n  emailCaseDetails,\n  ...restProps\n}: PropsWithoutRef<EmailManagerProps>) => {\n  const headerRef = useRef<HTMLDivElement>(null);\n  const [headerOffsetHeight, setHeaderOffsetHeight] = useState(0);\n\n  useLayoutEffect(() => {\n    setHeaderOffsetHeight(headerRef?.current?.offsetHeight || 0);\n  }, []);\n\n  return (\n    <StyledEmailManagerContainer {...restProps}>\n      {header && (\n        <Flex\n          container={{ alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }}\n          as={StyledHeader}\n          ref={headerRef}\n        >\n          {header.icon && (\n            <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n              <Icon name={header.icon} />\n            </StyledPageIcon>\n          )}\n          <Text variant='h1'>{header.title}</Text>\n        </Flex>\n      )}\n      <Grid\n        as={StyledGridContainer}\n        container={{\n          cols: 'minmax(20rem, 1fr) minmax(0, 3fr)',\n          gap: 2\n        }}\n        style={{ '--headerOffsetHeight': `${headerOffsetHeight}px` }}\n        item={{ area: 'container' }}\n        hasHeader={!!header}\n      >\n        <StyledList>{list}</StyledList>\n        <div>{emailCaseDetails || <EmptyState />}</div>\n      </Grid>\n    </StyledEmailManagerContainer>\n  );\n};\n\nexport default EmailManager;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailNotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEL,YAAY,EAEZ,UAAU,EAKX,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAKjE,eAAO,MAAM,0BAA0B,EAAE,iBAAiB,CACxD,UAAU,CAAC,2BAA2B,EAAE,SAAS,CAAC,GAAG,YAAY,CAgBlE,CAAC;AAEF,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,2BAA2B,GAAG,YAAY,CAazF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/Email/EmailNotificationPanel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Count, Icon, registerIcon, StyledAvatar, useTheme, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail-solid.icon';
+import { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';
+import { StyledEmailCountIcon } from './Email.styles';
+registerIcon(mailIcon);
+export const EmailNotificationPanelIcon = ({ status, label, count, ...restProps }) => {
+    const { base: { colors } } = useTheme();
+    return (_jsxs(StyledAvatar, { as: StyledAvatar, ...restProps, size: 'm', backgroundColor: colors.white, children: [_jsx(Icon, { name: 'mail-solid' }), _jsx(Count, { as: StyledEmailCountIcon, variant: 'urgent', children: count }), _jsx(VisuallyHiddenText, { children: label })] }));
+};
+const EmailNotificationPanel = ({ label, onClick, count, ...restProps }) => {
+    return (_jsx(NavigationListItem, { primary: label, visual: _jsx(EmailNotificationPanelIcon, { ...restProps, count: count, label: label }), onClick: onClick }));
+};
+export default EmailNotificationPanel;
+//# sourceMappingURL=EmailNotificationPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailNotificationPanel.js","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,KAAK,EAEL,IAAI,EAEJ,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,mEAAmE,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AAGpG,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,GAAG,QAAQ,EAAE,CAAC;IACf,OAAO,CACL,MAAC,YAAY,IAAC,EAAE,EAAE,YAAY,KAAM,SAAS,EAAE,IAAI,EAAC,GAAG,EAAC,eAAe,EAAE,MAAM,CAAC,KAAK,aACnF,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,EAE1B,KAAC,KAAK,IAAC,EAAE,EAAE,oBAAoB,EAAE,OAAO,EAAC,QAAQ,YAC9C,KAAK,GACA,EAER,KAAC,kBAAkB,cAAE,KAAK,GAAsB,IACnC,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAkE,CAAC,EAC7F,KAAK,EACL,OAAO,EACP,KAAK,EACL,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,KAAC,0BAA0B,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,EACjF,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  Count,\n  ForwardProps,\n  Icon,\n  OmitStrict,\n  registerIcon,\n  StyledAvatar,\n  useTheme,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail-solid.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\n\nimport type { EmailNotificationPanelProps } from './Email.types';\nimport { StyledEmailCountIcon } from './Email.styles';\n\nregisterIcon(mailIcon);\n\nexport const EmailNotificationPanelIcon: FunctionComponent<\n  OmitStrict<EmailNotificationPanelProps, 'onClick'> & ForwardProps\n> = ({ status, label, count, ...restProps }) => {\n  const {\n    base: { colors }\n  } = useTheme();\n  return (\n    <StyledAvatar as={StyledAvatar} {...restProps} size='m' backgroundColor={colors.white}>\n      <Icon name='mail-solid' />\n\n      <Count as={StyledEmailCountIcon} variant='urgent'>\n        {count}\n      </Count>\n\n      <VisuallyHiddenText>{label}</VisuallyHiddenText>\n    </StyledAvatar>\n  );\n};\n\nconst EmailNotificationPanel: FunctionComponent<EmailNotificationPanelProps & ForwardProps> = ({\n  label,\n  onClick,\n  count,\n  ...restProps\n}) => {\n  return (\n    <NavigationListItem\n      primary={label}\n      visual={<EmailNotificationPanelIcon {...restProps} count={count} label={label} />}\n      onClick={onClick}\n    />\n  );\n};\n\nexport default EmailNotificationPanel;\n"]}

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

@@ -15,6 +15,7 @@ export interface EmailSelectorProps extends NoChildrenProp {
     externalValidator?: EmailComposerProps['externalValidator'];
     status?: FormControlProps['status'];
     info?: FormControlProps['info'];
+    compose?: boolean;
 }
 declare const EmailSelector: FunctionComponent<EmailSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required'>>;
 export default EmailSelector;

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

@@ -1 +1 @@
-{"version":3,"file":"EmailSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEd,gBAAgB,EAEjB,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,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,CAAC;IAC3C,oBAAoB;IACpB,oBAAoB,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7F;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,CA8HxE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"EmailSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEd,gBAAgB,EAEjB,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,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,CAAC;IAC3C,oBAAoB;IACpB,oBAAoB,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7F;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,CA4IxE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Email/EmailSelector.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { ComboBox, createStringMatcher, menuHelpers, useI18n, useAfterInitialEffect } from '@pega/cosmos-react-core';
-const EmailSelector = ({ participants, selectedItems, label, mode, required, onSelectedItemChange, externalValidator, status, info }) => {
+const EmailSelector = ({ participants, selectedItems, label, mode, required, onSelectedItemChange, externalValidator, status, info, compose }) => {
     const [filterValue, setFilterValue] = useState('');
     const [emailParticipants, setEmailParticipants] = useState(participants);
     const t = useI18n();
@@ -25,7 +25,8 @@ const EmailSelector = ({ participants, selectedItems, label, mode, required, onS
             };
         });
         const isValid = externalValidator?.(filterValue);
-        return (filterValue && externalValidator && isValid) || (filterValue && !externalValidator)
+        return ((filterValue && externalValidator && isValid) || (filterValue && !externalValidator)) &&
+            !compose
             ? [
                 {
                     id: filterValue,
@@ -37,7 +38,7 @@ const EmailSelector = ({ participants, selectedItems, label, mode, required, onS
             : filteredItems;
     }, [emailParticipants, selectedItems, filterRegex]);
     const toggleSelectedItems = (id) => {
-        let newSelectedItems = [...selectedItems];
+        let newSelectedItems = mode === 'single-select' ? [] : [...selectedItems];
         if (selectedItems.includes(id)) {
             // Unselect an already selected item
             newSelectedItems = newSelectedItems.filter(value => value !== id);
@@ -80,9 +81,20 @@ const EmailSelector = ({ participants, selectedItems, label, mode, required, onS
         }
         onSelectedItemChange(newSelectedItems, label);
     };
+    const getSelectedItems = () => {
+        if (mode === 'single-select') {
+            return { id: selectedItems[0], text: selectedItems[0] };
+        }
+        return selectedItems.map(value => ({ id: value, text: value }));
+    };
+    const clearSelection = () => {
+        onSelectedItemChange([], label);
+    };
     const comboBoxProps = {
         value: filterValue,
         onChange: (e) => {
+            if (!e.target.value)
+                clearSelection();
             setFilterValue(e.target.value);
         },
         onBlur: () => {
@@ -94,7 +106,7 @@ const EmailSelector = ({ participants, selectedItems, label, mode, required, onS
             onItemClick: toggleSelectedItems
         },
         selected: {
-            items: selectedItems.map(value => ({ id: value, text: value })),
+            items: getSelectedItems(),
             onRemove: toggleSelectedItems
         },
         label,

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, ReactNode } from 'react';\n\nimport {\n  ComboBox,\n  ComboBoxProps,\n  createStringMatcher,\n  menuHelpers,\n  NoChildrenProp,\n  useI18n,\n  FormControlProps,\n  useAfterInitialEffect\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  status?: FormControlProps['status'];\n  info?: FormControlProps['info'];\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  status,\n  info\n}) => {\n  const [filterValue, setFilterValue] = useState('');\n  const [emailParticipants, setEmailParticipants] = useState(participants);\n  const t = useI18n();\n\n  useAfterInitialEffect(() => {\n    setEmailParticipants(participants);\n  }, [participants]);\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  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    status,\n    info\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, ReactNode } from 'react';\n\nimport {\n  ComboBox,\n  ComboBoxProps,\n  createStringMatcher,\n  menuHelpers,\n  NoChildrenProp,\n  useI18n,\n  FormControlProps,\n  useAfterInitialEffect\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  status?: FormControlProps['status'];\n  info?: FormControlProps['info'];\n  compose?: boolean;\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  status,\n  info,\n  compose\n}) => {\n  const [filterValue, setFilterValue] = useState('');\n  const [emailParticipants, setEmailParticipants] = useState(participants);\n  const t = useI18n();\n\n  useAfterInitialEffect(() => {\n    setEmailParticipants(participants);\n  }, [participants]);\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      !compose\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 = mode === 'single-select' ? [] : [...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  const getSelectedItems = () => {\n    if (mode === 'single-select') {\n      return { id: selectedItems[0], text: selectedItems[0] };\n    }\n    return selectedItems.map(value => ({ id: value, text: value }));\n  };\n\n  const clearSelection = () => {\n    onSelectedItemChange([], label);\n  };\n\n  const comboBoxProps = {\n    value: filterValue,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      if (!e.target.value) clearSelection();\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: getSelectedItems(),\n      onRemove: toggleSelectedItems\n    },\n    label,\n    mode,\n    required,\n    status,\n    info\n  };\n\n  return <ComboBox {...comboBoxProps} />;\n};\n\nexport default EmailSelector;\n"]}

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

@@ -1,10 +1,11 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { EmailSummaryItemProps } from './Email.types';
+export declare const StyledMessageAndDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface StyledEmailSummaryItemProps extends EmailSummaryItemProps {
     isEmailItemActive: boolean;
 }
-export declare const StyledEmailSummaryItem: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledEmailSummaryItemProps, never>;
+export declare const StyledEmailSummaryItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, StyledEmailSummaryItemProps & ForwardProps, never>;
 declare const EmailSummaryItem: FunctionComponent<EmailSummaryItemProps & ForwardProps>;
 export default EmailSummaryItem;
 //# sourceMappingURL=EmailSummaryItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmailSummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAI1E,OAAO,EAEL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAsCtD,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAID,eAAO,MAAM,sBAAsB,qIA6BjC,CAAC;AAMH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAsG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"EmailSummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAI1E,OAAO,EAEL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAkBtD,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAqBF,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAID,eAAO,MAAM,sBAAsB,gJAiClC,CAAC;AAMF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA4G7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Email/EmailSummaryItem.js

@@ -3,13 +3,15 @@ import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { defaultThemeProp, Text, Flex, Count, Sentiment, MetaList, DateTimeDisplay, Status, tryCatch, useI18n } from '@pega/cosmos-react-core';
-import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 import { StyledMetaList } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';
 const StyledMessage = styled(Flex)(({ unreadEmailCount, theme }) => {
     return css `
+    width: ${theme.base['content-width'].md};
+    text-align: start;
     text-overflow: ellipsis;
     overflow: hidden;
     margin-inline-end: ${theme.base.spacing};
+    margin-block-end: ${theme.base.spacing};
     ${unreadEmailCount !== undefined &&
         unreadEmailCount > 0 &&
         css `
@@ -17,7 +19,7 @@ const StyledMessage = styled(Flex)(({ unreadEmailCount, theme }) => {
     `}
   `;
 });
-const StyledMessageAndDate = styled.div `
+export const StyledMessageAndDate = styled.div `
   white-space: nowrap;
 `;
 const StyledParticipants = styled(Flex)(({ unreadEmailCount, theme }) => {
@@ -40,33 +42,35 @@ const StyledParticipants = styled(Flex)(({ unreadEmailCount, theme }) => {
   `;
 });
 const StyledStatuses = styled.div ``;
-export const StyledEmailSummaryItem = styled.button(({ theme }) => {
+export const StyledEmailSummaryItem = styled.li(({ theme }) => {
     const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
     return css `
-    width: 100%;
-    color: ${theme.base.palette['foreground-color']};
-    background-color: ${theme.base.palette['primary-background']};
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    ${StyledMetaList}, ${StyledMessageAndDate}, ${StyledStatuses} {
-      margin-block-start: ${theme.base.spacing};
-    }
-    & + & {
-      margin-inline-start: 0;
-    }
+      width: 100%;
+      color: ${theme.base.palette['foreground-color']};
+      background-color: ${theme.base.palette['primary-background']};
+      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+      outline: none;
+      cursor: pointer;
+      ${StyledMetaList}, ${StyledMessageAndDate}, ${StyledStatuses} {
+        margin-block-start: ${theme.base.spacing};
+      }
+      & + & {
+        margin-inline-start: 0;
+      }
 
-    &[aria-selected='true'],
-    &[data-current='true'] {
-      background-color: ${theme.base.palette['secondary-background']};
-    }
+      &[aria-selected='true'],
+      &[data-current='true'] {
+        background-color: ${theme.base.palette['secondary-background']};
+      }
 
-    &:hover,
-    &:focus-within {
-      background-color: ${hoverColor};
-    }
-    &:not(:last-child) {
-      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
-    }
-  `;
+      &:hover,
+      &:focus-within {
+        background-color: ${hoverColor};
+      }
+      &:not(:last-child) {
+        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+      }
+    `;
 });
 StyledEmailSummaryItem.defaultProps = defaultThemeProp;
 StyledParticipants.defaultProps = defaultThemeProp;
@@ -96,7 +100,12 @@ const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, messag
         }
         return participants;
     }, [activeParticipants]);
-    return (_jsxs(BareButton, { as: StyledEmailSummaryItem, ref: ref, ...restProps, id: id, onClick: () => onSelect(id), "aria-selected": active, "aria-label": `${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: -1, children: [_jsxs(StyledParticipants, { unreadEmailCount: unreadEmailCount, container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h4', children: emailParticipants }), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { variant: 'default', children: unreadEmailCount }))] }), _jsxs(Flex, { container: {
+    const itemStatus = `${unreadEmailCount ? `${t('unread')}, ` : ''}${undelivered ? `${t('undelivered')}, ` : ''}${drafts ? `${t('drafts')}, ` : ''}`;
+    return (_jsxs(StyledEmailSummaryItem, { ref: ref, ...restProps, id: id, onClick: () => onSelect(id), onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                onSelect(id);
+            }
+        }, "aria-selected": active, "aria-label": `${itemStatus}${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: active ? 0 : -1, children: [_jsxs(StyledParticipants, { unreadEmailCount: unreadEmailCount, container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h4', children: emailParticipants }), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { children: unreadEmailCount }))] }), _jsxs(Flex, { container: {
                     justify: 'between'
                 }, as: StyledMessageAndDate, children: [_jsx(StyledMessage, { unreadEmailCount: unreadEmailCount, children: message }), _jsx(DateTimeDisplay, { value: timeStamp, variant: 'date', format: 'short' })] }), _jsx(MetaList, { items: items }), (undelivered || drafts) && (_jsxs(Flex, { container: {
                     justify: 'start',

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, 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}\n\nconst StyledStatuses = styled.div``;\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    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    ${StyledMetaList}, ${StyledMessageAndDate}, ${StyledStatuses} {\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    &:not(:last-child) {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\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      onSelect,\n      unreadEmailCount,\n      drafts,\n      undelivered,\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={() => onSelect(id)}\n        aria-selected={active}\n        aria-label={`${emailParticipants}, ${message} ${timeStamp} ${topic} ${\n          sentiment?.variant\n        } ${t('priority')} ${urgency}`}\n        tabIndex={-1}\n      >\n        <StyledParticipants\n          unreadEmailCount={unreadEmailCount}\n          container={{ justify: 'between', alignItems: 'center' }}\n        >\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        {(undelivered || drafts) && (\n          <Flex\n            container={{\n              justify: 'start',\n              gap: 1\n            }}\n            as={StyledStatuses}\n          >\n            {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n            {/* Passing count as infinity so that translation engine select correct form of draft,\n                 with [](second argument) as empty so that count is not shown */}\n            {drafts && <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>}\n          </Flex>\n        )}\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 { 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    width: ${theme.base['content-width'].md};\n    text-align: start;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    margin-inline-end: ${theme.base.spacing};\n    margin-block-end: ${theme.base.spacing};\n    ${unreadEmailCount !== undefined &&\n    unreadEmailCount > 0 &&\n    css`\n      color: ${theme.base.palette.interactive};\n    `}\n  `;\n});\n\nexport const 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}\n\nconst StyledStatuses = styled.div``;\n\nexport const StyledEmailSummaryItem = styled.li<StyledEmailSummaryItemProps & ForwardProps>(\n  ({ 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      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n      outline: none;\n      cursor: pointer;\n      ${StyledMetaList}, ${StyledMessageAndDate}, ${StyledStatuses} {\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      &:not(:last-child) {\n        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\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      onSelect,\n      unreadEmailCount,\n      drafts,\n      undelivered,\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    const itemStatus = `${unreadEmailCount ? `${t('unread')}, ` : ''}${\n      undelivered ? `${t('undelivered')}, ` : ''\n    }${drafts ? `${t('drafts')}, ` : ''}`;\n    return (\n      <StyledEmailSummaryItem\n        ref={ref}\n        {...restProps}\n        id={id}\n        onClick={() => onSelect(id)}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            onSelect(id);\n          }\n        }}\n        aria-selected={active}\n        aria-label={`${itemStatus}${emailParticipants}, ${message} ${timeStamp} ${topic} ${\n          sentiment?.variant\n        } ${t('priority')} ${urgency}`}\n        tabIndex={active ? 0 : -1}\n      >\n        <StyledParticipants\n          unreadEmailCount={unreadEmailCount}\n          container={{ justify: 'between', alignItems: 'center' }}\n        >\n          <Text variant='h4'>{emailParticipants}</Text>\n          {typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (\n            <Count>{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        {(undelivered || drafts) && (\n          <Flex\n            container={{\n              justify: 'start',\n              gap: 1\n            }}\n            as={StyledStatuses}\n          >\n            {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n            {/* Passing count as infinity so that translation engine select correct form of draft,\n                 with [](second argument) as empty so that count is not shown */}\n            {drafts && <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>}\n          </Flex>\n        )}\n      </StyledEmailSummaryItem>\n    );\n  }\n);\n\nexport default EmailSummaryItem;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"EmailSummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAgBb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAyB,qBAAqB,EAAE,MAAM,eAAe,CAAC;AA+D7E,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAyI7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"EmailSummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAgBb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAyB,qBAAqB,EAAE,MAAM,eAAe,CAAC;AA6C7E,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAgJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Email/EmailSummaryList.js

@@ -3,8 +3,8 @@ import { createRef, useMemo, useState, useEffect, forwardRef, useCallback } from
 import styled, { css } from 'styled-components';
 import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton, useConsolidatedRef, useI18n, menuHelpers, Progress, useItemIntersection, usePrevious, VisuallyHiddenText, EmptyState, calculateFontSize, StyledText, useArrows, debounce } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
-import EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';
-import { StyledLoadMore } from './Email.styles';
+import EmailSummaryItem from './EmailSummaryItem';
+import { StyledEmailSummaryList, StyledLoadMore } from './Email.styles';
 registerIcon(filterIcon);
 const StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {
     return css `
@@ -28,23 +28,6 @@ StyledActionWrapper.defaultProps = defaultThemeProp;
 const StyledFilterButton = styled(Button) `
   margin-inline-start: auto;
 `;
-const StyledEmailSummaryList = styled.div(({ theme }) => {
-    return css `
-    height: 100%;
-    overflow-y: auto;
-
-    &:focus-visible {
-      outline: none;
-    }
-
-    &:focus {
-      ${StyledEmailSummaryItem}[data-current='true'] {
-        box-shadow: ${theme.base.shadow['focus-inset']};
-      }
-    }
-  `;
-});
-StyledEmailSummaryList.defaultProps = defaultThemeProp;
 const StyledWorklist = styled(MenuButton)(({ theme }) => {
     const { 'font-size': fontSize, 'font-scale': fontScale } = theme.base;
     const fontSizes = calculateFontSize(fontSize, fontScale);
@@ -56,7 +39,7 @@ const StyledWorklist = styled(MenuButton)(({ theme }) => {
   `;
 });
 StyledWorklist.defaultProps = defaultThemeProp;
-const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories, onCategoryClick, items, unreadEmailCount, filters, onFilterChange, onItemClick, emptyMessage, currentItemId, ...restProps }, ref) => {
+const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories, onCategoryClick, items, unreadEmailCount, filters, onFilterChange, onItemClick, emptyMessage, currentItemId, selectable = true, ...restProps }, ref) => {
     const t = useI18n();
     const tablistRef = useConsolidatedRef(ref);
     const tabRefs = items.map(() => createRef());
@@ -64,20 +47,21 @@ const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories,
     const [announcement, setAnnouncement] = useState('');
     useArrows(tablistRef, {
         cycle: true,
-        selector: 'button[role="tab"]',
+        selector: ':scope > li',
         dir: 'up-down',
-        allowTabFocus: true
+        updateTabIndex: false
     }, [items]);
     const buttonText = useMemo(() => {
-        return (menuHelpers.getSelected(categories)[0]?.primary ??
-            menuHelpers.flatten(categories)[0].primary);
+        if (categories)
+            return (menuHelpers.getSelected(categories)[0]?.primary ??
+                menuHelpers.flatten(categories)[0].primary);
     }, [categories]);
     const handleLoadMore = useCallback(debounce(() => {
         if (!loading) {
             onLoadMore?.();
         }
     }, 200), [loading]);
-    useItemIntersection(tablistRef, items.length - 1, handleLoadMore, ':scope > button[role="tab"]');
+    useItemIntersection(tablistRef, items.length - 1, handleLoadMore, ':scope > li');
     useEffect(() => {
         if (loading)
             setAnnouncement(t('loading_email'));
@@ -94,17 +78,17 @@ const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories,
             tabRefs[items.findIndex(item => item.id === currentItemId)]?.current?.focus();
         }
     }, [currentItemId]);
-    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [_jsx(StyledEmailSummaryListHeader, { children: _jsxs(StyledActionWrapper, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(StyledWorklist, { text: buttonText, variant: 'text', menu: {
-                                mode: 'single-select',
-                                items: categories,
-                                onItemClick: onCategoryClick
-                            } }), typeof unreadEmailCount === 'number' && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
+    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [categories && (_jsx(StyledEmailSummaryListHeader, { children: _jsxs(StyledActionWrapper, { container: { justify: 'space-between', alignItems: 'center', gap: 0.5 }, children: [_jsx(Flex, { item: { shrink: 1 }, children: _jsx(StyledWorklist, { text: buttonText, variant: 'text', popover: { portal: true }, menu: {
+                                    mode: 'single-select',
+                                    items: categories,
+                                    onItemClick: onCategoryClick
+                                } }) }), typeof unreadEmailCount === 'number' && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
                                 count: unreadEmailCount
-                            }), variant: 'default', children: unreadEmailCount })), filters && (_jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }) }))] }) }), items.length > 0 ? (_jsxs(StyledEmailSummaryList, { role: 'tablist', tabIndex: -1, ref: tablistRef, children: [_jsx(VisuallyHiddenText, { "aria-live": 'polite', children: announcement }), items.map((emailItem, i) => {
+                            }), children: unreadEmailCount })), filters && (_jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }) }))] }) })), items.length > 0 ? (_jsxs(Flex, { role: selectable ? 'tablist' : undefined, container: { direction: 'column' }, as: StyledEmailSummaryList, ref: tablistRef, 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, onSelect: (selectedItemId) => {
+                        return (_jsx(EmailSummaryItem, { ref: tabRefs[i], id: id, ...emailItemProps, onSelect: (selectedItemId) => {
                                 onItemClick(selectedItemId);
-                            }, active: currentItemId === id }, id));
+                            }, role: selectable ? 'tab' : undefined, active: selectable ? currentItemId === id : undefined }, id));
                     }), loading && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] })) : (_jsx(EmptyState, { message: emptyMessage }))] }));
 });
 export default EmailSummaryList;