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

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    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                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,WAAI,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,WAAI,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,WACA,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,WACX,WACc,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,WACL,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,WACL,YACJ,YACN,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,WACF,WACL,EACN,KAAC,WAAW,IAAC,gBAAgB,EAAE,gBAAgB,YAAG,OAAO,WAAe,YACnE,EACP,KAAC,eAAe,IAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,iBAAG,YACjD,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,WAChB,CACH,CAAC,CAAC,CAAC,SAAS,YACR,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,WAAG,WACb,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,WACZ,YACD,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,WAAI,YACnE,YACF,YACF,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/FeedReply.types.d.ts

@@ -60,6 +60,8 @@ export interface FeedReplyProps {
     onLikeCountInteraction?: () => void;
     /** Callback that runs when the bottom of the extended like list Modal is reached, allowing for more likes to be loaded. */
     onLoadMoreLikes?: () => void;
+    /** A loading indicator for the likes. */
+    likesLoading?: boolean;
     onUserClick?: (event: {
         replyId: string;
         username: string;

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

@@ -1 +1 @@
-{"version":3,"file":"FeedReply.types.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedReply.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,YAAY,GAAG,MAAM,CAAC;QAC/B,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;QAC9B,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,aAAa,EAAE,MAAM,CAAC;QACtB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;KACpC,CAAC;IACF,eAAe,EAAE;QACf,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,YAAY,EAAE,MAAM,CAAC;QACrB;;WAEG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IACF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,wGAAwG;IACxG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvE,WAAW,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,eAAe,CAAA;KAAE,KAAK,IAAI,CAAC;IACzE,wFAAwF;IACxF,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,2HAA2H;IAC3H,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,EAAE,UAAU,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/F"}
+{"version":3,"file":"FeedReply.types.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedReply.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,YAAY,GAAG,MAAM,CAAC;QAC/B,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;QAC9B,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,aAAa,EAAE,MAAM,CAAC;QACtB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;KACpC,CAAC;IACF,eAAe,EAAE;QACf,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,YAAY,EAAE,MAAM,CAAC;QACrB;;WAEG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IACF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,wGAAwG;IACxG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvE,WAAW,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,eAAe,CAAA;KAAE,KAAK,IAAI,CAAC;IACzE,wFAAwF;IACxF,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,2HAA2H;IAC3H,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,yCAAyC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,EAAE,UAAU,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/F"}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedReply.types.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedReply.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, ReactElement } from 'react';\n\nimport { AvatarProps, MenuItemProps, SummaryListItem } from '@pega/cosmos-react-core';\n\nimport { AttachedFiles } from './FeedAttachments';\n\nexport interface FeedReplyProps {\n  id: string;\n  info: {\n    avatarSrc?: string;\n    timeElapsed: string;\n    content: ReactElement | string;\n    attachments?: AttachedFiles[];\n    username: string;\n    fullname: string;\n    fullnameLabel: string;\n    liked?: boolean;\n    icon?: string;\n    userStatus?: AvatarProps['status'];\n  };\n  interactionInfo: {\n    likes?: SummaryListItem[];\n    likeCount?: number;\n    likeLabel: string;\n    commentLabel: string;\n    /**\n     * @default true\n     */\n    interactionsEnabled?: boolean;\n  };\n  /**\n   * A maximum height in pixels to display post content within before prompting to expand the post.\n   * @default Infinity\n   */\n  maxContentHeight?: number;\n  /** A set of menu options for actions on the reply. */\n  menuItems?: MenuItemProps[];\n  /** Callback that updates the reply after being edited. If undefined, the reply will not be editable. */\n  onEditSubmit?: (event: { replyId: string; value: string }) => void;\n  /**\n   * Flag that indicates if a reply has been previously edited.\n   * @default false\n   */\n  edited?: boolean;\n  onMouseEnter?: (event: { replyId: string }) => void;\n  onMouseLeave?: (event: { replyId: string }) => void;\n  onCommentClick: (event: { replyId: string; username: string }) => void;\n  onLikeClick: (event: { replyId: string; user: SummaryListItem }) => void;\n  /** Callback that runs when the like count on a post is hovered, focused, or clicked. */\n  onLikeCountInteraction?: () => void;\n  /** Callback that runs when the bottom of the extended like list Modal is reached, allowing for more likes to be loaded. */\n  onLoadMoreLikes?: () => void;\n  onUserClick?: (event: { replyId: string; username: string }, clickEvent?: MouseEvent) => void;\n}\n"]}
+{"version":3,"file":"FeedReply.types.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedReply.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, ReactElement } from 'react';\n\nimport { AvatarProps, MenuItemProps, SummaryListItem } from '@pega/cosmos-react-core';\n\nimport { AttachedFiles } from './FeedAttachments';\n\nexport interface FeedReplyProps {\n  id: string;\n  info: {\n    avatarSrc?: string;\n    timeElapsed: string;\n    content: ReactElement | string;\n    attachments?: AttachedFiles[];\n    username: string;\n    fullname: string;\n    fullnameLabel: string;\n    liked?: boolean;\n    icon?: string;\n    userStatus?: AvatarProps['status'];\n  };\n  interactionInfo: {\n    likes?: SummaryListItem[];\n    likeCount?: number;\n    likeLabel: string;\n    commentLabel: string;\n    /**\n     * @default true\n     */\n    interactionsEnabled?: boolean;\n  };\n  /**\n   * A maximum height in pixels to display post content within before prompting to expand the post.\n   * @default Infinity\n   */\n  maxContentHeight?: number;\n  /** A set of menu options for actions on the reply. */\n  menuItems?: MenuItemProps[];\n  /** Callback that updates the reply after being edited. If undefined, the reply will not be editable. */\n  onEditSubmit?: (event: { replyId: string; value: string }) => void;\n  /**\n   * Flag that indicates if a reply has been previously edited.\n   * @default false\n   */\n  edited?: boolean;\n  onMouseEnter?: (event: { replyId: string }) => void;\n  onMouseLeave?: (event: { replyId: string }) => void;\n  onCommentClick: (event: { replyId: string; username: string }) => void;\n  onLikeClick: (event: { replyId: string; user: SummaryListItem }) => void;\n  /** Callback that runs when the like count on a post is hovered, focused, or clicked. */\n  onLikeCountInteraction?: () => void;\n  /** Callback that runs when the bottom of the extended like list Modal is reached, allowing for more likes to be loaded. */\n  onLoadMoreLikes?: () => void;\n  /** A loading indicator for the likes. */\n  likesLoading?: boolean;\n  onUserClick?: (event: { replyId: string; username: string }, clickEvent?: MouseEvent) => void;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-social",
-  "version": "3.0.0-dev.4.1",
+  "version": "3.0.0-dev.4.2",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,9 +20,9 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.4.1",
-    "@pega/cosmos-react-rte": "3.0.0-dev.4.1",
-    "@pega/cosmos-react-work": "3.0.0-dev.4.1",
+    "@pega/cosmos-react-core": "3.0.0-dev.4.2",
+    "@pega/cosmos-react-rte": "3.0.0-dev.4.2",
+    "@pega/cosmos-react-work": "3.0.0-dev.4.2",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
@@ -31,11 +31,11 @@
   "devDependencies": {
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-storysource": "^6.4.19",
     "@storybook/addon-toolbars": "^6.4.19",
     "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
+    "@storybook/testing-react": "0.0.18",
     "@storybook/theming": "^6.4.19",
     "enzyme": "^3.11.0",
     "typescript": "~4.5.2"