@pega/cosmos-react-social 3.0.0-dev.4.2 → 3.0.0-dev.7.0

package/lib/components/Feed/FeedPost.js

@@ -92,7 +92,7 @@ const FeedPost = (props) => {
             replyInputRef.current?.focus();
         }
     }, [replyInputOpen, replyInputShown, replyInputRef]);
-    const userVisual = icon ? (_jsx(Icon, { name: icon }, void 0)) : (_jsx(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc, status: userStatus }, void 0));
+    const userVisual = icon ? (_jsx(Icon, { name: icon })) : (_jsx(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc, status: userStatus }));
     const numReplies = replyCount || replies?.length;
     const postTypeAttributes = useMemo(() => {
         if (postType === 'private') {
@@ -138,9 +138,9 @@ const FeedPost = (props) => {
                 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) => {
+                            }, children: userVisual })) : (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
+                                    }, children: _jsx(Text, { variant: 'h3', children: fullname }) })) : (_jsx(Text, { variant: 'h3', children: fullname })), postContext && _jsxs(Text, { variant: 'primary', children: [" ", t('feed_context', [postContext])] })] }), 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, {
@@ -152,7 +152,7 @@ const FeedPost = (props) => {
                                                 });
                                             }
                                         }
-                                        : onRecipientInteraction, onFocus: onRecipientInteraction, onMouseOver: onRecipientInteraction, "aria-label": postTypeAttributes.ariaLabel, label: postTypeAttributes.label || t('feed_private_post'), 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: {
+                                        : onRecipientInteraction, onFocus: onRecipientInteraction, onMouseOver: onRecipientInteraction, "aria-label": postTypeAttributes.ariaLabel, label: postTypeAttributes.label || t('feed_private_post'), children: _jsx(Icon, { name: postTypeAttributes.icon }) }), _jsx(MetaList, { items: edited ? [timeElapsed, t('edited')] : [timeElapsed] })] }), actions: menuItems ? (_jsx(MenuButton, { text: 'More', menu: {
                                 items: onEditSubmit &&
                                     typeof content === 'string' &&
                                     username === loggedInUser.username
@@ -164,23 +164,23 @@ const FeedPost = (props) => {
                                         }
                                     ])
                                     : 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: () => {
+                            }, icon: 'more', iconOnly: true, variant: 'simple' })) : undefined }) }), _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, label: t('feed_edit_post'), labelHidden: 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, readOnly: true }, 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: () => {
+                                        }, autoFocus: true, label: t('feed_edit_post'), labelHidden: true, onSubmit: handleEdit, defaultValue: content, ref: rteRef }) }), _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') }), _jsx(Button, { variant: 'primary', disabled: emptyEditText || !postModified, onClick: handleEdit, "aria-label": `${t('update')} ${t('edit')} ${id}`, children: t('update') })] })] })) : (_jsx(FeedContent, { maxContentHeight: maxContentHeight, children: content })), _jsx(FeedAttachments, { attachments: attachments, readOnly: true }), _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), _jsx(FeedLikeButton, { id: id, variant: 'post', onLikeClick: onLikeClick, onLikeCountInteraction: onLikeCountInteraction, onLoadMoreLikes: onLoadMoreLikes, likesLoading: likesLoading, liked: liked, showText: true, ...interactionInfo }, 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 }) => {
+                                            }, children: [_jsx(Icon, { name: 'chat' }), _jsx(Text, { children: commentLabel }), numReplies > 0 && _jsx(Count, { children: numReplies })] }), _jsx(FeedLikeButton, { id: id, variant: 'post', onLikeClick: onLikeClick, onLikeCountInteraction: onLikeCountInteraction, onLoadMoreLikes: onLoadMoreLikes, likesLoading: likesLoading, liked: liked, showText: true, ...interactionInfo })] })) : (_jsx("div", {})), (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]) }), _jsx("span", { children: "\u2022" })] })), onShowMoreReplies && replies.length < numReplies && (_jsx(Button, { variant: 'link', onClick: () => onShowMoreReplies({ postId: id }), children: t('show_more') })), repliesLoading && _jsx(Progress, { placement: 'inline' })] }))] })] }), !!replies?.length && _jsx(StyledReplies, { children: replies }), 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: () => {
+                        } }) })) : null, onShowLessReplies && !!replies.length && (_jsxs(Flex, { container: { justify: 'center', pad: [0, 0, 1], gap: 1 }, children: [_jsx(Button, { variant: 'link', onClick: () => {
                                 onShowLessReplies({ postId: id });
                                 suppressNextAnnouncement.current = true;
-                            }, children: t('show_less') }, void 0), repliesLoading && _jsx(Progress, { placement: 'inline' }, void 0)] }, void 0))] }, void 0) }, void 0));
+                            }, children: t('show_less') }), repliesLoading && _jsx(Progress, { placement: 'inline' })] }))] }) }));
 };
 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 {\n  FC,\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  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  useI18n,\n  Progress,\n  useOuterEvent,\n  MetaList,\n  ModalManagerContext,\n  SummaryListItem,\n  ModalMethods,\n  StyledVisual,\n  useConfiguration,\n  usePrevious\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 from './FeedAttachments';\nimport { StyledFeedReplyContainer } from './FeedReply';\nimport FeedContent from './FeedContent';\nimport FeedReplyInput from './FeedReplyInput';\nimport { FeedContext, FeedReplyContext } from './Feed.context';\nimport FeedRichText from './FeedRichText';\nimport FeedModalList, { FeedModalListProps } from './FeedModalList';\nimport { FeedLikeButton } from './FeedLikeButton';\nimport { FeedPostProps } from './FeedPost.types';\n\nregisterIcon(arrowMicroDownIcon, caretLeftIcon);\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    likesLoading,\n    onLoadMoreLikes,\n    onRecipientInteraction,\n    recipientsLoading,\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 { commentLabel, interactionsEnabled = true } = interactionInfo;\n  const { announce, userInfo: loggedInUser } = useContext(FeedContext);\n\n  const t = useI18n();\n  const { locale } = useConfiguration();\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 recipientsModalRef = useRef<ModalMethods<FeedModalListProps>>();\n  const prevReplies = usePrevious(replies);\n  const suppressNextAnnouncement = useRef(false);\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        loading: recipientsLoading\n      });\n    }\n  }, [recipientsCount, recipients, onLoadMoreRecipients, recipientsLoading]);\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 handleEdit = () => {\n    if (!emptyEditText && postModified) {\n      onEditSubmit?.({\n        postId: id,\n        value: rteRef.current?.getPlainText() || ''\n      });\n      setEditMode(false);\n    }\n  };\n\n  useEffect(() => {\n    if (prevReplies) {\n      const difference = prevReplies.length - replies.length;\n      if (difference > 0 && !suppressNextAnnouncement.current) {\n        announce(t('feed_reply_removed'));\n      } else {\n        suppressNextAnnouncement.current = false;\n      }\n    }\n  }, [replies]);\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                              loading: recipientsLoading\n                            });\n                          }\n                        }\n                      : onRecipientInteraction\n                  }\n                  onFocus={onRecipientInteraction}\n                  onMouseOver={onRecipientInteraction}\n                  aria-label={postTypeAttributes.ariaLabel}\n                  label={postTypeAttributes.label || t('feed_private_post')}\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                  label={t('feed_edit_post')}\n                  labelHidden\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} readOnly />\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                <FeedLikeButton\n                  id={id}\n                  variant='post'\n                  onLikeClick={onLikeClick}\n                  onLikeCountInteraction={onLikeCountInteraction}\n                  onLoadMoreLikes={onLoadMoreLikes}\n                  likesLoading={likesLoading}\n                  liked={liked}\n                  showText\n                  {...interactionInfo}\n                />\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\n              variant='link'\n              onClick={() => {\n                onShowLessReplies({ postId: id });\n                suppressNextAnnouncement.current = true;\n              }}\n            >\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  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  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  useI18n,\n  Progress,\n  useOuterEvent,\n  MetaList,\n  ModalManagerContext,\n  SummaryListItem,\n  ModalMethods,\n  StyledVisual,\n  useConfiguration,\n  usePrevious\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 from './FeedAttachments';\nimport { StyledFeedReplyContainer } from './FeedReply';\nimport FeedContent from './FeedContent';\nimport FeedReplyInput from './FeedReplyInput';\nimport { FeedContext, FeedReplyContext } from './Feed.context';\nimport FeedRichText from './FeedRichText';\nimport FeedModalList, { FeedModalListProps } from './FeedModalList';\nimport { FeedLikeButton } from './FeedLikeButton';\nimport { FeedPostProps } from './FeedPost.types';\n\nregisterIcon(arrowMicroDownIcon, caretLeftIcon);\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    likesLoading,\n    onLoadMoreLikes,\n    onRecipientInteraction,\n    recipientsLoading,\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 { commentLabel, interactionsEnabled = true } = interactionInfo;\n  const { announce, userInfo: loggedInUser } = useContext(FeedContext);\n\n  const t = useI18n();\n  const { locale } = useConfiguration();\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 recipientsModalRef = useRef<ModalMethods<FeedModalListProps>>();\n  const prevReplies = usePrevious(replies);\n  const suppressNextAnnouncement = useRef(false);\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        loading: recipientsLoading\n      });\n    }\n  }, [recipientsCount, recipients, onLoadMoreRecipients, recipientsLoading]);\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 handleEdit = () => {\n    if (!emptyEditText && postModified) {\n      onEditSubmit?.({\n        postId: id,\n        value: rteRef.current?.getPlainText() || ''\n      });\n      setEditMode(false);\n    }\n  };\n\n  useEffect(() => {\n    if (prevReplies) {\n      const difference = prevReplies.length - replies.length;\n      if (difference > 0 && !suppressNextAnnouncement.current) {\n        announce(t('feed_reply_removed'));\n      } else {\n        suppressNextAnnouncement.current = false;\n      }\n    }\n  }, [replies]);\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                              loading: recipientsLoading\n                            });\n                          }\n                        }\n                      : onRecipientInteraction\n                  }\n                  onFocus={onRecipientInteraction}\n                  onMouseOver={onRecipientInteraction}\n                  aria-label={postTypeAttributes.ariaLabel}\n                  label={postTypeAttributes.label || t('feed_private_post')}\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                  label={t('feed_edit_post')}\n                  labelHidden\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} readOnly />\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                <FeedLikeButton\n                  id={id}\n                  variant='post'\n                  onLikeClick={onLikeClick}\n                  onLikeCountInteraction={onLikeCountInteraction}\n                  onLoadMoreLikes={onLoadMoreLikes}\n                  likesLoading={likesLoading}\n                  liked={liked}\n                  showText\n                  {...interactionInfo}\n                />\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\n              variant='link'\n              onClick={() => {\n                onShowLessReplies({ postId: id });\n                suppressNextAnnouncement.current = true;\n              }}\n            >\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.js

