npm - @pega/cosmos-react-social - Versions diffs - 3.0.0-dev.1.0 → 3.0.0-dev.11.0 - Mend

@pega/cosmos-react-social 3.0.0-dev.1.0 → 3.0.0-dev.11.0

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 (115) hide show

package/lib/components/Email/EntityList.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"EntityList.js","sourceRoot":"","sources":["../../../src/components/Email/EntityList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAEvE,OAAO,EAEL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,EAAE,OAAO,EAAE,MAAM,EAAoC,EAAE,GAA2B,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK;YACf,CAAC,CAAC;gBACE,GAAG,IAAI;gBACP,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,YACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;wBAC7B,OAAO,KAAC,WAAW,IAAuB,MAAM,EAAE,YAAY,CAAC,MAAM,IAA5C,YAAY,CAAC,EAAE,CAAiC,CAAC;oBAC5E,CAAC,CAAC,GACG,CACR;aACF;YACH,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,aACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACrD,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,EAC3B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,IAAI,GAAQ,IAC5B,EACb,KAAC,WAAW,cACV,KAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,SAAS,GAAG,GAC1C,IACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n ForwardProps,\n Text,\n Flex,\n Icon,\n Card,\n CardHeader,\n CardContent\n} from '@pega/cosmos-react-core';\n\nimport { StyledEntityList } from './Email.styles';\nimport EmailEntity from './EmailEntity';\nimport { EntityListProps } from './Email.types';\n\nconst EntityList: FunctionComponent<EntityListProps & ForwardProps> = forwardRef(\n ({ content, header }: PropsWithoutRef<EntityListProps>, ref: EntityListProps['ref']) => {\n const fields = content.map(data => {\n return data.value\n ? {\n ...data,\n value: (\n <Flex container={{ gap: 0.5, wrap: 'wrap' }}>\n {data.value.map(entityObject => {\n return <EmailEntity key={entityObject.id} entity={entityObject.entity} />;\n })}\n </Flex>\n )\n }\n : data;\n });\n\n return (\n <Card ref={ref}>\n <CardHeader container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={header.icon} />\n <Text variant='h3'>{header.text}</Text>\n </CardHeader>\n <CardContent>\n <StyledEntityList fields={fields} variant='stacked' />\n </CardContent>\n </Card>\n );\n }\n);\n\nexport default EntityList;\n"]}

package/lib/components/Email/index.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 export { default } from './Email';
-export { EmailUser, EmailProps, EmailComposerProps, EmailConversationProps, EmailShellProps, ViewAnalysisProps } from './Email.types';
+export { EmailUser, EmailProps, EmailComposerProps, EmailConversationProps, EmailShellProps, EntityListProps, EmailTemplate } from './Email.types';
 export { default as EmailConversation } from './EmailConversation';
 export { default as EmailShell } from './EmailShell';
 export { default as EmailComposer } from './EmailComposer';
 export { default as EmailSummaryItem } from './EmailSummaryItem';
 export { default as EmailSummaryList } from './EmailSummaryList';
-export { default as ViewAnalysis } from './ViewAnalysis';
+export { default as EntityList } from './EntityList';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Email/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EACL,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,~~iBAAiB~~,~~EAClB~~,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,~~YAAY~~,EAAE,MAAM,~~gBAAgB~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EACL,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,aAAa,EACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/Email/index.js CHANGED Viewed

@@ -4,5 +4,5 @@ export { default as EmailShell } from './EmailShell';
 export { default as EmailComposer } from './EmailComposer';
 export { default as EmailSummaryItem } from './EmailSummaryItem';
 export { default as EmailSummaryList } from './EmailSummaryList';
-export { default as ViewAnalysis } from './ViewAnalysis';
+export { default as EntityList } from './EntityList';
 //# sourceMappingURL=index.js.map

package/lib/components/Email/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;~~AASlC~~,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,~~YAAY~~,EAAE,MAAM,~~gBAAgB~~,CAAC","sourcesContent":["export { default } from './Email';\nexport {\n EmailUser,\n EmailProps,\n EmailComposerProps,\n EmailConversationProps,\n EmailShellProps,\n ~~ViewAnalysisProps~~\n} from './Email.types';\nexport { default as EmailConversation } from './EmailConversation';\nexport { default as EmailShell } from './EmailShell';\nexport { default as EmailComposer } from './EmailComposer';\nexport { default as EmailSummaryItem } from './EmailSummaryItem';\nexport { default as EmailSummaryList } from './EmailSummaryList';\nexport { default as ~~ViewAnalysis~~ } from './~~ViewAnalysis~~';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAUlC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './Email';\nexport {\n EmailUser,\n EmailProps,\n EmailComposerProps,\n EmailConversationProps,\n EmailShellProps,\n EntityListProps,\n EmailTemplate\n} from './Email.types';\nexport { default as EmailConversation } from './EmailConversation';\nexport { default as EmailShell } from './EmailShell';\nexport { default as EmailComposer } from './EmailComposer';\nexport { default as EmailSummaryItem } from './EmailSummaryItem';\nexport { default as EmailSummaryList } from './EmailSummaryList';\nexport { default as EntityList } from './EntityList';\n"]}

package/lib/components/Feed/Feed.d.ts CHANGED Viewed

