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

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

@@ -13,7 +13,7 @@ interface ReplyFeedLikeButtonProps extends BaseFeedLikeButtonProps {
     variant: 'reply';
     onLikeClick: FeedReplyProps['onLikeClick'];
 }
-export declare type FeedLikeButtonProps = PostFeedLikeButtonProps | ReplyFeedLikeButtonProps;
+export type FeedLikeButtonProps = PostFeedLikeButtonProps | ReplyFeedLikeButtonProps;
 export declare const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps>;
 export {};
 //# sourceMappingURL=FeedLikeButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedLikeButton.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAGnG,OAAO,EACL,YAAY,EACZ,UAAU,EAcX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAMnD,UAAU,uBACR,SAAQ,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,cAAc,GAAG,qBAAqB,CAAC,EAC1F,IAAI,CAAC,aAAa,EAAE,iBAAiB,GAAG,wBAAwB,GAAG,IAAI,GAAG,cAAc,CAAC,EACzF,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,uBAAwB,SAAQ,uBAAuB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,UAAU,wBAAyB,SAAQ,uBAAuB;IAChE,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,oBAAY,mBAAmB,GAAG,uBAAuB,GAAG,wBAAwB,CAAC;AAErF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA8HjE,CAAC"}
+{"version":3,"file":"FeedLikeButton.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAGnG,OAAO,EACL,YAAY,EACZ,UAAU,EAiBX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQnD,UAAU,uBACR,SAAQ,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,cAAc,GAAG,qBAAqB,CAAC,EAC1F,IAAI,CAAC,aAAa,EAAE,iBAAiB,GAAG,wBAAwB,GAAG,IAAI,GAAG,cAAc,CAAC,EACzF,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,uBAAwB,SAAQ,uBAAuB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,UAAU,wBAAyB,SAAQ,uBAAuB;IAChE,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;CAC5C;AAED,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG,wBAAwB,CAAC;AAErF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAmIjE,CAAC"}

package/lib/components/Feed/FeedLikeButton.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useContext, useMemo, useRef, useEffect } from 'react';
 import styled from 'styled-components';
-import { Button, Icon, Text, Avatar, MetaList, Count, Tooltip, useModalManager, useI18n, useConfiguration, useElement, formatListToLocaleString } from '@pega/cosmos-react-core';
+import { Button, Icon, Text, Avatar, MetaList, Count, Tooltip, useModalManager, useI18n, useConfiguration, useElement, formatListToLocaleString, Flex, defaultThemeProp, useUID } from '@pega/cosmos-react-core';
 import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
 import { FeedContext } from './Feed.context';
 import FeedButton from './FeedButton';
@@ -9,14 +9,16 @@ import FeedModalList from './FeedModalList';
 const InlineBareButton = styled(BareRoleButton) `
   display: inline-block;
 `;