@@ -98,19 +98,19 @@ const FeedReply = (props) => {
             setEditMode(false);
         }
     };
-    const userVisual = icon ? (_jsx(Icon, { name: icon }, void 0)) : (_jsx(Avatar, { name: fullname, size: 'm', imageSrc: avatarSrc, status: userStatus }, void 0));
+    const userVisual = icon ? (_jsx(Icon, { name: icon })) : (_jsx(Avatar, { name: fullname, size: 'm', imageSrc: avatarSrc, status: userStatus }));
     return (_jsxs(Flex, { container: true, as: StyledFeedReplyContainer, onMouseEnter: () => {
             onMouseEnter?.({ replyId: id });
         }, onMouseLeave: () => {
             onMouseLeave?.({ replyId: id });
         }, ...restProps, children: [onUserClick ? (_jsx(BareButton, { as: StyledVisualButton, onClick: (event) => {
                     onUserClick?.({ replyId: id, username }, event);
-                }, children: userVisual }, void 0)) : (userVisual), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, children: [editMode ? (_jsxs(_Fragment, { children: [_jsx(StyledFeedReply, { children: _jsx(FeedRichText, { onChange: () => {
+                }, children: userVisual })) : (userVisual), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, children: [editMode ? (_jsxs(_Fragment, { children: [_jsx(StyledFeedReply, { children: _jsx(FeedRichText, { onChange: () => {
                                         setEmptyEditText(rteRef.current?.getPlainText().trim() === '');
                                         setReplyModified(rteRef.current?.getPlainText() !== content);
-                                    }, autoFocus: true, onSubmit: handleEdit, defaultValue: content, ref: rteRef }, void 0) }, void 0), _jsxs(Flex, { container: { justify: 'between', pad: [2, 0, 1] }, children: [_jsx(Button, { onClick: () => setEditMode(false), "aria-label": `${t('cancel')} ${t('edit')} ${id}`, children: t('cancel') }, void 0), _jsx(Button, { variant: 'primary', disabled: emptyEditText || !replyModified, onClick: handleEdit, "aria-label": `${t('update')} ${t('edit')} ${id}`, children: t('update') }, void 0)] }, void 0)] }, void 0)) : (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, item: { grow: 1 }, children: [_jsxs(Flex, { item: { grow: 1 }, as: StyledFeedReplyContent, children: [_jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, children: [_jsx("div", { children: _jsx(Button, { as: StyledFeedReplyUser, variant: 'text', onClick: (event) => {
+                                    }, autoFocus: true, onSubmit: handleEdit, defaultValue: content, ref: rteRef }) }), _jsxs(Flex, { container: { justify: 'between', pad: [2, 0, 1] }, children: [_jsx(Button, { onClick: () => setEditMode(false), "aria-label": `${t('cancel')} ${t('edit')} ${id}`, children: t('cancel') }), _jsx(Button, { variant: 'primary', disabled: emptyEditText || !replyModified, onClick: handleEdit, "aria-label": `${t('update')} ${t('edit')} ${id}`, children: t('update') })] })] })) : (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, item: { grow: 1 }, children: [_jsxs(Flex, { item: { grow: 1 }, as: StyledFeedReplyContent, children: [_jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, children: [_jsx("div", { children: _jsx(Button, { as: StyledFeedReplyUser, variant: 'text', onClick: (event) => {
                                                         onUserClick?.({ replyId: id, username }, event);
-                                                    }, "aria-label": fullnameLabel, children: fullname }, void 0) }, void 0), _jsx(FeedContent, { maxContentHeight: maxContentHeight, children: content }, void 0)] }, void 0), _jsx(FeedAttachments, { attachments: attachments, readOnly: true }, void 0)] }, void 0), menuItems ? (_jsx(MenuButton, { text: 'More', menu: {
+                                                    }, "aria-label": fullnameLabel, children: fullname }) }), _jsx(FeedContent, { maxContentHeight: maxContentHeight, children: content })] }), _jsx(FeedAttachments, { attachments: attachments, readOnly: true })] }), menuItems ? (_jsx(MenuButton, { text: 'More', menu: {
                                     items: onEditSubmit &&
                                         typeof content === 'string' &&
                                         username === loggedInUser.username
@@ -122,10 +122,10 @@ const FeedReply = (props) => {
                                             }
                                         ])
                                         : menuItems
-                                }, icon: 'more', iconOnly: true, variant: 'simple' }, void 0)) : undefined] }, void 0)), _jsxs(Flex, { container: { alignItems: 'center', gap: 2 }, children: [interactionsEnabled && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'text', icon: true, as: FeedButton, onClick: () => {
+                                }, icon: 'more', iconOnly: true, variant: 'simple' })) : undefined] })), _jsxs(Flex, { container: { alignItems: 'center', gap: 2 }, children: [interactionsEnabled && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'text', icon: true, as: FeedButton, onClick: () => {
                                             onCommentClick({ replyId: id, username });
                                             onShowReplyInput?.();
-                                        }, label: commentLabel, children: _jsx(Icon, { name: 'chat' }, void 0) }, void 0), _jsx(FeedLikeButton, { ...interactionInfo, variant: 'reply', id: id, onLikeClick: onLikeClick, onLikeCountInteraction: onLikeCountInteraction, onLoadMoreLikes: onLoadMoreLikes, likesLoading: likesLoading, liked: liked }, void 0)] }, void 0)), _jsx(MetaList, { items: edited ? [timeElapsed, t('edited')] : [timeElapsed] }, void 0)] }, void 0)] }, void 0)] }, void 0));
+                                        }, label: commentLabel, children: _jsx(Icon, { name: 'chat' }) }), _jsx(FeedLikeButton, { ...interactionInfo, variant: 'reply', id: id, onLikeClick: onLikeClick, onLikeCountInteraction: onLikeCountInteraction, onLoadMoreLikes: onLoadMoreLikes, likesLoading: likesLoading, liked: liked })] })), _jsx(MetaList, { items: edited ? [timeElapsed, t('edited')] : [timeElapsed] })] })] })] }));
 };
 export default FeedReply;
 //# sourceMappingURL=FeedReply.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedReply.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedReply.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, MouseEvent, useState, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  MenuButton,\n  defaultThemeProp,\n  ForwardProps,\n  MetaList,\n  useI18n,\n  useOuterEvent,\n  ModalMethods\n} from '@pega/cosmos-react-core';\nimport { StyledAvatar } from '@pega/cosmos-react-core/lib/components/Avatar/Avatar';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as chatIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat.icon';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\n\nimport { FeedReplyProps } from './FeedReply.types';\nimport FeedAttachments from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedContent from './FeedContent';\nimport { FeedContext, FeedReplyContext } from './Feed.context';\nimport FeedRichText from './FeedRichText';\nimport { StyledFeedReply } from './FeedReplyInput';\nimport { FeedModalListProps } from './FeedModalList';\nimport { FeedLikeButton } from './FeedLikeButton';\n\nregisterIcon(chatIcon, thumbsUpSolidIcon, thumbsUpIcon);\n\nexport const StyledFeedReplyContent = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: calc(2 * ${theme.base['border-radius']});\n    padding: calc(1.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledFeedReplyContent.defaultProps = defaultThemeProp;\n\nexport const StyledFeedReplyUser = styled.button(props => {\n  const { theme } = props;\n\n  return css`\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    margin-inline-end: ${theme.base.spacing};\n  `;\n});\n\nStyledFeedReplyUser.defaultProps = defaultThemeProp;\n\nexport const StyledVisualButton = styled.button`\n  height: min-content;\n`;\n\nexport const StyledFeedReplyContainer = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    ${StyledAvatar} {\n      margin-inline-end: ${theme.base.spacing};\n    }\n\n    ${StyledFeedReplyContent} {\n      margin-bottom: calc(0.5 * ${theme.base.spacing});\n    }\n\n    ${StyledFeedReply} {\n      &:focus-within {\n        border-color: ${theme.base.palette.interactive};\n      }\n    }\n\n    ${StyledRichTextEditor} {\n      padding-top: calc(0.5 * ${theme.base.spacing});\n      padding-bottom: ${theme.base.spacing};\n\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledFeedReplyContainer.defaultProps = defaultThemeProp;\n\nconst FeedReply: FC<ForwardProps & FeedReplyProps> = (props: ForwardProps & FeedReplyProps) => {\n  const {\n    id,\n    info,\n    interactionInfo,\n    maxContentHeight = Infinity,\n    menuItems,\n    onEditSubmit,\n    edited = false,\n    onMouseEnter,\n    onMouseLeave,\n    onCommentClick,\n    onLikeClick,\n    onLikeCountInteraction,\n    onLoadMoreLikes,\n    likesLoading,\n    onUserClick,\n    ...restProps\n  } = props;\n  const {\n    avatarSrc,\n    timeElapsed,\n    content,\n    attachments,\n    username,\n    fullname,\n    fullnameLabel,\n    liked,\n    icon,\n    userStatus\n  } = info;\n  const {\n    likes = [],\n    likeCount = 0,\n    likeLabel,\n    commentLabel,\n    interactionsEnabled = true\n  } = interactionInfo;\n  const loggedInUser = useContext(FeedContext).userInfo;\n\n  const t = useI18n();\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 [replyModified, setReplyModified] = useState(false);\n  const { onShowReplyInput } = useContext(FeedReplyContext);\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    });\n  }, [likeCount, likeLabel, likes, onLoadMoreLikes]);\n\n  useOuterEvent('mousedown', [editTextAreaRef], () => {\n    if (emptyEditText) setEditMode(false);\n  });\n\n  const handleEdit = () => {\n    if (!emptyEditText && replyModified) {\n      onEditSubmit?.({\n        replyId: id,\n        value: rteRef.current?.getPlainText() || ''\n      });\n      setEditMode(false);\n    }\n  };\n\n  const userVisual = icon ? (\n    <Icon name={icon} />\n  ) : (\n    <Avatar name={fullname} size='m' imageSrc={avatarSrc} status={userStatus} />\n  );\n\n  return (\n    <Flex\n      container\n      as={StyledFeedReplyContainer}\n      onMouseEnter={() => {\n        onMouseEnter?.({ replyId: id });\n      }}\n      onMouseLeave={() => {\n        onMouseLeave?.({ replyId: id });\n      }}\n      {...restProps}\n    >\n      {onUserClick ? (\n        <BareButton\n          as={StyledVisualButton}\n          onClick={(event: MouseEvent) => {\n            onUserClick?.({ replyId: id, username }, event);\n          }}\n        >\n          {userVisual}\n        </BareButton>\n      ) : (\n        userVisual\n      )}\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n        {editMode ? (\n          <>\n            <StyledFeedReply>\n              <FeedRichText\n                onChange={() => {\n                  setEmptyEditText(rteRef.current?.getPlainText().trim() === '');\n                  setReplyModified(rteRef.current?.getPlainText() !== content);\n                }}\n                autoFocus\n                onSubmit={handleEdit}\n                defaultValue={content}\n                ref={rteRef}\n              />\n            </StyledFeedReply>\n            <Flex container={{ justify: 'between', pad: [2, 0, 1] }}>\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 || !replyModified}\n                onClick={handleEdit}\n                aria-label={`${t('update')} ${t('edit')} ${id}`}\n              >\n                {t('update')}\n              </Button>\n            </Flex>\n          </>\n        ) : (\n          <Flex container={{ gap: 1, alignItems: 'center' }} item={{ grow: 1 }}>\n            <Flex item={{ grow: 1 }} as={StyledFeedReplyContent}>\n              <Flex container={{ direction: 'column', gap: 0.5 }}>\n                <div>\n                  <Button\n                    as={StyledFeedReplyUser}\n                    variant='text'\n                    onClick={(event: MouseEvent) => {\n                      onUserClick?.({ replyId: id, username }, event);\n                    }}\n                    aria-label={fullnameLabel}\n                  >\n                    {fullname}\n                  </Button>\n                </div>\n                <FeedContent maxContentHeight={maxContentHeight}>{content}</FeedContent>\n              </Flex>\n              <FeedAttachments attachments={attachments} readOnly />\n            </Flex>\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          </Flex>\n        )}\n\n        <Flex container={{ alignItems: 'center', gap: 2 }}>\n          {interactionsEnabled && (\n            <>\n              <Button\n                variant='text'\n                icon\n                as={FeedButton}\n                onClick={() => {\n                  onCommentClick({ replyId: id, username });\n                  onShowReplyInput?.();\n                }}\n                label={commentLabel}\n              >\n                <Icon name='chat' />\n              </Button>\n              <FeedLikeButton\n                {...interactionInfo}\n                variant='reply'\n                id={id}\n                onLikeClick={onLikeClick}\n                onLikeCountInteraction={onLikeCountInteraction}\n                onLoadMoreLikes={onLoadMoreLikes}\n                likesLoading={likesLoading}\n                liked={liked}\n              />\n            </>\n          )}\n          <MetaList items={edited ? [timeElapsed, t('edited')] : [timeElapsed]} />\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default FeedReply;\n"]}