@@ -42,6 +42,8 @@ export interface FeedProps extends NoChildrenProp {
     onFilterChange?: (filterId: string, on: boolean) => void;
     /** A callback that is triggered when the bottom of the Feed is scrolled into view so that additional posts may be displayed. */
     onLoadMore?: () => void;
+    /** Indicates if the posts are being currently loading */
+    loadingPosts?: boolean;
     /** A region to hold the new post component */
     newPostRegion?: ReactNode;
     /** A list of FeedPost components */

package/lib/components/Feed/Feed.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAG7F,OAAO,EAIL,YAAY,~~EAUZ~~,cAAc,~~EACf~~,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQ/D,MAAM,WAAW,MAAM;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC,yGAAyG;IACzG,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACjD,2EAA2E;IAC3E,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,8KAA8K;IAC9K,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2GAA2G;IAC3G,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC5C,yIAAyI;IACzI,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAChE,wFAAwF;IACxF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,gIAAgI;IAChI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;~~AA6DD~~,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,~~CAgLtC~~,CAAC;AAEF,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAG7F,OAAO,EAIL,YAAY,EASZ,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQ/D,MAAM,WAAW,MAAM;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC,yGAAyG;IACzG,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACjD,2EAA2E;IAC3E,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,8KAA8K;IAC9K,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2GAA2G;IAC3G,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC5C,yIAAyI;IACzI,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAChE,wFAAwF;IACxF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,gIAAgI;IAChI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAiDD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CAmKtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Flex, Grid, Icon, registerIcon, Popover, Switch, Text, Progress, StyledProgressRing, usePrevious } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Flex, Grid, Icon, registerIcon, Popover, Switch, Text, Progress, usePrevious, useItemIntersection, useUID } from '@pega/cosmos-react-core';
 import { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';
@@ -40,36 +40,21 @@ const StyledFilterList = styled.ul `
   min-width: 10rem;
 `;
 StyledFilterList.defaultProps = defaultThemeProp;
-const StyledLoadMore = styled.div(({ theme, visible }) => {
+const StyledLoadMore = styled.div(({ theme }) => {
     return css `
-    ${visible &&
-        css `
-      margin-top: calc(2 * ${theme.base.spacing});
-    `}
-    ${StyledProgressRing} {
-      min-height: 0;
-      min-width: 0;
-      ${visible &&
-        css `
-        min-height: 2rem;
-        min-width: 2rem;
-      `}
-    }
+    margin-top: ${theme.base.spacing};
+    min-height: 2rem;
+    min-width: 2rem;
   `;
 });
 StyledLoadMore.defaultProps = defaultThemeProp;
 const Feed = (props) => {
-    const { variant, children, userInfo, className, title, searchTypes, onDecoratorSearch, searchResults = [], onMentionClick, onTagClick, mentionContent, interactionRenderers = [], markdownMap, filters, onFilterChange, onLoadMore, newPostRegion, posts = [], ...restProps } = props;
+    const { loadingPosts = false, variant, children, userInfo, className, title, searchTypes, onDecoratorSearch, searchResults = [], onMentionClick, onTagClick, mentionContent, interactionRenderers = [], markdownMap, filters, onFilterChange, onLoadMore, newPostRegion, posts = [], ...restProps } = props;
     const t = useI18n();
     const [popoverEl, setPopoverEl] = useElement();
     const [buttonEl, setButtonEl] = useElement();
-    const [loadMoreEl, setLoadMoreEl] = useElement();
     const [mountPopover, setMountPopover] = useState(false);
-    const [feedOverflows, setFeedOverflows] = useState(false);
     const [showSearchResults, setShowSearchResults] = useState(false);
-    const feedOverflowsRef = useRef(false);
     const prevPosts = usePrevious(posts);
     const [announcementText, setAnnouncementText] = useState('');
     const filterRef = useRef(null);
@@ -87,35 +72,27 @@ const Feed = (props) => {
             document.removeEventListener('keydown', onKeydown);
         };
     }, []);
-    useEffect(() => {
-        if (loadMoreEl) {
-            const intersectionObserver = new IntersectionObserver(entries => {
-                if (!entries[0].isIntersecting) {
-                    setFeedOverflows(true);
-                    feedOverflowsRef.current = true;
-                }
-                else if (entries[0].isIntersecting && feedOverflowsRef.current) {
-                    onLoadMore?.();
-                }
-            });
-            intersectionObserver.observe(loadMoreEl);
-            return () => {
-                intersectionObserver.disconnect();
-            };
-        }
-    }, [loadMoreEl, feedOverflowsRef.current]);
+    const id = useUID();
+    useItemIntersection({ current: null }, posts.length - 1, () => {
+        onLoadMore?.();
+    }, `#${id} > div[role='region']`);
     const announce = useCallback((announcement) => {
         setAnnouncementText('');
         setTimeout(() => {
             setAnnouncementText(announcement);
         }, 0);
     }, []);
+    useEffect(() => {
+        if (loadingPosts)
+            announce(t('loading_post'));
+    }, [loadingPosts]);
     useEffect(() => {
         if (prevPosts) {
-            const difference = prevPosts?.length - posts.length;
-            if (difference > 0) {
+            const difference = posts.length - prevPosts?.length;
+            if (difference < 0)
                 announce(t('feed_post_removed'));
-            }
+            else if (difference > 0)
+                announce(t('feed_new_post_added', [difference], { count: difference }));
         }
     }, [posts]);
     return (_jsx(FeedContext.Provider, { value: {
@@ -133,11 +110,11 @@ const Feed = (props) => {
             markdownMap,
             userInfo,
             announce
-        }, children: _jsxs(StyledFeed, { ...restProps, children: [_jsx(FeedAnnouncer, { children: announcementText }, void 0), (title || (filters && !!filters.length)) && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, as: StyledHeading, children: [title ? _jsx(Text, { variant: 'h2', children: title }, void 0) : _jsx("div", {}, void 0), filters && (_jsx(Button, { as: FeedButton, ref: setButtonEl, variant: 'simple', icon: true, onClick: () => setMountPopover(curr => !curr), label: `${title || ''} ${t('filters')}`, emphasized: true, children: _jsx(Icon, { name: filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)
+        }, children: _jsxs(StyledFeed, { ...restProps, children: [_jsx(FeedAnnouncer, { children: announcementText }), (title || (filters && !!filters.length)) && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, as: StyledHeading, children: [title ? _jsx(Text, { variant: 'h2', children: title }) : _jsx("div", {}), filters && (_jsx(Button, { as: FeedButton, ref: setButtonEl, variant: 'simple', icon: true, onClick: () => setMountPopover(curr => !curr), label: `${title || ''} ${t('filters')}`, emphasized: true, children: _jsx(Icon, { name: filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)
                                     ? 'filter-on'
-                                    : 'filter' }, void 0) }, void 0))] }, void 0)), _jsx(Popover, { show: !!filters && mountPopover, ref: setPopoverEl, target: buttonEl, as: StyledFilterMenu, children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: 'fieldset', children: [_jsx(Text, { variant: 'h3', as: 'legend', children: t('filters') }, void 0), _jsx(Grid, { container: { gap: 1 }, as: StyledFilterList, ref: filterRef, children: filters?.map(filter => {
-                                    return (_jsx("li", { children: _jsx(Switch, { ...filter, onChange: (event) => onFilterChange?.(event.target.id, event.target.checked) }, void 0) }, filter.id));
-                                }) }, void 0)] }, void 0) }, void 0), _jsxs("div", { children: [newPostRegion, posts] }, void 0), onLoadMore && (_jsx(Flex, { ref: setLoadMoreEl, as: StyledLoadMore, visible: feedOverflows, container: { justify: 'center' }, children: _jsx(Progress, { placement: 'inline' }, void 0) }, void 0))] }, void 0) }, void 0));
+                                    : 'filter' }) }))] })), _jsx(Popover, { show: !!filters && mountPopover, ref: setPopoverEl, target: buttonEl, as: StyledFilterMenu, children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: 'fieldset', children: [_jsx(Text, { variant: 'h3', as: 'legend', children: t('filters') }), _jsx(Grid, { container: { gap: 1 }, as: StyledFilterList, ref: filterRef, children: filters?.map(filter => {
+                                    return (_jsx("li", { children: _jsx(Switch, { ...filter, onChange: (event) => onFilterChange?.(event.target.id, event.target.checked) }) }, filter.id));
+                                }) })] }) }), _jsxs("div", { id: id, children: [newPostRegion, posts] }), loadingPosts && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] }) }));
 };
 export default Feed;
 //# sourceMappingURL=Feed.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Feed.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, ReactNode, FC, useState, useRef, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Grid,\n Icon,\n registerIcon,\n Popover,\n Switch,\n Text,\n Progress,\n StyledProgressRing,\n usePrevious,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport { FeedContext, FeedContextValue } from './Feed.context';\nimport { StyledFeedNewPost } from './FeedNewPost';\nimport { StyledFeedPost } from './FeedPost';\nimport FeedButton from './FeedButton';\nimport FeedAnnouncer from './FeedAnnouncer';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nexport interface Filter {\n /** Sets DOM id for the control and associates label element via 'for' attribute. /\n id: string;\n /* Pass a string or a fragment with an Icon and string for the filter label. /\n label: ReactNode;\n /\n Disables the filter.\n * @default false\n /\n disabled?: boolean;\n /\n Sets on prop via onFilterChange.\n * @default false\n /\n on?: boolean;\n}\n\nexport interface FeedProps extends NoChildrenProp {\n /* Title for the feed. /\n title?: string;\n /* Information related to the user of the Feed. /\n userInfo: FeedContextValue['userInfo'];\n /* A set of search types that can be used to determine which data set to conduct a mention search on. /\n searchTypes?: FeedContextValue['searchTypes'];\n /* A callback that runs when a decorator search has been run inside of the feed. /\n onDecoratorSearch?: FeedContextValue['onSearch'];\n /* Results that will be shown in a Popover for a mention or tag search. /\n searchResults?: FeedContextValue['searchResults'];\n /* A callback that is triggered when a mention is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component. /\n onMentionClick?: FeedContextValue['onMentionClick'];\n /* A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. /\n onTagClick?: FeedContextValue['onTagClick'];\n /* A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern. /\n interactionRenderers?: FeedContextValue['interactionRenderers'];\n /* A mapping for various element types to render custom components for within posts. /\n markdownMap?: FeedContextValue['markdownMap'];\n /* A set of filters to apply to the Feed. /\n filters?: Filter[];\n /* A callback that runs when the filter is toggled. /\n onFilterChange?: (filterId: string, on: boolean) => void;\n /* A callback that is triggered when the bottom of the Feed is scrolled into view so that additional posts may be displayed. /\n onLoadMore?: () => void;\n /* A region to hold the new post component /\n newPostRegion?: ReactNode;\n /* A list of FeedPost components /\n posts?: ReactNode[];\n}\n\nconst StyledFeed = styled.div(props => {\n return css`\n ${StyledFeedNewPost}:not(:last-child), ${StyledFeedPost}:not(:last-child) {\n margin-bottom: calc(2 ${props.theme.base.spacing});\n }\n `;\n});\n\nStyledFeed.defaultProps = defaultThemeProp;\n\nconst StyledHeading = styled.div(props => {\n return css`\n margin: ${props.theme.base.spacing} 0;\n `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nconst StyledFilterMenu = styled.div(props => {\n return css`\n padding: calc(2 * ${props.theme.base.spacing});\n\n fieldset {\n border: none;\n }\n `;\n});\n\nStyledFilterMenu.defaultProps = defaultThemeProp;\n\nconst StyledFilterList = styled.ul`\n list-style-type: none;\n min-width: 10rem;\n`;\n\nStyledFilterList.defaultProps = defaultThemeProp;\n\nconst StyledLoadMore = styled.div<{ visible: boolean }>(({ theme, visible }) => {\n return css`\n ${visible &&\n css`\n margin-top: calc(2 * ${theme.base.spacing});\n `}\n\n ${StyledProgressRing} {\n min-height: 0;\n min-width: 0;\n\n ${visible &&\n css`\n min-height: 2rem;\n min-width: 2rem;\n `}\n }\n `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst Feed: FC<ForwardProps & FeedProps> = (props: ForwardProps & FeedProps) => {\n const {\n variant,\n children,\n userInfo,\n className,\n title,\n searchTypes,\n onDecoratorSearch,\n searchResults = [],\n onMentionClick,\n onTagClick,\n mentionContent,\n interactionRenderers = [],\n markdownMap,\n filters,\n onFilterChange,\n onLoadMore,\n newPostRegion,\n posts = [],\n ...restProps\n } = props;\n\n const t = useI18n();\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n const [loadMoreEl, setLoadMoreEl] = useElement<HTMLDivElement>();\n const [mountPopover, setMountPopover] = useState(false);\n const [feedOverflows, setFeedOverflows] = useState(false);\n const [showSearchResults, setShowSearchResults] = useState(false);\n const feedOverflowsRef = useRef(false);\n const prevPosts = usePrevious(posts);\n const [announcementText, setAnnouncementText] = useState('');\n\n const filterRef = useRef(null);\n useArrows(filterRef);\n\n useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n setMountPopover(false);\n });\n\n const onKeydown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') setMountPopover(false);\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n useEffect(() => {\n if (loadMoreEl) {\n const intersectionObserver = new IntersectionObserver(entries => {\n if (!entries[0].isIntersecting) {\n setFeedOverflows(true);\n feedOverflowsRef.current = true;\n } else if (entries[0].isIntersecting && feedOverflowsRef.current) {\n onLoadMore?.();\n }\n });\n\n intersectionObserver.observe(loadMoreEl);\n\n return () => {\n intersectionObserver.disconnect();\n };\n }\n }, [loadMoreEl, feedOverflowsRef.current]);\n\n const announce = useCallback((announcement: string) => {\n setAnnouncementText('');\n setTimeout(() => {\n setAnnouncementText(announcement);\n }, 0);\n }, []);\n\n useEffect(() => {\n if (prevPosts) {\n const difference = prevPosts?.length - posts.length;\n if (difference > 0) {\n announce(t('feed_post_removed'));\n }\n }\n }, [posts]);\n\n return (\n <FeedContext.Provider\n value={{\n searchTypes,\n onSearch: e => {\n if (onDecoratorSearch) onDecoratorSearch(e);\n },\n searchResults,\n showSearchResults,\n setShowSearchResults,\n onMentionClick,\n onTagClick,\n interactionRenderers,\n markdownMap,\n userInfo,\n announce\n }}\n >\n <StyledFeed {...restProps}>\n <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n {(title \|\| (filters && !!filters.length)) && (\n <Flex container={{ justify: 'between', alignItems: 'center' }} as={StyledHeading}>\n {title ? <Text variant='h2'>{title}</Text> : <div />}\n {filters && (\n <Button\n as={FeedButton}\n ref={setButtonEl}\n variant='simple'\n icon\n onClick={() => setMountPopover(curr => !curr)}\n label={`${title \|\| ''} ${t('filters')}`}\n emphasized\n >\n <Icon\n name={\n filters?.map(filter => !!filter.on).reduce((acc, curr) => acc \|\| curr)\n ? 'filter-on'\n : 'filter'\n }\n />\n </Button>\n )}\n </Flex>\n )}\n <Popover\n show={!!filters && mountPopover}\n ref={setPopoverEl}\n target={buttonEl}\n as={StyledFilterMenu}\n >\n <Flex container={{ direction: 'column', gap: 2 }} as='fieldset'>\n <Text variant='h3' as='legend'>\n {t('filters')}\n </Text>\n <Grid container={{ gap: 1 }} as={StyledFilterList} ref={filterRef}>\n {filters?.map(filter => {\n return (\n <li key={filter.id}>\n <Switch\n {...filter}\n onChange={(event: ChangeEvent<HTMLInputElement>) =>\n onFilterChange?.(event.target.id, event.target.checked)\n }\n />\n </li>\n );\n })}\n </Grid>\n </Flex>\n </Popover>\n\n <div>\n {newPostRegion}\n {posts}\n </div>\n\n {onLoadMore && (\n <Flex\n ref={setLoadMoreEl}\n as={StyledLoadMore}\n visible={feedOverflows}\n container={{ justify: 'center' }}\n >\n <Progress placement='inline' />\n </Flex>\n )}\n </StyledFeed>\n </FeedContext.Provider>\n );\n};\n\nexport default Feed;\n"]}
