@pega/cosmos-react-social 3.0.0-dev.12.0 → 3.0.0-dev.15.0

package/lib/components/Email/EmailSummaryList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createRef, useMemo, useState, useEffect, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton, Text, useActiveDescendant, useLazyDescendant, useConsolidatedRef, useI18n, menuHelpers, Progress, useItemIntersection, usePrevious, VisuallyHiddenText, EmptyState, calculateFontSize, StyledText } from '@pega/cosmos-react-core';
+import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton, useActiveDescendant, useLazyDescendant, useConsolidatedRef, useI18n, menuHelpers, Progress, useItemIntersection, usePrevious, VisuallyHiddenText, EmptyState, calculateFontSize, StyledText } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';
 import { StyledLoadMore } from './Email.styles';
@@ -117,13 +117,13 @@ const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories,
                 setAnnouncement(t('new_emails_count', [difference], { count: difference }));
         }
     }, [items]);
-    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [_jsxs(StyledEmailSummaryListHeader, { children: [_jsx(Text, { variant: 'h2', children: t('inbox') }), _jsxs(StyledActionWrapper, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(StyledWorklist, { text: buttonText, variant: 'text', menu: {
-                                    mode: 'single-select',
-                                    items: categories,
-                                    onItemClick: onCategoryClick
-                                } }), typeof unreadEmailCount === 'number' && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
-                                    count: unreadEmailCount
-                                }), variant: 'default', children: unreadEmailCount })), _jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }) })] })] }), items.length > 0 ? (_jsxs(StyledEmailSummaryList, { role: 'tablist', tabIndex: 0, ref: tablistRef, onFocus: e => {
+    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [_jsx(StyledEmailSummaryListHeader, { children: _jsxs(StyledActionWrapper, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(StyledWorklist, { text: buttonText, variant: 'text', menu: {
+                                mode: 'single-select',
+                                items: categories,
+                                onItemClick: onCategoryClick
+                            } }), typeof unreadEmailCount === 'number' && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
+                                count: unreadEmailCount
+                            }), variant: 'default', children: unreadEmailCount })), _jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }) })] }) }), items.length > 0 ? (_jsxs(StyledEmailSummaryList, { role: 'tablist', tabIndex: 0, ref: tablistRef, onFocus: e => {
                     if (!listHasBeenViewed && e.target.getAttribute('role') === 'tablist') {
                         setClickOnInitialView(true);
                         setListHasBeenViewed(true);

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"EntityList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EntityList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA6BjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EntityList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EntityList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAE7D,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAuFjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Email/EntityList.js

@@ -1,20 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Text, Flex, Icon, Card, CardHeader, CardContent } from '@pega/cosmos-react-core';
+import { forwardRef, useState, useEffect } from 'react';
+import { Text, Flex, Icon, Card, CardHeader, CardContent, useScrollToggle } from '@pega/cosmos-react-core';
+import ContextMenuPopover from './ContextMenuPopover';
 import { StyledEntityList } from './Email.styles';
 import EmailEntity from './EmailEntity';
-const EntityList = forwardRef(({ content, header }, ref) => {
+const EntityList = forwardRef(({ content, header, contextMenu }, ref) => {
+    const [open, showPopover] = useState(false);
+    const [currentTarget, setcurrentTarget] = useState({
+        targetNode: null,
+        cursorPosition: {
+            x: 0,
+            y: 0
+        }
+    });
+    const { disableScroll, enableScroll } = useScrollToggle();
     const fields = content.map(data => {
         return data.value
             ? {
                 ...data,
-                value: (_jsx(Flex, { container: { gap: 0.5, wrap: 'wrap' }, children: data.value.map(entityObject => {
+                value: (_jsx(Flex, { container: { gap: 0.5, wrap: 'wrap' }, onContextMenu: contextMenu
+                        ? (e) => {
+                            if (e.target instanceof HTMLElement && e.target.innerText.trim()) {
+                                e.preventDefault();
+                                showPopover(true);
+                                setcurrentTarget({
+                                    targetNode: e.target,
+                                    cursorPosition: {
+                                        x: e.pageX - window.scrollX,
+                                        y: e.pageY - window.scrollY
+                                    }
+                                });
+                            }
+                        }
+                        : undefined, children: data.value.map(entityObject => {
                         return _jsx(EmailEntity, { entity: entityObject.entity }, entityObject.id);
                     }) }))
             }
             : data;
     });
-    return (_jsxs(Card, { ref: ref, children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: header.icon }), _jsx(Text, { variant: 'h3', children: header.text })] }), _jsx(CardContent, { children: _jsx(StyledEntityList, { fields: fields, variant: 'stacked' }) })] }));
+    const { cursorPosition, targetNode } = currentTarget;
+    useEffect(() => {
+        if (open)
+            disableScroll();
+        else
+            enableScroll();
+    }, [open]);
+    return (_jsxs(Card, { ref: ref, onClick: open
+            ? () => {
+                showPopover(false);
+                setcurrentTarget({
+                    targetNode: null,
+                    cursorPosition: { x: 0, y: 0 }
+                });
+            }
+            : undefined, children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: header.icon }), _jsx(Text, { variant: 'h3', children: header.text })] }), _jsxs(CardContent, { children: [_jsx(StyledEntityList, { fields: fields, variant: 'stacked' }), contextMenu && open && (_jsx(ContextMenuPopover, { cursorPosition: cursorPosition, contextMenu: contextMenu, targetNode: targetNode }))] })] }));
 });
 export default EntityList;
 //# sourceMappingURL=EntityList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EntityList.js","sourceRoot":"","sources":["../../../src/components/Email/EntityList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAEvE,OAAO,EAEL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,EAAE,OAAO,EAAE,MAAM,EAAoC,EAAE,GAA2B,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK;YACf,CAAC,CAAC;gBACE,GAAG,IAAI;gBACP,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,YACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;wBAC7B,OAAO,KAAC,WAAW,IAAuB,MAAM,EAAE,YAAY,CAAC,MAAM,IAA5C,YAAY,CAAC,EAAE,CAAiC,CAAC;oBAC5E,CAAC,CAAC,GACG,CACR;aACF;YACH,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,aACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACrD,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,EAC3B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,IAAI,GAAQ,IAC5B,EACb,KAAC,WAAW,cACV,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,SAAS,GAAG,GAC1C,IACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  Flex,\n  Icon,\n  Card,\n  CardHeader,\n  CardContent\n} from '@pega/cosmos-react-core';\n\nimport { StyledEntityList } from './Email.styles';\nimport EmailEntity from './EmailEntity';\nimport { EntityListProps } from './Email.types';\n\nconst EntityList: FunctionComponent<EntityListProps & ForwardProps> = forwardRef(\n  ({ content, header }: PropsWithoutRef<EntityListProps>, ref: EntityListProps['ref']) => {\n    const fields = content.map(data => {\n      return data.value\n        ? {\n            ...data,\n            value: (\n              <Flex container={{ gap: 0.5, wrap: 'wrap' }}>\n                {data.value.map(entityObject => {\n                  return <EmailEntity key={entityObject.id} entity={entityObject.entity} />;\n                })}\n              </Flex>\n            )\n          }\n        : data;\n    });\n\n    return (\n      <Card ref={ref}>\n        <CardHeader container={{ alignItems: 'center', gap: 1 }}>\n          <Icon name={header.icon} />\n          <Text variant='h3'>{header.text}</Text>\n        </CardHeader>\n        <CardContent>\n          <StyledEntityList fields={fields} variant='stacked' />\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default EntityList;\n"]}