+{"version":3,"file":"FeedReply.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedReply.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAc,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,gBAAgB,EAEhB,QAAQ,EACR,OAAO,EACP,aAAa,EAEd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AACpF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAuB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AAGjG,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,CAAC,QAAQ,EAAE,iBAAiB,EAAE,YAAY,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;8BACpC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;0BAC/B,KAAK,CAAC,IAAI,CAAC,OAAO;GACzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,GAAG,CAAA;mBACO,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;yBAChC,KAAK,CAAC,IAAI,CAAC,OAAO;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;CAE9C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACzD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,GAAG,CAAA;MACN,YAAY;2BACS,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGvC,sBAAsB;kCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAG9C,eAAe;;wBAEG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;MAIhD,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;wBAC1B,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;GAMvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,SAAS,GAAsC,CAAC,KAAoC,EAAE,EAAE;IAC5F,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,eAAe,EACf,gBAAgB,GAAG,QAAQ,EAC3B,SAAS,EACT,YAAY,EACZ,MAAM,GAAG,KAAK,EACd,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,EACJ,SAAS,EACT,WAAW,EACX,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,KAAK,EACL,IAAI,EACJ,UAAU,EACX,GAAG,IAAI,CAAC;IACT,MAAM,EACJ,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,CAAC,EACb,SAAS,EACT,YAAY,EACZ,mBAAmB,GAAG,IAAI,EAC3B,GAAG,eAAe,CAAC;IACpB,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;IAEtD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,MAAM,EAAuB,CAAC;IAC7C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,MAAM,EAAoC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC;YAC5B,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,eAAe;SAC5B,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnD,aAAa,CAAC,WAAW,EAAE,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE;QACjD,IAAI,aAAa;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,aAAa,IAAI,aAAa,EAAE;YACnC,YAAY,EAAE,CAAC;gBACb,OAAO,EAAE,EAAE;gBACX,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE;aAC5C,CAAC,CAAC;YACH,WAAW,CAAC,KAAK,CAAC,CAAC;SACpB;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,GAAI,CAC7E,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,QACT,EAAE,EAAE,wBAAwB,EAC5B,YAAY,EAAE,GAAG,EAAE;YACjB,YAAY,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YACjB,YAAY,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC,KACG,SAAS,aAEZ,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,UAAU,IACT,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;oBAC7B,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;gBAClD,CAAC,YAEA,UAAU,GACA,CACd,CAAC,CAAC,CAAC,CACF,UAAU,CACX,EACD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACxD,QAAQ,CAAC,CAAC,CAAC,CACV,8BACE,KAAC,eAAe,cACd,KAAC,YAAY,IACX,QAAQ,EAAE,GAAG,EAAE;wCACb,gBAAgB,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;wCAC/D,gBAAgB,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,OAAO,CAAC,CAAC;oCAC/D,CAAC,EACD,SAAS,QACT,QAAQ,EAAE,UAAU,EACpB,YAAY,EAAE,OAAO,EACrB,GAAG,EAAE,MAAM,GACX,GACc,EAClB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,aACrD,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,gBACrB,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,YAE9C,CAAC,CAAC,QAAQ,CAAC,GACL,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,aAAa,IAAI,CAAC,aAAa,EACzC,OAAO,EAAE,UAAU,gBACP,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,YAE9C,CAAC,CAAC,QAAQ,CAAC,GACL,IACJ,IACN,CACJ,CAAC,CAAC,CAAC,CACF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAClE,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,sBAAsB,aACjD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aAChD,wBACE,KAAC,MAAM,IACL,EAAE,EAAE,mBAAmB,EACvB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;wDAC7B,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;oDAClD,CAAC,gBACW,aAAa,YAExB,QAAQ,GACF,GACL,EACN,KAAC,WAAW,IAAC,gBAAgB,EAAE,gBAAgB,YAAG,OAAO,GAAe,IACnE,EACP,KAAC,eAAe,IAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,SAAG,IACjD,EACN,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IACT,IAAI,EAAC,MAAM,EACX,IAAI,EAAE;oCACJ,KAAK,EACH,YAAY;wCACZ,OAAO,OAAO,KAAK,QAAQ;wCAC3B,QAAQ,KAAK,YAAY,CAAC,QAAQ;wCAChC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC;4CACf;gDACE,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC;gDAClB,EAAE,EAAE,MAAM;gDACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC;6CACjC;yCACF,CAAC;wCACJ,CAAC,CAAC,SAAS;iCAChB,EACD,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,OAAO,EAAC,QAAQ,GAChB,CACH,CAAC,CAAC,CAAC,SAAS,IACR,CACR,EAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,mBAAmB,IAAI,CACtB,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,QACJ,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,GAAG,EAAE;4CACZ,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;4CAC1C,gBAAgB,EAAE,EAAE,CAAC;wCACvB,CAAC,EACD,KAAK,EAAE,YAAY,YAEnB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,EACT,KAAC,cAAc,OACT,eAAe,EACnB,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,EACxB,sBAAsB,EAAE,sBAAsB,EAC9C,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,GACZ,IACD,CACJ,EACD,KAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,GAAI,IACnE,IACF,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC, useContext, MouseEvent, useState, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  MenuButton,\n  defaultThemeProp,\n  ForwardProps,\n  MetaList,\n  useI18n,\n  useOuterEvent,\n  ModalMethods\n} from '@pega/cosmos-react-core';\nimport { StyledAvatar } from '@pega/cosmos-react-core/lib/components/Avatar/Avatar';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as chatIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat.icon';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\n\nimport { FeedReplyProps } from './FeedReply.types';\nimport FeedAttachments from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedContent from './FeedContent';\nimport { FeedContext, FeedReplyContext } from './Feed.context';\nimport FeedRichText from './FeedRichText';\nimport { StyledFeedReply } from './FeedReplyInput';\nimport { FeedModalListProps } from './FeedModalList';\nimport { FeedLikeButton } from './FeedLikeButton';\n\nregisterIcon(chatIcon, thumbsUpSolidIcon, thumbsUpIcon);\n\nexport const StyledFeedReplyContent = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: calc(2 * ${theme.base['border-radius']});\n    padding: calc(1.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledFeedReplyContent.defaultProps = defaultThemeProp;\n\nexport const StyledFeedReplyUser = styled.button(props => {\n  const { theme } = props;\n\n  return css`\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    margin-inline-end: ${theme.base.spacing};\n  `;\n});\n\nStyledFeedReplyUser.defaultProps = defaultThemeProp;\n\nexport const StyledVisualButton = styled.button`\n  height: min-content;\n`;\n\nexport const StyledFeedReplyContainer = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    ${StyledAvatar} {\n      margin-inline-end: ${theme.base.spacing};\n    }\n\n    ${StyledFeedReplyContent} {\n      margin-bottom: calc(0.5 * ${theme.base.spacing});\n    }\n\n    ${StyledFeedReply} {\n      &:focus-within {\n        border-color: ${theme.base.palette.interactive};\n      }\n    }\n\n    ${StyledRichTextEditor} {\n      padding-top: calc(0.5 * ${theme.base.spacing});\n      padding-bottom: ${theme.base.spacing};\n\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledFeedReplyContainer.defaultProps = defaultThemeProp;\n\nconst FeedReply: FC<ForwardProps & FeedReplyProps> = (props: ForwardProps & FeedReplyProps) => {\n  const {\n    id,\n    info,\n    interactionInfo,\n    maxContentHeight = Infinity,\n    menuItems,\n    onEditSubmit,\n    edited = false,\n    onMouseEnter,\n    onMouseLeave,\n    onCommentClick,\n    onLikeClick,\n    onLikeCountInteraction,\n    onLoadMoreLikes,\n    likesLoading,\n    onUserClick,\n    ...restProps\n  } = props;\n  const {\n    avatarSrc,\n    timeElapsed,\n    content,\n    attachments,\n    username,\n    fullname,\n    fullnameLabel,\n    liked,\n    icon,\n    userStatus\n  } = info;\n  const {\n    likes = [],\n    likeCount = 0,\n    likeLabel,\n    commentLabel,\n    interactionsEnabled = true\n  } = interactionInfo;\n  const loggedInUser = useContext(FeedContext).userInfo;\n\n  const t = useI18n();\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 [replyModified, setReplyModified] = useState(false);\n  const { onShowReplyInput } = useContext(FeedReplyContext);\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    });\n  }, [likeCount, likeLabel, likes, onLoadMoreLikes]);\n\n  useOuterEvent('mousedown', [editTextAreaRef], () => {\n    if (emptyEditText) setEditMode(false);\n  });\n\n  const handleEdit = () => {\n    if (!emptyEditText && replyModified) {\n      onEditSubmit?.({\n        replyId: id,\n        value: rteRef.current?.getPlainText() || ''\n      });\n      setEditMode(false);\n    }\n  };\n\n  const userVisual = icon ? (\n    <Icon name={icon} />\n  ) : (\n    <Avatar name={fullname} size='m' imageSrc={avatarSrc} status={userStatus} />\n  );\n\n  return (\n    <Flex\n      container\n      as={StyledFeedReplyContainer}\n      onMouseEnter={() => {\n        onMouseEnter?.({ replyId: id });\n      }}\n      onMouseLeave={() => {\n        onMouseLeave?.({ replyId: id });\n      }}\n      {...restProps}\n    >\n      {onUserClick ? (\n        <BareButton\n          as={StyledVisualButton}\n          onClick={(event: MouseEvent) => {\n            onUserClick?.({ replyId: id, username }, event);\n          }}\n        >\n          {userVisual}\n        </BareButton>\n      ) : (\n        userVisual\n      )}\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }}>\n        {editMode ? (\n          <>\n            <StyledFeedReply>\n              <FeedRichText\n                onChange={() => {\n                  setEmptyEditText(rteRef.current?.getPlainText().trim() === '');\n                  setReplyModified(rteRef.current?.getPlainText() !== content);\n                }}\n                autoFocus\n                onSubmit={handleEdit}\n                defaultValue={content}\n                ref={rteRef}\n              />\n            </StyledFeedReply>\n            <Flex container={{ justify: 'between', pad: [2, 0, 1] }}>\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 || !replyModified}\n                onClick={handleEdit}\n                aria-label={`${t('update')} ${t('edit')} ${id}`}\n              >\n                {t('update')}\n              </Button>\n            </Flex>\n          </>\n        ) : (\n          <Flex container={{ gap: 1, alignItems: 'center' }} item={{ grow: 1 }}>\n            <Flex item={{ grow: 1 }} as={StyledFeedReplyContent}>\n              <Flex container={{ direction: 'column', gap: 0.5 }}>\n                <div>\n                  <Button\n                    as={StyledFeedReplyUser}\n                    variant='text'\n                    onClick={(event: MouseEvent) => {\n                      onUserClick?.({ replyId: id, username }, event);\n                    }}\n                    aria-label={fullnameLabel}\n                  >\n                    {fullname}\n                  </Button>\n                </div>\n                <FeedContent maxContentHeight={maxContentHeight}>{content}</FeedContent>\n              </Flex>\n              <FeedAttachments attachments={attachments} readOnly />\n            </Flex>\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          </Flex>\n        )}\n\n        <Flex container={{ alignItems: 'center', gap: 2 }}>\n          {interactionsEnabled && (\n            <>\n              <Button\n                variant='text'\n                icon\n                as={FeedButton}\n                onClick={() => {\n                  onCommentClick({ replyId: id, username });\n                  onShowReplyInput?.();\n                }}\n                label={commentLabel}\n              >\n                <Icon name='chat' />\n              </Button>\n              <FeedLikeButton\n                {...interactionInfo}\n                variant='reply'\n                id={id}\n                onLikeClick={onLikeClick}\n                onLikeCountInteraction={onLikeCountInteraction}\n                onLoadMoreLikes={onLoadMoreLikes}\n                likesLoading={likesLoading}\n                liked={liked}\n              />\n            </>\n          )}\n          <MetaList items={edited ? [timeElapsed, t('edited')] : [timeElapsed]} />\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default FeedReply;\n"]}

