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

package/lib/components/Feed/FeedPost.js

@@ -1,13 +1,21 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { Avatar, Button, Count, Card, CardContent, CardHeader, Flex, Icon, MenuButton, SummaryItem, Text, defaultThemeProp, useElement, Popover, useI18n, Progress, Menu, useOuterEvent, useConsolidatedRef } from '@pega/cosmos-react-core';
+import { Avatar, Button, Count, Card, CardContent, CardHeader, Flex, Icon, registerIcon, MenuButton, SummaryItem, Text, defaultThemeProp, useElement, useI18n, Progress, useOuterEvent, MetaList, Tooltip, ModalManagerContext, StyledVisual, useConfiguration } from '@pega/cosmos-react-core';
+import { StyledRichTextEditor } from '@pega/cosmos-react-rte';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
+import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
+import { formatListToLocaleString } from '@pega/cosmos-react-core/lib/utils/utils';
 import FeedButton from './FeedButton';
 import FeedAttachments from './FeedAttachments';
-import { StyledFeedReply } from './FeedReply';
+import { StyledFeedReplyContainer } from './FeedReply';
 import FeedContent from './FeedContent';
 import FeedReplyInput from './FeedReplyInput';
-import { FeedReplyContext } from './Feed.context';
+import { FeedContext, FeedReplyContext } from './Feed.context';
+import FeedRichText from './FeedRichText';
+import FeedModalList from './FeedModalList';
+registerIcon(arrowMicroDownIcon, caretLeftIcon);
 const defaultProps = {
     info: {
         avatarSrc: '',
@@ -18,127 +26,183 @@ const defaultProps = {
     }
 };
 export const StyledFeedPost = styled.div(({ theme }) => css `
-    ${StyledFeedReply}:not(:last-child) {
-      margin-bottom: calc(2 * ${theme.base.spacing});
+    ${StyledFeedReplyContainer}:not(:last-child) {
+      margin-block-end: calc(2 * ${theme.base.spacing});
     }
   `);
 StyledFeedPost.defaultProps = defaultThemeProp;
+export const StyledPostEdit = styled.div(({ theme }) => css `
+    ${StyledRichTextEditor} {
+      padding: calc(0.5 * ${theme.base.spacing});
+    }
+  `);
+StyledPostEdit.defaultProps = defaultThemeProp;
 export const StyledReplies = styled.div(({ theme }) => css `
     border-top: 0.0625rem solid ${theme.base.palette['border-line']};
     padding: calc(1.25 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
   `);
 StyledReplies.defaultProps = defaultThemeProp;
-export const StyledReplyCount = styled.div(({ theme }) => css `
-    padding-bottom: calc(1.25 * ${theme.base.spacing});
+export const StyledPostFooter = styled.div(({ theme }) => css `
+    margin-block-start: ${theme.base.spacing};
   `);
-StyledReplyCount.defaultProps = defaultThemeProp;
-export const StyledActions = styled.div(props => {
-    const { spacing } = props.theme.base;
-    return css `
-    margin-top: ${spacing};
-  `;
-});
-StyledActions.defaultProps = defaultThemeProp;
+StyledPostFooter.defaultProps = defaultThemeProp;
 const FullWidthSummaryItem = styled.div `
   width: 100%;
+
+  ${StyledVisual} {
+    align-self: start;
+  }
 `;
 const FeedPost = (props) => {
-    const { id, info, interactionInfo, maxContentHeight = Infinity, onMouseEnter, onMouseLeave, onCommentClick, onLikeClick, onUserClick, onShowMoreClick, newReplyField, menuItems, replies = [], replyInput, replyInputShown, replyCount, repliesLoading, onShowLessReplies, onShowMoreReplies, ...restProps } = props;
-    const { avatarSrc, fullname, username, timeElapsed, content, postType = 'public', recipients, attachments, liked, icon, postContext } = info;
-    const { likeLabel, likeCount, commentLabel, interactionsEnabled = true } = interactionInfo;
+    const { id, info, interactionInfo, maxContentHeight = Infinity, onMouseEnter, onMouseLeave, onCommentClick, onLikeClick, onLikeCountInteraction, onLoadMoreLikes, onRecipientInteraction, onLoadMoreRecipients, onUserClick, onShowMoreClick, newReplyField, menuItems, onEditSubmit, edited = false, replies = [], replyInput, replyInputShown, replyCount, repliesLoading, onShowLessReplies, onShowMoreReplies, ...restProps } = props;
+    const { avatarSrc, fullname, username, timeElapsed, content, postType = 'public', recipients = [], recipientsCount = 0, attachments, liked, icon, postContext, userStatus } = info;
+    const { likeLabel, likes = [], likeCount = 0, commentLabel, interactionsEnabled = true } = interactionInfo;
+    const loggedInUser = useContext(FeedContext).userInfo;
+    const t = useI18n();
+    const { locale } = useConfiguration();
+    const [countEl, setCountEl] = useElement();
+    const rteRef = useRef();
+    const [editMode, setEditMode] = useState(false);
+    const editTextAreaRef = useRef(null);
+    const [emptyEditText, setEmptyEditText] = useState(false);
+    const [postModified, setPostModified] = useState(false);
     const [replyInputOpen, setReplyInputOpen] = useState(false);
-    const [mountRecipientsPopover, setMountRecipientsPopover] = useState(false);
-    const [postTypeEl, setPostTypeEl] = useElement();
     const [replyInputRef, setReplyInputRef] = useState(null);
-    const postTypeRef = useConsolidatedRef(setPostTypeEl);
-    const popoverRef = useRef(null);
-    const togglePopover = () => {
-        if (postType === 'private') {
-            setMountRecipientsPopover(curr => !curr);
+    const { create } = useContext(ModalManagerContext);
+    const likesModalRef = useRef();
+    const recipientsModalRef = useRef();
+    useEffect(() => {
+        likesModalRef.current?.update({
+            count: likeCount,
+            heading: likeLabel,
+            listItems: likes,
+            onLoadMore: onLoadMoreLikes
+        });
+    }, [likeCount, likeLabel, likes, onLoadMoreLikes]);
+    useEffect(() => {
+        if (recipients.length) {
+            recipientsModalRef.current?.update({
+                count: recipientsCount,
+                heading: t('feed_recipients'),
+                listItems: recipients,
+                onLoadMore: onLoadMoreRecipients
+            });
         }
-    };
-    useOuterEvent('mousedown', [postTypeRef, popoverRef], () => {
-        setMountRecipientsPopover(false);
+    }, [recipientsCount, recipients, onLoadMoreRecipients]);
+    useOuterEvent('mousedown', [editTextAreaRef], () => {
+        if (emptyEditText)
+            setEditMode(false);
     });
     useEffect(() => {
-        var _a;
         if ((replyInputOpen || replyInputShown) && replyInputRef) {
-            (_a = replyInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            replyInputRef.current?.focus();
         }
     }, [replyInputOpen, replyInputShown, replyInputRef]);
-    const t = useI18n();
-    const userVisual = icon ? (React.createElement(Icon, { name: icon })) : (React.createElement(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc }));
-    const numReplies = replyCount || (replies === null || replies === void 0 ? void 0 : replies.length);
-    let postTypeAttributes;
-    switch (postType) {
-        case 'private':
-            postTypeAttributes = {
+    const userVisual = icon ? (_jsx(Icon, { name: icon }, void 0)) : (_jsx(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc, status: userStatus }, void 0));
+    const numReplies = replyCount || replies?.length;
+    const postTypeAttributes = useMemo(() => {
+        if (postType === 'private') {
+            const recipientsList = recipients.map(x => x.primary);
+            return {
                 icon: 'users-solid',
-                label: 'Private'
+                ariaLabel: `${t('feed_private_post')} t('feed_recipients')} ${formatListToLocaleString(recipientsList, t, locale, { count: recipientsCount })}`,
+                label: formatListToLocaleString(recipientsList, t, locale, {
+                    count: recipientsCount,
+                    separator: '\n'
+                })
             };
-            break;
-        default:
-            postTypeAttributes = {
-                icon: 'globe',
-                label: 'Public'
-            };
-            break;
-    }
-    return (React.createElement(FeedReplyContext.Provider, { value: { onShowReplyInput: () => setReplyInputOpen(true) } },
-        React.createElement(Card, { ...restProps, as: StyledFeedPost, onMouseEnter: () => {
-                onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter({ feedId: id });
+        }
+        return {
+            icon: 'globe',
+            ariaLabel: t('feed_public_post'),
+            label: t('feed_public_post')
+        };
+    }, [postType, recipients, recipientsCount]);
+    const likesAttributes = useMemo(() => {
+        const likesList = likes.map(x => x.primary.toString());
+        return {
+            ariaLabel: `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {
+                count: likeCount
+            })}`,
+            label: formatListToLocaleString(likesList, t, locale, {
+                count: likeCount,
+                separator: '\n'
+            })
+        };
+    }, [likes, likeCount]);
+    const handleEdit = () => {
+        if (!emptyEditText && postModified) {
+            onEditSubmit?.({
+                postId: id,
+                value: rteRef.current?.getPlainText() || ''
+            });
+            setEditMode(false);
+        }
+    };
+    return (_jsx(FeedReplyContext.Provider, { value: { onShowReplyInput: () => setReplyInputOpen(true) }, children: _jsxs(Card, { ...restProps, as: StyledFeedPost, onMouseEnter: () => {
+                onMouseEnter?.({ postId: id });
             }, onMouseLeave: () => {
-                onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave({ feedId: id });
-            } },
-            React.createElement(CardHeader, null,
-                React.createElement(SummaryItem, { as: FullWidthSummaryItem, visual: onUserClick ? (React.createElement(BareButton, { onClick: (event) => {
-                            onUserClick === null || onUserClick === void 0 ? void 0 : onUserClick({ feedId: id, username }, event);
-                        } }, userVisual)) : (userVisual), primary: React.createElement(Flex, { container: { itemGap: 0.5, alignItems: 'center' } },
-                        onUserClick ? (React.createElement(Button, { variant: 'text', onClick: (event) => {
-                                onUserClick === null || onUserClick === void 0 ? void 0 : onUserClick({ feedId: id, username }, event);
-                            } },
-                            React.createElement(Text, { variant: 'h3' }, fullname))) : (React.createElement(Text, { variant: 'h3' }, fullname)),
-                        postContext && React.createElement(Text, { variant: 'primary' }, t('feed_context', postContext))), secondary: React.createElement(Flex, { container: { itemGap: 1, alignItems: 'center' } },
-                        React.createElement(Text, { variant: 'secondary' }, timeElapsed),
-                        React.createElement(Button, { ref: postTypeRef, variant: 'simple', icon: true, onClick: togglePopover, label: postTypeAttributes.label },
-                            React.createElement(Icon, { name: postTypeAttributes.icon })),
-                        recipients && mountRecipientsPopover && (React.createElement(Popover, { ref: popoverRef, arrow: true, hideDelay: 'short', target: postTypeEl },
-                            React.createElement(Menu, { items: recipients })))), actions: menuItems ? (React.createElement(MenuButton, { text: 'More', menu: { items: menuItems }, icon: 'more', iconOnly: true, variant: 'simple' })) : undefined })),
-            React.createElement(CardContent, null,
-                React.createElement(FeedContent, { maxContentHeight: maxContentHeight }, content),
-                React.createElement(FeedAttachments, { attachments: attachments }),
-                interactionsEnabled && (React.createElement(Flex, { container: { itemGap: 2 }, as: StyledActions },
-                    React.createElement("span", null,
-                        React.createElement(Button, { variant: 'text', as: FeedButton, onClick: () => {
-                                onCommentClick === null || onCommentClick === void 0 ? void 0 : onCommentClick({ feedId: id });
-                                if (!replyInputOpen) {
-                                    setReplyInputOpen(true);
-                                }
-                            } },
-                            React.createElement(Icon, { name: 'chat' }),
-                            React.createElement(Text, null, commentLabel),
-                            numReplies > 0 && React.createElement(Count, null, numReplies))),
-                    React.createElement("span", null,
-                        React.createElement(Button, { variant: 'text', as: FeedButton, onClick: () => onLikeClick({ feedId: id }), emphasized: liked },
-                            React.createElement(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }),
-                            React.createElement(Text, null, likeLabel),
-                            likeCount > 0 && React.createElement(Count, null, likeCount)))))),
-            !!(replies === null || replies === void 0 ? void 0 : replies.length) && (React.createElement(StyledReplies, null,
-                (onShowLessReplies || onShowMoreReplies) && (React.createElement(StyledReplyCount, { as: Flex, container: { itemGap: 1 } },
-                    replies.length !== numReplies && (React.createElement(Text, null, t('num_of_num', replies.length, numReplies))),
-                    onShowMoreReplies && replies.length < numReplies && (React.createElement(Button, { variant: 'link', onClick: () => onShowMoreReplies({ feedId: id }) }, t('show_more'))),
-                    repliesLoading && React.createElement(Progress, { placement: 'inline' }))),
-                replies)),
-            replyInputShown || replyInputOpen ? (React.createElement(CardContent, null,
-                React.createElement(FeedReplyInput, { onSetInputRef: ({ ref }) => {
-                        setReplyInputRef(ref);
-                    }, id: id, commentLabel: replyInput.commentLabel, attachments: replyInput.attachments, placeholder: replyInput.placeholder, onFilesAdded: replyInput.onFilesAdded, onSubmit: e => {
-                        setReplyInputOpen(false);
-                        replyInput.onSubmit(e);
-                    } }))) : null,
-            onShowLessReplies && !!replies.length && (React.createElement(Flex, { container: { justify: 'center', pad: [0, 0, 1], itemGap: 1 } },
-                React.createElement(Button, { variant: 'link', onClick: () => onShowLessReplies({ feedId: id }) }, t('show_less')),
-                repliesLoading && React.createElement(Progress, { placement: 'inline' }))))));
+                onMouseLeave?.({ postId: id });
+            }, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { as: FullWidthSummaryItem, visual: onUserClick ? (_jsx(BareButton, { onClick: (event) => {
+                                onUserClick?.({ postId: id, username }, event);
+                            }, children: userVisual }, void 0)) : (userVisual), primary: _jsxs("div", { children: [onUserClick ? (_jsx(Button, { variant: 'text', onClick: (event) => {
+                                        onUserClick?.({ postId: id, username }, event);
+                                    }, children: _jsx(Text, { variant: 'h3', children: fullname }, void 0) }, void 0)) : (_jsx(Text, { variant: 'h3', children: fullname }, void 0)), postContext && _jsxs(Text, { variant: 'primary', children: [" ", t('feed_context', [postContext])] }, void 0)] }, void 0), secondary: _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Button, { variant: 'text', icon: true, onClick: recipients.length
+                                        ? () => {
+                                            if (recipientsCount > 10) {
+                                                recipientsModalRef.current = create(FeedModalList, {
+                                                    count: recipientsCount,
+                                                    heading: t('feed_recipients'),
+                                                    listItems: recipients,
+                                                    onLoadMore: onLoadMoreRecipients
+                                                });
+                                            }
+                                        }
+                                        : onRecipientInteraction, onFocus: onRecipientInteraction, onMouseOver: onRecipientInteraction, "aria-label": postTypeAttributes.ariaLabel, label: postTypeAttributes.label, children: _jsx(Icon, { name: postTypeAttributes.icon }, void 0) }, void 0), _jsx(MetaList, { items: edited ? [timeElapsed, t('edited')] : [timeElapsed] }, void 0)] }, void 0), actions: menuItems ? (_jsx(MenuButton, { text: 'More', menu: {
+                                items: onEditSubmit &&
+                                    typeof content === 'string' &&
+                                    username === loggedInUser.username
+                                    ? menuItems.concat([
+                                        {
+                                            primary: t('edit'),
+                                            id: 'edit',
+                                            onClick: () => setEditMode(true)
+                                        }
+                                    ])
+                                    : menuItems
+                            }, icon: 'more', iconOnly: true, variant: 'simple' }, void 0)) : undefined }, void 0) }, void 0), _jsxs(CardContent, { children: [editMode ? (_jsxs(_Fragment, { children: [_jsx(StyledPostEdit, { ref: editTextAreaRef, children: _jsx(FeedRichText, { onChange: () => {
+                                            setEmptyEditText(rteRef.current?.getPlainText().trim() === '');
+                                            setPostModified(rteRef.current?.getPlainText() !== content);
+                                        }, autoFocus: true, onSubmit: handleEdit, defaultValue: content, ref: rteRef }, void 0) }, void 0), _jsxs(Flex, { container: { justify: 'between', pad: [2, 0, 0] }, children: [_jsx(Button, { onClick: () => setEditMode(false), "aria-label": `${t('cancel')} ${t('edit')} ${id}`, children: t('cancel') }, void 0), _jsx(Button, { variant: 'primary', disabled: emptyEditText || !postModified, onClick: handleEdit, "aria-label": `${t('update')} ${t('edit')} ${id}`, children: t('update') }, void 0)] }, void 0)] }, void 0)) : (_jsx(FeedContent, { maxContentHeight: maxContentHeight, children: content }, void 0)), _jsx(FeedAttachments, { attachments: attachments }, void 0), _jsxs(Flex, { as: StyledPostFooter, container: { justify: 'between', wrap: 'wrap', gap: 1 }, children: [interactionsEnabled ? (_jsxs(Flex, { container: { gap: 2 }, children: [_jsxs(Button, { variant: 'text', as: FeedButton, onClick: () => {
+                                                onCommentClick?.({ postId: id });
+                                                if (!replyInputOpen) {
+                                                    setReplyInputOpen(true);
+                                                }
+                                            }, children: [_jsx(Icon, { name: 'chat' }, void 0), _jsx(Text, { children: commentLabel }, void 0), numReplies > 0 && _jsx(Count, { children: numReplies }, void 0)] }, void 0), _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsxs(Button, { variant: 'text', as: FeedButton, onClick: () => onLikeClick({
+                                                        postId: id,
+                                                        user: {
+                                                            id: loggedInUser.username,
+                                                            primary: loggedInUser.fullname,
+                                                            secondary: loggedInUser.meta ? (_jsx(MetaList, { items: loggedInUser.meta }, void 0)) : undefined,
+                                                            visual: (_jsx(Avatar, { size: 'l', imageSrc: loggedInUser.avatarSrc, name: loggedInUser.fullname }, void 0))
+                                                        }
+                                                    }), emphasized: liked, children: [_jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }, void 0), _jsx(Text, { children: likeLabel }, void 0)] }, void 0), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(BareButton, { ref: setCountEl, onClick: likes.length
+                                                                ? () => {
+                                                                    if (likeCount > 10) {
+                                                                        likesModalRef.current = create(FeedModalList, {
+                                                                            count: likeCount,
+                                                                            heading: t('feed_likes'),
+                                                                            listItems: likes,
+                                                                            onLoadMore: onLoadMoreLikes
+                                                                        });
+                                                                    }
+                                                                }
+                                                                : onLikeCountInteraction, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, children: _jsx(Count, { children: likeCount }, void 0) }, void 0), _jsx(Tooltip, { target: countEl, showDelay: 'none', hideDelay: 'none', children: likesAttributes.label }, void 0)] }, void 0))] }, void 0)] }, void 0)) : (_jsx("div", {}, void 0)), (onShowLessReplies || onShowMoreReplies) && (_jsxs(Flex, { container: { gap: 0.5 }, children: [replies.length !== numReplies && (_jsxs(_Fragment, { children: [_jsx(Text, { children: t('showing_num_of_num', [replies.length, numReplies]) }, void 0), _jsx("span", { children: "\u2022" }, void 0)] }, void 0)), onShowMoreReplies && replies.length < numReplies && (_jsx(Button, { variant: 'link', onClick: () => onShowMoreReplies({ postId: id }), children: t('show_more') }, void 0)), repliesLoading && _jsx(Progress, { placement: 'inline' }, void 0)] }, void 0))] }, void 0)] }, void 0), !!replies?.length && _jsx(StyledReplies, { children: replies }, void 0), replyInputShown || replyInputOpen ? (_jsx(CardContent, { children: _jsx(FeedReplyInput, { onSetInputRef: ({ ref }) => {
+                            setReplyInputRef(ref);
+                        }, id: id, commentLabel: replyInput.commentLabel, attachments: replyInput.attachments, placeholder: replyInput.placeholder, onFilesAdded: replyInput.onFilesAdded, onSubmit: e => {
+                            setReplyInputOpen(false);
+                            replyInput.onSubmit(e);
+                        } }, void 0) }, void 0)) : null, onShowLessReplies && !!replies.length && (_jsxs(Flex, { container: { justify: 'center', pad: [0, 0, 1], gap: 1 }, children: [_jsx(Button, { variant: 'link', onClick: () => onShowLessReplies({ postId: id }), children: t('show_less') }, void 0), repliesLoading && _jsx(Progress, { placement: 'inline' }, void 0)] }, void 0))] }, void 0) }, void 0));
 };
 FeedPost.defaultProps = defaultProps;
 export default FeedPost;

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

@@ -1 +1 @@
-{"version":3,"file":"FeedPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedPost.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  ReactElement,\n  useState,\n  useEffect,\n  MutableRefObject,\n  MouseEvent,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  Count,\n  Card,\n  CardContent,\n  CardHeader,\n  Flex,\n  Icon,\n  MenuButton,\n  SummaryItem,\n  Text,\n  defaultThemeProp,\n  ForwardProps,\n  useElement,\n  Popover,\n  useI18n,\n  Progress,\n  Menu,\n  useOuterEvent,\n  useConsolidatedRef,\n  MenuItemProps\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState } from '@pega/cosmos-react-rte';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport FeedButton from './FeedButton';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport { StyledFeedReply } from './FeedReply';\nimport FeedContent, { FeedContentProps } from './FeedContent';\nimport FeedReplyInput, { FeedReplyInputProps } from './FeedReplyInput';\nimport { FeedReplyContext } from './Feed.context';\n\nexport interface FeedPostProps {\n  /** Unique ID for this activity */\n  id: string;\n  /** All of the information used to fill text portions, and avatar info */\n  info: {\n    avatarSrc?: string;\n    fullname: string;\n    username: string;\n    timeElapsed: string;\n    content: ReactElement | string;\n    postType?: 'public' | 'private';\n    recipients?: MenuItemProps[];\n    attachments?: AttachedFiles[];\n    liked?: boolean;\n    icon?: string;\n    postContext?: ReactElement | string;\n  };\n  maxContentHeight?: FeedContentProps['maxContentHeight'];\n  /** Button labels for accessibility purposes */\n  interactionInfo: {\n    likeLabel: string;\n    likeCount: number;\n    commentLabel: string;\n    /**\n     * @default true\n     */\n    interactionsEnabled?: boolean;\n  };\n  /** Callback that runs when the mouse pointer hovers over the Activity. */\n  onMouseEnter?: (event: { feedId: string }) => void;\n  /** Callback that runs when the mouse pointer leaves the Activity. */\n  onMouseLeave?: (event: { feedId: string }) => void;\n  /** Callback that runs when the comment button has been clicked */\n  onCommentClick?: (event: { feedId: string }) => void;\n  /** Callback that runs when the like button has been clicked */\n  onLikeClick: (event: { feedId: string }) => void;\n  /** Callback that runs when the user name or visual button has been clicked */\n  onUserClick?: (event: { feedId: string; username: string }, clickEvent?: MouseEvent) => void;\n  /** MenuItems that will populate the three dot menu button */\n  menuItems?: MenuItemProps[];\n  /** Props that will be passed into the reply input, see FeedReplyInput for more information */\n  replyInput: Pick<FeedReplyInputProps, 'onSubmit' | 'placeholder' | 'onFilesAdded'> & {\n    commentLabel: FeedReplyInputProps['commentLabel'];\n    attachments: FeedReplyInputProps['attachments'];\n  };\n  /** The default visibility for the reply input */\n  replyInputShown?: boolean;\n  /** An array to hold FeedReply's inside of this Activity */\n  replies?: ReactElement[];\n  /** A total count of all replies. */\n  replyCount?: number;\n  /** Callback that runs when the user clicks Show more button. */\n  onShowMoreReplies?: (event: { feedId: string }) => void;\n  /** Callback that runs when the user clicks Show less button. */\n  onShowLessReplies?: (event: { feedId: string }) => void;\n  /** A loading indicator for the replies. */\n  repliesLoading?: boolean;\n}\n\nconst defaultProps: Partial<FeedPostProps> = {\n  info: {\n    avatarSrc: '',\n    fullname: '',\n    username: '',\n    timeElapsed: '',\n    content: ''\n  }\n};\n\nexport const StyledFeedPost = styled.div(\n  ({ theme }) => css`\n    ${StyledFeedReply}:not(:last-child) {\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledFeedPost.defaultProps = defaultThemeProp;\n\nexport const StyledReplies = styled.div(\n  ({ theme }) => css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: calc(1.25 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledReplies.defaultProps = defaultThemeProp;\n\nexport const StyledReplyCount = styled.div(\n  ({ theme }) => css`\n    padding-bottom: calc(1.25 * ${theme.base.spacing});\n  `\n);\n\nStyledReplyCount.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled.div(props => {\n  const { spacing } = props.theme.base;\n\n  return css`\n    margin-top: ${spacing};\n  `;\n});\n\nStyledActions.defaultProps = defaultThemeProp;\n\nconst FullWidthSummaryItem = styled.div`\n  width: 100%;\n`;\n\nconst FeedPost: FC<ForwardProps & FeedPostProps> = (props: ForwardProps & FeedPostProps) => {\n  const {\n    id,\n    info,\n    interactionInfo,\n    maxContentHeight = Infinity,\n    onMouseEnter,\n    onMouseLeave,\n    onCommentClick,\n    onLikeClick,\n    onUserClick,\n    onShowMoreClick,\n    newReplyField,\n    menuItems,\n    replies = [],\n    replyInput,\n    replyInputShown,\n    replyCount,\n    repliesLoading,\n    onShowLessReplies,\n    onShowMoreReplies,\n    ...restProps\n  } = props;\n  const {\n    avatarSrc,\n    fullname,\n    username,\n    timeElapsed,\n    content,\n    postType = 'public',\n    recipients,\n    attachments,\n    liked,\n    icon,\n    postContext\n  } = info;\n  const { likeLabel, likeCount, commentLabel, interactionsEnabled = true } = interactionInfo;\n  const [replyInputOpen, setReplyInputOpen] = useState(false);\n  const [mountRecipientsPopover, setMountRecipientsPopover] = useState(false);\n  const [postTypeEl, setPostTypeEl] = useElement<HTMLButtonElement>();\n  const [replyInputRef, setReplyInputRef] = useState<MutableRefObject<\n    RichTextEditorState | undefined\n  > | null>(null);\n  const postTypeRef = useConsolidatedRef(setPostTypeEl);\n  const popoverRef = useRef(null);\n\n  const togglePopover = () => {\n    if (postType === 'private') {\n      setMountRecipientsPopover(curr => !curr);\n    }\n  };\n\n  useOuterEvent('mousedown', [postTypeRef, popoverRef], () => {\n    setMountRecipientsPopover(false);\n  });\n\n  useEffect(() => {\n    if ((replyInputOpen || replyInputShown) && replyInputRef) {\n      replyInputRef.current?.focus();\n    }\n  }, [replyInputOpen, replyInputShown, replyInputRef]);\n\n  const t = useI18n();\n\n  const userVisual = icon ? (\n    <Icon name={icon} />\n  ) : (\n    <Avatar name={fullname} size='l' imageSrc={avatarSrc} />\n  );\n\n  const numReplies = replyCount || replies?.length;\n\n  let postTypeAttributes;\n\n  switch (postType) {\n    case 'private':\n      postTypeAttributes = {\n        icon: 'users-solid',\n        label: 'Private'\n      };\n      break;\n    default:\n      postTypeAttributes = {\n        icon: 'globe',\n        label: 'Public'\n      };\n      break;\n  }\n\n  return (\n    <FeedReplyContext.Provider value={{ onShowReplyInput: () => setReplyInputOpen(true) }}>\n      <Card\n        {...restProps}\n        as={StyledFeedPost}\n        onMouseEnter={() => {\n          onMouseEnter?.({ feedId: id });\n        }}\n        onMouseLeave={() => {\n          onMouseLeave?.({ feedId: id });\n        }}\n      >\n        <CardHeader>\n          <SummaryItem\n            as={FullWidthSummaryItem}\n            visual={\n              onUserClick ? (\n                <BareButton\n                  onClick={(event: MouseEvent) => {\n                    onUserClick?.({ feedId: id, username }, event);\n                  }}\n                >\n                  {userVisual}\n                </BareButton>\n              ) : (\n                userVisual\n              )\n            }\n            primary={\n              <Flex container={{ itemGap: 0.5, alignItems: 'center' }}>\n                {onUserClick ? (\n                  <Button\n                    variant='text'\n                    onClick={(event: MouseEvent) => {\n                      onUserClick?.({ feedId: id, username }, event);\n                    }}\n                  >\n                    <Text variant='h3'>{fullname}</Text>\n                  </Button>\n                ) : (\n                  <Text variant='h3'>{fullname}</Text>\n                )}\n                {postContext && <Text variant='primary'>{t('feed_context', postContext)}</Text>}\n              </Flex>\n            }\n            secondary={\n              <Flex container={{ itemGap: 1, alignItems: 'center' }}>\n                <Text variant='secondary'>{timeElapsed}</Text>\n                <Button\n                  ref={postTypeRef}\n                  variant='simple'\n                  icon\n                  onClick={togglePopover}\n                  label={postTypeAttributes.label}\n                >\n                  <Icon name={postTypeAttributes.icon} />\n                </Button>\n                {recipients && mountRecipientsPopover && (\n                  <Popover ref={popoverRef} arrow hideDelay='short' target={postTypeEl}>\n                    <Menu items={recipients} />\n                  </Popover>\n                )}\n              </Flex>\n            }\n            actions={\n              menuItems ? (\n                <MenuButton\n                  text='More'\n                  menu={{ items: menuItems }}\n                  icon='more'\n                  iconOnly\n                  variant='simple'\n                />\n              ) : undefined\n            }\n          />\n        </CardHeader>\n        <CardContent>\n          <FeedContent maxContentHeight={maxContentHeight}>{content}</FeedContent>\n          <FeedAttachments attachments={attachments} />\n          {interactionsEnabled && (\n            <Flex container={{ itemGap: 2 }} as={StyledActions}>\n              <span>\n                <Button\n                  variant='text'\n                  as={FeedButton}\n                  onClick={() => {\n                    onCommentClick?.({ feedId: id });\n                    if (!replyInputOpen) {\n                      setReplyInputOpen(true);\n                    }\n                  }}\n                >\n                  <Icon name='chat' />\n                  <Text>{commentLabel}</Text>\n                  {numReplies > 0 && <Count>{numReplies}</Count>}\n                </Button>\n              </span>\n              <span>\n                <Button\n                  variant='text'\n                  as={FeedButton}\n                  onClick={() => onLikeClick({ feedId: id })}\n                  emphasized={liked}\n                >\n                  <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n                  <Text>{likeLabel}</Text>\n                  {likeCount > 0 && <Count>{likeCount}</Count>}\n                </Button>\n              </span>\n            </Flex>\n          )}\n        </CardContent>\n        {!!replies?.length && (\n          <StyledReplies>\n            {(onShowLessReplies || onShowMoreReplies) && (\n              <StyledReplyCount as={Flex} container={{ itemGap: 1 }}>\n                {replies.length !== numReplies && (\n                  <Text>{t('num_of_num', replies.length, numReplies)}</Text>\n                )}\n                {onShowMoreReplies && replies.length < numReplies && (\n                  <Button variant='link' onClick={() => onShowMoreReplies({ feedId: id })}>\n                    {t('show_more')}\n                  </Button>\n                )}\n                {repliesLoading && <Progress placement='inline' />}\n              </StyledReplyCount>\n            )}\n            {replies}\n          </StyledReplies>\n        )}\n        {replyInputShown || replyInputOpen ? (\n          <CardContent>\n            <FeedReplyInput\n              onSetInputRef={({ ref }) => {\n                setReplyInputRef(ref);\n              }}\n              id={id}\n              commentLabel={replyInput.commentLabel}\n              attachments={replyInput.attachments}\n              placeholder={replyInput.placeholder}\n              onFilesAdded={replyInput.onFilesAdded}\n              onSubmit={e => {\n                setReplyInputOpen(false);\n                replyInput.onSubmit(e);\n              }}\n            />\n          </CardContent>\n        ) : null}\n        {onShowLessReplies && !!replies.length && (\n          <Flex container={{ justify: 'center', pad: [0, 0, 1], itemGap: 1 }}>\n            <Button variant='link' onClick={() => onShowLessReplies({ feedId: id })}>\n              {t('show_less')}\n            </Button>\n            {repliesLoading && <Progress placement='inline' />}\n          </Flex>\n        )}\n      </Card>\n    </FeedReplyContext.Provider>\n  );\n};\n\nFeedPost.defaultProps = defaultProps;\n\nexport default FeedPost;\n"]}
+{"version":3,"file":"FeedPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedPost.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  ReactElement,\n  useState,\n  useEffect,\n  MutableRefObject,\n  MouseEvent,\n  useRef,\n  useContext,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  AvatarProps,\n  Button,\n  Count,\n  Card,\n  CardContent,\n  CardHeader,\n  Flex,\n  Icon,\n  registerIcon,\n  MenuButton,\n  SummaryItem,\n  Text,\n  defaultThemeProp,\n  ForwardProps,\n  useElement,\n  useI18n,\n  Progress,\n  useOuterEvent,\n  MenuItemProps,\n  MetaList,\n  Tooltip,\n  ModalManagerContext,\n  SummaryListItem,\n  ModalMethods,\n  StyledVisual,\n  useConfiguration\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport { formatListToLocaleString } from '@pega/cosmos-react-core/lib/utils/utils';\n\nimport FeedButton from './FeedButton';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport { StyledFeedReplyContainer } from './FeedReply';\nimport FeedContent, { FeedContentProps } from './FeedContent';\nimport FeedReplyInput, { FeedReplyInputProps } from './FeedReplyInput';\nimport { FeedContext, FeedReplyContext } from './Feed.context';\nimport FeedRichText from './FeedRichText';\nimport FeedModalList, { FeedModalListProps } from './FeedModalList';\n\nregisterIcon(arrowMicroDownIcon, caretLeftIcon);\n\nexport interface FeedPostProps {\n  /** Unique ID for this activity */\n  id: string;\n  /** All of the information used to fill text portions, and avatar info */\n  info: {\n    avatarSrc?: string;\n    fullname: string;\n    username: string;\n    timeElapsed: string;\n    content: ReactElement | string;\n    postType?: 'public' | 'private';\n    recipients?: MenuItemProps[];\n    recipientsCount?: number;\n    attachments?: AttachedFiles[];\n    liked?: boolean;\n    icon?: string;\n    postContext?: ReactElement | string;\n    userStatus?: AvatarProps['status'];\n  };\n  maxContentHeight?: FeedContentProps['maxContentHeight'];\n  /** Button labels for accessibility purposes. */\n  interactionInfo: {\n    likeLabel: string;\n    likes?: SummaryListItem[];\n    likeCount?: number;\n    commentLabel: string;\n    /**\n     * @default true\n     */\n    interactionsEnabled?: boolean;\n  };\n  /** Callback that runs when the mouse pointer hovers over the Activity. */\n  onMouseEnter?: (event: { postId: string }) => void;\n  /** Callback that runs when the mouse pointer leaves the Activity. */\n  onMouseLeave?: (event: { postId: string }) => void;\n  /** Callback that runs when the comment button has been clicked */\n  onCommentClick?: (event: { postId: string }) => void;\n  /** Callback that runs when the like button has been clicked */\n  onLikeClick: (event: { postId: string; user: SummaryListItem }) => void;\n  /** Callback that runs when the like count on a post is hovered, focused, or clicked. */\n  onLikeCountInteraction?: () => void;\n  /** Callback that runs when the bottom of the extended like list Modal is reached, allowing for more likes to be loaded. */\n  onLoadMoreLikes?: () => void;\n  /** Callback that runs when the private recipient icon on a post is hovered, focused, or clicked. */\n  onRecipientInteraction?: () => void;\n  /** Callback that runs when the bottom of the extended private recipient list Modal is reached, allowing for more recipients to be loaded. */\n  onLoadMoreRecipients?: () => void;\n  /** Callback that runs when the user name or visual button has been clicked */\n  onUserClick?: (event: { postId: string; username: string }, clickEvent?: MouseEvent) => void;\n  /** MenuItems that will populate the three dot menu button */\n  menuItems?: MenuItemProps[];\n  /** Callback that updates the post after being edited. If undefined, the post will not be editable. */\n  onEditSubmit?: (event: { postId: string; value: string }) => void;\n  /**\n   * Flag that indicates if a post has been previously edited.\n   * @default false\n   */\n  edited?: boolean;\n  /** Props that will be passed into the reply input, see FeedReplyInput for more information */\n  replyInput: Pick<FeedReplyInputProps, 'onSubmit' | 'placeholder' | 'onFilesAdded'> & {\n    commentLabel: FeedReplyInputProps['commentLabel'];\n    attachments: FeedReplyInputProps['attachments'];\n  };\n  /** The default visibility for the reply input */\n  replyInputShown?: boolean;\n  /** An array to hold FeedReply's inside of this Activity */\n  replies?: ReactElement[];\n  /** A total count of all replies. */\n  replyCount?: number;\n  /** Callback that runs when the user clicks Show more button. */\n  onShowMoreReplies?: (event: { postId: string }) => void;\n  /** Callback that runs when the user clicks Show less button. */\n  onShowLessReplies?: (event: { postId: string }) => void;\n  /** A loading indicator for the replies. */\n  repliesLoading?: boolean;\n}\n\nconst defaultProps: Partial<FeedPostProps> = {\n  info: {\n    avatarSrc: '',\n    fullname: '',\n    username: '',\n    timeElapsed: '',\n    content: ''\n  }\n};\n\nexport const StyledFeedPost = styled.div(\n  ({ theme }) => css`\n    ${StyledFeedReplyContainer}:not(:last-child) {\n      margin-block-end: calc(2 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledFeedPost.defaultProps = defaultThemeProp;\n\nexport const StyledPostEdit = styled.div(\n  ({ theme }) => css`\n    ${StyledRichTextEditor} {\n      padding: calc(0.5 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledPostEdit.defaultProps = defaultThemeProp;\n\nexport const StyledReplies = styled.div(\n  ({ theme }) => css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: calc(1.25 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledReplies.defaultProps = defaultThemeProp;\n\nexport const StyledPostFooter = styled.div(\n  ({ theme }) => css`\n    margin-block-start: ${theme.base.spacing};\n  `\n);\n\nStyledPostFooter.defaultProps = defaultThemeProp;\n\nconst FullWidthSummaryItem = styled.div`\n  width: 100%;\n\n  ${StyledVisual} {\n    align-self: start;\n  }\n`;\n\nconst FeedPost: FC<ForwardProps & FeedPostProps> = (props: ForwardProps & FeedPostProps) => {\n  const {\n    id,\n    info,\n    interactionInfo,\n    maxContentHeight = Infinity,\n    onMouseEnter,\n    onMouseLeave,\n    onCommentClick,\n    onLikeClick,\n    onLikeCountInteraction,\n    onLoadMoreLikes,\n    onRecipientInteraction,\n    onLoadMoreRecipients,\n    onUserClick,\n    onShowMoreClick,\n    newReplyField,\n    menuItems,\n    onEditSubmit,\n    edited = false,\n    replies = [],\n    replyInput,\n    replyInputShown,\n    replyCount,\n    repliesLoading,\n    onShowLessReplies,\n    onShowMoreReplies,\n    ...restProps\n  } = props;\n  const {\n    avatarSrc,\n    fullname,\n    username,\n    timeElapsed,\n    content,\n    postType = 'public',\n    recipients = [],\n    recipientsCount = 0,\n    attachments,\n    liked,\n    icon,\n    postContext,\n    userStatus\n  } = info;\n  const {\n    likeLabel,\n    likes = [],\n    likeCount = 0,\n    commentLabel,\n    interactionsEnabled = true\n  } = interactionInfo;\n  const loggedInUser = useContext(FeedContext).userInfo;\n\n  const t = useI18n();\n  const { locale } = useConfiguration();\n  const [countEl, setCountEl] = useElement<HTMLButtonElement>();\n  const rteRef = useRef<RichTextEditorState>();\n  const [editMode, setEditMode] = useState(false);\n  const editTextAreaRef = useRef<HTMLDivElement>(null);\n  const [emptyEditText, setEmptyEditText] = useState(false);\n  const [postModified, setPostModified] = useState(false);\n  const [replyInputOpen, setReplyInputOpen] = useState(false);\n  const [replyInputRef, setReplyInputRef] = useState<MutableRefObject<\n    RichTextEditorState | undefined\n  > | null>(null);\n  const { create } = useContext(ModalManagerContext);\n  const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n  const recipientsModalRef = useRef<ModalMethods<FeedModalListProps>>();\n\n  useEffect(() => {\n    likesModalRef.current?.update({\n      count: likeCount,\n      heading: likeLabel,\n      listItems: likes,\n      onLoadMore: onLoadMoreLikes\n    });\n  }, [likeCount, likeLabel, likes, onLoadMoreLikes]);\n\n  useEffect(() => {\n    if (recipients.length) {\n      recipientsModalRef.current?.update({\n        count: recipientsCount,\n        heading: t('feed_recipients'),\n        listItems: recipients as SummaryListItem[],\n        onLoadMore: onLoadMoreRecipients\n      });\n    }\n  }, [recipientsCount, recipients, onLoadMoreRecipients]);\n\n  useOuterEvent('mousedown', [editTextAreaRef], () => {\n    if (emptyEditText) setEditMode(false);\n  });\n\n  useEffect(() => {\n    if ((replyInputOpen || replyInputShown) && replyInputRef) {\n      replyInputRef.current?.focus();\n    }\n  }, [replyInputOpen, replyInputShown, replyInputRef]);\n\n  const userVisual = icon ? (\n    <Icon name={icon} />\n  ) : (\n    <Avatar name={fullname} size='l' imageSrc={avatarSrc} status={userStatus} />\n  );\n\n  const numReplies = replyCount || replies?.length;\n\n  const postTypeAttributes = useMemo(() => {\n    if (postType === 'private') {\n      const recipientsList = recipients.map(x => x.primary);\n      return {\n        icon: 'users-solid',\n        ariaLabel: `${t('feed_private_post')} t('feed_recipients')} ${formatListToLocaleString(\n          recipientsList,\n          t,\n          locale,\n          { count: recipientsCount }\n        )}`,\n        label: formatListToLocaleString(recipientsList, t, locale, {\n          count: recipientsCount,\n          separator: '\\n'\n        })\n      };\n    }\n\n    return {\n      icon: 'globe',\n      ariaLabel: t('feed_public_post'),\n      label: t('feed_public_post')\n    };\n  }, [postType, recipients, recipientsCount]);\n\n  const likesAttributes = useMemo(() => {\n    const likesList = likes.map(x => x.primary.toString());\n    return {\n      ariaLabel: `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {\n        count: likeCount\n      })}`,\n      label: formatListToLocaleString(likesList, t, locale, {\n        count: likeCount,\n        separator: '\\n'\n      })\n    };\n  }, [likes, likeCount]);\n\n  const handleEdit = () => {\n    if (!emptyEditText && postModified) {\n      onEditSubmit?.({\n        postId: id,\n        value: rteRef.current?.getPlainText() || ''\n      });\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <FeedReplyContext.Provider value={{ onShowReplyInput: () => setReplyInputOpen(true) }}>\n      <Card\n        {...restProps}\n        as={StyledFeedPost}\n        onMouseEnter={() => {\n          onMouseEnter?.({ postId: id });\n        }}\n        onMouseLeave={() => {\n          onMouseLeave?.({ postId: id });\n        }}\n      >\n        <CardHeader>\n          <SummaryItem\n            as={FullWidthSummaryItem}\n            visual={\n              onUserClick ? (\n                <BareButton\n                  onClick={(event: MouseEvent) => {\n                    onUserClick?.({ postId: id, username }, event);\n                  }}\n                >\n                  {userVisual}\n                </BareButton>\n              ) : (\n                userVisual\n              )\n            }\n            primary={\n              <div>\n                {onUserClick ? (\n                  <Button\n                    variant='text'\n                    onClick={(event: MouseEvent) => {\n                      onUserClick?.({ postId: id, username }, event);\n                    }}\n                  >\n                    <Text variant='h3'>{fullname}</Text>\n                  </Button>\n                ) : (\n                  <Text variant='h3'>{fullname}</Text>\n                )}\n                {postContext && <Text variant='primary'> {t('feed_context', [postContext])}</Text>}\n              </div>\n            }\n            secondary={\n              <Flex container={{ gap: 1, alignItems: 'center' }}>\n                <Button\n                  variant='text'\n                  icon\n                  onClick={\n                    recipients.length\n                      ? () => {\n                          if (recipientsCount > 10) {\n                            recipientsModalRef.current = create(FeedModalList, {\n                              count: recipientsCount,\n                              heading: t('feed_recipients'),\n                              listItems: recipients as SummaryListItem[],\n                              onLoadMore: onLoadMoreRecipients\n                            });\n                          }\n                        }\n                      : onRecipientInteraction\n                  }\n                  onFocus={onRecipientInteraction}\n                  onMouseOver={onRecipientInteraction}\n                  aria-label={postTypeAttributes.ariaLabel}\n                  label={postTypeAttributes.label}\n                >\n                  <Icon name={postTypeAttributes.icon} />\n                </Button>\n                <MetaList items={edited ? [timeElapsed, t('edited')] : [timeElapsed]} />\n              </Flex>\n            }\n            actions={\n              menuItems ? (\n                <MenuButton\n                  text='More'\n                  menu={{\n                    items:\n                      onEditSubmit &&\n                      typeof content === 'string' &&\n                      username === loggedInUser.username\n                        ? menuItems.concat([\n                            {\n                              primary: t('edit'),\n                              id: 'edit',\n                              onClick: () => setEditMode(true)\n                            }\n                          ])\n                        : menuItems\n                  }}\n                  icon='more'\n                  iconOnly\n                  variant='simple'\n                />\n              ) : undefined\n            }\n          />\n        </CardHeader>\n        <CardContent>\n          {editMode ? (\n            <>\n              <StyledPostEdit ref={editTextAreaRef}>\n                <FeedRichText\n                  onChange={() => {\n                    setEmptyEditText(rteRef.current?.getPlainText().trim() === '');\n                    setPostModified(rteRef.current?.getPlainText() !== content);\n                  }}\n                  autoFocus\n                  onSubmit={handleEdit}\n                  defaultValue={content}\n                  ref={rteRef}\n                />\n              </StyledPostEdit>\n              <Flex container={{ justify: 'between', pad: [2, 0, 0] }}>\n                <Button\n                  onClick={() => setEditMode(false)}\n                  aria-label={`${t('cancel')} ${t('edit')} ${id}`}\n                >\n                  {t('cancel')}\n                </Button>\n                <Button\n                  variant='primary'\n                  disabled={emptyEditText || !postModified}\n                  onClick={handleEdit}\n                  aria-label={`${t('update')} ${t('edit')} ${id}`}\n                >\n                  {t('update')}\n                </Button>\n              </Flex>\n            </>\n          ) : (\n            <FeedContent maxContentHeight={maxContentHeight}>{content}</FeedContent>\n          )}\n          <FeedAttachments attachments={attachments} />\n          <Flex as={StyledPostFooter} container={{ justify: 'between', wrap: 'wrap', gap: 1 }}>\n            {interactionsEnabled ? (\n              <Flex container={{ gap: 2 }}>\n                <Button\n                  variant='text'\n                  as={FeedButton}\n                  onClick={() => {\n                    onCommentClick?.({ postId: id });\n                    if (!replyInputOpen) {\n                      setReplyInputOpen(true);\n                    }\n                  }}\n                >\n                  <Icon name='chat' />\n                  <Text>{commentLabel}</Text>\n                  {numReplies > 0 && <Count>{numReplies}</Count>}\n                </Button>\n                <Flex container={{ gap: 0.5 }}>\n                  <Button\n                    variant='text'\n                    as={FeedButton}\n                    onClick={() =>\n                      onLikeClick({\n                        postId: id,\n                        user: {\n                          id: loggedInUser.username,\n                          primary: loggedInUser.fullname,\n                          secondary: loggedInUser.meta ? (\n                            <MetaList items={loggedInUser.meta} />\n                          ) : undefined,\n                          visual: (\n                            <Avatar\n                              size='l'\n                              imageSrc={loggedInUser.avatarSrc}\n                              name={loggedInUser.fullname}\n                            />\n                          )\n                        }\n                      })\n                    }\n                    emphasized={liked}\n                  >\n                    <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n                    <Text>{likeLabel}</Text>\n                  </Button>\n                  {likeCount > 0 && (\n                    <>\n                      <BareButton\n                        ref={setCountEl}\n                        onClick={\n                          likes.length\n                            ? () => {\n                                if (likeCount > 10) {\n                                  likesModalRef.current = create(FeedModalList, {\n                                    count: likeCount,\n                                    heading: t('feed_likes'),\n                                    listItems: likes,\n                                    onLoadMore: onLoadMoreLikes\n                                  });\n                                }\n                              }\n                            : onLikeCountInteraction\n                        }\n                        onFocus={onLikeCountInteraction}\n                        onMouseOver={onLikeCountInteraction}\n                        aria-label={likesAttributes.ariaLabel}\n                      >\n                        <Count>{likeCount}</Count>\n                      </BareButton>\n                      <Tooltip target={countEl} showDelay='none' hideDelay='none'>\n                        {likesAttributes.label}\n                      </Tooltip>\n                    </>\n                  )}\n                </Flex>\n              </Flex>\n            ) : (\n              <div />\n            )}\n            {(onShowLessReplies || onShowMoreReplies) && (\n              <Flex container={{ gap: 0.5 }}>\n                {replies.length !== numReplies && (\n                  <>\n                    <Text>{t('showing_num_of_num', [replies.length, numReplies])}</Text>\n                    <span>&bull;</span>\n                  </>\n                )}\n                {onShowMoreReplies && replies.length < numReplies && (\n                  <Button variant='link' onClick={() => onShowMoreReplies({ postId: id })}>\n                    {t('show_more')}\n                  </Button>\n                )}\n                {repliesLoading && <Progress placement='inline' />}\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n        {!!replies?.length && <StyledReplies>{replies}</StyledReplies>}\n        {replyInputShown || replyInputOpen ? (\n          <CardContent>\n            <FeedReplyInput\n              onSetInputRef={({ ref }) => {\n                setReplyInputRef(ref);\n              }}\n              id={id}\n              commentLabel={replyInput.commentLabel}\n              attachments={replyInput.attachments}\n              placeholder={replyInput.placeholder}\n              onFilesAdded={replyInput.onFilesAdded}\n              onSubmit={e => {\n                setReplyInputOpen(false);\n                replyInput.onSubmit(e);\n              }}\n            />\n          </CardContent>\n        ) : null}\n        {onShowLessReplies && !!replies.length && (\n          <Flex container={{ justify: 'center', pad: [0, 0, 1], gap: 1 }}>\n            <Button variant='link' onClick={() => onShowLessReplies({ postId: id })}>\n              {t('show_less')}\n            </Button>\n            {repliesLoading && <Progress placement='inline' />}\n          </Flex>\n        )}\n      </Card>\n    </FeedReplyContext.Provider>\n  );\n};\n\nFeedPost.defaultProps = defaultProps;\n\nexport default FeedPost;\n"]}

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

@@ -1,5 +1,5 @@
 import { FC, ReactElement, MouseEvent } from 'react';
-import { ForwardProps, MenuItemProps } from '@pega/cosmos-react-core';
+import { AvatarProps, ForwardProps, MenuItemProps, SummaryListItem } from '@pega/cosmos-react-core';
 import { AttachedFiles } from './FeedAttachments';
 export interface FeedReplyProps {
     id: string;
@@ -13,9 +13,11 @@ export interface FeedReplyProps {
         fullnameLabel: string;
         liked?: boolean;
         icon?: string;
+        userStatus?: AvatarProps['status'];
     };
     interactionInfo: {
-        likeCount: number;
+        likes?: SummaryListItem[];
+        likeCount?: number;
         likeLabel: string;
         commentLabel: string;
         /**
@@ -28,29 +30,45 @@ export interface FeedReplyProps {
      * @default Infinity
      */
     maxContentHeight?: number;
+    /** A set of menu options for actions on the reply. */
     menuItems?: MenuItemProps[];
-    onMouseEnter?(event: {
+    /** Callback that updates the reply after being edited. If undefined, the reply will not be editable. */
+    onEditSubmit?: (event: {
         replyId: string;
-    }): void;
-    onMouseLeave?(event: {
+        value: string;
+    }) => void;
+    /**
+     * Flag that indicates if a reply has been previously edited.
+     * @default false
+     */
+    edited?: boolean;
+    onMouseEnter?: (event: {
+        replyId: string;
+    }) => void;
+    onMouseLeave?: (event: {
         replyId: string;
-    }): void;
-    onCommentClick(event: {
+    }) => void;
+    onCommentClick: (event: {
         replyId: string;
         username: string;
-    }): void;
-    onLikeClick(event: {
+    }) => void;
+    onLikeClick: (event: {
         replyId: string;
-    }): void;
-    onUserClick?(event: {
+        user: SummaryListItem;
+    }) => void;
+    /** Callback that runs when the like count on a post is hovered, focused, or clicked. */
+    onLikeCountInteraction?: () => void;
+    /** Callback that runs when the bottom of the extended like list Modal is reached, allowing for more likes to be loaded. */
+    onLoadMoreLikes?: () => void;
+    onUserClick?: (event: {
         replyId: string;
         username: string;
-    }, clickEvent?: MouseEvent): void;
+    }, clickEvent?: MouseEvent) => void;
 }
 export declare const StyledFeedReplyContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFeedReplyUser: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledVisualButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFeedReply: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFeedReplyContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const FeedReply: FC<ForwardProps & FeedReplyProps>;
 export default FeedReply;
 //# sourceMappingURL=FeedReply.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedReply.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedReply.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAc,UAAU,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,EASL,YAAY,EACZ,aAAa,EACd,MAAM,yBAAyB,CAAC;AAIjC,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKnE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,YAAY,GAAG,MAAM,CAAC;QAC/B,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;QAC9B,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,aAAa,EAAE,MAAM,CAAC;QACtB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,eAAe,EAAE;QACf,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,YAAY,EAAE,MAAM,CAAC;QACrB;;WAEG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IACF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,YAAY,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChD,YAAY,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChD,cAAc,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnE,WAAW,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9C,WAAW,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,EAAE,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3F;AAED,eAAO,MAAM,sBAAsB,yGAQjC,CAAC;AAIH,eAAO,MAAM,mBAAmB,4GAO9B,CAAC;AAIH,eAAO,MAAM,kBAAkB,4GAE9B,CAAC;AAEF,eAAO,MAAM,eAAe,yGAY1B,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,YAAY,GAAG,cAAc,CA2HhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FeedReply.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedReply.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,YAAY,EAEZ,UAAU,EAKX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,WAAW,EAQX,YAAY,EACZ,aAAa,EAMb,eAAe,EAIhB,MAAM,yBAAyB,CAAC;AASjC,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAUnE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,YAAY,GAAG,MAAM,CAAC;QAC/B,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;QAC9B,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,aAAa,EAAE,MAAM,CAAC;QACtB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;KACpC,CAAC;IACF,eAAe,EAAE;QACf,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,YAAY,EAAE,MAAM,CAAC;QACrB;;WAEG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IACF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,wGAAwG;IACxG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvE,WAAW,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,eAAe,CAAA;KAAE,KAAK,IAAI,CAAC;IACzE,wFAAwF;IACxF,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,2HAA2H;IAC3H,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,EAAE,UAAU,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/F;AACD,eAAO,MAAM,sBAAsB,yGAQjC,CAAC;AAIH,eAAO,MAAM,mBAAmB,4GAO9B,CAAC;AAIH,eAAO,MAAM,kBAAkB,4GAE9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGA2BnC,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,YAAY,GAAG,cAAc,CAmRhD,CAAC;AAEF,eAAe,SAAS,CAAC"}