+InlineBareButton.defaultProps = defaultThemeProp;
 export const FeedLikeButton = forwardRef((props, ref) => {
     const { id, showText, onLikeCountInteraction, likesLoading, onLoadMoreLikes, liked, likeLabel, likeCount = 0, likes = [] } = props;
     const t = useI18n();
     const { locale } = useConfiguration();
     const { create } = useModalManager();
-    const { announce, userInfo: loggedInUser } = useContext(FeedContext);
+    const { userInfo: loggedInUser } = useContext(FeedContext);
     const [countEl, setCountEl] = useElement(null);
     const likesModalRef = useRef();
+    const likeCountId = useUID();
     useEffect(() => {
         likesModalRef.current?.update({
             count: likeCount,
@@ -30,18 +32,18 @@ export const FeedLikeButton = forwardRef((props, ref) => {
         const likesList = likes.map(x => x.primary.toString());
         return {
             ariaLabel: likeCount
-                ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {
+                ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList.slice(0, 2), t, locale, {
                     count: likeCount
                 })}`
                 : t('feed_post_likes', [likeCount], { count: likeCount }),
-            label: formatListToLocaleString(likesList, t, locale, {
+            label: formatListToLocaleString(likesList.slice(0, 2), t, locale, {
                 count: likeCount,
                 separator: '\n'
             })
         };
     }, [likes, likeCount]);
     const onLikeCountClick = () => {
-        if (likes.length && likeCount > 10) {
+        if (likes.length) {
             likesModalRef.current = create(FeedModalList, {
                 count: likeCount,
                 heading: t('feed_likes'),
@@ -54,37 +56,33 @@ export const FeedLikeButton = forwardRef((props, ref) => {
             onLikeCountInteraction?.();
         }
     };
-    useEffect(() => {
-        const timeoutId = announce(t(`feed_post_${liked ? 'liked' : 'deliked'}`));
-        return () => clearTimeout(timeoutId);
-    }, [liked]);
-    return (_jsxs(Button, { variant: 'text', as: FeedButton, onClick: () => {
-            const user = {
-                id: loggedInUser.username,
-                primary: loggedInUser.fullname,
-                secondary: loggedInUser.meta ? _jsx(MetaList, { items: loggedInUser.meta }) : undefined,
-                visual: (_jsx(Avatar, { size: 'l', imageSrc: loggedInUser.avatarSrc, name: loggedInUser.fullname }))
-            };
-            let eventObj;
-            if (props.variant === 'post') {
-                eventObj = {
-                    postId: id,
-                    user
-                };
-                props.onLikeClick(eventObj);
-            }
-            else {
-                eventObj = {
-                    replyId: id,
-                    user
-                };
-                props.onLikeClick(eventObj);
-            }
-        }, emphasized: liked, label: showText ? undefined : likeLabel, "aria-label": showText ? likeLabel : undefined, ref: ref, children: [_jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }), showText && _jsx(Text, { children: likeLabel }), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineBareButton, { ref: setCountEl, role: likes.length ? 'button' : undefined, onClick: onLikeCountClick, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, tabIndex: 0, onKeyDown: (e) => {
+    return (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsxs(Button, { variant: 'text', as: FeedButton, onClick: () => {
+                    const user = {
+                        id: loggedInUser.username,
+                        primary: loggedInUser.fullname,
+                        secondary: loggedInUser.meta ? _jsx(MetaList, { items: loggedInUser.meta }) : undefined,
+                        visual: (_jsx(Avatar, { size: 'l', imageSrc: loggedInUser.avatarSrc, name: loggedInUser.fullname }))
+                    };
+                    let eventObj;
+                    if (props.variant === 'post') {
+                        eventObj = {
+                            postId: id,
+                            user
+                        };
+                        props.onLikeClick(eventObj);
+                    }
+                    else {
+                        eventObj = {
+                            replyId: id,
+                            user
+                        };
+                        props.onLikeClick(eventObj);
+                    }
+                }, emphasized: liked, "aria-pressed": liked, label: showText ? undefined : likeLabel, "aria-label": showText ? likeLabel : undefined, "aria-describedby": likeCount > 0 ? likeCountId : undefined, ref: ref, children: [_jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }), showText && _jsx(Text, { children: likeLabel })] }), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineBareButton, { ref: setCountEl, role: likes.length ? 'button' : undefined, onClick: onLikeCountClick, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 e.preventDefault();
                                 onLikeCountClick();
                             }
-                        }, children: _jsx(Count, { children: likeCount }) }), _jsx(Tooltip, { target: countEl, showDelay: 'none', hideDelay: 'none', children: likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount }) })] }))] }));
+                        }, children: _jsx(Count, { id: likeCountId, "aria-label": t('feed_post_likes', [likeCount], { count: likeCount }), children: likeCount }) }), _jsx(Tooltip, { target: countEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount }) })] }))] }));
 });
 //# sourceMappingURL=FeedLikeButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  ForwardProps,\n  OmitStrict,\n  Button,\n  Icon,\n  Text,\n  Avatar,\n  MetaList,\n  Count,\n  Tooltip,\n  ModalMethods,\n  useModalManager,\n  useI18n,\n  useConfiguration,\n  useElement,\n  formatListToLocaleString\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedPostProps } from './FeedPost.types';\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList, { FeedModalListProps } from './FeedModalList';\nimport { FeedReplyProps } from './FeedReply.types';\n\nconst InlineBareButton = styled(BareRoleButton)`\n  display: inline-block;\n`;\n\ninterface BaseFeedLikeButtonProps\n  extends OmitStrict<FeedPostProps['interactionInfo'], 'commentLabel' | 'interactionsEnabled'>,\n    Pick<FeedPostProps, 'onLoadMoreLikes' | 'onLikeCountInteraction' | 'id' | 'likesLoading'>,\n    Pick<FeedPostProps['info'], 'liked'> {\n  showText?: boolean;\n}\n\ninterface PostFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n  variant: 'post';\n  onLikeClick: FeedPostProps['onLikeClick'];\n}\n\ninterface ReplyFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n  variant: 'reply';\n  onLikeClick: FeedReplyProps['onLikeClick'];\n}\n\nexport type FeedLikeButtonProps = PostFeedLikeButtonProps | ReplyFeedLikeButtonProps;\n\nexport const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(\n  (props, ref: Ref<HTMLButtonElement>) => {\n    const {\n      id,\n      showText,\n      onLikeCountInteraction,\n      likesLoading,\n      onLoadMoreLikes,\n      liked,\n      likeLabel,\n      likeCount = 0,\n      likes = []\n    } = props;\n    const t = useI18n();\n    const { locale } = useConfiguration();\n    const { create } = useModalManager();\n    const { announce, userInfo: loggedInUser } = useContext(FeedContext);\n    const [countEl, setCountEl] = useElement(null);\n    const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n\n    useEffect(() => {\n      likesModalRef.current?.update({\n        count: likeCount,\n        heading: likeLabel,\n        listItems: likes,\n        onLoadMore: onLoadMoreLikes,\n        loading: likesLoading\n      });\n    }, [likeCount, likeLabel, likes, onLoadMoreLikes, likesLoading]);\n\n    const likesAttributes = useMemo(() => {\n      const likesList = likes.map(x => x.primary.toString());\n      return {\n        ariaLabel: likeCount\n          ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {\n              count: likeCount\n            })}`\n          : t('feed_post_likes', [likeCount], { count: likeCount }),\n        label: formatListToLocaleString(likesList, t, locale, {\n          count: likeCount,\n          separator: '\\n'\n        })\n      };\n    }, [likes, likeCount]);\n\n    const onLikeCountClick = () => {\n      if (likes.length && likeCount > 10) {\n        likesModalRef.current = create(FeedModalList, {\n          count: likeCount,\n          heading: t('feed_likes'),\n          listItems: likes,\n          onLoadMore: onLoadMoreLikes,\n          loading: likesLoading\n        });\n      } else {\n        onLikeCountInteraction?.();\n      }\n    };\n\n    useEffect(() => {\n      const timeoutId = announce(t(`feed_post_${liked ? 'liked' : 'deliked'}`));\n      return () => clearTimeout(timeoutId);\n    }, [liked]);\n\n    return (\n      <Button\n        variant='text'\n        as={FeedButton}\n        onClick={() => {\n          const user = {\n            id: loggedInUser.username,\n            primary: loggedInUser.fullname,\n            secondary: loggedInUser.meta ? <MetaList items={loggedInUser.meta} /> : undefined,\n            visual: (\n              <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n            )\n          };\n          let eventObj;\n          if (props.variant === 'post') {\n            eventObj = {\n              postId: id,\n              user\n            } as const;\n            props.onLikeClick(eventObj);\n          } else {\n            eventObj = {\n              replyId: id,\n              user\n            } as const;\n            props.onLikeClick(eventObj);\n          }\n        }}\n        emphasized={liked}\n        label={showText ? undefined : likeLabel}\n        aria-label={showText ? likeLabel : undefined}\n        ref={ref}\n      >\n        <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n        {showText && <Text>{likeLabel}</Text>}\n        {likeCount > 0 && (\n          <>\n            <InlineBareButton\n              ref={setCountEl}\n              role={likes.length ? 'button' : undefined}\n              onClick={onLikeCountClick}\n              onFocus={onLikeCountInteraction}\n              onMouseOver={onLikeCountInteraction}\n              aria-label={likesAttributes.ariaLabel}\n              tabIndex={0}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  onLikeCountClick();\n                }\n              }}\n            >\n              <Count>{likeCount}</Count>\n            </InlineBareButton>\n            <Tooltip target={countEl} showDelay='none' hideDelay='none'>\n              {likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount })}\n            </Tooltip>\n          </>\n        )}\n      </Button>\n    );\n  }\n);\n"]}
