npm - @pega/cosmos-react-social - Versions diffs - 4.0.0-dev.22.2 → 4.0.0-dev.23.1 - Mend

@pega/cosmos-react-social 4.0.0-dev.22.2 → 4.0.0-dev.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/lib/components/Feed/FeedInputRegion.js +1 -1
package/lib/components/Feed/FeedInputRegion.js.map +1 -1
package/lib/components/Feed/FeedLikeButton.js +1 -1
package/lib/components/Feed/FeedLikeButton.js.map +1 -1
package/package.json +4 -4

package/lib/components/Feed/FeedInputRegion.js CHANGED Viewed

@@ -72,7 +72,7 @@ const FeedInputRegion = (props) => {
                             }, onKeyDown: onKeyDown, height: { min: minInputHeight }, ref: rteRef }) }), _jsxs(Flex, { as: StyledActions, container: { direction: 'column', gap: 0.5 }, children: [onFilesAdded && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => {
                                     setShowSearchResults?.(false);
                                     attachmentEl?.click();
-                                }, icon: true, label: t('file_upload_text_multiple'), children: _jsx(Icon, { name: 'paper-clip' }) })), _jsx(Button, { as: FeedButton, disabled: (emptyText && attachments.length === 0) || attachments.some(x => x.error), variant: 'simple', onClick: handleSubmit, icon: true, label: submitLabel, children: _jsx(Icon, { name: 'send' }) })] })] }), _jsx(HiddenFileInput, { ref: setAttachmentEl, type: 'file', multiple: true, onChange: () => {
+                                }, icon: true, label: t('feed_attach_files'), children: _jsx(Icon, { name: 'paper-clip' }) })), _jsx(Button, { as: FeedButton, disabled: (emptyText && attachments.length === 0) || attachments.some(x => x.error), variant: 'simple', onClick: handleSubmit, icon: true, label: submitLabel, children: _jsx(Icon, { name: 'send' }) })] })] }), _jsx(HiddenFileInput, { ref: setAttachmentEl, type: 'file', multiple: true, onChange: () => {
                     if (attachmentEl?.files) {
                         onFilesAdded?.(Array.from(attachmentEl?.files));
                     }

package/lib/components/Feed/FeedInputRegion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedInputRegion.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedInputRegion.tsx"],"names":[],"mappings":"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~~2BAA2B~~,CAAC,~~YAErC~~,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACnB,CACV,EAED,KAAC,MAAM,IACL,EAAE,EAAE,UAAU,EACd,QAAQ,EAAE,CAAC,SAAS,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EACnF,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,YAAY,EACrB,IAAI,QACJ,KAAK,EAAE,WAAW,YAElB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,IACJ,IACF,EAEP,KAAC,eAAe,IACd,GAAG,EAAE,eAAe,EACpB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,QAAQ,EAAE,GAAG,EAAE;oBACb,IAAI,YAAY,EAAE,KAAK,EAAE;wBACvB,YAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;qBACjD;gBACH,CAAC;gBACD,iHAAiH;gBACjH,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;oBAC5B,KAAK,CAAC,MAA2B,CAAC,KAAK,GAAG,EAAE,CAAC;gBAChD,CAAC,GACD,EAEF,KAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAI,IAC9D,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FC, MouseEvent, useContext, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Avatar,\n Button,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n useElement,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from './Feed.context';\nimport FeedAttachments from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedInputRegionProps } from './Feed.types';\n\nexport const minInputHeight = '4rem';\n\nconst StyledAvatar = styled(Avatar)(({ theme }) => {\n return css`\n margin-block-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nconst StyledTextAreaContainer = styled.div(({ theme }) => {\n return css`\n width: 100%;\n overflow-y: hidden;\n padding: 0 ${theme.base.spacing} calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n `;\n});\n\nStyledTextAreaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled.div(({ theme }) => {\n return css`\n margin-block-start: calc(2.5 * ${theme.base.spacing});\n\n ${FeedButton} + ${FeedButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledActions.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n display: none;\n`;\n\nconst FeedInputRegion: FC<ForwardProps & FeedInputRegionProps> = (\n props: ForwardProps & FeedInputRegionProps\n) => {\n const {\n variant,\n id,\n attachments = [],\n onFilesAdded,\n onSubmit,\n inputRegionEl,\n rteRef,\n selectedRecipients\n } = props;\n\n const t = useI18n();\n const { setShowSearchResults } = useContext(FeedContext);\n const { avatarSrc, fullname, username, userStatus } = useContext(FeedContext).userInfo;\n\n const [emptyText, setEmptyText] = useState(true);\n const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n\n useOuterEvent('mousedown', [inputRegionEl], () => {\n if (emptyText) rteRef.current?.clear();\n });\n\n const handleSubmit = () => {\n setShowSearchResults?.(false);\n if ((!emptyText \|\| attachments.length > 0) && attachments.every(x => !x.error)) {\n onSubmit({\n id,\n value: rteRef.current?.getPlainText() \|\| '',\n attachments: attachments \|\| [],\n username,\n recipients: variant === 'post' ? selectedRecipients : undefined,\n clear: () => {\n rteRef.current?.clear();\n }\n });\n }\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n setShowSearchResults?.(true);\n if ((event.metaKey \|\| event.ctrlKey) && event.key === 'Enter') handleSubmit();\n };\n\n const inputLabel = t(variant === 'post' ? 'feed_new_post' : 'feed_new_comment');\n const submitLabel = t(variant === 'post' ? 'feed_new_post_submit' : 'feed_new_comment_submit');\n\n return (\n <>\n <Flex container={{ alignItems: 'start' }}>\n <StyledAvatar\n name={fullname}\n size={variant === 'post' ? 'l' : 'm'}\n imageSrc={avatarSrc}\n status={userStatus}\n />\n\n <StyledTextAreaContainer>\n <FeedRichText\n label={inputLabel}\n onChange={() => {\n setEmptyText(rteRef.current?.getPlainText().trim() === '');\n }}\n onKeyDown={onKeyDown}\n height={{ min: minInputHeight }}\n ref={rteRef}\n />\n </StyledTextAreaContainer>\n\n <Flex as={StyledActions} container={{ direction: 'column', gap: 0.5 }}>\n {onFilesAdded && (\n <Button\n variant='simple'\n as={FeedButton}\n onClick={() => {\n setShowSearchResults?.(false);\n attachmentEl?.click();\n }}\n icon\n label={t('~~file_upload_text_multiple~~')}\n >\n <Icon name='paper-clip' />\n </Button>\n )}\n\n <Button\n as={FeedButton}\n disabled={(emptyText && attachments.length === 0) \|\| attachments.some(x => x.error)}\n variant='simple'\n onClick={handleSubmit}\n icon\n label={submitLabel}\n >\n <Icon name='send' />\n </Button>\n </Flex>\n </Flex>\n\n <HiddenFileInput\n ref={setAttachmentEl}\n type='file'\n multiple\n onChange={() => {\n if (attachmentEl?.files) {\n onFilesAdded?.(Array.from(attachmentEl?.files));\n }\n }}\n // Must trick input to believe there is no value when activated so that the same file may be added consecutively.\n onClick={(event: MouseEvent) => {\n (event.target as HTMLInputElement).value = '';\n }}\n />\n\n <FeedAttachments variant={variant} attachments={attachments} />\n </>\n );\n};\n\nexport default FeedInputRegion;\n"]}
1	+ {"version":3,"file":"FeedInputRegion.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedInputRegion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, useContext, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Avatar,\n Button,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n useElement,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from './Feed.context';\nimport FeedAttachments from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedInputRegionProps } from './Feed.types';\n\nexport const minInputHeight = '4rem';\n\nconst StyledAvatar = styled(Avatar)(({ theme }) => {\n return css`\n margin-block-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nconst StyledTextAreaContainer = styled.div(({ theme }) => {\n return css`\n width: 100%;\n overflow-y: hidden;\n padding: 0 ${theme.base.spacing} calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n `;\n});\n\nStyledTextAreaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled.div(({ theme }) => {\n return css`\n margin-block-start: calc(2.5 * ${theme.base.spacing});\n\n ${FeedButton} + ${FeedButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledActions.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n display: none;\n`;\n\nconst FeedInputRegion: FC<ForwardProps & FeedInputRegionProps> = (\n props: ForwardProps & FeedInputRegionProps\n) => {\n const {\n variant,\n id,\n attachments = [],\n onFilesAdded,\n onSubmit,\n inputRegionEl,\n rteRef,\n selectedRecipients\n } = props;\n\n const t = useI18n();\n const { setShowSearchResults } = useContext(FeedContext);\n const { avatarSrc, fullname, username, userStatus } = useContext(FeedContext).userInfo;\n\n const [emptyText, setEmptyText] = useState(true);\n const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n\n useOuterEvent('mousedown', [inputRegionEl], () => {\n if (emptyText) rteRef.current?.clear();\n });\n\n const handleSubmit = () => {\n setShowSearchResults?.(false);\n if ((!emptyText \|\| attachments.length > 0) && attachments.every(x => !x.error)) {\n onSubmit({\n id,\n value: rteRef.current?.getPlainText() \|\| '',\n attachments: attachments \|\| [],\n username,\n recipients: variant === 'post' ? selectedRecipients : undefined,\n clear: () => {\n rteRef.current?.clear();\n }\n });\n }\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n setShowSearchResults?.(true);\n if ((event.metaKey \|\| event.ctrlKey) && event.key === 'Enter') handleSubmit();\n };\n\n const inputLabel = t(variant === 'post' ? 'feed_new_post' : 'feed_new_comment');\n const submitLabel = t(variant === 'post' ? 'feed_new_post_submit' : 'feed_new_comment_submit');\n\n return (\n <>\n <Flex container={{ alignItems: 'start' }}>\n <StyledAvatar\n name={fullname}\n size={variant === 'post' ? 'l' : 'm'}\n imageSrc={avatarSrc}\n status={userStatus}\n />\n\n <StyledTextAreaContainer>\n <FeedRichText\n label={inputLabel}\n onChange={() => {\n setEmptyText(rteRef.current?.getPlainText().trim() === '');\n }}\n onKeyDown={onKeyDown}\n height={{ min: minInputHeight }}\n ref={rteRef}\n />\n </StyledTextAreaContainer>\n\n <Flex as={StyledActions} container={{ direction: 'column', gap: 0.5 }}>\n {onFilesAdded && (\n <Button\n variant='simple'\n as={FeedButton}\n onClick={() => {\n setShowSearchResults?.(false);\n attachmentEl?.click();\n }}\n icon\n label={t('feed_attach_files')}\n >\n <Icon name='paper-clip' />\n </Button>\n )}\n\n <Button\n as={FeedButton}\n disabled={(emptyText && attachments.length === 0) \|\| attachments.some(x => x.error)}\n variant='simple'\n onClick={handleSubmit}\n icon\n label={submitLabel}\n >\n <Icon name='send' />\n </Button>\n </Flex>\n </Flex>\n\n <HiddenFileInput\n ref={setAttachmentEl}\n type='file'\n multiple\n onChange={() => {\n if (attachmentEl?.files) {\n onFilesAdded?.(Array.from(attachmentEl?.files));\n }\n }}\n // Must trick input to believe there is no value when activated so that the same file may be added consecutively.\n onClick={(event: MouseEvent) => {\n (event.target as HTMLInputElement).value = '';\n }}\n />\n\n <FeedAttachments variant={variant} attachments={attachments} />\n </>\n );\n};\n\nexport default FeedInputRegion;\n"]}

package/lib/components/Feed/FeedLikeButton.js CHANGED Viewed

@@ -91,7 +91,7 @@ const FeedLikeButton = forwardRef((props, ref) => {
                         id,
                         user
                     });
-                }, emphasized: liked, "aria-pressed": liked, label: t('feed_like_label'), "aria-describedby": likeCount > 0 ? likeCountId : undefined, ref: ref, children: _jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }) }), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineBareButton, { ref: setCountEl, role: likes.length ? 'button' : undefined, onClick: onLikeCountClick, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, tabIndex: 0, onKeyDown: (e) => {
+                }, emphasized: liked, "aria-pressed": liked, label: liked ? t('feed_unlike_label') : t('feed_like_label'), "aria-describedby": likeCount > 0 ? likeCountId : undefined, ref: ref, children: _jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }) }), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineBareButton, { ref: setCountEl, role: likes.length ? 'button' : undefined, onClick: onLikeCountClick, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 e.preventDefault();
                                 onLikeCountClick();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n Button,\n Icon,\n Avatar,\n Count,\n Tooltip,\n ModalMethods,\n useModalManager,\n useI18n,\n useConfiguration,\n useElement,\n formatListToLocaleString,\n Flex,\n defaultThemeProp,\n useUID\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList from './FeedModalList';\nimport { FeedMessageBaseProps, FeedModalListProps } from './Feed.types';\n\nconst InlineBareButton = styled(BareRoleButton)(({ theme }) => {\n return css`\n position: relative;\n display: inline-block;\n line-height: 1;\n outline: none;\n border-radius: calc(${theme.base['border-radius']} * 9999);\n\n &:hover {\n ::before {\n content: '';\n position: absolute;\n top: calc(${theme.components.button['border-width']} * -1);\n bottom: calc(${theme.components.button['border-width']} * -1);\n left: calc(${theme.components.button['border-width']} * -1);\n right: calc(${theme.components.button['border-width']} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n }\n\n &:focus {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n `;\n});\n\nInlineBareButton.defaultProps = defaultThemeProp;\n\ntype FeedLikeButtonProps = Pick<\n FeedMessageBaseProps,\n \| 'id'\n \| 'liked'\n \| 'likeCount'\n \| 'likes'\n \| 'onLikeClick'\n \| 'onLikeCountInteraction'\n \| 'onLoadMoreLikes'\n \| 'likesLoading'\n>;\n\nconst FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(\n (props, ref: Ref<HTMLButtonElement>) => {\n const {\n id,\n liked,\n likeCount = 0,\n likes = [],\n onLikeClick,\n onLikeCountInteraction,\n onLoadMoreLikes,\n likesLoading\n } = props;\n const t = useI18n();\n const { locale } = useConfiguration();\n const { create } = useModalManager();\n const { userInfo: loggedInUser } = useContext(FeedContext);\n const [countEl, setCountEl] = useElement(null);\n const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n const likeCountId = useUID();\n\n useEffect(() => {\n likesModalRef.current?.update({\n count: likeCount,\n heading: t('feed_likes'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n }, [likeCount, likes, onLoadMoreLikes, likesLoading]);\n\n const likesAttributes = useMemo(() => {\n const likesList = likes.map(x => x.primary.toString());\n return {\n ariaLabel: likeCount\n ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n count: likeCount\n })}`\n : t('feed_post_likes', [likeCount], { count: likeCount }),\n label: `${t('feed_liked_by')}:\\n${formatListToLocaleString(\n likesList.slice(0, 2),\n t,\n locale,\n {\n count: likeCount,\n separator: '\\n'\n }\n )}`\n };\n }, [likes, likeCount]);\n\n const onLikeCountClick = () => {\n if (likes.length) {\n likesModalRef.current = create(FeedModalList, {\n count: likeCount,\n heading: t('feed_likes'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n } else {\n onLikeCountInteraction?.();\n }\n };\n\n return (\n <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n <Button\n variant='simple'\n icon\n compact\n as={FeedButton}\n onClick={() => {\n const user = {\n id: loggedInUser.username,\n primary: loggedInUser.fullname,\n secondary: loggedInUser.meta,\n visual: (\n <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n )\n };\n onLikeClick({\n id,\n user\n });\n }}\n emphasized={liked}\n aria-pressed={liked}\n label={t('feed_like_label')}\n aria-describedby={likeCount > 0 ? likeCountId : undefined}\n ref={ref}\n >\n <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n </Button>\n {likeCount > 0 && (\n <>\n <InlineBareButton\n ref={setCountEl}\n role={likes.length ? 'button' : undefined}\n onClick={onLikeCountClick}\n onFocus={onLikeCountInteraction}\n onMouseOver={onLikeCountInteraction}\n aria-label={likesAttributes.ariaLabel}\n tabIndex={0}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onLikeCountClick();\n }\n }}\n >\n <Count\n id={likeCountId}\n aria-label={t('feed_post_likes', [likeCount], { count: likeCount })}\n >\n {likeCount}\n </Count>\n </InlineBareButton>\n <Tooltip target={countEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {likesAttributes.label \|\| t('feed_post_likes', [likeCount], { count: likeCount })}\n </Tooltip>\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default FeedLikeButton;\n"]}
1	+ {"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACnG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EAEP,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;;;0BAKc,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;oBAMjC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;uBACpC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;qBACzC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;sBACtC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;;;;oBAQzC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;GAExD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAcjD,MAAM,cAAc,GAA2C,UAAU,CACvE,CAAC,KAAK,EAAE,GAA2B,EAAE,EAAE;IACrC,MAAM,EACJ,EAAE,EACF,KAAK,EACL,SAAS,GAAG,CAAC,EACb,KAAK,GAAG,EAAE,EACV,WAAW,EACX,sBAAsB,EACtB,eAAe,EACf,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,MAAM,EAAoC,CAAC;IACjE,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC;YAC5B,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,CAAC,CAAC,YAAY,CAAC;YACxB,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,eAAe;YAC3B,OAAO,EAAE,YAAY;SACtB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvD,OAAO;YACL,SAAS,EAAE,SAAS;gBAClB,CAAC,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,IAAI,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE;oBAClF,KAAK,EAAE,SAAS;iBACjB,CAAC,EAAE;gBACN,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YAC3D,KAAK,EAAE,GAAG,CAAC,CAAC,eAAe,CAAC,MAAM,wBAAwB,CACxD,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACrB,CAAC,EACD,MAAM,EACN;gBACE,KAAK,EAAE,SAAS;gBAChB,SAAS,EAAE,IAAI;aAChB,CACF,EAAE;SACJ,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,aAAa,CAAC,OAAO,GAAG,MAAM,CAAC,aAAa,EAAE;gBAC5C,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,CAAC,CAAC,YAAY,CAAC;gBACxB,SAAS,EAAE,KAAK;gBAChB,UAAU,EAAE,eAAe;gBAC3B,OAAO,EAAE,YAAY;aACtB,CAAC,CAAC;SACJ;aAAM;YACL,sBAAsB,EAAE,EAAE,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,aACjD,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,QACP,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,IAAI,GAAG;wBACX,EAAE,EAAE,YAAY,CAAC,QAAQ;wBACzB,OAAO,EAAE,YAAY,CAAC,QAAQ;wBAC9B,SAAS,EAAE,YAAY,CAAC,IAAI;wBAC5B,MAAM,EAAE,CACN,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,CAAC,QAAQ,GAAI,CACnF;qBACF,CAAC;oBACF,WAAW,CAAC;wBACV,EAAE;wBACF,IAAI;qBACL,CAAC,CAAC;gBACL,CAAC,EACD,UAAU,EAAE,KAAK,kBACH,KAAK,EACnB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,sBAC1C,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACzD,GAAG,EAAE,GAAG,YAER,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,GAAI,GAChD,EACR,SAAS,GAAG,CAAC,IAAI,CAChB,8BACE,KAAC,gBAAgB,IACf,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACzC,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAE,sBAAsB,gBACvB,eAAe,CAAC,SAAS,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;4BAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gCACrB,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,gBAAgB,EAAE,CAAC;6BACpB;wBACH,CAAC,YAED,KAAC,KAAK,IACJ,EAAE,EAAE,WAAW,gBACH,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,YAElE,SAAS,GACJ,GACS,EACnB,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAC,cAAc,EAAE,KAAK,YAC9E,eAAe,CAAC,KAAK,IAAI,CAAC,CAAC,iBAAiB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,GACzE,IACT,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n Button,\n Icon,\n Avatar,\n Count,\n Tooltip,\n ModalMethods,\n useModalManager,\n useI18n,\n useConfiguration,\n useElement,\n formatListToLocaleString,\n Flex,\n defaultThemeProp,\n useUID\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList from './FeedModalList';\nimport { FeedMessageBaseProps, FeedModalListProps } from './Feed.types';\n\nconst InlineBareButton = styled(BareRoleButton)(({ theme }) => {\n return css`\n position: relative;\n display: inline-block;\n line-height: 1;\n outline: none;\n border-radius: calc(${theme.base['border-radius']} * 9999);\n\n &:hover {\n ::before {\n content: '';\n position: absolute;\n top: calc(${theme.components.button['border-width']} * -1);\n bottom: calc(${theme.components.button['border-width']} * -1);\n left: calc(${theme.components.button['border-width']} * -1);\n right: calc(${theme.components.button['border-width']} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n }\n\n &:focus {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n `;\n});\n\nInlineBareButton.defaultProps = defaultThemeProp;\n\ntype FeedLikeButtonProps = Pick<\n FeedMessageBaseProps,\n \| 'id'\n \| 'liked'\n \| 'likeCount'\n \| 'likes'\n \| 'onLikeClick'\n \| 'onLikeCountInteraction'\n \| 'onLoadMoreLikes'\n \| 'likesLoading'\n>;\n\nconst FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(\n (props, ref: Ref<HTMLButtonElement>) => {\n const {\n id,\n liked,\n likeCount = 0,\n likes = [],\n onLikeClick,\n onLikeCountInteraction,\n onLoadMoreLikes,\n likesLoading\n } = props;\n const t = useI18n();\n const { locale } = useConfiguration();\n const { create } = useModalManager();\n const { userInfo: loggedInUser } = useContext(FeedContext);\n const [countEl, setCountEl] = useElement(null);\n const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n const likeCountId = useUID();\n\n useEffect(() => {\n likesModalRef.current?.update({\n count: likeCount,\n heading: t('feed_likes'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n }, [likeCount, likes, onLoadMoreLikes, likesLoading]);\n\n const likesAttributes = useMemo(() => {\n const likesList = likes.map(x => x.primary.toString());\n return {\n ariaLabel: likeCount\n ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n count: likeCount\n })}`\n : t('feed_post_likes', [likeCount], { count: likeCount }),\n label: `${t('feed_liked_by')}:\\n${formatListToLocaleString(\n likesList.slice(0, 2),\n t,\n locale,\n {\n count: likeCount,\n separator: '\\n'\n }\n )}`\n };\n }, [likes, likeCount]);\n\n const onLikeCountClick = () => {\n if (likes.length) {\n likesModalRef.current = create(FeedModalList, {\n count: likeCount,\n heading: t('feed_likes'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n } else {\n onLikeCountInteraction?.();\n }\n };\n\n return (\n <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n <Button\n variant='simple'\n icon\n compact\n as={FeedButton}\n onClick={() => {\n const user = {\n id: loggedInUser.username,\n primary: loggedInUser.fullname,\n secondary: loggedInUser.meta,\n visual: (\n <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n )\n };\n onLikeClick({\n id,\n user\n });\n }}\n emphasized={liked}\n aria-pressed={liked}\n label={liked ? t('feed_unlike_label') : t('feed_like_label')}\n aria-describedby={likeCount > 0 ? likeCountId : undefined}\n ref={ref}\n >\n <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n </Button>\n {likeCount > 0 && (\n <>\n <InlineBareButton\n ref={setCountEl}\n role={likes.length ? 'button' : undefined}\n onClick={onLikeCountClick}\n onFocus={onLikeCountInteraction}\n onMouseOver={onLikeCountInteraction}\n aria-label={likesAttributes.ariaLabel}\n tabIndex={0}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onLikeCountClick();\n }\n }}\n >\n <Count\n id={likeCountId}\n aria-label={t('feed_post_likes', [likeCount], { count: likeCount })}\n >\n {likeCount}\n </Count>\n </InlineBareButton>\n <Tooltip target={countEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {likesAttributes.label \|\| t('feed_post_likes', [likeCount], { count: likeCount })}\n </Tooltip>\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default FeedLikeButton;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-social",
-  "version": "4.0.0-dev.22.2",
+  "version": "4.0.0-dev.23.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -23,9 +23,9 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.22.2",
-    "@pega/cosmos-react-rte": "4.0.0-dev.22.2",
-    "@pega/cosmos-react-work": "4.0.0-dev.22.2",
+    "@pega/cosmos-react-core": "4.0.0-dev.23.1",
+    "@pega/cosmos-react-rte": "4.0.0-dev.23.1",
+    "@pega/cosmos-react-work": "4.0.0-dev.23.1",
     "@types/parse5": "^6.0.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",