1	+ {"version":3,"file":"Feed.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, ReactNode, FC, useState, useRef, useEffect, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Grid,\n Icon,\n registerIcon,\n Popover,\n Switch,\n Text,\n Progress,\n usePrevious,\n NoChildrenProp,\n useItemIntersection,\n useUID\n} from '@pega/cosmos-react-core';\nimport { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport { FeedContext, FeedContextValue } from './Feed.context';\nimport { StyledFeedNewPost } from './FeedNewPost';\nimport { StyledFeedPost } from './FeedPost';\nimport FeedButton from './FeedButton';\nimport FeedAnnouncer from './FeedAnnouncer';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nexport interface Filter {\n /** Sets DOM id for the control and associates label element via 'for' attribute. /\n id: string;\n /* Pass a string or a fragment with an Icon and string for the filter label. /\n label: ReactNode;\n /\n Disables the filter.\n * @default false\n /\n disabled?: boolean;\n /\n Sets on prop via onFilterChange.\n * @default false\n /\n on?: boolean;\n}\n\nexport interface FeedProps extends NoChildrenProp {\n /* Title for the feed. /\n title?: string;\n /* Information related to the user of the Feed. /\n userInfo: FeedContextValue['userInfo'];\n /* A set of search types that can be used to determine which data set to conduct a mention search on. /\n searchTypes?: FeedContextValue['searchTypes'];\n /* A callback that runs when a decorator search has been run inside of the feed. /\n onDecoratorSearch?: FeedContextValue['onSearch'];\n /* Results that will be shown in a Popover for a mention or tag search. /\n searchResults?: FeedContextValue['searchResults'];\n /* A callback that is triggered when a mention is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component. /\n onMentionClick?: FeedContextValue['onMentionClick'];\n /* A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. /\n onTagClick?: FeedContextValue['onTagClick'];\n /* A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern. /\n interactionRenderers?: FeedContextValue['interactionRenderers'];\n /* A mapping for various element types to render custom components for within posts. /\n markdownMap?: FeedContextValue['markdownMap'];\n /* A set of filters to apply to the Feed. /\n filters?: Filter[];\n /* A callback that runs when the filter is toggled. /\n onFilterChange?: (filterId: string, on: boolean) => void;\n /* A callback that is triggered when the bottom of the Feed is scrolled into view so that additional posts may be displayed. /\n onLoadMore?: () => void;\n /* Indicates if the posts are being currently loading /\n loadingPosts?: boolean;\n /* A region to hold the new post component /\n newPostRegion?: ReactNode;\n /* A list of FeedPost components /\n posts?: ReactNode[];\n}\n\nconst StyledFeed = styled.div(props => {\n return css`\n ${StyledFeedNewPost}:not(:last-child), ${StyledFeedPost}:not(:last-child) {\n margin-bottom: calc(2 ${props.theme.base.spacing});\n }\n `;\n});\n\nStyledFeed.defaultProps = defaultThemeProp;\n\nconst StyledHeading = styled.div(props => {\n return css`\n margin: ${props.theme.base.spacing} 0;\n `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nconst StyledFilterMenu = styled.div(props => {\n return css`\n padding: calc(2 * ${props.theme.base.spacing});\n\n fieldset {\n border: none;\n }\n `;\n});\n\nStyledFilterMenu.defaultProps = defaultThemeProp;\n\nconst StyledFilterList = styled.ul`\n list-style-type: none;\n min-width: 10rem;\n`;\n\nStyledFilterList.defaultProps = defaultThemeProp;\n\nconst StyledLoadMore = styled.div(({ theme }) => {\n return css`\n margin-top: ${theme.base.spacing};\n min-height: 2rem;\n min-width: 2rem;\n `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst Feed: FC<ForwardProps & FeedProps> = (props: ForwardProps & FeedProps) => {\n const {\n loadingPosts = false,\n variant,\n children,\n userInfo,\n className,\n title,\n searchTypes,\n onDecoratorSearch,\n searchResults = [],\n onMentionClick,\n onTagClick,\n mentionContent,\n interactionRenderers = [],\n markdownMap,\n filters,\n onFilterChange,\n onLoadMore,\n newPostRegion,\n posts = [],\n ...restProps\n } = props;\n const t = useI18n();\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n const [mountPopover, setMountPopover] = useState(false);\n const [showSearchResults, setShowSearchResults] = useState(false);\n const prevPosts = usePrevious(posts);\n const [announcementText, setAnnouncementText] = useState('');\n\n const filterRef = useRef(null);\n useArrows(filterRef);\n\n useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n setMountPopover(false);\n });\n\n const onKeydown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') setMountPopover(false);\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n const id = useUID();\n useItemIntersection(\n { current: null },\n posts.length - 1,\n () => {\n onLoadMore?.();\n },\n `#${id} > div[role='region']`\n );\n\n const announce = useCallback((announcement: string) => {\n setAnnouncementText('');\n setTimeout(() => {\n setAnnouncementText(announcement);\n }, 0);\n }, []);\n\n useEffect(() => {\n if (loadingPosts) announce(t('loading_post'));\n }, [loadingPosts]);\n\n useEffect(() => {\n if (prevPosts) {\n const difference = posts.length - prevPosts?.length;\n if (difference < 0) announce(t('feed_post_removed'));\n else if (difference > 0)\n announce(t('feed_new_post_added', [difference], { count: difference }));\n }\n }, [posts]);\n\n return (\n <FeedContext.Provider\n value={{\n searchTypes,\n onSearch: e => {\n if (onDecoratorSearch) onDecoratorSearch(e);\n },\n searchResults,\n showSearchResults,\n setShowSearchResults,\n onMentionClick,\n onTagClick,\n interactionRenderers,\n markdownMap,\n userInfo,\n announce\n }}\n >\n <StyledFeed {...restProps}>\n <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n {(title \|\| (filters && !!filters.length)) && (\n <Flex container={{ justify: 'between', alignItems: 'center' }} as={StyledHeading}>\n {title ? <Text variant='h2'>{title}</Text> : <div />}\n {filters && (\n <Button\n as={FeedButton}\n ref={setButtonEl}\n variant='simple'\n icon\n onClick={() => setMountPopover(curr => !curr)}\n label={`${title \|\| ''} ${t('filters')}`}\n emphasized\n >\n <Icon\n name={\n filters?.map(filter => !!filter.on).reduce((acc, curr) => acc \|\| curr)\n ? 'filter-on'\n : 'filter'\n }\n />\n </Button>\n )}\n </Flex>\n )}\n <Popover\n show={!!filters && mountPopover}\n ref={setPopoverEl}\n target={buttonEl}\n as={StyledFilterMenu}\n >\n <Flex container={{ direction: 'column', gap: 2 }} as='fieldset'>\n <Text variant='h3' as='legend'>\n {t('filters')}\n </Text>\n <Grid container={{ gap: 1 }} as={StyledFilterList} ref={filterRef}>\n {filters?.map(filter => {\n return (\n <li key={filter.id}>\n <Switch\n {...filter}\n onChange={(event: ChangeEvent<HTMLInputElement>) =>\n onFilterChange?.(event.target.id, event.target.checked)\n }\n />\n </li>\n );\n })}\n </Grid>\n </Flex>\n </Popover>\n\n <div id={id}>\n {newPostRegion}\n {posts}\n </div>\n\n {loadingPosts && (\n <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n <Progress placement='inline' />\n </Flex>\n )}\n </StyledFeed>\n </FeedContext.Provider>\n );\n};\n\nexport default Feed;\n"]}

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