+{"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  ForwardProps,\n  OmitStrict,\n  Button,\n  Icon,\n  Text,\n  Avatar,\n  MetaList,\n  Count,\n  Tooltip,\n  ModalMethods,\n  useModalManager,\n  useI18n,\n  useConfiguration,\n  useElement,\n  formatListToLocaleString,\n  Flex,\n  defaultThemeProp,\n  useUID\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedPostProps } from './FeedPost.types';\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList, { FeedModalListProps } from './FeedModalList';\nimport { FeedReplyProps } from './FeedReply.types';\n\nconst InlineBareButton = styled(BareRoleButton)`\n  display: inline-block;\n`;\n\nInlineBareButton.defaultProps = defaultThemeProp;\n\ninterface BaseFeedLikeButtonProps\n  extends OmitStrict<FeedPostProps['interactionInfo'], 'commentLabel' | 'interactionsEnabled'>,\n    Pick<FeedPostProps, 'onLoadMoreLikes' | 'onLikeCountInteraction' | 'id' | 'likesLoading'>,\n    Pick<FeedPostProps['info'], 'liked'> {\n  showText?: boolean;\n}\n\ninterface PostFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n  variant: 'post';\n  onLikeClick: FeedPostProps['onLikeClick'];\n}\n\ninterface ReplyFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n  variant: 'reply';\n  onLikeClick: FeedReplyProps['onLikeClick'];\n}\n\nexport type FeedLikeButtonProps = PostFeedLikeButtonProps | ReplyFeedLikeButtonProps;\n\nexport const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(\n  (props, ref: Ref<HTMLButtonElement>) => {\n    const {\n      id,\n      showText,\n      onLikeCountInteraction,\n      likesLoading,\n      onLoadMoreLikes,\n      liked,\n      likeLabel,\n      likeCount = 0,\n      likes = []\n    } = props;\n    const t = useI18n();\n    const { locale } = useConfiguration();\n    const { create } = useModalManager();\n    const { userInfo: loggedInUser } = useContext(FeedContext);\n    const [countEl, setCountEl] = useElement(null);\n    const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n    const likeCountId = useUID();\n\n    useEffect(() => {\n      likesModalRef.current?.update({\n        count: likeCount,\n        heading: likeLabel,\n        listItems: likes,\n        onLoadMore: onLoadMoreLikes,\n        loading: likesLoading\n      });\n    }, [likeCount, likeLabel, likes, onLoadMoreLikes, likesLoading]);\n\n    const likesAttributes = useMemo(() => {\n      const likesList = likes.map(x => x.primary.toString());\n      return {\n        ariaLabel: likeCount\n          ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n              count: likeCount\n            })}`\n          : t('feed_post_likes', [likeCount], { count: likeCount }),\n        label: formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n          count: likeCount,\n          separator: '\\n'\n        })\n      };\n    }, [likes, likeCount]);\n\n    const onLikeCountClick = () => {\n      if (likes.length) {\n        likesModalRef.current = create(FeedModalList, {\n          count: likeCount,\n          heading: t('feed_likes'),\n          listItems: likes,\n          onLoadMore: onLoadMoreLikes,\n          loading: likesLoading\n        });\n      } else {\n        onLikeCountInteraction?.();\n      }\n    };\n\n    return (\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          variant='text'\n          as={FeedButton}\n          onClick={() => {\n            const user = {\n              id: loggedInUser.username,\n              primary: loggedInUser.fullname,\n              secondary: loggedInUser.meta ? <MetaList items={loggedInUser.meta} /> : undefined,\n              visual: (\n                <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n              )\n            };\n            let eventObj;\n            if (props.variant === 'post') {\n              eventObj = {\n                postId: id,\n                user\n              } as const;\n              props.onLikeClick(eventObj);\n            } else {\n              eventObj = {\n                replyId: id,\n                user\n              } as const;\n              props.onLikeClick(eventObj);\n            }\n          }}\n          emphasized={liked}\n          aria-pressed={liked}\n          label={showText ? undefined : likeLabel}\n          aria-label={showText ? likeLabel : undefined}\n          aria-describedby={likeCount > 0 ? likeCountId : undefined}\n          ref={ref}\n        >\n          <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n          {showText && <Text>{likeLabel}</Text>}\n        </Button>\n        {likeCount > 0 && (\n          <>\n            <InlineBareButton\n              ref={setCountEl}\n              role={likes.length ? 'button' : undefined}\n              onClick={onLikeCountClick}\n              onFocus={onLikeCountInteraction}\n              onMouseOver={onLikeCountInteraction}\n              aria-label={likesAttributes.ariaLabel}\n              tabIndex={0}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (e.key === 'Enter') {\n                  e.preventDefault();\n                  onLikeCountClick();\n                }\n              }}\n            >\n              <Count\n                id={likeCountId}\n                aria-label={t('feed_post_likes', [likeCount], { count: likeCount })}\n              >\n                {likeCount}\n              </Count>\n            </InlineBareButton>\n            <Tooltip target={countEl} showDelay='none' hideDelay='none' describeTarget={false}>\n              {likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount })}\n            </Tooltip>\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n"]}

package/lib/components/Feed/FeedModalList.js