package/lib/components/Feed/FeedReplyInput.js

@@ -73,7 +73,7 @@ const FeedReplyInput = (props) => {
             });
         }
     };
-    return (_jsxs(Flex, { container: true, as: StyledReplyInputContainer, ...restProps, children: [_jsx(Avatar, { name: fullname, size: 'm', imageSrc: avatarSrc }, void 0), _jsxs(Flex, { container: { alignItems: 'start' }, item: { grow: 1 }, as: StyledFeedReply, onClick: (event) => {
+    return (_jsxs(Flex, { container: true, as: StyledReplyInputContainer, ...restProps, children: [_jsx(Avatar, { name: fullname, size: 'm', imageSrc: avatarSrc }), _jsxs(Flex, { container: { alignItems: 'start' }, item: { grow: 1 }, as: StyledFeedReply, onClick: (event) => {
                     if (attachmentListRef.current &&
                         event.target !== attachmentListRef.current &&
                         attachmentListRef.current.contains(event.target)) {
@@ -86,7 +86,7 @@ const FeedReplyInput = (props) => {
                     rteRef.current?.focus();
                 }, children: [_jsxs(Flex, { as: StyledFeedReplyInput, container: { direction: 'column' }, item: { grow: 1 }, children: [_jsx(FeedRichText, { ref: rteRef, placeholder: placeholder, onChange: () => {
                                     setEmptyText(rteRef.current?.getPlainText().trim() === '');
-                                }, onSubmit: handleSubmit }, void 0), _jsx(FeedAttachments, { ref: attachmentListRef, attachments: attachments }, void 0)] }, void 0), onFilesAdded && (_jsxs(_Fragment, { children: [_jsx(HiddenFileInput, { ref: hiddenInputRef, type: 'file', multiple: true, onChange: () => {
+                                }, onSubmit: handleSubmit }), _jsx(FeedAttachments, { ref: attachmentListRef, attachments: attachments })] }), onFilesAdded && (_jsxs(_Fragment, { children: [_jsx(HiddenFileInput, { ref: hiddenInputRef, type: 'file', multiple: true, onChange: () => {
                                     if (hiddenInputRef.current?.files) {
                                         onFilesAdded?.(Array.from(hiddenInputRef.current?.files));
                                     }
@@ -94,12 +94,12 @@ const FeedReplyInput = (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 = '';
-                                } }, void 0), _jsx(Button, { ref: attachmentsButtonRef, as: FeedButton, variant: 'simple', onClick: () => {
+                                } }), _jsx(Button, { ref: attachmentsButtonRef, as: FeedButton, variant: 'simple', onClick: () => {
                                     setShowSearchResults?.(false);
                                     hiddenInputRef.current?.click();
                                 }, icon: true, label: attachments.length
                                     ? t('attachments_count', [], { count: 1 }).toUpperCase()
-                                    : t('file_upload_text_multiple'), children: _jsx(Icon, { name: 'paper-clip' }, void 0) }, void 0)] }, void 0)), _jsx(Button, { ref: submitButtonRef, as: FeedButton, disabled: emptyText && attachments.length === 0, variant: 'simple', onClick: handleSubmit, icon: true, label: commentLabel, children: _jsx(Icon, { name: 'send' }, void 0) }, void 0)] }, void 0)] }, void 0));
+                                    : t('file_upload_text_multiple'), children: _jsx(Icon, { name: 'paper-clip' }) })] })), _jsx(Button, { ref: submitButtonRef, as: FeedButton, disabled: emptyText && attachments.length === 0, variant: 'simple', onClick: handleSubmit, icon: true, label: commentLabel, children: _jsx(Icon, { name: 'send' }) })] })] }));
 };
 export default FeedReplyInput;
 //# sourceMappingURL=FeedReplyInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedReplyInput.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedReplyInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAgC,UAAU,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAEhB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAuB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAEnG,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,eAAkC,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,YAAY,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAwBtC,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,GAAG,CAAA;MACN,YAAY;2BACS,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAChD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;gCAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;0BACjC,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAC9C,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO;iCACf,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE7C,oBAAoB;;;;;GAKvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAA;;CAEnC,CAAC;AAEF,MAAM,cAAc,GAA2C,CAC7D,KAAyC,EACzC,EAAE;IACF,MAAM,MAAM,GAAG,MAAM,EAAuB,CAAC;IAC7C,MAAM,EACJ,EAAE,EACF,YAAY,EACZ,WAAW,GAAG,EAAE,EAChB,WAAW,EACX,eAAe,EACf,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,MAAM,iBAAiB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,oBAAoB,EAAE,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,SAAS,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACxC,QAAQ,CAAC;gBACP,OAAO,EAAE,EAAE;gBACX,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE;gBAC3C,WAAW,EAAE,WAAW,IAAI,EAAE;gBAC9B,KAAK,EAAE,GAAG,EAAE;oBACV,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC1B,CAAC;aACF,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,yBAAyB,KAAM,SAAS,aAC1D,KAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,SAAS,WAAI,EACxD,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,EAClC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;oBAC7B,IACE,iBAAiB,CAAC,OAAO;wBACzB,KAAK,CAAC,MAAM,KAAK,iBAAiB,CAAC,OAAO;wBAC1C,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACxD;wBACA,OAAO;qBACR;oBAED,IACE,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;wBAC5D,eAAe,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACvD;wBACA,OAAO;qBACR;oBAED,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC1B,CAAC,aAED,MAAC,IAAI,IAAC,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACnF,KAAC,YAAY,IACX,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,GAAG,EAAE;oCACb,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;gCAC7D,CAAC,EACD,QAAQ,EAAE,YAAY,WACtB,EACF,KAAC,eAAe,IAAC,GAAG,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,WAAI,YAChE,EACN,YAAY,IAAI,CACf,8BACE,KAAC,eAAe,IACd,GAAG,EAAE,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,QAAQ,EAAE,GAAG,EAAE;oCACb,IAAI,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE;wCACjC,YAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;qCAC3D;gCACH,CAAC;gCACD,iHAAiH;gCACjH,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;oCAC5B,KAAK,CAAC,MAA2B,CAAC,KAAK,GAAG,EAAE,CAAC;gCAChD,CAAC,WACD,EACF,KAAC,MAAM,IACL,GAAG,EAAE,oBAAoB,EACzB,EAAE,EAAE,UAAU,EACd,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,oBAAoB,EAAE,CAAC,KAAK,CAAC,CAAC;oCAC9B,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gCAClC,CAAC,EACD,IAAI,QACJ,KAAK,EACH,WAAW,CAAC,MAAM;oCAChB,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,WAAW,EAAE;oCACxD,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,YAGpC,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,WACnB,YACR,CACJ,EACD,KAAC,MAAM,IACL,GAAG,EAAE,eAAe,EACpB,EAAE,EAAE,UAAU,EACd,QAAQ,EAAE,SAAS,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAC/C,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,YAAY,EACrB,IAAI,QACJ,KAAK,EAAE,YAAY,YAEnB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,WACb,YACJ,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, useRef, useState, useEffect, MutableRefObject, MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  StyledAvatar,\n  Flex,\n  Icon,\n  registerIcon,\n  defaultThemeProp,\n  ForwardProps,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as sendIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/send.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedRichText from './FeedRichText';\nimport FeedButton from './FeedButton';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport { FeedContext } from './Feed.context';\n\nregisterIcon(sendIcon, paperClipIcon);\n\nexport interface FeedReplyInputProps {\n  /** Unique ID for this Reply Input  */\n  id: string;\n  /** Label text for the reply submit button. */\n  commentLabel: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Placeholder string for the input */\n  placeholder: string;\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  /** Callback that runs when the submit button has been pressed */\n  onSubmit: (event: {\n    replyId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    clear: () => void;\n  }) => void;\n  /** Callback that sets returns a shared ref to the RTE component */\n  onSetInputRef?: (event: { ref: MutableRefObject<RichTextEditorState | undefined> }) => void;\n}\n\nexport const StyledReplyInputContainer = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    ${StyledAvatar} {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledReplyInputContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFeedReply = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-radius: calc(2.5 * ${theme.base['border-radius']});\n    padding: 0 calc(2 * ${theme.base.spacing});\n    cursor: text;\n  `;\n});\n\nStyledFeedReply.defaultProps = defaultThemeProp;\n\nconst StyledFeedReplyInput = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    padding-top: calc(0.5 * ${theme.base.spacing});\n    padding-bottom: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledFeedReplyInput.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedReplyInput: FC<ForwardProps & FeedReplyInputProps> = (\n  props: ForwardProps & FeedReplyInputProps\n) => {\n  const rteRef = useRef<RichTextEditorState>();\n  const {\n    id,\n    commentLabel,\n    attachments = [],\n    placeholder,\n    onAddAttachment,\n    onSubmit,\n    onSetInputRef,\n    onFilesAdded,\n    ...restProps\n  } = props;\n\n  const [emptyText, setEmptyText] = useState(true);\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n  const attachmentListRef = useRef<HTMLUListElement>(null);\n  const attachmentsButtonRef = useRef<HTMLButtonElement>(null);\n  const submitButtonRef = useRef<HTMLButtonElement>(null);\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname } = useContext(FeedContext).userInfo;\n\n  useEffect(() => {\n    onSetInputRef?.({ ref: rteRef });\n  }, [rteRef]);\n\n  const t = useI18n();\n\n  const handleSubmit = () => {\n    setShowSearchResults?.(false);\n    if (!emptyText || attachments.length > 0) {\n      onSubmit({\n        replyId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        clear: () => {\n          rteRef.current?.clear();\n        }\n      });\n    }\n  };\n\n  return (\n    <Flex container as={StyledReplyInputContainer} {...restProps}>\n      <Avatar name={fullname} size='m' imageSrc={avatarSrc} />\n      <Flex\n        container={{ alignItems: 'start' }}\n        item={{ grow: 1 }}\n        as={StyledFeedReply}\n        onClick={(event: MouseEvent) => {\n          if (\n            attachmentListRef.current &&\n            event.target !== attachmentListRef.current &&\n            attachmentListRef.current.contains(event.target as Node)\n          ) {\n            return;\n          }\n\n          if (\n            attachmentsButtonRef.current?.contains(event.target as Node) ||\n            submitButtonRef.current?.contains(event.target as Node)\n          ) {\n            return;\n          }\n\n          rteRef.current?.focus();\n        }}\n      >\n        <Flex as={StyledFeedReplyInput} container={{ direction: 'column' }} item={{ grow: 1 }}>\n          <FeedRichText\n            ref={rteRef}\n            placeholder={placeholder}\n            onChange={() => {\n              setEmptyText(rteRef.current?.getPlainText().trim() === '');\n            }}\n            onSubmit={handleSubmit}\n          />\n          <FeedAttachments ref={attachmentListRef} attachments={attachments} />\n        </Flex>\n        {onFilesAdded && (\n          <>\n            <HiddenFileInput\n              ref={hiddenInputRef}\n              type='file'\n              multiple\n              onChange={() => {\n                if (hiddenInputRef.current?.files) {\n                  onFilesAdded?.(Array.from(hiddenInputRef.current?.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            <Button\n              ref={attachmentsButtonRef}\n              as={FeedButton}\n              variant='simple'\n              onClick={() => {\n                setShowSearchResults?.(false);\n                hiddenInputRef.current?.click();\n              }}\n              icon\n              label={\n                attachments.length\n                  ? t('attachments_count', [], { count: 1 }).toUpperCase()\n                  : t('file_upload_text_multiple')\n              }\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          </>\n        )}\n        <Button\n          ref={submitButtonRef}\n          as={FeedButton}\n          disabled={emptyText && attachments.length === 0}\n          variant='simple'\n          onClick={handleSubmit}\n          icon\n          label={commentLabel}\n        >\n          <Icon name='send' />\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default FeedReplyInput;\n"]}