@@ -5,7 +5,7 @@ const StyledFeedAnnouncer = styled.span `
   ${hideVisually}
 `;
 const FeedAnnouncer = ({ children }) => {
-    return _jsx(StyledFeedAnnouncer, { "aria-live": 'polite', children: children }, void 0);
+    return _jsx(StyledFeedAnnouncer, { "aria-live": 'polite', children: children });
 };
 export default FeedAnnouncer;
 //# sourceMappingURL=FeedAnnouncer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedAnnouncer.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAnnouncer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAA;IACnC,YAAY;CACf,CAAC;AAEF,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7D,OAAO,KAAC,mBAAmB,iBAAW,QAAQ,YAAE,QAAQ,~~WAAuB~~,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { hideVisually } from 'polished';\nimport { FC } from 'react';\nimport styled from 'styled-components';\n\ninterface FeedAnnouncerProps {\n children: string;\n}\n\nconst StyledFeedAnnouncer = styled.span`\n ${hideVisually}\n`;\n\nconst FeedAnnouncer: FC<FeedAnnouncerProps> = ({ children }) => {\n return <StyledFeedAnnouncer aria-live='polite'>{children}</StyledFeedAnnouncer>;\n};\n\nexport default FeedAnnouncer;\n"]}
1	+ {"version":3,"file":"FeedAnnouncer.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAnnouncer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAA;IACnC,YAAY;CACf,CAAC;AAEF,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7D,OAAO,KAAC,mBAAmB,iBAAW,QAAQ,YAAE,QAAQ,GAAuB,CAAC;AAClF,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { hideVisually } from 'polished';\nimport { FC } from 'react';\nimport styled from 'styled-components';\n\ninterface FeedAnnouncerProps {\n children: string;\n}\n\nconst StyledFeedAnnouncer = styled.span`\n ${hideVisually}\n`;\n\nconst FeedAnnouncer: FC<FeedAnnouncerProps> = ({ children }) => {\n return <StyledFeedAnnouncer aria-live='polite'>{children}</StyledFeedAnnouncer>;\n};\n\nexport default FeedAnnouncer;\n"]}

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

