@pega/cosmos-react-social 2.0.0-dev.15.0 → 2.0.0-dev.16.3

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

@@ -1 +1 @@
-{"version":3,"file":"Email.types.js","sourceRoot":"","sources":["../../../src/components/Email/Email.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport {\n  BaseProps,\n  AvatarProps,\n  SentimentProps,\n  FileDisplayProps,\n  FileUploadItemProps,\n  ForwardProps,\n  OmitStrict,\n  MenuProps,\n  MenuItemProps\n} from '@pega/cosmos-react-core';\nimport { SelectProps } from '@pega/cosmos-react-core/lib/components/Select/Select';\nimport { RichTextEditorProps } from '@pega/cosmos-react-rte';\n\nexport interface Suggestion {\n  /** Suggestion title */\n  title: string;\n  /** Suggestion id */\n  id: string;\n}\n\nexport interface EmailUser {\n  /** Short name of the User */\n  shortName: string;\n  /** Full name of the User */\n  fullName: string;\n  /** Email of the User */\n  emailAddress: string;\n  /** Avatar props of the User */\n  avatarProps?: Partial<AvatarProps>;\n}\n\nexport interface EntityHighlightMapping {\n  entityValue: string;\n  entityType: string;\n  entityName: string;\n  entityVariant: number;\n}\n\nexport interface EmailProps extends BaseProps {\n  /** Ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Unique ID for this email record */\n  id: string;\n  /** Timestamp of this email as ISO8601 string, timestamp or native Date object. */\n  timeStamp: Date | number | string;\n  /** From email */\n  from: EmailUser;\n  /** To email */\n  to: EmailUser[];\n  /** Carbon copy of email users list */\n  cc?: EmailUser[];\n  /** Blind carbon copy of email users list */\n  bcc?: EmailUser[];\n  /** Sentiment */\n  sentiment?: SentimentProps;\n  /** Subject of the email */\n  subject?: string;\n  /** Body */\n  body?: ReactNode | string;\n  /** Entity highlight mapping */\n  entityHighlightMapping?: EntityHighlightMapping[];\n  /** onReply callback */\n  onReply: (id: EmailProps['id']) => void;\n  /** onForward Callback */\n  onForward: (id: EmailProps['id']) => void;\n  /** onReply callback */\n  onReplyAll?: (id: EmailProps['id']) => void;\n  /** List of suggestions */\n  suggestions?: Suggestion[];\n  /** Callback that triggers on click of tag */\n  onSuggestionClick?: (id: EmailProps['id'], suggestionId: Suggestion['id']) => void;\n  /** Actions region */\n  actions?: ReactNode;\n  /** Flag that indicates if email is unread\n   * @default false\n   */\n  unRead?: boolean;\n  /** Attachments list */\n  attachments?: FileDisplayProps[];\n}\n\nexport interface EmailConversationProps extends BaseProps {\n  /** ref to the element */\n  ref?: Ref<HTMLLIElement>;\n  /** Unique ID for this email conversation record */\n  id: string;\n  /** List of mails */\n  emails: EmailProps[];\n  /** Sender(s) of this email conversation */\n  from: EmailUser;\n  /** Recipient(s) of this email conversation */\n  to: EmailUser[];\n  /** Count of unread emails */\n  unReadEmailCount?: number;\n  /** Timestamp of this conversation as ISO8601 string, timestamp or native Date object. */\n  timeStamp: Date | string | number;\n  /** Flag that indicates if email conversation is expanded */\n  isCollapsed?: boolean;\n  /** Flag to set if conversation is spun off from forwarded email */\n  isForwarded?: boolean;\n  /** Callback when email conversation is collapsed */\n  onCollapse?: () => void;\n  /** Callback when email conversation is expanded */\n  onExpand?: () => void;\n}\n\nexport interface EmailComposerProps\n  extends Pick<EmailProps, 'attachments' | 'suggestions' | 'onSuggestionClick'>,\n    BaseProps {\n  /** Header of the email */\n  header?: string;\n  /** Object containing full list of email participants */\n  participants: EmailUser[];\n  /** Object containing the props to render the from drop down */\n  from: SelectProps;\n  /** Array to hold the initial participants that should be default initialized in To address. */\n  to?: EmailUser['emailAddress'][];\n  /** Array to hold the initial participants that should be default initialized in Cc address. */\n  cc?: EmailUser['emailAddress'][];\n  /** Array to hold the initial participants that should be default initialized in Bcc address. */\n  bcc?: EmailUser['emailAddress'][];\n  /** Object containing the props to render the subject input */\n  subject: string;\n  /** Region to hold primary email composer fields */\n  primaryMoreFields?: ReactNode;\n  /** Region to hold secondary email composer fields */\n  secondaryMoreFields?: ReactNode;\n  /** Object containing the props to render the email body rte */\n  body: RichTextEditorProps & ForwardProps;\n  /** Callback when email needs to be sent */\n  onSend: () => void;\n  /** Callback when attachment icon is clicked */\n  onAddAttachment?: () => void;\n  /** List of attachments */\n  attachments?: FileUploadItemProps[];\n  /** Max number of attachments to be allowed in Email composer.\n   * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.\n   * If attachments added are >= maxAttachments, add attachments icon will be disabled.\n   */\n  maxAttachments?: number;\n  /** Region to show more actions in footer */\n  footerMoreActions?: ReactNode;\n  /** Templates for drafting email */\n  templates?: Record<string, string>;\n  /** Callback when replying to only from address */\n  onReply?: () => void;\n  /** Callback when replying to all participants */\n  onReplyAll?: () => void;\n  /** Callback when cancel composing */\n  onCancel: () => void;\n  /** Whether email composer opened after clicking reply or reply all */\n  isReplyAll: boolean;\n  /** Ref to the element */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmailComposerParticipantsProps {\n  key: string;\n  value: EmailUser;\n}\n\nexport interface EmailShellProps extends BaseProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Region for header */\n  headerProps?: {\n    /** Region for actions */\n    actions?: ReactNode;\n    /** Subject of the email conversations list */\n    subject?: string;\n  };\n  /** Email conversations */\n  conversations?: EmailConversationProps[];\n  /** Shows only one conversation at a time */\n  autoCollapse?: boolean;\n}\n\nexport interface EmailSummaryItemProps extends BaseProps {\n  /** Id of each summary item */\n  id: string;\n  /** List of from participant names of the conversations */\n  activeParticipants: EmailUser[];\n  /** Email body of last email in the email */\n  message: string;\n  /** Timestamp of the latest email */\n  timeStamp: Date | string | number;\n  /** Top topic of an email */\n  topic: string;\n  /** Sentiment */\n  sentiment?: SentimentProps;\n  /** Urgency of an email */\n  urgency?: number;\n  /** Total number of unread emails in the email */\n  unreadEmailCount?: number;\n  /** Is the email currently active */\n  active?: boolean;\n  /** On click of email item */\n  onClick: MouseEventHandler;\n  /** ref to the element */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport interface Filter {\n  /** Sets DOM id for the control and associates label element via 'for' attribute. */\n  id: string;\n  /** Pass a string or a fragment with an Icon and string for the filter label. */\n  label: ReactNode;\n  /**\n   * Disables the filter.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Sets on prop via onFilterChange.\n   * @default false\n   */\n  on?: boolean;\n}\n\nexport interface EmailSummaryListProps extends BaseProps {\n  /** List of email categories */\n  categories: MenuProps['items'];\n  /** Handles category change */\n  onCategoryClick?: MenuItemProps['onClick'];\n  /** List of EmailItems items */\n  items: OmitStrict<EmailSummaryItemProps, 'onClick' | 'active'>[];\n  /** Total number of unread email count */\n  unreadEmailCount?: number;\n  /** A set of filters to apply to the email inbox. */\n  filters?: Filter[];\n  /** A callback that runs when a filter is clicked. */\n  onFilterChange?: (filterId: Filter['id'], on: boolean) => void;\n  /** onClick of list item */\n  onItemClick: (id: EmailSummaryItemProps['id']) => void;\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"Email.types.js","sourceRoot":"","sources":["../../../src/components/Email/Email.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport {\n  BaseProps,\n  AvatarProps,\n  SentimentProps,\n  FileDisplayProps,\n  FileUploadItemProps,\n  ForwardProps,\n  OmitStrict,\n  MenuProps,\n  MenuItemProps\n} from '@pega/cosmos-react-core';\nimport { SelectProps } from '@pega/cosmos-react-core/lib/components/Select/Select';\nimport { RichTextEditorProps } from '@pega/cosmos-react-rte';\n\nexport interface Suggestion {\n  /** Suggestion title */\n  title: string;\n  /** Suggestion id */\n  id: string;\n}\n\nexport interface EmailUser {\n  /** Short name of the User */\n  shortName: string;\n  /** Full name of the User */\n  fullName: string;\n  /** Email of the User */\n  emailAddress: string;\n  /** Avatar props of the User */\n  avatarProps?: Partial<AvatarProps>;\n}\n\nexport interface EntityHighlightMapping {\n  value: string;\n  type: string;\n  name: string;\n  variant: number;\n  description: string;\n}\n\nexport interface EmailProps extends BaseProps {\n  /** Ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Unique ID for this email record */\n  id: string;\n  /** Timestamp of this email as ISO8601 string, timestamp or native Date object. */\n  timeStamp: Date | number | string;\n  /** From email */\n  from: EmailUser;\n  /** To email */\n  to: EmailUser[];\n  /** Carbon copy of email users list */\n  cc?: EmailUser[];\n  /** Blind carbon copy of email users list */\n  bcc?: EmailUser[];\n  /** Sentiment */\n  sentiment?: SentimentProps;\n  /** Subject of the email */\n  subject?: string;\n  /** Body */\n  body?: ReactNode | string;\n  /** Entity highlight mapping */\n  entityHighlightMapping?: EntityHighlightMapping[];\n  /** onReply callback */\n  onReply: (id: EmailProps['id']) => void;\n  /** onForward Callback */\n  onForward: (id: EmailProps['id']) => void;\n  /** onReply callback */\n  onReplyAll?: (id: EmailProps['id']) => void;\n  /** List of suggestions */\n  suggestions?: Suggestion[];\n  /** Callback that triggers on click of tag */\n  onSuggestionClick?: (id: EmailProps['id'], suggestionId: Suggestion['id']) => void;\n  /** Actions region */\n  actions?: ReactNode;\n  /** Flag that indicates if email is unread\n   * @default false\n   */\n  unRead?: boolean;\n  /** Attachments list */\n  attachments?: FileDisplayProps[];\n}\n\nexport interface EmailConversationProps extends BaseProps {\n  /** ref to the element */\n  ref?: Ref<HTMLLIElement>;\n  /** Unique ID for this email conversation record */\n  id: string;\n  /** List of mails */\n  emails: EmailProps[];\n  /** Sender(s) of this email conversation */\n  from: EmailUser;\n  /** Recipient(s) of this email conversation */\n  to: EmailUser[];\n  /** Count of unread emails */\n  unReadEmailCount?: number;\n  /** Timestamp of this conversation as ISO8601 string, timestamp or native Date object. */\n  timeStamp: Date | string | number;\n  /** Flag that indicates if email conversation is expanded */\n  isCollapsed?: boolean;\n  /** Flag to set if conversation is spun off from forwarded email */\n  isForwarded?: boolean;\n  /** Callback when email conversation is collapsed */\n  onCollapse?: () => void;\n  /** Callback when email conversation is expanded */\n  onExpand?: () => void;\n}\n\nexport interface EmailComposerProps\n  extends Pick<EmailProps, 'attachments' | 'suggestions' | 'onSuggestionClick'>,\n    BaseProps {\n  /** Header of the email */\n  header?: string;\n  /** Object containing full list of email participants */\n  participants: EmailUser[];\n  /** Object containing the props to render the from drop down */\n  from: SelectProps;\n  /** Array to hold the initial participants that should be default initialized in To address. */\n  to?: EmailUser['emailAddress'][];\n  /** Array to hold the initial participants that should be default initialized in Cc address. */\n  cc?: EmailUser['emailAddress'][];\n  /** Array to hold the initial participants that should be default initialized in Bcc address. */\n  bcc?: EmailUser['emailAddress'][];\n  /** Object containing the props to render the subject input */\n  subject: string;\n  /** Region to hold primary email composer fields */\n  primaryMoreFields?: ReactNode;\n  /** Region to hold secondary email composer fields */\n  secondaryMoreFields?: ReactNode;\n  /** Object containing the props to render the email body rte */\n  body: RichTextEditorProps & ForwardProps;\n  /** Callback when email needs to be sent */\n  onSend: () => void;\n  /** Callback when attachment icon is clicked */\n  onAddAttachment?: () => void;\n  /** List of attachments */\n  attachments?: FileUploadItemProps[];\n  /** Max number of attachments to be allowed in Email composer.\n   * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.\n   * If attachments added are >= maxAttachments, add attachments icon will be disabled.\n   */\n  maxAttachments?: number;\n  /** Region to show more actions in footer */\n  footerMoreActions?: ReactNode;\n  /** Templates for drafting email */\n  templates?: Record<string, string>;\n  /** Callback when replying to only from address */\n  onReply?: () => void;\n  /** Callback when replying to all participants */\n  onReplyAll?: () => void;\n  /** Callback when cancel composing */\n  onCancel: () => void;\n  /** Whether email composer opened after clicking reply or reply all */\n  isReplyAll: boolean;\n  /** Ref to the element */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface EmailComposerParticipantsProps {\n  key: string;\n  value: EmailUser;\n}\n\nexport interface EmailShellProps extends BaseProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Region for header */\n  headerProps?: {\n    /** Region for actions */\n    actions?: ReactNode;\n    /** Subject of the email conversations list */\n    subject?: string;\n  };\n  /** Email conversations */\n  conversations?: EmailConversationProps[];\n  /** Shows only one conversation at a time */\n  autoCollapse?: boolean;\n}\n\nexport interface EmailSummaryItemProps extends BaseProps {\n  /** Id of each summary item */\n  id: string;\n  /** List of from participant names of the conversations */\n  activeParticipants: EmailUser[];\n  /** Email body of last email in the email */\n  message: string;\n  /** Timestamp of the latest email */\n  timeStamp: Date | string | number;\n  /** Top topic of an email */\n  topic: string;\n  /** Sentiment */\n  sentiment?: SentimentProps;\n  /** Urgency of an email */\n  urgency?: number;\n  /** Total number of unread emails in the email */\n  unreadEmailCount?: number;\n  /** Is the email currently active */\n  active?: boolean;\n  /** On click of email item */\n  onClick: MouseEventHandler;\n  /** ref to the element */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport interface Filter {\n  /** Sets DOM id for the control and associates label element via 'for' attribute. */\n  id: string;\n  /** Pass a string or a fragment with an Icon and string for the filter label. */\n  label: ReactNode;\n  /**\n   * Disables the filter.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Sets on prop via onFilterChange.\n   * @default false\n   */\n  on?: boolean;\n}\n\nexport interface EmailSummaryListProps extends BaseProps {\n  /** List of email categories */\n  categories: MenuProps['items'];\n  /** Handles category change */\n  onCategoryClick?: MenuItemProps['onClick'];\n  /** List of EmailItems items */\n  items: OmitStrict<EmailSummaryItemProps, 'onClick' | 'active'>[];\n  /** Total number of unread email count */\n  unreadEmailCount?: number;\n  /** A set of filters to apply to the email inbox. */\n  filters?: Filter[];\n  /** A callback that runs when a filter is clicked. */\n  onFilterChange?: (filterId: Filter['id'], on: boolean) => void;\n  /** onClick of list item */\n  onItemClick: (id: EmailSummaryItemProps['id']) => void;\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"EmailComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAIL,IAAI,EAIJ,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,kBAAkB,EAAa,MAAM,eAAe,CAAC;AA+F9D,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAEhD,eAAO,MAAM,eAAe,EAAE,OAAO,IAInC,CAAC;AAIH,eAAO,MAAM,cAAc,mLAKzB,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA0LvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"EmailComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAIL,IAAI,EAKJ,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,kBAAkB,EAAa,MAAM,eAAe,CAAC;AAiG9D,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAEhD,eAAO,MAAM,eAAe,EAAE,OAAO,IAInC,CAAC;AAIH,eAAO,MAAM,cAAc,mLAKzB,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA0LvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Email/EmailComposer.js

@@ -3,9 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { forwardRef, useState, useEffect, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import Select from '@pega/cosmos-react-core/lib/components/Select/Select';
-import { Button, ComboBox, Flex, Icon, Text, useI18n, Option, defaultThemeProp, FileUploadItem, MenuButton } from '@pega/cosmos-react-core';
+import { Button, ComboBox, Flex, Icon, registerIcon, Text, useI18n, Option, defaultThemeProp, FileUploadItem, MenuButton } from '@pega/cosmos-react-core';
 import Input from '@pega/cosmos-react-core/lib/components/Input/Input';
 import { RichTextEditor } from '@pega/cosmos-react-rte';
+import * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';
+registerIcon(paperClipIcon);
 const useEmailDataProvider = (participants, defaultSelected = []) => {
     const escapeChars = /[.*+\-?^${}()|[\]\\]/g;
     const getFilterRegex = (inputValue) => {

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

@@ -1 +1 @@
-{"version":3,"file":"EmailComposer.js","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useState,\n  useEffect,\n  ChangeEvent,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Select from '@pega/cosmos-react-core/lib/components/Select/Select';\nimport {\n  Button,\n  ComboBox,\n  Flex,\n  Icon,\n  Text,\n  useI18n,\n  Option,\n  ForwardProps,\n  defaultThemeProp,\n  FileUploadItem,\n  MenuButton,\n  ComboBoxProps\n} from '@pega/cosmos-react-core';\nimport Input from '@pega/cosmos-react-core/lib/components/Input/Input';\nimport { RichTextEditor } from '@pega/cosmos-react-rte';\n\nimport { EmailComposerProps, EmailUser } from './Email.types';\n\ninterface EmailUserWithSelection extends EmailUser {\n  selected?: boolean;\n}\n\nconst useEmailDataProvider: (\n  participants: EmailComposerProps['participants'],\n  defaultSelected?: string[]\n) => ComboBoxProps = (participants, defaultSelected = []) => {\n  const escapeChars = /[.*+\\-?^${}()|[\\]\\\\]/g;\n\n  const getFilterRegex = (inputValue: string) => {\n    return new RegExp(`^${inputValue.replace(escapeChars, '\\\\$&')}`, 'i');\n  };\n\n  const [emailUsers, setEmailUsers] = useState<EmailUserWithSelection[]>(\n    participants.map((participant: EmailUser) => {\n      return {\n        ...(participant as EmailUser),\n        selected: defaultSelected.includes(participant.emailAddress)\n      };\n    }) as EmailUserWithSelection[]\n  );\n\n  const [emailFilterValue, setEmailFilterValue] = useState('');\n\n  const filterRegex = useMemo(() => getFilterRegex(emailFilterValue), [emailFilterValue]);\n\n  const emailsToRender = useMemo(() => {\n    return (\n      emailFilterValue\n        ? emailUsers.filter(({ emailAddress, fullName, shortName }) => {\n            return (\n              filterRegex.test(emailAddress) ||\n              filterRegex.test(fullName) ||\n              filterRegex.test(shortName)\n            );\n          })\n        : emailUsers\n    ).map(({ emailAddress, fullName, selected }) => {\n      return {\n        id: emailAddress,\n        primary: fullName,\n        secondary: [emailAddress],\n        selected: !!selected\n      };\n    });\n  }, [emailUsers, filterRegex]);\n\n  const selectedEmailUsers = useMemo(() => {\n    return emailUsers\n      .filter(emailAddress => emailAddress.selected)\n      .map(({ emailAddress }) => {\n        return {\n          text: emailAddress,\n          id: emailAddress\n        };\n      });\n  }, [emailUsers]);\n\n  const toggleSelectedEmailUser = (id: string) => {\n    setEmailUsers(prevEmailUsers => {\n      return prevEmailUsers.map(emailUser => {\n        if (emailUser.emailAddress === id) {\n          return {\n            ...emailUser,\n            selected: !emailUser.selected\n          };\n        }\n        return emailUser;\n      });\n    });\n  };\n\n  return {\n    value: emailFilterValue,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      setEmailFilterValue(e.target.value);\n    },\n    onBlur: () => {\n      setEmailFilterValue('');\n    },\n    menu: {\n      items: emailsToRender,\n      accent: filterRegex,\n      onItemClick: toggleSelectedEmailUser\n    },\n    selected: {\n      items: selectedEmailUsers,\n      onRemove: toggleSelectedEmailUser\n    }\n  };\n};\n\nexport const StyledEmailComposer = styled.div``;\n\nexport const StyledReplyIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledReplyIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCCButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledCCButton.defaultProps = defaultThemeProp;\n\nconst EmailComposer: FunctionComponent<EmailComposerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailComposerProps>, ref: EmailComposerProps['ref']) => {\n    const {\n      onReply,\n      onReplyAll,\n      isReplyAll,\n      participants,\n      from,\n      to,\n      cc,\n      bcc,\n      body,\n      primaryMoreFields,\n      secondaryMoreFields,\n      maxAttachments = 0,\n      attachments = [],\n      onAddAttachment,\n      onCancel,\n      onSend,\n      footerMoreActions,\n      templates,\n      ...restProps\n    } = props;\n\n    const [subject, setSubject] = useState(props.subject);\n\n    const [showCC, setShowCC] = useState(false);\n    const [showBCC, setShowBCC] = useState(false);\n    const [selectedTemplate, setSelectedTemplate] = useState('');\n\n    const toEmailAddresses = useEmailDataProvider(participants, to);\n    const ccEmailAddresses = useEmailDataProvider(participants, cc);\n    const bccEmailAddresses = useEmailDataProvider(participants, bcc);\n\n    const children =\n      templates && Object.keys(templates).map(option => <Option key={option}>{option}</Option>);\n\n    const header = subject || props.header;\n\n    const onSubjectChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setSubject(e.target.value);\n    };\n\n    const onTemplateChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      setSelectedTemplate(e.target.value);\n    };\n\n    const rteRef: any = body?.ref;\n\n    useEffect(() => {\n      return (\n        templates?.[selectedTemplate] && rteRef?.current?.insertText(templates?.[selectedTemplate])\n      );\n    }, [selectedTemplate]);\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        as={StyledEmailComposer}\n        ref={ref}\n        {...restProps}\n        container={{\n          gap: 2,\n          direction: 'column'\n        }}\n      >\n        <Text variant='h4' aria-label={`${t('email_header')} ${header}`}>\n          {header}\n        </Text>\n        <div>\n          <MenuButton\n            text={isReplyAll ? t('reply_all') : t('reply')}\n            variant='link'\n            icon={isReplyAll ? 'reply-all' : 'reply'}\n            menu={{\n              items: [\n                {\n                  primary: t('reply_all'),\n                  id: 'reply all',\n                  visual: <StyledReplyIcon name='reply-all' />,\n                  onClick: onReplyAll\n                },\n                {\n                  primary: t('reply'),\n                  id: 'reply',\n                  visual: <StyledReplyIcon name='reply' />,\n                  onClick: onReply\n                }\n              ]\n            }}\n          />\n        </div>\n\n        <Flex\n          container={{\n            alignItems: 'start',\n            gap: 0.5\n          }}\n        >\n          <Flex\n            container={{\n              gap: 1,\n              direction: 'column'\n            }}\n            item={{\n              grow: 1\n            }}\n          >\n            {to && <ComboBox {...toEmailAddresses} label={t('to')} mode='multi-select' required />}\n          </Flex>\n          {!showCC && (\n            <span>\n              <StyledCCButton variant='simple' onClick={() => setShowCC(true)} icon>\n                {t('cc')}\n              </StyledCCButton>\n            </span>\n          )}\n          {!showBCC && (\n            <span>\n              <StyledCCButton variant='simple' onClick={() => setShowBCC(true)} icon>\n                {t('bcc')}\n              </StyledCCButton>\n            </span>\n          )}\n        </Flex>\n        {showCC && <ComboBox {...ccEmailAddresses} label={t('cc')} mode='multi-select' />}\n        {showBCC && <ComboBox {...bccEmailAddresses} label={t('bcc')} mode='multi-select' />}\n\n        <Input value={subject} onChange={onSubjectChange} label={t('subject')} />\n\n        <Select onChange={onTemplateChange} label={t('auto_reply')} value={selectedTemplate}>\n          <>\n            <Option>{t('insert')}</Option>\n            {children}\n          </>\n        </Select>\n        {primaryMoreFields}\n        <RichTextEditor\n          autoFocus\n          {...body}\n          defaultValue={selectedTemplate}\n          labelHidden\n          label={t('email_message')}\n        />\n        {secondaryMoreFields}\n        {attachments.length > 0 && (\n          <Flex container={{ gap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} />\n            ))}\n          </Flex>\n        )}\n        <Flex\n          container={{\n            gap: 1\n          }}\n        >\n          <Flex container item={{ grow: 1 }}>\n            <Button variant='secondary' onClick={onCancel}>\n              {t('cancel')}\n            </Button>\n            {footerMoreActions}\n          </Flex>\n          <Flex container>\n            {maxAttachments > 0 && (\n              <Button\n                onClick={attachments.length < maxAttachments ? onAddAttachment : undefined}\n                variant='link'\n                label={\n                  attachments.length >= maxAttachments\n                    ? t('email_disable_attachment', [maxAttachments])\n                    : t('email_add_attachment', [maxAttachments])\n                }\n              >\n                <Icon name='paper-clip' />\n              </Button>\n            )}\n            <Button variant='primary' onClick={onSend}>\n              {t('send')}\n            </Button>\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailComposer;\n"]}
+{"version":3,"file":"EmailComposer.js","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useState,\n  useEffect,\n  ChangeEvent,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Select from '@pega/cosmos-react-core/lib/components/Select/Select';\nimport {\n  Button,\n  ComboBox,\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  useI18n,\n  Option,\n  ForwardProps,\n  defaultThemeProp,\n  FileUploadItem,\n  MenuButton,\n  ComboBoxProps\n} from '@pega/cosmos-react-core';\nimport Input from '@pega/cosmos-react-core/lib/components/Input/Input';\nimport { RichTextEditor } from '@pega/cosmos-react-rte';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport { EmailComposerProps, EmailUser } from './Email.types';\n\nregisterIcon(paperClipIcon);\n\ninterface EmailUserWithSelection extends EmailUser {\n  selected?: boolean;\n}\n\nconst useEmailDataProvider: (\n  participants: EmailComposerProps['participants'],\n  defaultSelected?: string[]\n) => ComboBoxProps = (participants, defaultSelected = []) => {\n  const escapeChars = /[.*+\\-?^${}()|[\\]\\\\]/g;\n\n  const getFilterRegex = (inputValue: string) => {\n    return new RegExp(`^${inputValue.replace(escapeChars, '\\\\$&')}`, 'i');\n  };\n\n  const [emailUsers, setEmailUsers] = useState<EmailUserWithSelection[]>(\n    participants.map((participant: EmailUser) => {\n      return {\n        ...(participant as EmailUser),\n        selected: defaultSelected.includes(participant.emailAddress)\n      };\n    }) as EmailUserWithSelection[]\n  );\n\n  const [emailFilterValue, setEmailFilterValue] = useState('');\n\n  const filterRegex = useMemo(() => getFilterRegex(emailFilterValue), [emailFilterValue]);\n\n  const emailsToRender = useMemo(() => {\n    return (\n      emailFilterValue\n        ? emailUsers.filter(({ emailAddress, fullName, shortName }) => {\n            return (\n              filterRegex.test(emailAddress) ||\n              filterRegex.test(fullName) ||\n              filterRegex.test(shortName)\n            );\n          })\n        : emailUsers\n    ).map(({ emailAddress, fullName, selected }) => {\n      return {\n        id: emailAddress,\n        primary: fullName,\n        secondary: [emailAddress],\n        selected: !!selected\n      };\n    });\n  }, [emailUsers, filterRegex]);\n\n  const selectedEmailUsers = useMemo(() => {\n    return emailUsers\n      .filter(emailAddress => emailAddress.selected)\n      .map(({ emailAddress }) => {\n        return {\n          text: emailAddress,\n          id: emailAddress\n        };\n      });\n  }, [emailUsers]);\n\n  const toggleSelectedEmailUser = (id: string) => {\n    setEmailUsers(prevEmailUsers => {\n      return prevEmailUsers.map(emailUser => {\n        if (emailUser.emailAddress === id) {\n          return {\n            ...emailUser,\n            selected: !emailUser.selected\n          };\n        }\n        return emailUser;\n      });\n    });\n  };\n\n  return {\n    value: emailFilterValue,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      setEmailFilterValue(e.target.value);\n    },\n    onBlur: () => {\n      setEmailFilterValue('');\n    },\n    menu: {\n      items: emailsToRender,\n      accent: filterRegex,\n      onItemClick: toggleSelectedEmailUser\n    },\n    selected: {\n      items: selectedEmailUsers,\n      onRemove: toggleSelectedEmailUser\n    }\n  };\n};\n\nexport const StyledEmailComposer = styled.div``;\n\nexport const StyledReplyIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledReplyIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCCButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledCCButton.defaultProps = defaultThemeProp;\n\nconst EmailComposer: FunctionComponent<EmailComposerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailComposerProps>, ref: EmailComposerProps['ref']) => {\n    const {\n      onReply,\n      onReplyAll,\n      isReplyAll,\n      participants,\n      from,\n      to,\n      cc,\n      bcc,\n      body,\n      primaryMoreFields,\n      secondaryMoreFields,\n      maxAttachments = 0,\n      attachments = [],\n      onAddAttachment,\n      onCancel,\n      onSend,\n      footerMoreActions,\n      templates,\n      ...restProps\n    } = props;\n\n    const [subject, setSubject] = useState(props.subject);\n\n    const [showCC, setShowCC] = useState(false);\n    const [showBCC, setShowBCC] = useState(false);\n    const [selectedTemplate, setSelectedTemplate] = useState('');\n\n    const toEmailAddresses = useEmailDataProvider(participants, to);\n    const ccEmailAddresses = useEmailDataProvider(participants, cc);\n    const bccEmailAddresses = useEmailDataProvider(participants, bcc);\n\n    const children =\n      templates && Object.keys(templates).map(option => <Option key={option}>{option}</Option>);\n\n    const header = subject || props.header;\n\n    const onSubjectChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setSubject(e.target.value);\n    };\n\n    const onTemplateChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      setSelectedTemplate(e.target.value);\n    };\n\n    const rteRef: any = body?.ref;\n\n    useEffect(() => {\n      return (\n        templates?.[selectedTemplate] && rteRef?.current?.insertText(templates?.[selectedTemplate])\n      );\n    }, [selectedTemplate]);\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        as={StyledEmailComposer}\n        ref={ref}\n        {...restProps}\n        container={{\n          gap: 2,\n          direction: 'column'\n        }}\n      >\n        <Text variant='h4' aria-label={`${t('email_header')} ${header}`}>\n          {header}\n        </Text>\n        <div>\n          <MenuButton\n            text={isReplyAll ? t('reply_all') : t('reply')}\n            variant='link'\n            icon={isReplyAll ? 'reply-all' : 'reply'}\n            menu={{\n              items: [\n                {\n                  primary: t('reply_all'),\n                  id: 'reply all',\n                  visual: <StyledReplyIcon name='reply-all' />,\n                  onClick: onReplyAll\n                },\n                {\n                  primary: t('reply'),\n                  id: 'reply',\n                  visual: <StyledReplyIcon name='reply' />,\n                  onClick: onReply\n                }\n              ]\n            }}\n          />\n        </div>\n\n        <Flex\n          container={{\n            alignItems: 'start',\n            gap: 0.5\n          }}\n        >\n          <Flex\n            container={{\n              gap: 1,\n              direction: 'column'\n            }}\n            item={{\n              grow: 1\n            }}\n          >\n            {to && <ComboBox {...toEmailAddresses} label={t('to')} mode='multi-select' required />}\n          </Flex>\n          {!showCC && (\n            <span>\n              <StyledCCButton variant='simple' onClick={() => setShowCC(true)} icon>\n                {t('cc')}\n              </StyledCCButton>\n            </span>\n          )}\n          {!showBCC && (\n            <span>\n              <StyledCCButton variant='simple' onClick={() => setShowBCC(true)} icon>\n                {t('bcc')}\n              </StyledCCButton>\n            </span>\n          )}\n        </Flex>\n        {showCC && <ComboBox {...ccEmailAddresses} label={t('cc')} mode='multi-select' />}\n        {showBCC && <ComboBox {...bccEmailAddresses} label={t('bcc')} mode='multi-select' />}\n\n        <Input value={subject} onChange={onSubjectChange} label={t('subject')} />\n\n        <Select onChange={onTemplateChange} label={t('auto_reply')} value={selectedTemplate}>\n          <>\n            <Option>{t('insert')}</Option>\n            {children}\n          </>\n        </Select>\n        {primaryMoreFields}\n        <RichTextEditor\n          autoFocus\n          {...body}\n          defaultValue={selectedTemplate}\n          labelHidden\n          label={t('email_message')}\n        />\n        {secondaryMoreFields}\n        {attachments.length > 0 && (\n          <Flex container={{ gap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} />\n            ))}\n          </Flex>\n        )}\n        <Flex\n          container={{\n            gap: 1\n          }}\n        >\n          <Flex container item={{ grow: 1 }}>\n            <Button variant='secondary' onClick={onCancel}>\n              {t('cancel')}\n            </Button>\n            {footerMoreActions}\n          </Flex>\n          <Flex container>\n            {maxAttachments > 0 && (\n              <Button\n                onClick={attachments.length < maxAttachments ? onAddAttachment : undefined}\n                variant='link'\n                label={\n                  attachments.length >= maxAttachments\n                    ? t('email_disable_attachment', [maxAttachments])\n                    : t('email_add_attachment', [maxAttachments])\n                }\n              >\n                <Icon name='paper-clip' />\n              </Button>\n            )}\n            <Button variant='primary' onClick={onSend}>\n              {t('send')}\n            </Button>\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailComposer;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAIlG,OAAO,EAOL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AASvD,eAAO,MAAM,2BAA2B,iLAGvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;SASzE,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAoB5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAQlC,CAAC;AAGH,eAAO,MAAM,yBAAyB,wKAsBpC,CAAC;AAwEH,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA2H/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAKlG,OAAO,EAQL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAGvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;SASzE,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAoB5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAQlC,CAAC;AAGH,eAAO,MAAM,yBAAyB,wKAsBpC,CAAC;AAwEH,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA2H/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Email/EmailConversation.js

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { mix, readableColor } from 'polished';
-import { ExpandCollapse, Flex, Icon, Text, useI18n, defaultThemeProp, useAfterInitialEffect, DateTimeDisplay, readableHue, useBreakpoint, useConfiguration, StyledIcon, tryCatch, useDirection } from '@pega/cosmos-react-core';
+import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import { ExpandCollapse, Flex, Icon, registerIcon, Text, useI18n, defaultThemeProp, useAfterInitialEffect, DateTimeDisplay, readableHue, useBreakpoint, useConfiguration, StyledIcon, tryCatch, useDirection } from '@pega/cosmos-react-core';
 import Email from './Email';
+registerIcon(caretDownIcon);
 const EmailParticipantTextCss = css `
   white-space: nowrap;
   overflow: hidden;

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 {\n  ExpandCollapse,\n  Flex,\n  Icon,\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\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

@@ -5,6 +5,7 @@ export interface EmailEntityProps extends BaseProps {
     entity: EntityHighlightMapping;
     ref?: Ref<HTMLElement>;
 }
+export declare const StyledEmailEntity: import("styled-components").StyledComponent<"mark", import("styled-components").DefaultTheme, EmailEntityProps, never>;
 declare const EmailEntity: FunctionComponent<EmailEntityProps & ForwardProps>;
 export default EmailEntity;
 //# sourceMappingURL=EmailEntity.d.ts.map

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,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EACL,SAAS,EACT,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,MAAM,EAAE,sBAAsB,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AA4BD,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,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EACL,SAAS,EACT,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,MAAM,EAAE,sBAAsB,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAcD,eAAO,MAAM,iBAAiB,wHAU5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAiBnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Email/EmailEntity.js

@@ -11,9 +11,9 @@ const getTextColor = (variant, backgroundColor) => {
     const entityColor = getBackgroundColor(variant, backgroundColor);
     return tryCatch(() => readableColor(entityColor));
 };
-const StyledEmailEntity = styled.mark(({ entity, theme }) => {
-    const backgroundColor = getBackgroundColor(entity.entityVariant, theme.base.palette['primary-background']);
-    const textColor = getTextColor(entity.entityVariant, theme.base.palette['primary-background']);
+export const StyledEmailEntity = styled.mark(({ entity, theme }) => {
+    const backgroundColor = getBackgroundColor(entity.variant, theme.base.palette['primary-background']);
+    const textColor = getTextColor(entity.variant, theme.base.palette['primary-background']);
     return css `
     background-color: ${backgroundColor};
     color: ${textColor};
@@ -23,7 +23,7 @@ StyledEmailEntity.defaultProps = defaultThemeProp;
 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.entityName}=${entity.entityValue}` }, { children: [entity.entityValue, _jsx(Tooltip, Object.assign({ target: el }, { children: `${entity.entityName}=${entity.entityValue}` }), void 0)] }), void 0));
+    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));
 });
 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,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAGL,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAO7D,MAAM,kBAAkB,GAAG,CAAC,OAAe,EAAE,eAAuB,EAAE,EAAE;IACtE,OAAO,WAAW,CAChB,2BAA2B,CAAC,OAAO,GAAG,2BAA2B,CAAC,MAAM,CAAC,EACzE,eAAe,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,eAAuB,EAAE,EAAE;IAChE,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACjE,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5E,MAAM,eAAe,GAAG,kBAAkB,CACxC,MAAM,CAAC,aAAa,EACpB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC/F,OAAO,GAAG,CAAA;wBACY,eAAe;aAC1B,SAAS;GACnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,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,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,WAAW,EAAE,iBAEvD,MAAM,CAAC,WAAW,EACnB,KAAC,OAAO,kBAAC,MAAM,EAAE,EAAE,gBAAG,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,WAAW,EAAE,YAAW,aAC3D,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  Tooltip,\n  tryCatch,\n  useConsolidatedRef,\n  useElement,\n  readableHue,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport { EntityHighlightMapping } from './Email.types';\nimport { EmailEntityBackgroundColors } from './Email.styles';\n\nexport interface EmailEntityProps extends BaseProps {\n  entity: EntityHighlightMapping;\n  ref?: Ref<HTMLElement>;\n}\n\nconst getBackgroundColor = (variant: number, backgroundColor: string) => {\n  return readableHue(\n    EmailEntityBackgroundColors[variant % EmailEntityBackgroundColors.length],\n    backgroundColor\n  );\n};\n\nconst getTextColor = (variant: number, backgroundColor: string) => {\n  const entityColor = getBackgroundColor(variant, backgroundColor);\n  return tryCatch(() => readableColor(entityColor));\n};\n\nconst StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n  const backgroundColor = getBackgroundColor(\n    entity.entityVariant,\n    theme.base.palette['primary-background']\n  );\n  const textColor = getTextColor(entity.entityVariant, theme.base.palette['primary-background']);\n  return css`\n    background-color: ${backgroundColor};\n    color: ${textColor};\n  `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\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.entityName}=${entity.entityValue}`}\n      >\n        {entity.entityValue}\n        <Tooltip target={el}>{`${entity.entityName}=${entity.entityValue}`}</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,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAGL,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAO7D,MAAM,kBAAkB,GAAG,CAAC,OAAe,EAAE,eAAuB,EAAE,EAAE;IACtE,OAAO,WAAW,CAChB,2BAA2B,CAAC,OAAO,GAAG,2BAA2B,CAAC,MAAM,CAAC,EACzE,eAAe,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,eAAuB,EAAE,EAAE;IAChE,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACjE,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACnF,MAAM,eAAe,GAAG,kBAAkB,CACxC,MAAM,CAAC,OAAO,EACd,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACzF,OAAO,GAAG,CAAA;wBACY,eAAe;aAC1B,SAAS;GACnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,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, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  Tooltip,\n  tryCatch,\n  useConsolidatedRef,\n  useElement,\n  readableHue,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport { EntityHighlightMapping } from './Email.types';\nimport { EmailEntityBackgroundColors } from './Email.styles';\n\nexport interface EmailEntityProps extends BaseProps {\n  entity: EntityHighlightMapping;\n  ref?: Ref<HTMLElement>;\n}\n\nconst getBackgroundColor = (variant: number, backgroundColor: string) => {\n  return readableHue(\n    EmailEntityBackgroundColors[variant % EmailEntityBackgroundColors.length],\n    backgroundColor\n  );\n};\n\nconst getTextColor = (variant: number, backgroundColor: string) => {\n  const entityColor = getBackgroundColor(variant, backgroundColor);\n  return tryCatch(() => readableColor(entityColor));\n};\n\nexport const StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n  const backgroundColor = getBackgroundColor(\n    entity.variant,\n    theme.base.palette['primary-background']\n  );\n  const textColor = getTextColor(entity.variant, theme.base.palette['primary-background']);\n  return css`\n    background-color: ${backgroundColor};\n    color: ${textColor};\n  `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\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"]}

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

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

package/lib/components/Email/EmailShell.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Flex, Icon, Text, useI18n } from '@pega/cosmos-react-core';
+import { defaultThemeProp, Flex, Icon, registerIcon, Text, useI18n } from '@pega/cosmos-react-core';
+import * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail.icon';
 import EmailConversation, { StyledEmailConversation, StyledEmailInConversation, StyledUnReadCount } from './EmailConversation';
+registerIcon(mailIcon);
 export const StyledEmailHeader = styled.header ``;
 export const StyledEmailConversationList = styled.ul ``;
 export const StyledEmailShell = styled.div(props => {

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 { defaultThemeProp, Flex, ForwardProps, Icon, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport { EmailShellProps } from './Email.types';\nimport EmailConversation, {\n  StyledEmailConversation,\n  StyledEmailInConversation,\n  StyledUnReadCount\n} from './EmailConversation';\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>\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"]}

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

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

package/lib/components/Email/EmailSummaryList.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createRef, useMemo, useState, useEffect, forwardRef, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Count, defaultThemeProp, Flex, Icon, MenuButton, Text, useActiveDescendant, useConsolidatedRef, useI18n, menuHelpers } from '@pega/cosmos-react-core';
+import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton, Text, useActiveDescendant, useConsolidatedRef, useI18n, menuHelpers } from '@pega/cosmos-react-core';
+import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';
+registerIcon(filterIcon);
 const StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {
     return css `
     height: 100%;

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  MenuButton,\n  Text,\n  useActiveDescendant,\n  UseActiveDescendantConfig,\n  useConsolidatedRef,\n  useI18n,\n  menuHelpers\n} from '@pega/cosmos-react-core';\n\nimport { EmailSummaryListProps } from './Email.types';\nimport EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';\n\nconst StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {\n  return css`\n    height: 100%;\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\nStyledEmailSummaryListContainer.defaultProps = defaultThemeProp;\n\nconst StyledEmailSummaryListHeader = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing}) ${theme.base.spacing};\n  `;\n});\nStyledEmailSummaryListHeader.defaultProps = defaultThemeProp;\n\nconst StyledActionWrapper = styled(Flex)(({ theme }) => {\n  return css`\n    padding-block-start: ${theme.base.spacing};\n  `;\n});\nStyledActionWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFilterButton = styled(Button)`\n  margin-inline-start: auto;\n`;\n\nconst StyledEmailSummaryList = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus {\n      ${StyledEmailSummaryItem}[data-current='true'] {\n        box-shadow: inset ${theme.base.shadow.focus};\n      }\n    }\n  `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nconst EmailSummaryList: FunctionComponent<EmailSummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      categories,\n      onCategoryClick,\n      items,\n      unreadEmailCount,\n      filters,\n      onFilterChange,\n      onItemClick,\n      ...restProps\n    },\n    ref: EmailSummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n    const tablistRef = useConsolidatedRef(ref);\n    const tabRefs = items.map(() => createRef<HTMLButtonElement>());\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const previousActiveDescendant = useRef<HTMLElement | undefined>();\n    const [listHasBeenViewed, setListHasBeenViewed] = useState(false);\n    const [clickOnInitialView, setClickOnInitialView] = useState(false);\n\n    const uadConfig = useMemo<UseActiveDescendantConfig>(\n      () => ({\n        focusEl: tablistRef.current,\n        scope: tablistRef.current,\n        selector: 'button[role=\"tab\"]',\n        focusDescendantEl: focusDescendant,\n        clearFocusDescendant: () => {\n          setFocusDescendant(null);\n          tablistRef.current?.focus();\n        },\n        pauseDescendantEvaluation: !listHasBeenViewed\n      }),\n      [tablistRef.current, focusDescendant, listHasBeenViewed]\n    );\n\n    const { activeDescendant } = useActiveDescendant(uadConfig);\n\n    // Trigger click of new active descendant\n    useEffect(() => {\n      const hasPreviousOrClickInitial = previousActiveDescendant.current || clickOnInitialView;\n\n      if (hasPreviousOrClickInitial && activeDescendant) {\n        activeDescendant.click();\n      }\n\n      previousActiveDescendant.current = activeDescendant;\n    }, [activeDescendant]);\n\n    const buttonText = useMemo(() => {\n      return (\n        menuHelpers.getSelected(categories)[0]?.primary ??\n        menuHelpers.flatten(categories)[0].primary\n      );\n    }, [categories]);\n\n    return (\n      <StyledEmailSummaryListContainer container={{ direction: 'column' }} {...restProps}>\n        <StyledEmailSummaryListHeader>\n          <Text variant='h2'>{t('inbox')}</Text>\n          <StyledActionWrapper container={{ alignItems: 'center', gap: 0.5 }}>\n            <MenuButton\n              text={buttonText}\n              variant='text'\n              menu={{\n                mode: 'single-select',\n                items: categories,\n                onItemClick: onCategoryClick\n              }}\n            />\n            {unreadEmailCount && (\n              <Count\n                aria-label={t('unread_email_count', [unreadEmailCount], {\n                  count: unreadEmailCount\n                })}\n                variant='default'\n              >\n                {unreadEmailCount}\n              </Count>\n            )}\n            <StyledFilterButton variant='simple' label={t('email_filters')} icon>\n              <Icon name='filter' />\n            </StyledFilterButton>\n          </StyledActionWrapper>\n        </StyledEmailSummaryListHeader>\n\n        <StyledEmailSummaryList\n          role='tablist'\n          tabIndex={0}\n          ref={tablistRef}\n          onFocus={e => {\n            if (!listHasBeenViewed && e.target.getAttribute('role') === 'tablist') {\n              setClickOnInitialView(true);\n              setListHasBeenViewed(true);\n            }\n          }}\n        >\n          {items.map((emailItem, i) => {\n            const { id, ...emailItemProps } = emailItem;\n            return (\n              <EmailSummaryItem\n                ref={tabRefs[i]}\n                id={id}\n                key={id}\n                role='tab'\n                {...emailItemProps}\n                onClick={(e: MouseEvent) => {\n                  const mouseClick = e.detail !== 0;\n\n                  if (mouseClick) {\n                    const target = e.target as HTMLElement;\n                    const focusAtEl =\n                      target.getAttribute('role') === 'tab'\n                        ? target\n                        : target.closest('button[role=\"tab\"]');\n                    if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n\n                    if (!listHasBeenViewed) {\n                      if (i === 0) setClickOnInitialView(true);\n                      setListHasBeenViewed(true);\n                    }\n                  }\n                  // Click is triggered by active descendant change, 'enter', & duplicate click\n                  if (!mouseClick || activeDescendant?.id === id) {\n                    onItemClick(id);\n                  }\n                }}\n                active={activeDescendant && activeDescendant.id === id}\n              />\n            );\n          })}\n        </StyledEmailSummaryList>\n      </StyledEmailSummaryListContainer>\n    );\n  }\n);\n\nexport default EmailSummaryList;\n"]}
+{"version":3,"file":"EmailSummaryList.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createRef,\n  useMemo,\n  useState,\n  useEffect,\n  forwardRef,\n  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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGhF,OAAO,EAIL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAK/D,MAAM,WAAW,MAAM;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AACD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC,yGAAyG;IACzG,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACjD,2EAA2E;IAC3E,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,8KAA8K;IAC9K,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2GAA2G;IAC3G,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC5C,yIAAyI;IACzI,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAChE,wFAAwF;IACxF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,gIAAgI;IAChI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA6DD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CAwJtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGhF,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAO/D,MAAM,WAAW,MAAM;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AACD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC,yGAAyG;IACzG,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACjD,2EAA2E;IAC3E,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,8KAA8K;IAC9K,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2GAA2G;IAC3G,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC5C,yIAAyI;IACzI,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAChE,wFAAwF;IACxF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,gIAAgI;IAChI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA6DD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CAwJtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Feed/Feed.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Flex, Grid, Icon, Popover, Switch, Text, Progress, StyledProgressRing } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Flex, Grid, Icon, registerIcon, Popover, Switch, Text, Progress, StyledProgressRing } from '@pega/cosmos-react-core';
 import { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';
+import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
+import * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';
 import { FeedContext } from './Feed.context';
 import { StyledFeedNewPost } from './FeedNewPost';
 import { StyledFeedPost } from './FeedPost';
 import FeedButton from './FeedButton';
+registerIcon(filterIcon, filterOnIcon);
 const StyledFeed = styled.div(props => {
     return css `
     ${StyledFeedNewPost}:not(:last-child), ${StyledFeedPost}:not(:last-child) {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FeedContent.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAOH,YAAY,EAEb,MAAM,OAAO,CAAC;AAEf,OAAO,EAAgC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKrF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA6DpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FeedContent.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAOH,YAAY,EAEb,MAAM,OAAO,CAAC;AAEf,OAAO,EAAgC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKrF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAsEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}