+{"version":3,"file":"FeedReplyInput.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedReplyInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, useEffect, MutableRefObject, MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  StyledAvatar,\n  Flex,\n  Icon,\n  registerIcon,\n  defaultThemeProp,\n  ForwardProps,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as sendIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/send.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedRichText from './FeedRichText';\nimport FeedButton from './FeedButton';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport { FeedContext } from './Feed.context';\n\nregisterIcon(sendIcon, paperClipIcon);\n\nexport interface FeedReplyInputProps {\n  /** Unique ID for this Reply Input  */\n  id: string;\n  /** Label text for the reply submit button. */\n  commentLabel: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Placeholder string for the input */\n  placeholder: string;\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  /** Callback that runs when the submit button has been pressed */\n  onSubmit: (event: {\n    replyId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    clear: () => void;\n  }) => void;\n  /** Callback that sets returns a shared ref to the RTE component */\n  onSetInputRef?: (event: { ref: MutableRefObject<RichTextEditorState | undefined> }) => void;\n}\n\nexport const StyledReplyInputContainer = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    ${StyledAvatar} {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledReplyInputContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFeedReply = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-radius: calc(2.5 * ${theme.base['border-radius']});\n    padding: 0 calc(2 * ${theme.base.spacing});\n    cursor: text;\n  `;\n});\n\nStyledFeedReply.defaultProps = defaultThemeProp;\n\nconst StyledFeedReplyInput = styled.div(props => {\n  const { theme } = props;\n\n  return css`\n    padding-top: calc(0.5 * ${theme.base.spacing});\n    padding-bottom: calc(0.5 * ${theme.base.spacing});\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledFeedReplyInput.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedReplyInput: FC<ForwardProps & FeedReplyInputProps> = (\n  props: ForwardProps & FeedReplyInputProps\n) => {\n  const rteRef = useRef<RichTextEditorState>();\n  const {\n    id,\n    commentLabel,\n    attachments = [],\n    placeholder,\n    onAddAttachment,\n    onSubmit,\n    onSetInputRef,\n    onFilesAdded,\n    ...restProps\n  } = props;\n\n  const [emptyText, setEmptyText] = useState(true);\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n  const attachmentListRef = useRef<HTMLUListElement>(null);\n  const attachmentsButtonRef = useRef<HTMLButtonElement>(null);\n  const submitButtonRef = useRef<HTMLButtonElement>(null);\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname } = useContext(FeedContext).userInfo;\n\n  useEffect(() => {\n    onSetInputRef?.({ ref: rteRef });\n  }, [rteRef]);\n\n  const t = useI18n();\n\n  const handleSubmit = () => {\n    setShowSearchResults?.(false);\n    if (!emptyText || attachments.length > 0) {\n      onSubmit({\n        replyId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        clear: () => {\n          rteRef.current?.clear();\n        }\n      });\n    }\n  };\n\n  return (\n    <Flex container as={StyledReplyInputContainer} {...restProps}>\n      <Avatar name={fullname} size='m' imageSrc={avatarSrc} />\n      <Flex\n        container={{ alignItems: 'start' }}\n        item={{ grow: 1 }}\n        as={StyledFeedReply}\n        onClick={(event: MouseEvent) => {\n          if (\n            attachmentListRef.current &&\n            event.target !== attachmentListRef.current &&\n            attachmentListRef.current.contains(event.target as Node)\n          ) {\n            return;\n          }\n\n          if (\n            attachmentsButtonRef.current?.contains(event.target as Node) ||\n            submitButtonRef.current?.contains(event.target as Node)\n          ) {\n            return;\n          }\n\n          rteRef.current?.focus();\n        }}\n      >\n        <Flex as={StyledFeedReplyInput} container={{ direction: 'column' }} item={{ grow: 1 }}>\n          <FeedRichText\n            ref={rteRef}\n            placeholder={placeholder}\n            onChange={() => {\n              setEmptyText(rteRef.current?.getPlainText().trim() === '');\n            }}\n            onSubmit={handleSubmit}\n          />\n          <FeedAttachments ref={attachmentListRef} attachments={attachments} />\n        </Flex>\n        {onFilesAdded && (\n          <>\n            <HiddenFileInput\n              ref={hiddenInputRef}\n              type='file'\n              multiple\n              onChange={() => {\n                if (hiddenInputRef.current?.files) {\n                  onFilesAdded?.(Array.from(hiddenInputRef.current?.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            <Button\n              ref={attachmentsButtonRef}\n              as={FeedButton}\n              variant='simple'\n              onClick={() => {\n                setShowSearchResults?.(false);\n                hiddenInputRef.current?.click();\n              }}\n              icon\n              label={\n                attachments.length\n                  ? t('attachments_count', [], { count: 1 }).toUpperCase()\n                  : t('file_upload_text_multiple')\n              }\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          </>\n        )}\n        <Button\n          ref={submitButtonRef}\n          as={FeedButton}\n          disabled={emptyText && attachments.length === 0}\n          variant='simple'\n          onClick={handleSubmit}\n          icon\n          label={commentLabel}\n        >\n          <Icon name='send' />\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default FeedReplyInput;\n"]}