@@ -22,7 +22,7 @@ const FeedModalList = ({ loading, count, heading, listItems, onLoadMore }) => {
     }, [loading]);
     useEffect(() => {
         if (prevItems) {
-            const difference = listItems.length - prevItems?.length;
+            const difference = listItems.length - prevItems.length;
             if (difference > 0)
                 setAnnouncementText(t('new_item_added', [difference], { count: difference }));
         }

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

@@ -1 +1 @@
-{"version":3,"file":"FeedModalList.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAe5C,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACS,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO;YAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,EAAE,MAAM,CAAC;YACxD,IAAI,UAAU,GAAG,CAAC;gBAChB,mBAAmB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;SACjF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,mBAAmB,CACjB,OAAO,EACP,SAAS,CAAC,MAAM,GAAG,CAAC,EACpB,GAAG,EAAE;QACH,UAAU,EAAE,EAAE,CAAC;IACjB,CAAC,EACD,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,MAAC,KAAK,IACJ,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACxB,OAAO,EACR,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,YAC3C,KAAK,GACD,IACF,EAET,GAAG,EAAE,OAAO,aAEZ,KAAC,aAAa,cAAE,gBAAgB,GAAiB,EACjD,KAAC,gBAAgB,IAAC,KAAK,EAAE,SAAS,GAAI,EACrC,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YACxD,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC1B,CACR,IACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useRef, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  SummaryListItem,\n  defaultThemeProp,\n  Flex,\n  Progress,\n  Count,\n  Modal,\n  SummaryListItems,\n  useItemIntersection,\n  usePrevious,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport FeedAnnouncer from './FeedAnnouncer';\n\nexport interface FeedModalListProps {\n  /** The count for the list of items. */\n  count: number;\n  /** The heading for the Modal. */\n  heading: string;\n  /** The list of MenuItems to render in the Modal. */\n  listItems: SummaryListItem[];\n  /** A callback that is triggered when the bottom of the Modal list is scrolled into view so that additional data may be displayed. */\n  onLoadMore?: () => void;\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n}\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 FeedModalList: FC<FeedModalListProps> = ({\n  loading,\n  count,\n  heading,\n  listItems,\n  onLoadMore\n}: FeedModalListProps) => {\n  const t = useI18n();\n  const listRef = useRef(null);\n  const prevItems = usePrevious(listItems);\n  const [announcementText, setAnnouncementText] = useState('');\n\n  useEffect(() => {\n    if (loading) setAnnouncementText(t('loading'));\n  }, [loading]);\n\n  useEffect(() => {\n    if (prevItems) {\n      const difference = listItems.length - prevItems?.length;\n      if (difference > 0)\n        setAnnouncementText(t('new_item_added', [difference], { count: difference }));\n    }\n  }, [listItems]);\n\n  useItemIntersection(\n    listRef,\n    listItems.length - 1,\n    () => {\n      onLoadMore?.();\n    },\n    ':scope li'\n  );\n\n  return (\n    <Modal\n      heading={\n        <Flex container={{ gap: 1 }}>\n          {heading}\n          <Flex item={{ alignSelf: 'center' }} as={Count}>\n            {count}\n          </Flex>\n        </Flex>\n      }\n      ref={listRef}\n    >\n      <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n      <SummaryListItems items={listItems} />\n      {loading && (\n        <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n          <Progress placement='inline' />\n        </Flex>\n      )}\n    </Modal>\n  );\n};\n\nexport default FeedModalList;\n"]}
+{"version":3,"file":"FeedModalList.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAe5C,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACS,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO;YAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;YACvD,IAAI,UAAU,GAAG,CAAC;gBAChB,mBAAmB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;SACjF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,mBAAmB,CACjB,OAAO,EACP,SAAS,CAAC,MAAM,GAAG,CAAC,EACpB,GAAG,EAAE;QACH,UAAU,EAAE,EAAE,CAAC;IACjB,CAAC,EACD,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,MAAC,KAAK,IACJ,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACxB,OAAO,EACR,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,YAC3C,KAAK,GACD,IACF,EAET,GAAG,EAAE,OAAO,aAEZ,KAAC,aAAa,cAAE,gBAAgB,GAAiB,EACjD,KAAC,gBAAgB,IAAC,KAAK,EAAE,SAAS,GAAI,EACrC,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YACxD,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC1B,CACR,IACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useRef, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  SummaryListItem,\n  defaultThemeProp,\n  Flex,\n  Progress,\n  Count,\n  Modal,\n  SummaryListItems,\n  useItemIntersection,\n  usePrevious,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport FeedAnnouncer from './FeedAnnouncer';\n\nexport interface FeedModalListProps {\n  /** The count for the list of items. */\n  count: number;\n  /** The heading for the Modal. */\n  heading: string;\n  /** The list of MenuItems to render in the Modal. */\n  listItems: SummaryListItem[];\n  /** A callback that is triggered when the bottom of the Modal list is scrolled into view so that additional data may be displayed. */\n  onLoadMore?: () => void;\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n}\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 FeedModalList: FC<FeedModalListProps> = ({\n  loading,\n  count,\n  heading,\n  listItems,\n  onLoadMore\n}: FeedModalListProps) => {\n  const t = useI18n();\n  const listRef = useRef(null);\n  const prevItems = usePrevious(listItems);\n  const [announcementText, setAnnouncementText] = useState('');\n\n  useEffect(() => {\n    if (loading) setAnnouncementText(t('loading'));\n  }, [loading]);\n\n  useEffect(() => {\n    if (prevItems) {\n      const difference = listItems.length - prevItems.length;\n      if (difference > 0)\n        setAnnouncementText(t('new_item_added', [difference], { count: difference }));\n    }\n  }, [listItems]);\n\n  useItemIntersection(\n    listRef,\n    listItems.length - 1,\n    () => {\n      onLoadMore?.();\n    },\n    ':scope li'\n  );\n\n  return (\n    <Modal\n      heading={\n        <Flex container={{ gap: 1 }}>\n          {heading}\n          <Flex item={{ alignSelf: 'center' }} as={Count}>\n            {count}\n          </Flex>\n        </Flex>\n      }\n      ref={listRef}\n    >\n      <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n      <SummaryListItems items={listItems} />\n      {loading && (\n        <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n          <Progress placement='inline' />\n        </Flex>\n      )}\n    </Modal>\n  );\n};\n\nexport default FeedModalList;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAkC,MAAM,OAAO,CAAC;AAGrE,OAAO,EAaL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAA4B,EAE1B,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,sFAAsF;IACtF,eAAe,EAAE;QACf,mBAAmB,EAAE,MAAM,CAAC;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,sGAAsG;IACtG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAChD,yEAAyE;IACzE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,UAAU,EAAE,iBAAiB,EAAE,CAAC;QAChC,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,IAAI,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,uBAAuB,yGAYlC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAU5B,CAAC;AAQH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CA6JpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAkC,MAAM,OAAO,CAAC;AAGrE,OAAO,EAaL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAA4B,EAE1B,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,sFAAsF;IACtF,eAAe,EAAE;QACf,mBAAmB,EAAE,MAAM,CAAC;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,sGAAsG;IACtG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAChD,yEAAyE;IACzE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,UAAU,EAAE,iBAAiB,EAAE,CAAC;QAChC,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,IAAI,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,uBAAuB,yGAalC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAU5B,CAAC;AAQH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CAwJpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Feed/FeedNewPost.js

@@ -16,6 +16,7 @@ export const StyledTextAreaContainer = styled.div(() => {
     margin-top: 0.625rem;
     min-height: 1rem;
     width: 100%;
+    overflow-y: hidden;
 
     ${StyledRichTextEditor} {
       &:focus-within {
@@ -47,7 +48,6 @@ const FeedNewPost = (props) => {
     const { setShowSearchResults } = useContext(FeedContext);
     const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;
     const [emptyText, setEmptyText] = useState(true);
-    const [hasFocus, setHasFocus] = useState(autoFocus);
     const [postType, setPostType] = useState('post');
     const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);
     const [selectedRecipients, setSelectedRecipients] = useState([]);
@@ -89,7 +89,7 @@ const FeedNewPost = (props) => {
     }, [postType]);
     return (_jsx(StyledCard, { ref: setNewPostEl, as: StyledFeedNewPost, ...restProps, children: _jsxs(CardContent, { children: [onRecipientSearch && (_jsx(FeedNewPostTypeMenu, { recipients: recipients || [], onSetPostType: setPostType, onSelectedRecipientsUpdate: setSelectedRecipients, onRecipientSearch: onRecipientSearch, reset: resetPostTypeMenu, onReset: () => setResetPostTypeMenu(false) })), _jsxs(Flex, { container: { alignItems: 'start', gap: 1 }, children: [_jsx(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc }), _jsx(StyledTextAreaContainer, { children: _jsx(FeedRichText, { label: t('feed_new_post'), onChange: () => {
                                     setEmptyText(rteRef.current?.getPlainText().trim() === '');
-                                }, placeholder: textAreaPlaceholder, autoFocus: autoFocus, onSubmit: handlePost, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), ref: rteRef }) }), !emptyText && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: handleClear, icon: true, label: t('feed_cancel_conversation'), children: _jsx(Icon, { name: 'times' }) })), onFilesAdded && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => {
+                                }, placeholder: textAreaPlaceholder, autoFocus: autoFocus, onSubmit: handlePost, ref: rteRef }) }), !emptyText && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: handleClear, icon: true, label: t('feed_cancel_conversation'), children: _jsx(Icon, { name: 'times' }) })), onFilesAdded && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => {
                                 setShowSearchResults?.(false);
                                 attachmentEl?.click();
                             }, icon: true, label: attachments.length
@@ -102,7 +102,7 @@ const FeedNewPost = (props) => {
                     // Must trick input to believe there is no value when activated so that the same file may be added consecutively.
                     onClick: (event) => {
                         event.target.value = '';
-                    } }), _jsx(FeedAttachments, { attachments: attachments }), _jsx(ExpandCollapse, { collapsed: !hasFocus && emptyText && !attachments.length, children: _jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'primary', disabled: (emptyText && attachments.length === 0) || attachments.some(x => x.error), onClick: handlePost, children: postLabel }) }) })] }) }));
+                    } }), _jsx(FeedAttachments, { attachments: attachments }), _jsx(ExpandCollapse, { collapsed: (emptyText && attachments.length === 0) || attachments.some(x => x.error), children: _jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'primary', onClick: handlePost, children: postLabel }) }) })] }) }));
 };
 export default FeedNewPost;
 //# sourceMappingURL=FeedNewPost.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FC, MouseEvent, useRef, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  CardContent,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledIcon,\n  StyledCard,\n  StyledPopover,\n  defaultThemeProp,\n  useElement,\n  useOuterEvent,\n  ForwardProps,\n  useI18n,\n  ExpandCollapse,\n  useAfterInitialEffect,\n  cap\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedNewPostTypeMenu, {\n  PostType,\n  PostTypeMenuProps,\n  RecipientMenuItem\n} from './FeedNewPostTypeMenu';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedContext } from './Feed.context';\n\nregisterIcon(timesIcon, paperClipIcon);\n\nexport interface FeedNewPostProps {\n  /** A unique ID for the NewPost */\n  id: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Information that is used to label buttons and inputs for accessibility purposes */\n  interactionInfo: {\n    textAreaPlaceholder: string;\n    postLabel: string;\n  };\n  /** A callback containing a list of added files that will run whenever files are added to the post. */\n  onFilesAdded?: (files: AttachedFiles[]) => void;\n  /** A callback that will run when the new post button has been clicked */\n  onPost: (event: {\n    newPostId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    recipients: RecipientMenuItem[];\n    username: string;\n    clear: () => void;\n  }) => void;\n  autoFocus?: boolean;\n  /** Array of private recipient options */\n  recipients?: PostTypeMenuProps['recipients'];\n  /** Handler for new search on private recipient options */\n  onRecipientSearch?: (newSearch: string) => void;\n}\n\nexport const StyledTextAreaContainer = styled.div(() => {\n  return css`\n    margin-top: 0.625rem;\n    min-height: 1rem;\n    width: 100%;\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledTextAreaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFeedNewPost = styled.div(({ theme }) => {\n  return css`\n    ${StyledIcon}:not(${StyledPopover} ${StyledIcon}) {\n      font-size: 1.25rem;\n    }\n\n    ${FeedButton} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeedNewPost.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedNewPost: FC<ForwardProps & FeedNewPostProps> = (props: FeedNewPostProps) => {\n  const {\n    id,\n    attachments = [],\n    interactionInfo,\n    onPost,\n    onFilesAdded,\n    autoFocus,\n    recipients,\n    onRecipientSearch,\n    ...restProps\n  } = props;\n  const rteRef = useRef<RichTextEditorState>();\n  const { textAreaPlaceholder, postLabel } = interactionInfo;\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;\n  const [emptyText, setEmptyText] = useState(true);\n  const [hasFocus, setHasFocus] = useState(autoFocus);\n  const [postType, setPostType] = useState<PostType>('post');\n  const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);\n  const [selectedRecipients, setSelectedRecipients] = useState<RecipientMenuItem[]>([]);\n  const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n  const [newPostEl, setNewPostEl] = useElement<HTMLDivElement>();\n\n  useOuterEvent('mousedown', [newPostEl], () => {\n    if (emptyText) rteRef.current?.clear();\n  });\n\n  const t = useI18n();\n\n  const handlePost = () => {\n    setShowSearchResults?.(false);\n    if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {\n      onPost({\n        newPostId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        recipients: selectedRecipients,\n        username,\n        clear: () => {\n          rteRef.current?.clear();\n          setResetPostTypeMenu(true);\n        }\n      });\n    }\n  };\n\n  const handleClear = () => {\n    setShowSearchResults?.(false);\n    rteRef.current?.clear();\n    rteRef.current?.focus();\n  };\n\n  useAfterInitialEffect(() => {\n    if (postType === 'post') {\n      rteRef.current?.focus();\n    }\n    if (postType !== 'private') {\n      setSelectedRecipients([] as RecipientMenuItem[]);\n    }\n  }, [postType]);\n\n  return (\n    <StyledCard ref={setNewPostEl} as={StyledFeedNewPost} {...restProps}>\n      <CardContent>\n        {onRecipientSearch && (\n          <FeedNewPostTypeMenu\n            recipients={recipients || ([] as PostTypeMenuProps['recipients'])}\n            onSetPostType={setPostType}\n            onSelectedRecipientsUpdate={setSelectedRecipients}\n            onRecipientSearch={onRecipientSearch}\n            reset={resetPostTypeMenu}\n            onReset={() => setResetPostTypeMenu(false)}\n          />\n        )}\n\n        <Flex container={{ alignItems: 'start', gap: 1 }}>\n          <Avatar name={fullname} size='l' imageSrc={avatarSrc} />\n\n          <StyledTextAreaContainer>\n            <FeedRichText\n              label={t('feed_new_post')}\n              onChange={() => {\n                setEmptyText(rteRef.current?.getPlainText().trim() === '');\n              }}\n              placeholder={textAreaPlaceholder}\n              autoFocus={autoFocus}\n              onSubmit={handlePost}\n              onFocus={() => setHasFocus(true)}\n              onBlur={() => setHasFocus(false)}\n              ref={rteRef}\n            />\n          </StyledTextAreaContainer>\n\n          {!emptyText && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={handleClear}\n              icon\n              label={t('feed_cancel_conversation')}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n\n          {onFilesAdded && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={() => {\n                setShowSearchResults?.(false);\n                attachmentEl?.click();\n              }}\n              icon\n              label={\n                attachments.length\n                  ? cap(t('attachments_count', [], { count: 1 }))\n                  : t('file_upload_text_multiple')\n              }\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          )}\n        </Flex>\n\n        <HiddenFileInput\n          ref={setAttachmentEl}\n          type='file'\n          multiple\n          onChange={() => {\n            if (attachmentEl?.files) {\n              onFilesAdded?.(Array.from(attachmentEl?.files));\n            }\n          }}\n          // Must trick input to believe there is no value when activated so that the same file may be added consecutively.\n          onClick={(event: MouseEvent) => {\n            (event.target as HTMLInputElement).value = '';\n          }}\n        />\n\n        <FeedAttachments attachments={attachments} />\n\n        <ExpandCollapse collapsed={!hasFocus && emptyText && !attachments.length}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='primary'\n              disabled={(emptyText && attachments.length === 0) || attachments.some(x => x.error)}\n              onClick={handlePost}\n            >\n              {postLabel}\n            </Button>\n          </Flex>\n        </ExpandCollapse>\n      </CardContent>\n    </StyledCard>\n  );\n};\n\nexport default FeedNewPost;\n"]}