@@ -79,8 +79,8 @@ const FeedAttachments = forwardRef((props, ref) => {
             nonPreviewableFiles.push(file);
     });
     return (_jsxs(StyledAttachmentsRegion, { children: [readOnly && !!previewableFiles.length && (_jsx(Flex, { container: { direction: 'column', gap: 1 }, children: previewableFiles.map(({ lastModified, name, onPreview, thumbnail }) => {
-                    return (_jsx(StyledImagePreview, { onClick: () => onPreview?.(name), children: _jsx(Image, { alt: name, src: thumbnail }, void 0) }, lastModified));
-                }) }, void 0)), _jsxs(Grid, { ref: ref, as: StyledFeedAttachments, container: {
+                    return (_jsx(StyledImagePreview, { onClick: () => onPreview?.(name), children: _jsx(Image, { alt: name, src: thumbnail }) }, lastModified));
+                }) })), _jsxs(Grid, { ref: ref, as: StyledFeedAttachments, container: {
                     cols: 'repeat(auto-fill, minmax(15rem, 1fr))',
                     gap: 1
                 }, children: [!readOnly &&
@@ -88,7 +88,7 @@ const FeedAttachments = forwardRef((props, ref) => {
                             return _jsx(FileUploadItem, { name: name, size: size, ...restProps }, lastModified);
                         }), nonPreviewableFiles.map(({ lastModified, name, size, ...restProps }) => {
                         return _jsx(FileUploadItem, { name: name, size: size, ...restProps }, lastModified);
-                    })] }, void 0)] }, void 0));
+                    })] })] }));
 });
 export default FeedAttachments;
 //# sourceMappingURL=FeedAttachments.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedAttachments.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":"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~~WAAI~~,IADb,YAAY,CAEhB,CACtB,CAAC;gBACJ,CAAC,CAAC,~~WACG~~,CACR,EACD,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,qBAAqB,EACzB,SAAS,EAAE;oBACT,IAAI,EAAE,uCAAuC;oBAC7C,GAAG,EAAE,CAAC;iBACP,aAEA,CAAC,QAAQ;wBACR,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;4BAClE,OAAO,KAAC,cAAc,IAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,KAAM,SAAS,IAAnD,YAAY,CAA2C,CAAC;wBACtF,CAAC,CAAC,EACH,mBAAmB,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;wBACtE,OAAO,KAAC,cAAc,IAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,KAAM,SAAS,IAAnD,YAAY,CAA2C,CAAC;oBACtF,CAAC,CAAC,~~YACG~~,~~YACiB~~,CAC3B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref, useEffect, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n FileUploadItem,\n FileUploadItemProps,\n Grid,\n Image,\n defaultThemeProp,\n getKindFromMimeType,\n getMimeTypeFromFile,\n Flex,\n StyledFlex,\n usePrevious,\n useI18n\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { FeedContext } from './Feed.context';\n\nexport type AttachedFiles = FileUploadItemProps & File;\n\ninterface FeedAttachmentsProps {\n attachments?: AttachedFiles[];\n readOnly?: boolean;\n ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledFeedAttachments = styled.ul(({ theme }) => {\n return css`\n overflow-x: auto;\n\n > li {\n background-color: ${theme.base.palette['primary-background']};\n cursor: initial;\n }\n `;\n});\n\nStyledFeedAttachments.defaultProps = defaultThemeProp;\n\nexport const StyledImagePreview = styled(BareButton)(({ theme }) => {\n return css`\n line-height: 0;\n\n /* stylelint-disable declaration-block-no-duplicate-properties /\n width: -moz-fit-content;\n width: fit-content;\n\n / stylelint-enable declaration-block-no-duplicate-properties /\n border-radius: calc(0.5 ${theme.base['border-radius']});\n\n & + & {\n margin: 0;\n }\n\n &:focus {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n\n img {\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n object-fit: contain;\n max-height: 32rem;\n max-width: 100%;\n }\n `;\n});\n\nStyledImagePreview.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsRegion = styled.div(({ theme }) => {\n return css`\n margin: ${theme.base.spacing} 0;\n\n ${StyledFlex} + ${StyledFeedAttachments} {\n margin-block-start: ${theme.base.spacing};\n }\n `;\n});\n\nStyledAttachmentsRegion.defaultProps = defaultThemeProp;\n\nconst FeedAttachments: FC<FeedAttachmentsProps> = forwardRef(\n (props: PropsWithoutRef<FeedAttachmentsProps>, ref: FeedAttachmentsProps['ref']) => {\n const { attachments = [], readOnly } = props;\n const t = useI18n();\n const { announce } = useContext(FeedContext);\n const prevAttachments = usePrevious(attachments) ?? [];\n\n useEffect(() => {\n if (attachments.length !== prevAttachments?.length) {\n const difference = attachments.length - prevAttachments.length;\n const normalizedDifference = difference * (difference > 0 ? 1 : -1);\n announce(\n t(`feed_attachments_${difference > 0 ? 'added' : 'removed'}`, [normalizedDifference], {\n count: normalizedDifference\n })\n );\n }\n }, [attachments]);\n\n if (attachments.length === 0) return null;\n\n const previewableFiles: AttachedFiles[] = [];\n const nonPreviewableFiles: AttachedFiles[] = [];\n\n attachments.forEach(file => {\n const type = getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '');\n\n if (type === 'image' && file.thumbnail) previewableFiles.push(file);\n else nonPreviewableFiles.push(file);\n });\n\n return (\n <StyledAttachmentsRegion>\n {readOnly && !!previewableFiles.length && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n {previewableFiles.map(({ lastModified, name, onPreview, thumbnail }) => {\n return (\n <StyledImagePreview key={lastModified} onClick={() => onPreview?.(name)}>\n <Image alt={name} src={thumbnail} />\n </StyledImagePreview>\n );\n })}\n </Flex>\n )}\n <Grid\n ref={ref}\n as={StyledFeedAttachments}\n container={{\n cols: 'repeat(auto-fill, minmax(15rem, 1fr))',\n gap: 1\n }}\n >\n {!readOnly &&\n previewableFiles.map(({ lastModified, name, size, ...restProps }) => {\n return <FileUploadItem key={lastModified} name={name} size={size} {...restProps} />;\n })}\n {nonPreviewableFiles.map(({ lastModified, name, size, ...restProps }) => {\n return <FileUploadItem key={lastModified} name={name} size={size} {...restProps} />;\n })}\n </Grid>\n </StyledAttachmentsRegion>\n );\n }\n);\n\nexport default FeedAttachments;\n"]}
1	+ {"version":3,"file":"FeedAttachments.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref, useEffect, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n FileUploadItem,\n FileUploadItemProps,\n Grid,\n Image,\n defaultThemeProp,\n getKindFromMimeType,\n getMimeTypeFromFile,\n Flex,\n StyledFlex,\n usePrevious,\n useI18n\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { FeedContext } from './Feed.context';\n\nexport type AttachedFiles = FileUploadItemProps & File;\n\ninterface FeedAttachmentsProps {\n attachments?: AttachedFiles[];\n readOnly?: boolean;\n ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledFeedAttachments = styled.ul(({ theme }) => {\n return css`\n overflow-x: auto;\n\n > li {\n background-color: ${theme.base.palette['primary-background']};\n cursor: initial;\n }\n `;\n});\n\nStyledFeedAttachments.defaultProps = defaultThemeProp;\n\nexport const StyledImagePreview = styled(BareButton)(({ theme }) => {\n return css`\n line-height: 0;\n\n /* stylelint-disable declaration-block-no-duplicate-properties /\n width: -moz-fit-content;\n width: fit-content;\n\n / stylelint-enable declaration-block-no-duplicate-properties /\n border-radius: calc(0.5 ${theme.base['border-radius']});\n\n & + & {\n margin: 0;\n }\n\n &:focus {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n\n img {\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n object-fit: contain;\n max-height: 32rem;\n max-width: 100%;\n }\n `;\n});\n\nStyledImagePreview.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsRegion = styled.div(({ theme }) => {\n return css`\n margin: ${theme.base.spacing} 0;\n\n ${StyledFlex} + ${StyledFeedAttachments} {\n margin-block-start: ${theme.base.spacing};\n }\n `;\n});\n\nStyledAttachmentsRegion.defaultProps = defaultThemeProp;\n\nconst FeedAttachments: FC<FeedAttachmentsProps> = forwardRef(\n (props: PropsWithoutRef<FeedAttachmentsProps>, ref: FeedAttachmentsProps['ref']) => {\n const { attachments = [], readOnly } = props;\n const t = useI18n();\n const { announce } = useContext(FeedContext);\n const prevAttachments = usePrevious(attachments) ?? [];\n\n useEffect(() => {\n if (attachments.length !== prevAttachments?.length) {\n const difference = attachments.length - prevAttachments.length;\n const normalizedDifference = difference * (difference > 0 ? 1 : -1);\n announce(\n t(`feed_attachments_${difference > 0 ? 'added' : 'removed'}`, [normalizedDifference], {\n count: normalizedDifference\n })\n );\n }\n }, [attachments]);\n\n if (attachments.length === 0) return null;\n\n const previewableFiles: AttachedFiles[] = [];\n const nonPreviewableFiles: AttachedFiles[] = [];\n\n attachments.forEach(file => {\n const type = getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '');\n\n if (type === 'image' && file.thumbnail) previewableFiles.push(file);\n else nonPreviewableFiles.push(file);\n });\n\n return (\n <StyledAttachmentsRegion>\n {readOnly && !!previewableFiles.length && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n {previewableFiles.map(({ lastModified, name, onPreview, thumbnail }) => {\n return (\n <StyledImagePreview key={lastModified} onClick={() => onPreview?.(name)}>\n <Image alt={name} src={thumbnail} />\n </StyledImagePreview>\n );\n })}\n </Flex>\n )}\n <Grid\n ref={ref}\n as={StyledFeedAttachments}\n container={{\n cols: 'repeat(auto-fill, minmax(15rem, 1fr))',\n gap: 1\n }}\n >\n {!readOnly &&\n previewableFiles.map(({ lastModified, name, size, ...restProps }) => {\n return <FileUploadItem key={lastModified} name={name} size={size} {...restProps} />;\n })}\n {nonPreviewableFiles.map(({ lastModified, name, size, ...restProps }) => {\n return <FileUploadItem key={lastModified} name={name} size={size} {...restProps} />;\n })}\n </Grid>\n </StyledAttachmentsRegion>\n );\n }\n);\n\nexport default FeedAttachments;\n"]}

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