package/lib/components/Feed/FeedRichText.js

@@ -90,7 +90,7 @@ const FeedRichText = forwardRef((props, ref) => {
         }, searchRenderers: [
             { regexPattern: MentionButtonConfig.regexPattern, getSearchAttributes },
             { regexPattern: HashtagButtonConfig.regexPattern, getSearchAttributes }
-        ], onSearch: onDecoSearch, menu: showMentionType ? typesMenu : searchMenu }, void 0));
+        ], onSearch: onDecoSearch, menu: showMentionType ? typesMenu : searchMenu }));
 });
 export default FeedRichText;
 //# sourceMappingURL=FeedRichText.js.map

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

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

package/lib/components/HashtagButton/HashtagButton.js

@@ -13,14 +13,14 @@ const HashtagButton = forwardRef(({ children, tag: tagProp = '', ...restProps },
     let tag = '';
     if (!isValidElement(children)) {
         if (!children.groups)
-            return _jsx("span", { children: children[0] }, void 0);
+            return _jsx("span", { children: children[0] });
         [leadingChar, trailingChar] = children[0].split(children.groups.match);
         tag = children.groups.tag;
     }
     else {
         tag = tagProp;
     }
-    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0), _jsx(StyledTag, { ...restProps, ref: ref, onClick: () => onTagClick?.(tag), spellCheck: false, children: isValidElement(children) ? children : tag }, void 0), trailingChar && _jsx("span", { children: trailingChar }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }), _jsx(StyledTag, { ...restProps, ref: ref, onClick: () => onTagClick?.(tag), spellCheck: false, children: isValidElement(children) ? children : tag }), trailingChar && _jsx("span", { children: trailingChar })] }));
 });
 export const HashtagButtonConfig = {
     type: 'tag',

package/lib/components/HashtagButton/HashtagButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"HashtagButton.js","sourceRoot":"","sources":["../../../src/components/HashtagButton/HashtagButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EAId,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,SAAS,EAAuC,EAClF,GAA2B,EAC3B,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE/C,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,yBAAO,QAAQ,CAAC,CAAC,CAAC,WAAQ,CAAC;QAExD,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvE,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;KAC3B;SAAM;QACL,GAAG,GAAG,OAAO,CAAC;KACf;IAED,OAAO,CACL,8BACG,WAAW,IAAI,yBAAO,WAAW,WAAQ,EAC1C,KAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,KAAK,YACpF,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,WAChC,EACX,YAAY,IAAI,yBAAO,YAAY,WAAQ,YAC3C,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,KAAK;IACX,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Tag, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface HashtagButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | ReactElement;\n  /** The tag value. */\n  tag?: string;\n}\n\nconst StyledTag = styled(Tag)`\n  cursor: pointer;\n`;\n\nconst HashtagButton: FunctionComponent<HashtagButtonProps & ForwardProps> = forwardRef(\n  (\n    { children, tag: tagProp = '', ...restProps }: PropsWithoutRef<HashtagButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onTagClick } = useContext(FeedContext);\n\n    let leadingChar = '';\n    let trailingChar = '';\n    let tag = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      tag = children.groups.tag;\n    } else {\n      tag = tagProp;\n    }\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledTag {...restProps} ref={ref} onClick={() => onTagClick?.(tag)} spellCheck={false}>\n          {isValidElement(children) ? children : tag}\n        </StyledTag>\n        {trailingChar && <span>{trailingChar}</span>}\n      </>\n    );\n  }\n);\n\nexport const HashtagButtonConfig = {\n  type: 'tag',\n  regexPattern: /(?:^|)(?<match>#(?<tag>[^ :]+\\w):)/g,\n  component: HashtagButton\n};\n\nexport default HashtagButton;\n"]}
+{"version":3,"file":"HashtagButton.js","sourceRoot":"","sources":["../../../src/components/HashtagButton/HashtagButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EAId,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE5B,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,SAAS,EAAuC,EAClF,GAA2B,EAC3B,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE/C,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO,yBAAO,QAAQ,CAAC,CAAC,CAAC,GAAQ,CAAC;QAExD,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvE,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;KAC3B;SAAM;QACL,GAAG,GAAG,OAAO,CAAC;KACf;IAED,OAAO,CACL,8BACG,WAAW,IAAI,yBAAO,WAAW,GAAQ,EAC1C,KAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,KAAK,YACpF,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,GAChC,EACX,YAAY,IAAI,yBAAO,YAAY,GAAQ,IAC3C,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,KAAK;IACX,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Tag, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface HashtagButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | ReactElement;\n  /** The tag value. */\n  tag?: string;\n}\n\nconst StyledTag = styled(Tag)`\n  cursor: pointer;\n`;\n\nconst HashtagButton: FunctionComponent<HashtagButtonProps & ForwardProps> = forwardRef(\n  (\n    { children, tag: tagProp = '', ...restProps }: PropsWithoutRef<HashtagButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onTagClick } = useContext(FeedContext);\n\n    let leadingChar = '';\n    let trailingChar = '';\n    let tag = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      tag = children.groups.tag;\n    } else {\n      tag = tagProp;\n    }\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledTag {...restProps} ref={ref} onClick={() => onTagClick?.(tag)} spellCheck={false}>\n          {isValidElement(children) ? children : tag}\n        </StyledTag>\n        {trailingChar && <span>{trailingChar}</span>}\n      </>\n    );\n  }\n);\n\nexport const HashtagButtonConfig = {\n  type: 'tag',\n  regexPattern: /(?:^|)(?<match>#(?<tag>[^ :]+\\w):)/g,\n  component: HashtagButton\n};\n\nexport default HashtagButton;\n"]}