+{"version":3,"file":"EntityList.js","sourceRoot":"","sources":["../../../src/components/Email/EntityList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useState,\n  MouseEvent,\n  useEffect\n} from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  Flex,\n  Icon,\n  Card,\n  CardHeader,\n  CardContent,\n  useScrollToggle\n} from '@pega/cosmos-react-core';\n\nimport ContextMenuPopover from './ContextMenuPopover';\nimport { StyledEntityList } from './Email.styles';\nimport EmailEntity from './EmailEntity';\nimport { EntityListProps, TargetProps } from './Email.types';\n\nconst EntityList: FunctionComponent<EntityListProps & ForwardProps> = forwardRef(\n  (\n    { content, header, contextMenu }: PropsWithoutRef<EntityListProps>,\n    ref: EntityListProps['ref']\n  ) => {\n    const [open, showPopover] = useState(false);\n    const [currentTarget, setcurrentTarget] = useState<TargetProps>({\n      targetNode: null,\n      cursorPosition: {\n        x: 0,\n        y: 0\n      }\n    });\n    const { disableScroll, enableScroll } = useScrollToggle();\n\n    const fields = content.map(data => {\n      return data.value\n        ? {\n            ...data,\n            value: (\n              <Flex\n                container={{ gap: 0.5, wrap: 'wrap' }}\n                onContextMenu={\n                  contextMenu\n                    ? (e: MouseEvent<HTMLDivElement>) => {\n                        if (e.target instanceof HTMLElement && e.target.innerText.trim()) {\n                          e.preventDefault();\n                          showPopover(true);\n                          setcurrentTarget({\n                            targetNode: e.target,\n                            cursorPosition: {\n                              x: e.pageX - window.scrollX,\n                              y: e.pageY - window.scrollY\n                            }\n                          });\n                        }\n                      }\n                    : undefined\n                }\n              >\n                {data.value.map(entityObject => {\n                  return <EmailEntity key={entityObject.id} entity={entityObject.entity} />;\n                })}\n              </Flex>\n            )\n          }\n        : data;\n    });\n    const { cursorPosition, targetNode } = currentTarget;\n\n    useEffect(() => {\n      if (open) disableScroll();\n      else enableScroll();\n    }, [open]);\n\n    return (\n      <Card\n        ref={ref}\n        onClick={\n          open\n            ? () => {\n                showPopover(false);\n                setcurrentTarget({\n                  targetNode: null,\n                  cursorPosition: { x: 0, y: 0 }\n                });\n              }\n            : undefined\n        }\n      >\n        <CardHeader container={{ alignItems: 'center', gap: 1 }}>\n          <Icon name={header.icon} />\n          <Text variant='h3'>{header.text}</Text>\n        </CardHeader>\n        <CardContent>\n          <StyledEntityList fields={fields} variant='stacked' />\n          {contextMenu && open && (\n            <ContextMenuPopover\n              cursorPosition={cursorPosition}\n              contextMenu={contextMenu}\n              targetNode={targetNode as Node}\n            />\n          )}\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default EntityList;\n"]}

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