@@ -24,7 +24,7 @@ const FeedContent = forwardRef(({ children, maxContentHeight = Infinity, ...rest
             observer.disconnect();
         };
     }, [rtvRef.current, maxContentHeight]);
-    return useMemo(() => typeof children === 'string' ? (_jsxs(Flex, { ref: ref, container: { direction: 'column', gap: 1 }, children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content', ...restProps, children: _jsx(RichTextViewer, { ref: rtvRef, content: children, type: 'markdown', interactionRenderers: interactionRenderers, markdownMap: markdownMap }, void 0) }, void 0), exceedsMaxHeight && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? 'Show more' : 'Show less' }, void 0) }, void 0))] }, void 0)) : (children), [
+    return useMemo(() => typeof children === 'string' ? (_jsxs(Flex, { ref: ref, container: { direction: 'column', gap: 1 }, children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content', ...restProps, children: _jsx(RichTextViewer, { ref: rtvRef, content: children, type: 'markdown', interactionRenderers: interactionRenderers, markdownMap: markdownMap }) }), exceedsMaxHeight && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? 'Show more' : 'Show less' }) }))] })) : (children), [
         children,
         collapsed,
         exceedsMaxHeight,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedContent.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EAGT,UAAU,EACX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAY7C,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EAAE,QAAQ,EAAE,gBAAgB,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAqC,EAC1F,GAA4B,EAC5B,EAAE;IACF,MAAM,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,CAAC,OAAO;YAAE,OAAO;QAE5B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAC5C,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;gBAC7D,IAAI,MAAM,KAAK,MAAM,CAAC,OAAO;oBAAE,OAAO;gBAEtC,OAAO,WAAW,CAAC,MAAM,GAAG,gBAAgB,CAAC;YAC/C,CAAC,CAAC,CAAC;YAEH,mBAAmB,CAAC,aAAa,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAEjC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEvC,OAAO,OAAO,CACZ,GAAG,EAAE,CACH,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACxD,KAAC,cAAc,IACb,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,aAAa,KAC3D,SAAS,YAEb,KAAC,cAAc,IACb,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAC,UAAU,EACf,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,WAAW,~~WACxB~~,~~WACa~~,EAChB,gBAAgB,IAAI,CACnB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,YACpE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,~~WAC~~/B,~~WACJ~~,CACR,~~YACI~~,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,EACH;QACE,QAAQ;QACR,SAAS;QACT,gBAAgB;QAChB,oBAAoB;QACpB,WAAW;QACX,gBAAgB;QAChB,GAAG;QACH,SAAS;KACV,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n useState,\n useMemo,\n useRef,\n useEffect,\n PropsWithoutRef,\n ReactElement,\n useContext\n} from 'react';\n\nimport { Button, ExpandCollapse, Flex, ForwardProps } from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedContentProps {\n children: ReactElement \| string;\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 ref?: Ref<HTMLDivElement>;\n}\n\nconst FeedContent: FC<FeedContentProps & ForwardProps> = forwardRef(\n (\n { children, maxContentHeight = Infinity, ...restProps }: PropsWithoutRef<FeedContentProps>,\n ref: FeedContentProps['ref']\n ) => {\n const { interactionRenderers, markdownMap } = useContext(FeedContext);\n const [collapsed, setCollapsed] = useState(true);\n const [exceedsMaxHeight, setExceedsMaxHeight] = useState(true);\n const rtvRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!rtvRef.current) return;\n\n const observer = new ResizeObserver(entries => {\n const exceedsHeight = entries.some(({ target, contentRect }) => {\n if (target !== rtvRef.current) return;\n\n return contentRect.height > maxContentHeight;\n });\n\n setExceedsMaxHeight(exceedsHeight);\n });\n\n observer.observe(rtvRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, [rtvRef.current, maxContentHeight]);\n\n return useMemo(\n () =>\n typeof children === 'string' ? (\n <Flex ref={ref} container={{ direction: 'column', gap: 1 }}>\n <ExpandCollapse\n collapsed={collapsed}\n min={exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content'}\n {...restProps}\n >\n <RichTextViewer\n ref={rtvRef}\n content={children}\n type='markdown'\n interactionRenderers={interactionRenderers}\n markdownMap={markdownMap}\n />\n </ExpandCollapse>\n {exceedsMaxHeight && (\n <Flex container={{ justify: 'center' }}>\n <Button variant='link' onClick={() => setCollapsed(current => !current)}>\n {collapsed ? 'Show more' : 'Show less'}\n </Button>\n </Flex>\n )}\n </Flex>\n ) : (\n children\n ),\n [\n children,\n collapsed,\n exceedsMaxHeight,\n interactionRenderers,\n markdownMap,\n maxContentHeight,\n ref,\n restProps\n ]\n );\n }\n);\n\nexport default FeedContent;\n"]}
1	+ {"version":3,"file":"FeedContent.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n useState,\n useMemo,\n useRef,\n useEffect,\n PropsWithoutRef,\n ReactElement,\n useContext\n} from 'react';\n\nimport { Button, ExpandCollapse, Flex, ForwardProps } from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedContentProps {\n children: ReactElement \| string;\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 ref?: Ref<HTMLDivElement>;\n}\n\nconst FeedContent: FC<FeedContentProps & ForwardProps> = forwardRef(\n (\n { children, maxContentHeight = Infinity, ...restProps }: PropsWithoutRef<FeedContentProps>,\n ref: FeedContentProps['ref']\n ) => {\n const { interactionRenderers, markdownMap } = useContext(FeedContext);\n const [collapsed, setCollapsed] = useState(true);\n const [exceedsMaxHeight, setExceedsMaxHeight] = useState(true);\n const rtvRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!rtvRef.current) return;\n\n const observer = new ResizeObserver(entries => {\n const exceedsHeight = entries.some(({ target, contentRect }) => {\n if (target !== rtvRef.current) return;\n\n return contentRect.height > maxContentHeight;\n });\n\n setExceedsMaxHeight(exceedsHeight);\n });\n\n observer.observe(rtvRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, [rtvRef.current, maxContentHeight]);\n\n return useMemo(\n () =>\n typeof children === 'string' ? (\n <Flex ref={ref} container={{ direction: 'column', gap: 1 }}>\n <ExpandCollapse\n collapsed={collapsed}\n min={exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content'}\n {...restProps}\n >\n <RichTextViewer\n ref={rtvRef}\n content={children}\n type='markdown'\n interactionRenderers={interactionRenderers}\n markdownMap={markdownMap}\n />\n </ExpandCollapse>\n {exceedsMaxHeight && (\n <Flex container={{ justify: 'center' }}>\n <Button variant='link' onClick={() => setCollapsed(current => !current)}>\n {collapsed ? 'Show more' : 'Show less'}\n </Button>\n </Flex>\n )}\n </Flex>\n ) : (\n children\n ),\n [\n children,\n collapsed,\n exceedsMaxHeight,\n interactionRenderers,\n markdownMap,\n maxContentHeight,\n ref,\n restProps\n ]\n );\n }\n);\n\nexport default FeedContent;\n"]}

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

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';
 import { FeedPostProps } from './FeedPost.types';
 import { FeedReplyProps } from './FeedReply.types';
-interface BaseFeedLikeButtonProps extends OmitStrict<FeedPostProps['interactionInfo'], 'commentLabel' | 'interactionsEnabled'>, Pick<FeedPostProps, 'onLoadMoreLikes' | 'onLikeCountInteraction' | 'id'>, Pick<FeedPostProps['info'], 'liked'> {
+interface BaseFeedLikeButtonProps extends OmitStrict<FeedPostProps['interactionInfo'], 'commentLabel' | 'interactionsEnabled'>, Pick<FeedPostProps, 'onLoadMoreLikes' | 'onLikeCountInteraction' | 'id' | 'likesLoading'>, Pick<FeedPostProps['info'], 'liked'> {
     showText?: boolean;
 }
 interface PostFeedLikeButtonProps extends BaseFeedLikeButtonProps {

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

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

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

@@ -10,7 +10,7 @@ const InlineBareButton = styled(BareRoleButton) `
   display: inline-block;
 `;
 export const FeedLikeButton = forwardRef((props, ref) => {
-    const { id, showText, onLikeCountInteraction, onLoadMoreLikes, liked, likeLabel, likeCount = 0, likes = [] } = props;
+    const { id, showText, onLikeCountInteraction, likesLoading, onLoadMoreLikes, liked, likeLabel, likeCount = 0, likes = [] } = props;
     const t = useI18n();
     const { locale } = useConfiguration();
     const { create } = useContext(ModalManagerContext);
@@ -22,9 +22,10 @@ export const FeedLikeButton = forwardRef((props, ref) => {
             count: likeCount,
             heading: likeLabel,
             listItems: likes,
-            onLoadMore: onLoadMoreLikes
+            onLoadMore: onLoadMoreLikes,
+            loading: likesLoading
         });
-    }, [likeCount, likeLabel, likes, onLoadMoreLikes]);
+    }, [likeCount, likeLabel, likes, onLoadMoreLikes, likesLoading]);
     const likesAttributes = useMemo(() => {
         const likesList = likes.map(x => x.primary.toString());
         return {
@@ -45,7 +46,8 @@ export const FeedLikeButton = forwardRef((props, ref) => {
                 count: likeCount,
                 heading: t('feed_likes'),
                 listItems: likes,
-                onLoadMore: onLoadMoreLikes
+                onLoadMore: onLoadMoreLikes,
+                loading: likesLoading
             });
         }
         else {
@@ -59,8 +61,8 @@ export const FeedLikeButton = forwardRef((props, ref) => {
             const user = {
                 id: loggedInUser.username,
                 primary: loggedInUser.fullname,
-                secondary: loggedInUser.meta ? _jsx(MetaList, { items: loggedInUser.meta }, void 0) : undefined,
-                visual: (_jsx(Avatar, { size: 'l', imageSrc: loggedInUser.avatarSrc, name: loggedInUser.fullname }, void 0))
+                secondary: loggedInUser.meta ? _jsx(MetaList, { items: loggedInUser.meta }) : undefined,
+                visual: (_jsx(Avatar, { size: 'l', imageSrc: loggedInUser.avatarSrc, name: loggedInUser.fullname }))
             };
             let eventObj;
             if (props.variant === 'post') {
@@ -77,11 +79,11 @@ export const FeedLikeButton = forwardRef((props, ref) => {
                 };
                 props.onLikeClick(eventObj);
             }
-        }, emphasized: liked, ref: ref, children: [_jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }, void 0), showText && _jsx(Text, { children: likeLabel }, void 0), 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, ref: ref, children: [_jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }), showText && _jsx(Text, { children: likeLabel }), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineBareButton, { ref: setCountEl, role: likes.length ? 'button' : undefined, onClick: onLikeCountClick, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 e.preventDefault();
                                 onLikeCountClick();
                             }
-                        }, children: _jsx(Count, { children: likeCount }, void 0) }, void 0), _jsx(Tooltip, { target: countEl, showDelay: 'none', hideDelay: 'none', children: likesAttributes.label }, void 0)] }, void 0))] }, void 0));
+                        }, children: _jsx(Count, { children: likeCount }) }), _jsx(Tooltip, { target: countEl, showDelay: 'none', hideDelay: 'none', children: likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount }) })] }))] }));
 });
 //# sourceMappingURL=FeedLikeButton.js.map

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":";AAAA,OAAO,EAAM,UAAU,EAAO,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AACnG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAGL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,mBAAmB,EAEnB,OAAO,EACP,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAGpE,MAAM,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA;;CAE9C,CAAC;AAqBF,MAAM,CAAC,MAAM,cAAc,GAA2C,UAAU,CAC9E,CAAC,KAAK,EAAE,GAA2B,EAAE,EAAE;IACrC,MAAM,EACJ,EAAE,EACF,QAAQ,EACR,sBAAsB,EACtB,eAAe,EACf,KAAK,EACL,SAAS,EACT,SAAS,GAAG,CAAC,EACb,KAAK,GAAG,EAAE,EACX,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,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACnD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/C,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~~,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,EAAE,CAAC,EAAE,MAAM,EAAE;oBACtE,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,wBAAwB,CAAC,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE;gBACpD,KAAK,EAAE,SAAS;gBAChB,SAAS,EAAE,IAAI;aAChB,CAAC;SACH,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,CAAC,MAAM,IAAI,SAAS,GAAG,EAAE,EAAE;YAClC,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;~~aAC5B~~,CAAC,CAAC;SACJ;aAAM;YACL,sBAAsB,EAAE,EAAE,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,MAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,GAAG,EAAE;YACZ,MAAM,IAAI,GAAG;gBACX,EAAE,EAAE,YAAY,CAAC,QAAQ;gBACzB,OAAO,EAAE,YAAY,CAAC,QAAQ;gBAC9B,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,CAAC,IAAI,~~WAAI~~,CAAC,CAAC,CAAC,SAAS;gBACjF,MAAM,EAAE,CACN,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,CAAC,QAAQ,~~WAAI~~,CACnF;aACF,CAAC;YACF,IAAI,QAAQ,CAAC;YACb,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;gBAC5B,QAAQ,GAAG;oBACT,MAAM,EAAE,EAAE;oBACV,IAAI;iBACI,CAAC;gBACX,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;aAC7B;iBAAM;gBACL,QAAQ,GAAG;oBACT,OAAO,EAAE,EAAE;oBACX,IAAI;iBACI,CAAC;gBACX,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;aAC7B;QACH,CAAC,EACD,UAAU,EAAE,KAAK,EACjB,GAAG,EAAE,GAAG,aAER,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,~~WAAI~~,EACtD,QAAQ,IAAI,KAAC,IAAI,cAAE,SAAS,~~WAAQ~~,EACpC,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,cAAE,SAAS,~~WAAS~~,~~WACT~~,EACnB,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACxD,eAAe,CAAC,KAAK,~~WACd~~,~~YACT~~,CACJ,~~YACM~~,CACV,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n ForwardProps,\n OmitStrict,\n Button,\n Icon,\n Text,\n Avatar,\n MetaList,\n Count,\n Tooltip,\n ModalManagerContext,\n ModalMethods,\n useI18n,\n useConfiguration,\n useElement,\n formatListToLocaleString\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedPostProps } from './FeedPost.types';\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList, { FeedModalListProps } from './FeedModalList';\nimport { FeedReplyProps } from './FeedReply.types';\n\nconst InlineBareButton = styled(BareRoleButton)`\n display: inline-block;\n`;\n\ninterface BaseFeedLikeButtonProps\n extends OmitStrict<FeedPostProps['interactionInfo'], 'commentLabel' \| 'interactionsEnabled'>,\n Pick<FeedPostProps, 'onLoadMoreLikes' \| 'onLikeCountInteraction' \| 'id'>,\n Pick<FeedPostProps['info'], 'liked'> {\n showText?: boolean;\n}\n\ninterface PostFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n variant: 'post';\n onLikeClick: FeedPostProps['onLikeClick'];\n}\n\ninterface ReplyFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n variant: 'reply';\n onLikeClick: FeedReplyProps['onLikeClick'];\n}\n\nexport type FeedLikeButtonProps = PostFeedLikeButtonProps \| ReplyFeedLikeButtonProps;\n\nexport const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(\n (props, ref: Ref<HTMLButtonElement>) => {\n const {\n id,\n showText,\n onLikeCountInteraction,\n onLoadMoreLikes,\n liked,\n likeLabel,\n likeCount = 0,\n likes = []\n } = props;\n const t = useI18n();\n const { locale } = useConfiguration();\n const { create } = useContext(ModalManagerContext);\n const { announce, userInfo: loggedInUser } = useContext(FeedContext);\n const [countEl, setCountEl] = useElement(null);\n const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n\n useEffect(() => {\n likesModalRef.current?.update({\n count: likeCount,\n heading: likeLabel,\n listItems: likes,\n onLoadMore: onLoadMoreLikes\n });\n }, [likeCount, likeLabel, likes, onLoadMoreLikes]);\n\n const likesAttributes = useMemo(() => {\n const likesList = likes.map(x => x.primary.toString());\n return {\n ariaLabel: likeCount\n ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {\n count: likeCount\n })}`\n : t('feed_post_likes', [likeCount], { count: likeCount }),\n label: formatListToLocaleString(likesList, t, locale, {\n count: likeCount,\n separator: '\\n'\n })\n };\n }, [likes, likeCount]);\n\n const onLikeCountClick = () => {\n if (likes.length && likeCount > 10) {\n likesModalRef.current = create(FeedModalList, {\n count: likeCount,\n heading: t('feed_likes'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes\n });\n } else {\n onLikeCountInteraction?.();\n }\n };\n\n useEffect(() => {\n announce(t(`feed_post_${liked ? 'liked' : 'deliked'}`));\n }, [liked]);\n\n return (\n <Button\n variant='text'\n as={FeedButton}\n onClick={() => {\n const user = {\n id: loggedInUser.username,\n primary: loggedInUser.fullname,\n secondary: loggedInUser.meta ? <MetaList items={loggedInUser.meta} /> : undefined,\n visual: (\n <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n )\n };\n let eventObj;\n if (props.variant === 'post') {\n eventObj = {\n postId: id,\n user\n } as const;\n props.onLikeClick(eventObj);\n } else {\n eventObj = {\n replyId: id,\n user\n } as const;\n props.onLikeClick(eventObj);\n }\n }}\n emphasized={liked}\n ref={ref}\n >\n <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n {showText && <Text>{likeLabel}</Text>}\n {likeCount > 0 && (\n <>\n <InlineBareButton\n ref={setCountEl}\n role={likes.length ? 'button' : undefined}\n onClick={onLikeCountClick}\n onFocus={onLikeCountInteraction}\n onMouseOver={onLikeCountInteraction}\n aria-label={likesAttributes.ariaLabel}\n tabIndex={0}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onLikeCountClick();\n }\n }}\n >\n <Count>{likeCount}</Count>\n </InlineBareButton>\n <Tooltip target={countEl} showDelay='none' hideDelay='none'>\n {likesAttributes.label}\n </Tooltip>\n </>\n )}\n </Button>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n ForwardProps,\n OmitStrict,\n Button,\n Icon,\n Text,\n Avatar,\n MetaList,\n Count,\n Tooltip,\n ModalManagerContext,\n ModalMethods,\n useI18n,\n useConfiguration,\n useElement,\n formatListToLocaleString\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedPostProps } from './FeedPost.types';\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList, { FeedModalListProps } from './FeedModalList';\nimport { FeedReplyProps } from './FeedReply.types';\n\nconst InlineBareButton = styled(BareRoleButton)`\n display: inline-block;\n`;\n\ninterface BaseFeedLikeButtonProps\n extends OmitStrict<FeedPostProps['interactionInfo'], 'commentLabel' \| 'interactionsEnabled'>,\n Pick<FeedPostProps, 'onLoadMoreLikes' \| 'onLikeCountInteraction' \| 'id' \| 'likesLoading'>,\n Pick<FeedPostProps['info'], 'liked'> {\n showText?: boolean;\n}\n\ninterface PostFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n variant: 'post';\n onLikeClick: FeedPostProps['onLikeClick'];\n}\n\ninterface ReplyFeedLikeButtonProps extends BaseFeedLikeButtonProps {\n variant: 'reply';\n onLikeClick: FeedReplyProps['onLikeClick'];\n}\n\nexport type FeedLikeButtonProps = PostFeedLikeButtonProps \| ReplyFeedLikeButtonProps;\n\nexport const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(\n (props, ref: Ref<HTMLButtonElement>) => {\n const {\n id,\n showText,\n onLikeCountInteraction,\n likesLoading,\n onLoadMoreLikes,\n liked,\n likeLabel,\n likeCount = 0,\n likes = []\n } = props;\n const t = useI18n();\n const { locale } = useConfiguration();\n const { create } = useContext(ModalManagerContext);\n const { announce, userInfo: loggedInUser } = useContext(FeedContext);\n const [countEl, setCountEl] = useElement(null);\n const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n\n useEffect(() => {\n likesModalRef.current?.update({\n count: likeCount,\n heading: likeLabel,\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n }, [likeCount, likeLabel, likes, onLoadMoreLikes, likesLoading]);\n\n const likesAttributes = useMemo(() => {\n const likesList = likes.map(x => x.primary.toString());\n return {\n ariaLabel: likeCount\n ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {\n count: likeCount\n })}`\n : t('feed_post_likes', [likeCount], { count: likeCount }),\n label: formatListToLocaleString(likesList, t, locale, {\n count: likeCount,\n separator: '\\n'\n })\n };\n }, [likes, likeCount]);\n\n const onLikeCountClick = () => {\n if (likes.length && likeCount > 10) {\n likesModalRef.current = create(FeedModalList, {\n count: likeCount,\n heading: t('feed_likes'),\n listItems: likes,\n onLoadMore: onLoadMoreLikes,\n loading: likesLoading\n });\n } else {\n onLikeCountInteraction?.();\n }\n };\n\n useEffect(() => {\n announce(t(`feed_post_${liked ? 'liked' : 'deliked'}`));\n }, [liked]);\n\n return (\n <Button\n variant='text'\n as={FeedButton}\n onClick={() => {\n const user = {\n id: loggedInUser.username,\n primary: loggedInUser.fullname,\n secondary: loggedInUser.meta ? <MetaList items={loggedInUser.meta} /> : undefined,\n visual: (\n <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n )\n };\n let eventObj;\n if (props.variant === 'post') {\n eventObj = {\n postId: id,\n user\n } as const;\n props.onLikeClick(eventObj);\n } else {\n eventObj = {\n replyId: id,\n user\n } as const;\n props.onLikeClick(eventObj);\n }\n }}\n emphasized={liked}\n ref={ref}\n >\n <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n {showText && <Text>{likeLabel}</Text>}\n {likeCount > 0 && (\n <>\n <InlineBareButton\n ref={setCountEl}\n role={likes.length ? 'button' : undefined}\n onClick={onLikeCountClick}\n onFocus={onLikeCountInteraction}\n onMouseOver={onLikeCountInteraction}\n aria-label={likesAttributes.ariaLabel}\n tabIndex={0}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onLikeCountClick();\n }\n }}\n >\n <Count>{likeCount}</Count>\n </InlineBareButton>\n <Tooltip target={countEl} showDelay='none' hideDelay='none'>\n {likesAttributes.label \|\| t('feed_post_likes', [likeCount], { count: likeCount })}\n </Tooltip>\n </>\n )}\n </Button>\n );\n }\n);\n"]}

package/lib/components/Feed/FeedModalList.d.ts CHANGED Viewed

@@ -9,6 +9,8 @@ export interface FeedModalListProps {
     listItems: SummaryListItem[];
     /** A callback that is triggered when the bottom of the Modal list is scrolled into view so that additional data may be displayed. */
     onLoadMore?: () => void;
+    /** Indicates if the data is being currently loading */
+    loading?: boolean;
 }
 declare const FeedModalList: FC<FeedModalListProps>;
 export default FeedModalList;

package/lib/components/Feed/FeedModalList.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeedModalList.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGxD,OAAO,EACL,eAAe,~~EAShB~~,MAAM,yBAAyB,CAAC;~~AAEjC~~,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,qIAAqI;IACrI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;~~CACzB~~;~~AAwBD~~,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"FeedModalList.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGxD,OAAO,EACL,eAAe,EAUhB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,qIAAqI;IACrI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAYD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}