package/lib/components/MentionButton/MentionButton.js

@@ -26,7 +26,7 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
     let type = '';
     if (!isValidElement(children)) {
         if (!children.groups)
-            return _jsx("span", { children: children[0] }, void 0);
+            return _jsx("span", { children: children[0] });
         [leadingChar, trailingChar] = children[0].split(children.groups.match);
         id = children.groups.id;
         text = children.groups.text;
@@ -47,7 +47,7 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
             setShowPopover(true);
         setMentionContent(comp);
     };
-    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }, void 0), _jsx(StyledButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: isValidElement(children) ? children : text }, void 0), trailingChar && _jsx("span", { children: trailingChar }, void 0), _jsx(Popover, { ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', arrow: true, children: mentionContent }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }), _jsx(StyledButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: isValidElement(children) ? children : text }), trailingChar && _jsx("span", { children: trailingChar }), _jsx(Popover, { ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', arrow: true, children: mentionContent })] }));
 });
 export const MentionButtonConfig = {
     type: 'mention',

package/lib/components/MentionButton/MentionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  ForwardProps,\n  Popover,\n  useConsolidatedRef,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | ReactElement;\n  /** The id of the mention.  */\n  id?: string;\n  /** The text of the mention button. */\n  text?: string;\n  /** Designates the type of the mention for proper handling on click. */\n  type?: string;\n}\n\nconst StyledButton = styled(Button)`\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: none;\n    text-decoration: underline;\n  }\n`;\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      id: idProp = '',\n      text: textProp = '',\n      type: typeProp = '',\n      ...restProps\n    }: PropsWithoutRef<MentionButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onMentionClick } = useContext(FeedContext);\n    const [showPopover, setShowPopover] = useState(false);\n    const [mentionContent, setMentionContent] = useState<JSX.Element | undefined>();\n    const mentionRef = useConsolidatedRef(ref);\n    const popoverRef = useRef(null);\n\n    useOuterEvent(['click', 'focusin'], [mentionRef, popoverRef], () => {\n      setShowPopover(false);\n    });\n\n    let leadingChar = '';\n    let trailingChar = '';\n    let id = '';\n    let text = '';\n    let type = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      id = children.groups.id;\n      text = children.groups.text;\n      type = children.groups.type;\n    } else {\n      id = idProp;\n      text = textProp;\n      type = typeProp;\n    }\n\n    const handleClick = () => {\n      const comp = onMentionClick?.({\n        id,\n        text,\n        type\n      });\n      if (comp) setShowPopover(true);\n      setMentionContent(comp);\n    };\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledButton\n          {...restProps}\n          ref={mentionRef}\n          variant='link'\n          onClick={handleClick}\n          spellCheck={false}\n        >\n          {isValidElement(children) ? children : text}\n        </StyledButton>\n        {trailingChar && <span>{trailingChar}</span>}\n        <Popover\n          ref={popoverRef}\n          show={showPopover}\n          target={mentionRef.current}\n          placement='bottom-start'\n          arrow\n        >\n          {mentionContent}\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport const MentionButtonConfig = {\n  type: 'mention',\n  regexPattern: /(?:^|)(?<match>@(?<id>[^ :]+\\w):(?<text>[^:]+\\w):(?<type>[^:]+\\w):)/g,\n  component: MentionButton\n};\n\nexport default MentionButton;\n"]}
+{"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  isValidElement,\n  PropsWithoutRef,\n  ReactElement,\n  Ref,\n  useContext,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  ForwardProps,\n  Popover,\n  useConsolidatedRef,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n  /** Text for the button, or a regex match containing all necessary props. */\n  children: RegExpExecArray | ReactElement;\n  /** The id of the mention.  */\n  id?: string;\n  /** The text of the mention button. */\n  text?: string;\n  /** Designates the type of the mention for proper handling on click. */\n  type?: string;\n}\n\nconst StyledButton = styled(Button)`\n  &:enabled:focus,\n  &:not([disabled]):focus {\n    box-shadow: none;\n    text-decoration: underline;\n  }\n`;\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      id: idProp = '',\n      text: textProp = '',\n      type: typeProp = '',\n      ...restProps\n    }: PropsWithoutRef<MentionButtonProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { onMentionClick } = useContext(FeedContext);\n    const [showPopover, setShowPopover] = useState(false);\n    const [mentionContent, setMentionContent] = useState<JSX.Element | undefined>();\n    const mentionRef = useConsolidatedRef(ref);\n    const popoverRef = useRef(null);\n\n    useOuterEvent(['click', 'focusin'], [mentionRef, popoverRef], () => {\n      setShowPopover(false);\n    });\n\n    let leadingChar = '';\n    let trailingChar = '';\n    let id = '';\n    let text = '';\n    let type = '';\n\n    if (!isValidElement(children)) {\n      if (!children.groups) return <span>{children[0]}</span>;\n\n      [leadingChar, trailingChar] = children[0].split(children.groups.match);\n      id = children.groups.id;\n      text = children.groups.text;\n      type = children.groups.type;\n    } else {\n      id = idProp;\n      text = textProp;\n      type = typeProp;\n    }\n\n    const handleClick = () => {\n      const comp = onMentionClick?.({\n        id,\n        text,\n        type\n      });\n      if (comp) setShowPopover(true);\n      setMentionContent(comp);\n    };\n\n    return (\n      <>\n        {leadingChar && <span>{leadingChar}</span>}\n        <StyledButton\n          {...restProps}\n          ref={mentionRef}\n          variant='link'\n          onClick={handleClick}\n          spellCheck={false}\n        >\n          {isValidElement(children) ? children : text}\n        </StyledButton>\n        {trailingChar && <span>{trailingChar}</span>}\n        <Popover\n          ref={popoverRef}\n          show={showPopover}\n          target={mentionRef.current}\n          placement='bottom-start'\n          arrow\n        >\n          {mentionContent}\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport const MentionButtonConfig = {\n  type: 'mention',\n  regexPattern: /(?:^|)(?<match>@(?<id>[^ :]+\\w):(?<text>[^:]+\\w):(?<type>[^:]+\\w):)/g,\n  component: MentionButton\n};\n\nexport default MentionButton;\n"]}