@@ -1,9 +1,10 @@
 export { default } from './Email';
-export { EmailUser, EmailProps, EmailComposerProps, EmailConversationProps, EmailShellProps, EntityListProps, EmailTemplate } from './Email.types';
+export { EmailUser, EmailProps, EmailComposerProps, EmailConversationProps, EmailShellProps, EntityListProps, EmailManagerProps, EmailTemplate, EmailSummaryListProps, EmailSummaryItemProps } from './Email.types';
 export { default as EmailConversation } from './EmailConversation';
 export { default as EmailShell } from './EmailShell';
 export { default as EmailComposer } from './EmailComposer';
 export { default as EmailSummaryItem } from './EmailSummaryItem';
 export { default as EmailSummaryList } from './EmailSummaryList';
 export { default as EntityList } from './EntityList';
+export { default as EmailManager } from './EmailManager';
 //# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Email/index.js

@@ -5,4 +5,5 @@ export { default as EmailComposer } from './EmailComposer';
 export { default as EmailSummaryItem } from './EmailSummaryItem';
 export { default as EmailSummaryList } from './EmailSummaryList';
 export { default as EntityList } from './EntityList';
+export { default as EmailManager } from './EmailManager';
 //# sourceMappingURL=index.js.map

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

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

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

@@ -2,7 +2,10 @@ import { Dispatch, SetStateAction } from 'react';
 import { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';
 import { MenuItemProps } from '@pega/cosmos-react-core';
 export interface FeedContextValue {
-    searchTypes?: string[];
+    searchTypes?: {
+        type: string;
+        component?: 'button' | 'link';
+    }[];
     onSearch?: (e: {
         type: 'mention' | 'tag';
         search: string;
@@ -16,6 +19,11 @@ export interface FeedContextValue {
         text: string;
         type: string;
     }) => JSX.Element | undefined;
+    onMentionPreview?: (e: {
+        id: string;
+        text: string;
+        type: string;
+    }) => void;
     onTagClick?: (tag: string) => void;
     interactionRenderers?: InteractionRenderers[];
     markdownMap?: MDMap;

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.context.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACzF,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;IAC5F,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;KACjB,CAAC;IACF,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,WAAW,2CAItB,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,gDAA2C,CAAC"}
+{"version":3,"file":"Feed.context.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;IAChE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACzF,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;IAC5F,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;KACjB,CAAC;IACF,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,WAAW,2CAItB,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,gDAA2C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.context.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAwBhE,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext, Dispatch, SetStateAction } from 'react';\n\nimport { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';\nimport { MenuItemProps } from '@pega/cosmos-react-core';\n\nexport interface FeedContextValue {\n  searchTypes?: string[];\n  onSearch?: (e: { type: 'mention' | 'tag'; search: string; mentionType: string }) => void;\n  searchResults?: MenuItemProps[];\n  showSearchResults?: boolean;\n  setShowSearchResults?: Dispatch<SetStateAction<boolean>>;\n  onMentionClick?: (e: { id: string; text: string; type: string }) => JSX.Element | undefined;\n  onTagClick?: (tag: string) => void;\n  interactionRenderers?: InteractionRenderers[];\n  markdownMap?: MDMap;\n  userInfo: {\n    username: string;\n    fullname: string;\n    avatarSrc?: string;\n    meta?: string[];\n  };\n  announce: (announcement: string) => void;\n}\n\nexport const FeedContext = createContext<FeedContextValue>({\n  searchTypes: [],\n  userInfo: { username: '', fullname: '' },\n  announce: () => {}\n});\n\nexport interface FeedReplyContextValue {\n  onShowReplyInput?: () => void;\n}\n\nexport const FeedReplyContext = createContext<FeedReplyContextValue>({});\n"]}
+{"version":3,"file":"Feed.context.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAyBhE,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext, Dispatch, SetStateAction } from 'react';\n\nimport { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';\nimport { MenuItemProps } from '@pega/cosmos-react-core';\n\nexport interface FeedContextValue {\n  searchTypes?: { type: string; component?: 'button' | 'link' }[];\n  onSearch?: (e: { type: 'mention' | 'tag'; search: string; mentionType: string }) => void;\n  searchResults?: MenuItemProps[];\n  showSearchResults?: boolean;\n  setShowSearchResults?: Dispatch<SetStateAction<boolean>>;\n  onMentionClick?: (e: { id: string; text: string; type: string }) => JSX.Element | undefined;\n  onMentionPreview?: (e: { id: string; text: string; type: string }) => void;\n  onTagClick?: (tag: string) => void;\n  interactionRenderers?: InteractionRenderers[];\n  markdownMap?: MDMap;\n  userInfo: {\n    username: string;\n    fullname: string;\n    avatarSrc?: string;\n    meta?: string[];\n  };\n  announce: (announcement: string) => void;\n}\n\nexport const FeedContext = createContext<FeedContextValue>({\n  searchTypes: [],\n  userInfo: { username: '', fullname: '' },\n  announce: () => {}\n});\n\nexport interface FeedReplyContextValue {\n  onShowReplyInput?: () => void;\n}\n\nexport const FeedReplyContext = createContext<FeedReplyContextValue>({});\n"]}

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

@@ -28,8 +28,10 @@ export interface FeedProps extends NoChildrenProp {
     onDecoratorSearch?: FeedContextValue['onSearch'];
     /** Results that will be shown in a Popover for a mention or tag search. */
     searchResults?: FeedContextValue['searchResults'];
-    /** 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. */
+    /** A callback that is triggered when a mention button is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component. */
     onMentionClick?: FeedContextValue['onMentionClick'];
+    /** A callback that is triggered when a mention link is previewed. The callback sends back the id, text, and type of the mention. */
+    onMentionPreview?: FeedContextValue['onMentionPreview'];
     /** A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. */
     onTagClick?: FeedContextValue['onTagClick'];
     /** A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern. */

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

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

package/lib/components/Feed/Feed.js

@@ -49,7 +49,7 @@ const StyledLoadMore = styled.div(({ theme }) => {
 });
 StyledLoadMore.defaultProps = defaultThemeProp;
 const Feed = (props) => {
-    const { loadingPosts = false, variant, children, userInfo, className, title, searchTypes, onDecoratorSearch, searchResults = [], onMentionClick, onTagClick, mentionContent, interactionRenderers = [], markdownMap, filters, onFilterChange, onLoadMore, newPostRegion, posts = [], ...restProps } = props;
+    const { loadingPosts = false, variant, children, userInfo, className, title, searchTypes, onDecoratorSearch, searchResults = [], onMentionClick, onMentionPreview, onTagClick, mentionContent, interactionRenderers = [], markdownMap, filters, onFilterChange, onLoadMore, newPostRegion, posts = [], ...restProps } = props;
     const t = useI18n();
     const [popoverEl, setPopoverEl] = useElement();
     const [buttonEl, setButtonEl] = useElement();
@@ -105,6 +105,7 @@ const Feed = (props) => {
             showSearchResults,
             setShowSearchResults,
             onMentionClick,
+            onMentionPreview,
             onTagClick,
             interactionRenderers,
             markdownMap,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FeedRichText.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAO,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;AAOlG,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,CAAC;IAC/F,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAuHtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FeedRichText.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAO,YAAY,EAAW,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;AAOlG,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,CAAC;IAC/F,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CA+HtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Feed/FeedRichText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, forwardRef, useState, useRef } from 'react';
-import { cap } from '@pega/cosmos-react-core';
+import { cap, useI18n } from '@pega/cosmos-react-core';
 import { RichTextEditor } from '@pega/cosmos-react-rte';
 import { MentionButtonConfig } from '../MentionButton';
 import { HashtagButtonConfig } from '../HashtagButton';
@@ -10,7 +10,8 @@ const FeedRichText = forwardRef((props, ref) => {
     const { searchTypes = [], onSearch, searchResults = [], showSearchResults, setShowSearchResults } = useContext(FeedContext);
     const [triggerType, setTriggerType] = useState('mention');
     const [showMentionType, setShowMentionType] = useState(false);
-    const searchType = useRef('');
+    const searchType = useRef({ type: '', component: '' });
+    const t = useI18n();
     const onDecoSearch = (event) => {
         const trigger = event.trigger === '@' ? 'mention' : 'tag';
         setTriggerType(trigger);
@@ -19,7 +20,7 @@ const FeedRichText = forwardRef((props, ref) => {
         }
         else {
             setShowMentionType(false);
-            onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current });
+            onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current.type });
         }
     };
     const onKeyDown = (event) => {
@@ -29,20 +30,26 @@ const FeedRichText = forwardRef((props, ref) => {
     };
     const typesMenu = {
         onItemActive: (id) => {
-            searchType.current = id;
+            searchType.current = {
+                type: id,
+                component: searchTypes.find(x => x.type === id)?.component || 'button'
+            };
         },
         onItemClick: (id) => {
-            searchType.current = id;
+            searchType.current = {
+                type: id,
+                component: searchTypes.find(x => x.type === id)?.component || 'button'
+            };
             setShowMentionType(false);
             onSearch?.({ type: 'mention', search: '', mentionType: id });
         },
-        items: searchTypes.map(type => {
+        items: searchTypes.map(({ type }) => {
             return { id: type, primary: cap(type) };
         })
     };
     const searchMenu = searchResults.length && showSearchResults
         ? {
-            header: triggerType === 'mention' ? `Mention a ${searchType.current}` : '',
+            header: triggerType === 'mention' ? t('mention_type', [searchType.current.type]) : '',
             items: searchResults
         }
         : undefined;
@@ -60,10 +67,11 @@ const FeedRichText = forwardRef((props, ref) => {
             const id = searchResult.groups.id;
             const text = searchResult.groups.text;
             const type = searchResult.groups.type;
+            const component = searchResult.groups.component || 'button';
             return {
                 markdown: searchResult.groups.match,
                 component: MentionButtonConfig.component,
-                props: { id, text, type },
+                props: { id, text, type, component },
                 text
             };
         }
@@ -77,13 +85,13 @@ const FeedRichText = forwardRef((props, ref) => {
                 return undefined;
             return {
                 markdown: triggerType === 'mention'
-                    ? `@${item.id}:${item.primary}:${searchType.current}:`
+                    ? `@${item.id}:${item.primary}:${searchType.current.type}:${searchType.current.component}:`
                     : `#${item.id}:`,
                 component: triggerType === 'mention'
                     ? MentionButtonConfig.component
                     : HashtagButtonConfig.component,
                 props: triggerType === 'mention'
-                    ? { id: item.id, text: item.primary, type: searchType.current, tabIndex: -1 }
+                    ? { id: item.id, text: item.primary, ...searchType.current, tabIndex: -1 }
                     : { tag: item.primary, tabIndex: -1 },
                 text: item.primary
             };

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

@@ -1 +1 @@
-{"version":3,"file":"FeedRichText.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, forwardRef, Ref, useState, useRef } from 'react';\n\nimport { cap, ForwardProps } from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { MentionButtonConfig } from '../MentionButton';\nimport { HashtagButtonConfig } from '../HashtagButton';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedRichTextProps\n  extends Pick<RichTextEditorProps, 'onChange' | 'onFocus' | 'onBlur' | 'placeholder' | 'height'> {\n  onSubmit: () => void;\n}\n\nconst FeedRichText: FC<FeedRichTextProps & ForwardProps> = forwardRef(\n  (props: FeedRichTextProps, ref: Ref<RichTextEditorState>) => {\n    const { onSubmit, height = { min: 'auto' }, ...restProps } = props;\n    const {\n      searchTypes = [],\n      onSearch,\n      searchResults = [],\n      showSearchResults,\n      setShowSearchResults\n    } = useContext(FeedContext);\n    const [triggerType, setTriggerType] = useState<'mention' | 'tag'>('mention');\n    const [showMentionType, setShowMentionType] = useState(false);\n    const searchType = useRef('');\n\n    const onDecoSearch = (event: { search: string; trigger: string }) => {\n      const trigger = event.trigger === '@' ? 'mention' : 'tag';\n      setTriggerType(trigger);\n      if (trigger === 'mention' && event.search === '') {\n        setShowMentionType(true);\n      } else {\n        setShowMentionType(false);\n        onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current });\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      setShowSearchResults?.(true);\n      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') onSubmit();\n    };\n\n    const typesMenu = {\n      onItemActive: (id: string) => {\n        searchType.current = id;\n      },\n      onItemClick: (id: string) => {\n        searchType.current = id;\n        setShowMentionType(false);\n        onSearch?.({ type: 'mention', search: '', mentionType: id });\n      },\n      items: searchTypes.map(type => {\n        return { id: type, primary: cap(type) };\n      })\n    };\n\n    const searchMenu =\n      searchResults.length && showSearchResults\n        ? {\n            header: triggerType === 'mention' ? `Mention a ${searchType.current}` : '',\n            items: searchResults\n          }\n        : undefined;\n\n    const getSearchAttributes = (searchResult: RegExpExecArray) => {\n      if (searchResult.groups) {\n        if (searchResult.groups.tag) {\n          const tag = searchResult.groups.tag;\n\n          return {\n            markdown: searchResult.groups.match,\n            component: HashtagButtonConfig.component,\n            props: { tag },\n            text: tag\n          };\n        }\n\n        const id = searchResult.groups.id;\n        const text = searchResult.groups.text;\n        const type = searchResult.groups.type;\n\n        return {\n          markdown: searchResult.groups.match,\n          component: MentionButtonConfig.component,\n          props: { id, text, type },\n          text\n        };\n      }\n    };\n\n    return (\n      <RichTextEditor\n        {...restProps}\n        markdownOnly\n        onKeyDown={onKeyDown}\n        ref={ref}\n        height={height}\n        searchTriggers={[\n          { trigger: '@', regex: String.raw`(?:\\S+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\S]?|)` },\n          { trigger: '#', regex: String.raw`[^\\s,]*` }\n        ]}\n        getSearchItemReplacement={(id: string) => {\n          const item = searchResults?.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown:\n              triggerType === 'mention'\n                ? `@${item.id}:${item.primary}:${searchType.current}:`\n                : `#${item.id}:`,\n            component:\n              triggerType === 'mention'\n                ? MentionButtonConfig.component\n                : HashtagButtonConfig.component,\n            props:\n              triggerType === 'mention'\n                ? { id: item.id, text: item.primary, type: searchType.current, tabIndex: -1 }\n                : { tag: item.primary, tabIndex: -1 },\n            text: item.primary\n          };\n        }}\n        searchRenderers={[\n          { regexPattern: MentionButtonConfig.regexPattern, getSearchAttributes },\n          { regexPattern: HashtagButtonConfig.regexPattern, getSearchAttributes }\n        ]}\n        onSearch={onDecoSearch}\n        menu={showMentionType ? typesMenu : searchMenu}\n      />\n    );\n  }\n);\n\nexport default FeedRichText;\n"]}
+{"version":3,"file":"FeedRichText.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, forwardRef, Ref, useState, useRef } from 'react';\n\nimport { cap, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { MentionButtonConfig } from '../MentionButton';\nimport { HashtagButtonConfig } from '../HashtagButton';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedRichTextProps\n  extends Pick<RichTextEditorProps, 'onChange' | 'onFocus' | 'onBlur' | 'placeholder' | 'height'> {\n  onSubmit: () => void;\n}\n\nconst FeedRichText: FC<FeedRichTextProps & ForwardProps> = forwardRef(\n  (props: FeedRichTextProps, ref: Ref<RichTextEditorState>) => {\n    const { onSubmit, height = { min: 'auto' }, ...restProps } = props;\n    const {\n      searchTypes = [],\n      onSearch,\n      searchResults = [],\n      showSearchResults,\n      setShowSearchResults\n    } = useContext(FeedContext);\n    const [triggerType, setTriggerType] = useState<'mention' | 'tag'>('mention');\n    const [showMentionType, setShowMentionType] = useState(false);\n    const searchType = useRef({ type: '', component: '' });\n    const t = useI18n();\n\n    const onDecoSearch = (event: { search: string; trigger: string }) => {\n      const trigger = event.trigger === '@' ? 'mention' : 'tag';\n      setTriggerType(trigger);\n      if (trigger === 'mention' && event.search === '') {\n        setShowMentionType(true);\n      } else {\n        setShowMentionType(false);\n        onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current.type });\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      setShowSearchResults?.(true);\n      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') onSubmit();\n    };\n\n    const typesMenu = {\n      onItemActive: (id: string) => {\n        searchType.current = {\n          type: id,\n          component: searchTypes.find(x => x.type === id)?.component || 'button'\n        };\n      },\n      onItemClick: (id: string) => {\n        searchType.current = {\n          type: id,\n          component: searchTypes.find(x => x.type === id)?.component || 'button'\n        };\n        setShowMentionType(false);\n        onSearch?.({ type: 'mention', search: '', mentionType: id });\n      },\n      items: searchTypes.map(({ type }) => {\n        return { id: type, primary: cap(type) };\n      })\n    };\n\n    const searchMenu =\n      searchResults.length && showSearchResults\n        ? {\n            header: triggerType === 'mention' ? t('mention_type', [searchType.current.type]) : '',\n            items: searchResults\n          }\n        : undefined;\n\n    const getSearchAttributes = (searchResult: RegExpExecArray) => {\n      if (searchResult.groups) {\n        if (searchResult.groups.tag) {\n          const tag = searchResult.groups.tag;\n\n          return {\n            markdown: searchResult.groups.match,\n            component: HashtagButtonConfig.component,\n            props: { tag },\n            text: tag\n          };\n        }\n\n        const id = searchResult.groups.id;\n        const text = searchResult.groups.text;\n        const type = searchResult.groups.type;\n        const component = searchResult.groups.component || 'button';\n\n        return {\n          markdown: searchResult.groups.match,\n          component: MentionButtonConfig.component,\n          props: { id, text, type, component },\n          text\n        };\n      }\n    };\n\n    return (\n      <RichTextEditor\n        {...restProps}\n        markdownOnly\n        onKeyDown={onKeyDown}\n        ref={ref}\n        height={height}\n        searchTriggers={[\n          { trigger: '@', regex: String.raw`(?:\\S+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\S]?|)` },\n          { trigger: '#', regex: String.raw`[^\\s,]*` }\n        ]}\n        getSearchItemReplacement={(id: string) => {\n          const item = searchResults?.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown:\n              triggerType === 'mention'\n                ? `@${item.id}:${item.primary}:${searchType.current.type}:${searchType.current.component}:`\n                : `#${item.id}:`,\n            component:\n              triggerType === 'mention'\n                ? MentionButtonConfig.component\n                : HashtagButtonConfig.component,\n            props:\n              triggerType === 'mention'\n                ? { id: item.id, text: item.primary, ...searchType.current, tabIndex: -1 }\n                : { tag: item.primary, tabIndex: -1 },\n            text: item.primary\n          };\n        }}\n        searchRenderers={[\n          { regexPattern: MentionButtonConfig.regexPattern, getSearchAttributes },\n          { regexPattern: HashtagButtonConfig.regexPattern, getSearchAttributes }\n        ]}\n        onSearch={onDecoSearch}\n        menu={showMentionType ? typesMenu : searchMenu}\n      />\n    );\n  }\n);\n\nexport default FeedRichText;\n"]}

package/lib/components/MentionButton/MentionButton.d.ts

@@ -9,6 +9,8 @@ interface MentionButtonProps {
     text?: string;
     /** Designates the type of the mention for proper handling on click. */
     type?: string;
+    /** Designates the render component for the mention, either a button or link. */
+    component?: 'button' | 'link';
 }
 declare const MentionButton: FunctionComponent<MentionButtonProps & ForwardProps>;
 export declare const MentionButtonConfig: {

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

@@ -1 +1 @@
-{"version":3,"file":"MentionButton.d.ts","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAIjC,UAAU,kBAAkB;IAC1B,4EAA4E;IAC5E,QAAQ,EAAE,eAAe,GAAG,YAAY,CAAC;IACzC,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA2EvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;CAI/B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MentionButton.d.ts","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAIjC,UAAU,kBAAkB;IAC1B,4EAA4E;IAC5E,QAAQ,EAAE,eAAe,GAAG,YAAY,CAAC;IACzC,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC/B;AAkBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAsGvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;CAK/B,CAAC;AAEF,eAAe,aAAa,CAAC"}