+{"version":3,"file":"FeedNewPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FC, MouseEvent, useRef, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  CardContent,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledIcon,\n  StyledCard,\n  StyledPopover,\n  defaultThemeProp,\n  useElement,\n  useOuterEvent,\n  ForwardProps,\n  useI18n,\n  ExpandCollapse,\n  useAfterInitialEffect,\n  cap\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedNewPostTypeMenu, {\n  PostType,\n  PostTypeMenuProps,\n  RecipientMenuItem\n} from './FeedNewPostTypeMenu';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedContext } from './Feed.context';\n\nregisterIcon(timesIcon, paperClipIcon);\n\nexport interface FeedNewPostProps {\n  /** A unique ID for the NewPost */\n  id: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Information that is used to label buttons and inputs for accessibility purposes */\n  interactionInfo: {\n    textAreaPlaceholder: string;\n    postLabel: string;\n  };\n  /** A callback containing a list of added files that will run whenever files are added to the post. */\n  onFilesAdded?: (files: AttachedFiles[]) => void;\n  /** A callback that will run when the new post button has been clicked */\n  onPost: (event: {\n    newPostId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    recipients: RecipientMenuItem[];\n    username: string;\n    clear: () => void;\n  }) => void;\n  autoFocus?: boolean;\n  /** Array of private recipient options */\n  recipients?: PostTypeMenuProps['recipients'];\n  /** Handler for new search on private recipient options */\n  onRecipientSearch?: (newSearch: string) => void;\n}\n\nexport const StyledTextAreaContainer = styled.div(() => {\n  return css`\n    margin-top: 0.625rem;\n    min-height: 1rem;\n    width: 100%;\n    overflow-y: hidden;\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledTextAreaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFeedNewPost = styled.div(({ theme }) => {\n  return css`\n    ${StyledIcon}:not(${StyledPopover} ${StyledIcon}) {\n      font-size: 1.25rem;\n    }\n\n    ${FeedButton} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeedNewPost.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedNewPost: FC<ForwardProps & FeedNewPostProps> = (props: FeedNewPostProps) => {\n  const {\n    id,\n    attachments = [],\n    interactionInfo,\n    onPost,\n    onFilesAdded,\n    autoFocus,\n    recipients,\n    onRecipientSearch,\n    ...restProps\n  } = props;\n  const rteRef = useRef<RichTextEditorState>();\n  const { textAreaPlaceholder, postLabel } = interactionInfo;\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;\n  const [emptyText, setEmptyText] = useState(true);\n  const [postType, setPostType] = useState<PostType>('post');\n  const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);\n  const [selectedRecipients, setSelectedRecipients] = useState<RecipientMenuItem[]>([]);\n  const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n  const [newPostEl, setNewPostEl] = useElement<HTMLDivElement>();\n\n  useOuterEvent('mousedown', [newPostEl], () => {\n    if (emptyText) rteRef.current?.clear();\n  });\n\n  const t = useI18n();\n\n  const handlePost = () => {\n    setShowSearchResults?.(false);\n    if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {\n      onPost({\n        newPostId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        recipients: selectedRecipients,\n        username,\n        clear: () => {\n          rteRef.current?.clear();\n          setResetPostTypeMenu(true);\n        }\n      });\n    }\n  };\n\n  const handleClear = () => {\n    setShowSearchResults?.(false);\n    rteRef.current?.clear();\n    rteRef.current?.focus();\n  };\n\n  useAfterInitialEffect(() => {\n    if (postType === 'post') {\n      rteRef.current?.focus();\n    }\n    if (postType !== 'private') {\n      setSelectedRecipients([] as RecipientMenuItem[]);\n    }\n  }, [postType]);\n\n  return (\n    <StyledCard ref={setNewPostEl} as={StyledFeedNewPost} {...restProps}>\n      <CardContent>\n        {onRecipientSearch && (\n          <FeedNewPostTypeMenu\n            recipients={recipients || ([] as PostTypeMenuProps['recipients'])}\n            onSetPostType={setPostType}\n            onSelectedRecipientsUpdate={setSelectedRecipients}\n            onRecipientSearch={onRecipientSearch}\n            reset={resetPostTypeMenu}\n            onReset={() => setResetPostTypeMenu(false)}\n          />\n        )}\n\n        <Flex container={{ alignItems: 'start', gap: 1 }}>\n          <Avatar name={fullname} size='l' imageSrc={avatarSrc} />\n\n          <StyledTextAreaContainer>\n            <FeedRichText\n              label={t('feed_new_post')}\n              onChange={() => {\n                setEmptyText(rteRef.current?.getPlainText().trim() === '');\n              }}\n              placeholder={textAreaPlaceholder}\n              autoFocus={autoFocus}\n              onSubmit={handlePost}\n              ref={rteRef}\n            />\n          </StyledTextAreaContainer>\n\n          {!emptyText && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={handleClear}\n              icon\n              label={t('feed_cancel_conversation')}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n\n          {onFilesAdded && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={() => {\n                setShowSearchResults?.(false);\n                attachmentEl?.click();\n              }}\n              icon\n              label={\n                attachments.length\n                  ? cap(t('attachments_count', [], { count: 1 }))\n                  : t('file_upload_text_multiple')\n              }\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          )}\n        </Flex>\n\n        <HiddenFileInput\n          ref={setAttachmentEl}\n          type='file'\n          multiple\n          onChange={() => {\n            if (attachmentEl?.files) {\n              onFilesAdded?.(Array.from(attachmentEl?.files));\n            }\n          }}\n          // Must trick input to believe there is no value when activated so that the same file may be added consecutively.\n          onClick={(event: MouseEvent) => {\n            (event.target as HTMLInputElement).value = '';\n          }}\n        />\n\n        <FeedAttachments attachments={attachments} />\n\n        <ExpandCollapse\n          collapsed={(emptyText && attachments.length === 0) || attachments.some(x => x.error)}\n        >\n          <Flex container={{ justify: 'end' }}>\n            <Button variant='primary' onClick={handlePost}>\n              {postLabel}\n            </Button>\n          </Flex>\n        </ExpandCollapse>\n      </CardContent>\n    </StyledCard>\n  );\n};\n\nexport default FeedNewPost;\n"]}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ForwardProps } from '@pega/cosmos-react-core';
-export declare type PostType = 'post' | 'private';
+import { ForwardProps, MenuItemProps } from '@pega/cosmos-react-core';
+export type PostType = 'post' | 'private';
 export interface RecipientOption {
     /** Pretty printed recipient name */
     primary: string;
@@ -12,11 +12,8 @@ export interface RecipientMenuItem {
     selected?: boolean;
     primary: RecipientOption['primary'];
     value: RecipientOption['value'];
-}
-export interface RecipientMultiSelectData {
-    id: RecipientMenuItem['id'];
-    text: RecipientMenuItem['primary'];
-    value: RecipientMenuItem['value'];
+    secondary?: MenuItemProps['secondary'];
+    visual?: MenuItemProps['visual'];
 }
 export interface PostTypeMenuProps {
     /** Array of private recipient options */

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPostTypeMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAeL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAIjC,oBAAY,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,+BAA+B;IAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,iDAAiD;IACjD,0BAA0B,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACtE,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoLD,QAAA,MAAM,mBAAmB,+GAQtB,iBAAiB,GAAG,YAAY,gBAyalC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"FeedNewPostTypeMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAgBL,YAAY,EAKZ,aAAa,EACd,MAAM,yBAAyB,CAAC;AAOjC,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,+BAA+B;IAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,iDAAiD;IACjD,0BAA0B,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACtE,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA0KD,QAAA,MAAM,mBAAmB,+GAQtB,iBAAiB,GAAG,YAAY,gBAialC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/Feed/FeedNewPostTypeMenu.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect, useCallback, useReducer } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Text, StyledPrimary, StyledMenuItem, Icon, StyledIcon, useElement, useOuterEvent, Popover, Menu, Status, defaultThemeProp, createUID, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { Button, StyledPrimary, StyledMenuItem, Icon, StyledIcon, useElement, useOuterEvent, Popover, Tooltip, Menu, Count, defaultThemeProp, createUID, useAfterInitialEffect, formatListToLocaleString, useConfiguration, useI18n, useModalManager } from '@pega/cosmos-react-core';
+import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
 import { StyledMenuListHeader } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
 import MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';
+import FeedModalList from './FeedModalList';
+const StyledCountButton = styled(BareRoleButton) `
+  display: inline-block;
+`;
 const StyledCountBadgePopoverContent = styled.div(({ theme }) => {
     const { base: { spacing } } = theme;
     return css `
@@ -18,14 +23,6 @@ StyledCountBadgePopoverContent.defaultProps = defaultThemeProp;
 const StyledPostTypePopoverContent = styled.div `
   width: clamp(16rem, 60vw, 40rem);
 `;
-const StyledRecipientCount = styled(Status)(({ theme }) => {
-    const { base: { spacing } } = theme;
-    return css `
-    border-radius: 1.25rem;
-    margin: 0 0 0 calc(0.5 * ${spacing});
-  `;
-});
-StyledRecipientCount.defaultProps = defaultThemeProp;
 const StyledSelectedInputContainer = styled.div(({ theme }) => {
     const { base: { spacing } } = theme;
     return css `
@@ -55,7 +52,7 @@ const StyledRecipientMenuHeader = styled.div ``;
 const StyledTypeMenuToggle = styled(Button)(({ theme }) => {
     const { base: { spacing } } = theme;
     return css `
-    margin: ${spacing} 0;
+    margin-block-end: ${spacing};
   `;
 });
 StyledTypeMenuToggle.defaultProps = defaultThemeProp;
@@ -116,14 +113,17 @@ const initialState = {
     showTypeMenu: false,
     showRecipientMenu: false,
     viewingRecipients: false,
-    showCountPopover: false,
     searchValue: '',
     typeMenuItems: getTypeMenuItems('post'),
     recipientMenuItems: [],
     multiSelectItems: []
 };
 const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUpdate, onRecipientSearch, reset, onReset, ...restProps }) => {
+    const t = useI18n();
+    const { locale } = useConfiguration();
+    const { create } = useModalManager();
     const menuPopoverId = useMemo(() => createUID(), []);
+    const recipientsModalRef = useRef();
     const multiSelectInputRef = useRef(null);
     const [toggleEl, setToggleEl] = useElement();
     const [recipientCountEl, setRecipientCountEl] = useElement();
@@ -172,12 +172,6 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
                     viewingRecipients: payload
                 };
             }
-            case 'setShowCountPopover': {
-                return {
-                    ...state,
-                    showCountPopover: payload
-                };
-            }
             case 'setItemsLoading': {
                 return {
                     ...state,
@@ -193,8 +187,7 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
             case 'toggleTypeMenu': {
                 return {
                     ...state,
-                    showTypeMenu: !state.showTypeMenu,
-                    showCountPopover: false
+                    showTypeMenu: !state.showTypeMenu
                 };
             }
             case 'removeRecipientViaMultiSelect': {
@@ -225,13 +218,7 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
                 const selectedId = payload;
                 if (!state.multiSelectItems.some(item => item.id === selectedId)) {
                     const selectedFromMenu = state.recipientMenuItems.filter(item => item.id === selectedId)[0];
-                    const multiSelectItems = state.multiSelectItems.concat([
-                        {
-                            text: selectedFromMenu.primary,
-                            id: selectedFromMenu.id,
-                            value: selectedFromMenu.value
-                        }
-                    ]);
+                    const multiSelectItems = state.multiSelectItems.concat([selectedFromMenu]);
                     return {
                         ...state,
                         multiSelectItems,
@@ -269,13 +256,6 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
         }
     };
     const [state, dispatch] = useReducer(reducer, initialState);
-    const onBlur = useCallback(() => {
-        setTimeout(() => {
-            if (!document.activeElement?.closest(`#${menuPopoverId}`)) {
-                dispatch({ type: 'setShowTypeMenu', payload: false });
-            }
-        }, 200);
-    }, [menuPopoverId]);
     const handleKeydownToggle = useCallback((e) => {
         if (e.key === 'Escape' && state.showTypeMenu)
             dispatch({ type: 'toggleTypeMenu' });
@@ -293,11 +273,7 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
         dispatch({ type: 'updateRecipientMenuItems' });
     }, [recipients]);
     useEffect(() => {
-        onSelectedRecipientsUpdate(state.multiSelectItems.map(item => ({
-            id: item.id,
-            primary: item.text,
-            value: item.value
-        })));
+        onSelectedRecipientsUpdate(state.multiSelectItems);
     }, [state.multiSelectItems]);
     useEffect(() => {
         if (!state.showTypeMenu) {
@@ -353,17 +329,26 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
         multiSelectInputRef.current?.addEventListener('keydown', handleKeydownToggle);
         return () => multiSelectInputRef.current?.removeEventListener('keydown', handleKeydownToggle);
     }, [multiSelectInputRef.current, state.showTypeMenu]);
+    const onRecipientsCountClick = () => {
+        recipientsModalRef.current = create(FeedModalList, {
+            count: state.multiSelectItems.length,
+            heading: t('feed_recipients'),
+            listItems: state.multiSelectItems.map(item => ({
+                id: item.id,
+                primary: item.primary,
+                secondary: item.secondary,
+                visual: item.visual
+            }))
+        });
+    };
     return (_jsxs("div", { children: [_jsxs(StyledTypeMenuToggle, { ...restProps, onClick: () => {
                     dispatch({ type: 'toggleTypeMenu' });
-                }, ref: setToggleEl, variant: 'link', "aria-haspopup": 'menu', "aria-expanded": state.showTypeMenu, onBlur: onBlur, children: [_jsx("span", { ref: setTypeMenuPopoverTarget, children: typeCopy[state.postType].primary }), _jsx(Icon, { name: 'arrow-micro-down' })] }), state.postType === 'private' && state.multiSelectItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(StyledRecipientCount, { ref: setRecipientCountEl, "aria-describedby": `recipients-popover--${menuPopoverId}`, onMouseEnter: () => {
-                            if (!state.showTypeMenu)
-                                dispatch({ type: 'setShowCountPopover', payload: true });
-                        }, onFocus: () => dispatch({ type: 'setShowCountPopover', payload: true }), onMouseLeave: () => dispatch({ type: 'setShowCountPopover', payload: false }), children: `${state.multiSelectItems.length}` }), _jsx(Popover, { show: state.showCountPopover, target: recipientCountEl, id: `recipients-popover--${menuPopoverId}`, onMouseEnter: () => {
-                            if (!state.showTypeMenu)
-                                dispatch({ type: 'setShowCountPopover', payload: true });
-                        }, onMouseLeave: () => dispatch({ type: 'setShowCountPopover', payload: false }), arrow: true, children: _jsx(StyledCountBadgePopoverContent, { children: state.multiSelectItems.map((recipient) => {
-                                return (_jsx("p", { children: _jsx(Text, { variant: 'primary', children: recipient.text }) }, recipient.id));
-                            }) }) })] })), _jsxs(StyledPostTypePopover, { id: menuPopoverId, ref: setTypePopoverEl, target: typeMenuPopoverTarget, show: state.showTypeMenu, placement: 'bottom-start', children: [(state.postType !== 'private' || !state.viewingRecipients) && (_jsx(Menu, { items: state.typeMenuItems, focusControlEl: toggleEl || undefined, mode: 'single-select', onItemClick: selectedId => {
+                }, ref: setToggleEl, variant: 'link', "aria-haspopup": 'menu', "aria-expanded": state.showTypeMenu, children: [_jsx("span", { ref: setTypeMenuPopoverTarget, children: typeCopy[state.postType].primary }), _jsx(Icon, { name: 'arrow-micro-down' })] }), state.postType === 'private' && state.multiSelectItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(StyledCountButton, { ref: setRecipientCountEl, onClick: onRecipientsCountClick, "aria-label": `${t('feed_private_post')} ${t('feed_recipients')} ${formatListToLocaleString(state.multiSelectItems.map(item => item.primary).slice(0, 2), t, locale, {
+                            count: state.multiSelectItems.length
+                        })}`, tabIndex: 0, children: _jsx(Count, { children: state.multiSelectItems.length }) }), _jsx(Tooltip, { target: recipientCountEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: formatListToLocaleString(state.multiSelectItems.map(item => item.primary).slice(0, 2), t, locale, {
+                            count: state.multiSelectItems.length,
+                            separator: '\n'
+                        }) })] })), _jsxs(StyledPostTypePopover, { id: menuPopoverId, ref: setTypePopoverEl, target: typeMenuPopoverTarget, show: state.showTypeMenu, placement: 'bottom-start', children: [(state.postType !== 'private' || !state.viewingRecipients) && (_jsx(Menu, { items: state.typeMenuItems, focusControlEl: toggleEl || undefined, mode: 'single-select', onItemClick: selectedId => {
                             const postType = state.typeMenuItems.find(item => item.id === selectedId).value;
                             dispatch({ type: 'setPostType', payload: postType });
                         }, onItemExpand: () => {
@@ -375,11 +360,14 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
                             }
                         } })), state.postType === 'private' && state.viewingRecipients && (_jsxs(StyledPostTypePopoverContent, { children: [_jsxs(StyledRecipientMenuHeader, { children: [_jsxs(Button, { as: StyledRecipientBackButton, variant: 'text', "aria-label": 'close submenu', onClick: () => {
                                             dispatch({ type: 'setViewingRecipients', payload: false });
-                                        }, onBlur: onBlur, children: [_jsx(Icon, { name: 'caret-left' }), typeCopy.private.primary] }), _jsx(StyledSelectedInputContainer, { children: _jsx(MultiSelectInput, { ref: multiSelectInputRef, selected: state.multiSelectItems, onRemove: (selectedId) => {
+                                        }, children: [_jsx(Icon, { name: 'caret-left' }), typeCopy.private.primary] }), _jsx(StyledSelectedInputContainer, { children: _jsx(MultiSelectInput, { ref: multiSelectInputRef, selected: state.multiSelectItems.map(item => ({
+                                                id: item.id,
+                                                text: item.primary
+                                            })), onRemove: (selectedId) => {
                                                 dispatch({ type: 'removeRecipientViaMultiSelect', payload: selectedId });
                                             }, value: state.searchValue, onChange: (e) => {
                                                 dispatch({ type: 'setSearchValue', payload: e.target.value });
-                                            }, onBlur: onBlur }) })] }), state.showRecipientMenu && (_jsx(StyledRecipientMenu, { loading: state.itemsLoading, focusControlEl: multiSelectInputRef.current, items: state.itemsLoading ? [] : state.recipientMenuItems, scrollAt: 11, mode: 'action', emptyText: 'No items', onItemClick: (selectedId) => {
+                                            } }) })] }), state.showRecipientMenu && (_jsx(StyledRecipientMenu, { loading: state.itemsLoading, focusControlEl: multiSelectInputRef.current, items: state.itemsLoading ? [] : state.recipientMenuItems, scrollAt: 11, mode: 'action', emptyText: 'No items', onItemClick: (selectedId) => {
                                     dispatch({ type: 'selectRecipientViaMenu', payload: selectedId });
                                 } }))] }))] })] }));
 };