@pega/cosmos-react-social 2.0.0-rc.1 → 2.0.0-rc.2

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

@@ -1,5 +1,5 @@
 import { ReactNode, FC } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
 import { FeedContextValue } from './Feed.context';
 export interface Filter {
     /** Sets DOM id for the control and associates label element via 'for' attribute. */
@@ -17,8 +17,7 @@ export interface Filter {
      */
     on?: boolean;
 }
-export interface FeedProps {
-    children: ReactNode;
+export interface FeedProps extends NoChildrenProp {
     /** Title for the feed. */
     title?: string;
     /** Information related to the user of the Feed. */
@@ -43,6 +42,10 @@ export interface FeedProps {
     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;
+    /** A region to hold the new post component */
+    newPostRegion?: ReactNode;
+    /** A list of FeedPost components */
+    posts?: ReactNode[];
 }
 declare const Feed: FC<ForwardProps & FeedProps>;
 export default Feed;

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAGhF,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAO/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;AACD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,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;CACzB;AA6DD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CAwJtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"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"}

package/lib/components/Feed/Feed.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
+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 } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Flex, Grid, Icon, registerIcon, Popover, Switch, Text, Progress, StyledProgressRing, usePrevious } 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';
@@ -9,6 +9,7 @@ import { FeedContext } from './Feed.context';
 import { StyledFeedNewPost } from './FeedNewPost';
 import { StyledFeedPost } from './FeedPost';
 import FeedButton from './FeedButton';
+import FeedAnnouncer from './FeedAnnouncer';
 registerIcon(filterIcon, filterOnIcon);
 const StyledFeed = styled.div(props => {
     return css `
@@ -60,7 +61,8 @@ const StyledLoadMore = styled.div(({ theme, visible }) => {
 });
 StyledLoadMore.defaultProps = defaultThemeProp;
 const Feed = (props) => {
-    const { variant, children, userInfo, className, title, searchTypes, onDecoratorSearch, searchResults = [], onMentionClick, onTagClick, mentionContent, interactionRenderers = [], markdownMap, filters, onFilterChange, onLoadMore, ...restProps } = props;
+    const { 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();
@@ -68,6 +70,8 @@ const Feed = (props) => {
     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);
     useArrows(filterRef);
     useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
@@ -100,7 +104,20 @@ const Feed = (props) => {
             };
         }
     }, [loadMoreEl, feedOverflowsRef.current]);
-    const t = useI18n();
+    const announce = useCallback((announcement) => {
+        setAnnouncementText('');
+        setTimeout(() => {
+            setAnnouncementText(announcement);
+        }, 0);
+    }, []);
+    useEffect(() => {
+        if (prevPosts) {
+            const difference = prevPosts?.length - posts.length;
+            if (difference > 0) {
+                announce(t('feed_post_removed'));
+            }
+        }
+    }, [posts]);
     return (_jsx(FeedContext.Provider, { value: {
             searchTypes,
             onSearch: e => {
@@ -114,12 +131,13 @@ const Feed = (props) => {
             onTagClick,
             interactionRenderers,
             markdownMap,
-            userInfo
-        }, children: _jsxs(StyledFeed, { ...restProps, children: [(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)
+            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)
                                     ? '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), _jsx("div", { children: children }, 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));
+                                }) }, 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));
 };
 export default Feed;
 //# sourceMappingURL=Feed.js.map

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

@@ -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 } 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} 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';\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}\nexport interface FeedProps {\n  children: ReactNode;\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}\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    ...restProps\n  } = props;\n\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\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 t = useI18n();\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      }}\n    >\n      <StyledFeed {...restProps}>\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>{children}</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"]}
+{"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"]}

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface FeedAnnouncerProps {
+    children: string;
+}
+declare const FeedAnnouncer: FC<FeedAnnouncerProps>;
+export default FeedAnnouncer;
+//# sourceMappingURL=FeedAnnouncer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedAnnouncer.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedAnnouncer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAMD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAEzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Feed/FeedAnnouncer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { hideVisually } from 'polished';
+import styled from 'styled-components';
+const StyledFeedAnnouncer = styled.span `
+  ${hideVisually}
+`;
+const FeedAnnouncer = ({ children }) => {
+    return _jsx(StyledFeedAnnouncer, { "aria-live": 'polite', children: children }, void 0);
+};
+export default FeedAnnouncer;
+//# sourceMappingURL=FeedAnnouncer.js.map

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

@@ -0,0 +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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedAttachments.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EAEL,mBAAmB,EAQpB,MAAM,yBAAyB,CAAC;AAGjC,oBAAY,aAAa,GAAG,mBAAmB,GAAG,IAAI,CAAC;AAEvD,UAAU,oBAAoB;IAC5B,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,wGAShC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0QA0B7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAgD7C,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FeedAttachments.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAyB,MAAM,OAAO,CAAC;AAGpF,OAAO,EAEL,mBAAmB,EAUpB,MAAM,yBAAyB,CAAC;AAKjC,oBAAY,aAAa,GAAG,mBAAmB,GAAG,IAAI,CAAC;AAEvD,UAAU,oBAAoB;IAC5B,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,wGAShC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0QA0B7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA+D7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Feed/FeedAttachments.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { FileUploadItem, Grid, Image, defaultThemeProp, getKindFromMimeType, getMimeTypeFromFile, Flex, StyledFlex } from '@pega/cosmos-react-core';
+import { FileUploadItem, Grid, Image, defaultThemeProp, getKindFromMimeType, getMimeTypeFromFile, Flex, StyledFlex, usePrevious, useI18n } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { FeedContext } from './Feed.context';
 export const StyledFeedAttachments = styled.ul(({ theme }) => {
     return css `
     overflow-x: auto;
@@ -54,6 +55,18 @@ export const StyledAttachmentsRegion = styled.div(({ theme }) => {
 StyledAttachmentsRegion.defaultProps = defaultThemeProp;
 const FeedAttachments = forwardRef((props, ref) => {
     const { attachments = [], readOnly } = props;
+    const t = useI18n();
+    const { announce } = useContext(FeedContext);
+    const prevAttachments = usePrevious(attachments) ?? [];
+    useEffect(() => {
+        if (attachments.length !== prevAttachments?.length) {
+            const difference = attachments.length - prevAttachments.length;
+            const normalizedDifference = difference * (difference > 0 ? 1 : -1);
+            announce(t(`feed_attachments_${difference > 0 ? 'added' : 'removed'}`, [normalizedDifference], {
+                count: normalizedDifference
+            }));
+        }
+    }, [attachments]);
     if (attachments.length === 0)
         return null;
     const previewableFiles = [];

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

@@ -1 +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 } 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} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\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\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') 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"]}
+{"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') 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/FeedLikeButton.d.ts

@@ -0,0 +1,19 @@
+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'> {
+    showText?: boolean;
+}
+interface PostFeedLikeButtonProps extends BaseFeedLikeButtonProps {
+    variant: 'post';
+    onLikeClick: FeedPostProps['onLikeClick'];
+}
+interface ReplyFeedLikeButtonProps extends BaseFeedLikeButtonProps {
+    variant: 'reply';
+    onLikeClick: FeedReplyProps['onLikeClick'];
+}
+export declare type FeedLikeButtonProps = PostFeedLikeButtonProps | ReplyFeedLikeButtonProps;
+export declare const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps>;
+export {};
+//# sourceMappingURL=FeedLikeButton.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/Feed/FeedLikeButton.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useMemo, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import { Button, Icon, Text, Avatar, MetaList, Count, Tooltip, ModalManagerContext, useI18n, useConfiguration, useElement, formatListToLocaleString } from '@pega/cosmos-react-core';
+import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
+import { FeedContext } from './Feed.context';
+import FeedButton from './FeedButton';
+import FeedModalList from './FeedModalList';
+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 t = useI18n();
+    const { locale } = useConfiguration();
+    const { create } = useContext(ModalManagerContext);
+    const { announce, userInfo: loggedInUser } = useContext(FeedContext);
+    const [countEl, setCountEl] = useElement(null);
+    const likesModalRef = useRef();
+    useEffect(() => {
+        likesModalRef.current?.update({
+            count: likeCount,
+            heading: likeLabel,
+            listItems: likes,
+            onLoadMore: onLoadMoreLikes
+        });
+    }, [likeCount, likeLabel, likes, onLoadMoreLikes]);
+    const likesAttributes = useMemo(() => {
+        const likesList = likes.map(x => x.primary.toString());
+        return {
+            ariaLabel: likeCount
+                ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList, t, locale, {
+                    count: likeCount
+                })}`
+                : t('feed_post_likes', [likeCount], { count: likeCount }),
+            label: formatListToLocaleString(likesList, t, locale, {
+                count: likeCount,
+                separator: '\n'
+            })
+        };
+    }, [likes, likeCount]);
+    const onLikeCountClick = () => {
+        if (likes.length && likeCount > 10) {
+            likesModalRef.current = create(FeedModalList, {
+                count: likeCount,
+                heading: t('feed_likes'),
+                listItems: likes,
+                onLoadMore: onLoadMoreLikes
+            });
+        }
+        else {
+            onLikeCountInteraction?.();
+        }
+    };
+    useEffect(() => {
+        announce(t(`feed_post_${liked ? 'liked' : 'deliked'}`));
+    }, [liked]);
+    return (_jsxs(Button, { variant: 'text', as: FeedButton, onClick: () => {
+            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))
+            };
+            let eventObj;
+            if (props.variant === 'post') {
+                eventObj = {
+                    postId: id,
+                    user
+                };
+                props.onLikeClick(eventObj);
+            }
+            else {
+                eventObj = {
+                    replyId: id,
+                    user
+                };
+                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) => {
+                            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));
+});
+//# sourceMappingURL=FeedLikeButton.js.map

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

@@ -0,0 +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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAkC,MAAM,OAAO,CAAC;AAGrE,OAAO,EAcL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAA4B,EAE1B,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,sFAAsF;IACtF,eAAe,EAAE;QACf,mBAAmB,EAAE,MAAM,CAAC;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,sGAAsG;IACtG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAChD,yEAAyE;IACzE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,UAAU,EAAE,iBAAiB,EAAE,CAAC;QAChC,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,IAAI,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,sBAAsB,yGAajC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAU5B,CAAC;AAQH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CA2JpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAkC,MAAM,OAAO,CAAC;AAGrE,OAAO,EAcL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAA4B,EAE1B,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAwB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,sFAAsF;IACtF,eAAe,EAAE;QACf,mBAAmB,EAAE,MAAM,CAAC;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,sGAAsG;IACtG,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAChD,yEAAyE;IACzE,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,aAAa,EAAE,CAAC;QAC7B,UAAU,EAAE,iBAAiB,EAAE,CAAC;QAChC,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,IAAI,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,sBAAsB,yGAajC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAU5B,CAAC;AAQH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CAiKpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Feed/FeedNewPost.js

@@ -79,6 +79,7 @@ const FeedNewPost = (props) => {
     const handleClear = () => {
         setShowSearchResults?.(false);
         rteRef.current?.clear();
+        rteRef.current?.focus();
     };
     useAfterInitialEffect(() => {
         if (postType === 'post') {
@@ -91,10 +92,12 @@ const FeedNewPost = (props) => {
     return (_jsx(StyledCard, { ref: setNewPostEl, as: StyledFeedNewPost, ...restProps, children: _jsxs(CardContent, { children: [onRecipientSearch && (_jsx(FeedNewPostTypeMenu, { recipients: recipients || [], onSetPostType: setPostType, onSelectedRecipientsUpdate: setSelectedRecipients, onRecipientSearch: onRecipientSearch, reset: resetPostTypeMenu, onReset: () => setResetPostTypeMenu(false) }, void 0)), _jsxs(Flex, { container: { alignItems: 'start', gap: 1 }, children: [_jsx(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc }, void 0), _jsx(StyledTextAreaOverflow, { ref: textAreaRef, children: _jsx(FeedRichText, { label: t('feed_new_post'), labelHidden: true, onChange: () => {
                                     setEmptyText(rteRef.current?.getPlainText().trim() === '');
                                     resizeTextArea();
-                                }, placeholder: textAreaPlaceholder, autoFocus: autoFocus, onSubmit: handlePost, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), ref: rteRef }, void 0) }, void 0), !emptyText && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: handleClear, icon: true, label: t('feed_cancel_conversation'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)), onFilesAdded && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => {
+                                }, placeholder: textAreaPlaceholder, autoFocus: autoFocus, onSubmit: handlePost, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), ref: rteRef }, void 0) }, void 0), !emptyText && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: handleClear, icon: true, label: t('feed_cancel_conversation'), tabIndex: -1, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)), onFilesAdded && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => {
                                 setShowSearchResults?.(false);
                                 attachmentEl?.click();
-                            }, icon: true, label: cap(t('attachments_count', [], { count: 1 })), children: _jsx(Icon, { name: 'paper-clip' }, void 0) }, void 0))] }, void 0), _jsx(HiddenFileInput, { ref: setAttachmentEl, type: 'file', multiple: true, onChange: () => {
+                            }, icon: true, label: attachments.length
+                                ? cap(t('attachments_count', [], { count: 1 }))
+                                : t('file_upload_text_multiple'), children: _jsx(Icon, { name: 'paper-clip' }, void 0) }, void 0))] }, void 0), _jsx(HiddenFileInput, { ref: setAttachmentEl, type: 'file', multiple: true, onChange: () => {
                         if (attachmentEl?.files) {
                             onFilesAdded?.(Array.from(attachmentEl?.files));
                         }

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FC, MouseEvent, useRef, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  CardContent,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledIcon,\n  StyledCard,\n  StyledPopover,\n  defaultThemeProp,\n  useAutoResize,\n  useElement,\n  useOuterEvent,\n  ForwardProps,\n  useI18n,\n  ExpandCollapse,\n  useAfterInitialEffect,\n  cap\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedNewPostTypeMenu, {\n  PostType,\n  PostTypeMenuProps,\n  RecipientMenuItem\n} from './FeedNewPostTypeMenu';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedContext } from './Feed.context';\n\nregisterIcon(timesIcon, paperClipIcon);\n\nexport interface FeedNewPostProps {\n  /** A unique ID for the NewPost */\n  id: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Information that is used to label buttons and inputs for accessibility purposes */\n  interactionInfo: {\n    textAreaPlaceholder: string;\n    postLabel: string;\n  };\n  /** A callback containing a list of added files that will run whenever files are added to the post. */\n  onFilesAdded?: (files: AttachedFiles[]) => void;\n  /** A callback that will run when the new post button has been clicked */\n  onPost: (event: {\n    newPostId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    recipients: RecipientMenuItem[];\n    username: string;\n    clear: () => void;\n  }) => void;\n  autoFocus?: boolean;\n  /** Array of private recipient options */\n  recipients?: PostTypeMenuProps['recipients'];\n  /** Handler for new search on private recipient options */\n  onRecipientSearch?: (newSearch: string) => void;\n}\n\nexport const StyledTextAreaOverflow = styled.div(() => {\n  return css`\n    overflow-y: hidden;\n    margin-top: 0.625rem;\n    min-height: 1rem;\n    width: 100%;\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledTextAreaOverflow.defaultProps = defaultThemeProp;\n\nexport const StyledFeedNewPost = styled.div(({ theme }) => {\n  return css`\n    ${StyledIcon}:not(${StyledPopover} ${StyledIcon}) {\n      font-size: 1.25rem;\n    }\n\n    ${FeedButton} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeedNewPost.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedNewPost: FC<ForwardProps & FeedNewPostProps> = (props: FeedNewPostProps) => {\n  const {\n    id,\n    attachments = [],\n    interactionInfo,\n    onPost,\n    onFilesAdded,\n    autoFocus,\n    recipients,\n    onRecipientSearch,\n    ...restProps\n  } = props;\n  const rteRef = useRef<RichTextEditorState>();\n  const { textAreaPlaceholder, postLabel } = interactionInfo;\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;\n  const [emptyText, setEmptyText] = useState(true);\n  const [hasFocus, setHasFocus] = useState(autoFocus);\n  const [postType, setPostType] = useState<PostType>('post');\n  const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);\n  const [selectedRecipients, setSelectedRecipients] = useState<RecipientMenuItem[]>([]);\n  const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n  const [newPostEl, setNewPostEl] = useElement<HTMLDivElement>();\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLDivElement>();\n\n  useOuterEvent('mousedown', [newPostEl], () => {\n    if (emptyText) rteRef.current?.clear();\n  });\n\n  const t = useI18n();\n\n  const handlePost = () => {\n    setShowSearchResults?.(false);\n    if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {\n      onPost({\n        newPostId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        recipients: selectedRecipients,\n        username,\n        clear: () => {\n          rteRef.current?.clear();\n          setResetPostTypeMenu(true);\n        }\n      });\n    }\n  };\n\n  const handleClear = () => {\n    setShowSearchResults?.(false);\n    rteRef.current?.clear();\n  };\n\n  useAfterInitialEffect(() => {\n    if (postType === 'post') {\n      rteRef.current?.focus();\n    }\n    if (postType !== 'private') {\n      setSelectedRecipients([] as RecipientMenuItem[]);\n    }\n  }, [postType]);\n\n  return (\n    <StyledCard ref={setNewPostEl} as={StyledFeedNewPost} {...restProps}>\n      <CardContent>\n        {onRecipientSearch && (\n          <FeedNewPostTypeMenu\n            recipients={recipients || ([] as PostTypeMenuProps['recipients'])}\n            onSetPostType={setPostType}\n            onSelectedRecipientsUpdate={setSelectedRecipients}\n            onRecipientSearch={onRecipientSearch}\n            reset={resetPostTypeMenu}\n            onReset={() => setResetPostTypeMenu(false)}\n          />\n        )}\n\n        <Flex container={{ alignItems: 'start', gap: 1 }}>\n          <Avatar name={fullname} size='l' imageSrc={avatarSrc} />\n\n          <StyledTextAreaOverflow ref={textAreaRef}>\n            <FeedRichText\n              label={t('feed_new_post')}\n              labelHidden\n              onChange={() => {\n                setEmptyText(rteRef.current?.getPlainText().trim() === '');\n                resizeTextArea();\n              }}\n              placeholder={textAreaPlaceholder}\n              autoFocus={autoFocus}\n              onSubmit={handlePost}\n              onFocus={() => setHasFocus(true)}\n              onBlur={() => setHasFocus(false)}\n              ref={rteRef}\n            />\n          </StyledTextAreaOverflow>\n\n          {!emptyText && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={handleClear}\n              icon\n              label={t('feed_cancel_conversation')}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n\n          {onFilesAdded && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={() => {\n                setShowSearchResults?.(false);\n                attachmentEl?.click();\n              }}\n              icon\n              label={cap(t('attachments_count', [], { count: 1 }))}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          )}\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 attachments={attachments} />\n\n        <ExpandCollapse collapsed={!hasFocus && emptyText && !attachments.length}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='primary'\n              disabled={(emptyText && attachments.length === 0) || attachments.some(x => x.error)}\n              onClick={handlePost}\n            >\n              {postLabel}\n            </Button>\n          </Flex>\n        </ExpandCollapse>\n      </CardContent>\n    </StyledCard>\n  );\n};\n\nexport default FeedNewPost;\n"]}
+{"version":3,"file":"FeedNewPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FC, MouseEvent, useRef, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  CardContent,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledIcon,\n  StyledCard,\n  StyledPopover,\n  defaultThemeProp,\n  useAutoResize,\n  useElement,\n  useOuterEvent,\n  ForwardProps,\n  useI18n,\n  ExpandCollapse,\n  useAfterInitialEffect,\n  cap\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState, StyledRichTextEditor } from '@pega/cosmos-react-rte';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedNewPostTypeMenu, {\n  PostType,\n  PostTypeMenuProps,\n  RecipientMenuItem\n} from './FeedNewPostTypeMenu';\nimport FeedAttachments, { AttachedFiles } from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedContext } from './Feed.context';\n\nregisterIcon(timesIcon, paperClipIcon);\n\nexport interface FeedNewPostProps {\n  /** A unique ID for the NewPost */\n  id: string;\n  /** A set of attachment files. */\n  attachments?: AttachedFiles[];\n  /** Information that is used to label buttons and inputs for accessibility purposes */\n  interactionInfo: {\n    textAreaPlaceholder: string;\n    postLabel: string;\n  };\n  /** A callback containing a list of added files that will run whenever files are added to the post. */\n  onFilesAdded?: (files: AttachedFiles[]) => void;\n  /** A callback that will run when the new post button has been clicked */\n  onPost: (event: {\n    newPostId: string;\n    value: string;\n    attachments: AttachedFiles[];\n    recipients: RecipientMenuItem[];\n    username: string;\n    clear: () => void;\n  }) => void;\n  autoFocus?: boolean;\n  /** Array of private recipient options */\n  recipients?: PostTypeMenuProps['recipients'];\n  /** Handler for new search on private recipient options */\n  onRecipientSearch?: (newSearch: string) => void;\n}\n\nexport const StyledTextAreaOverflow = styled.div(() => {\n  return css`\n    overflow-y: hidden;\n    margin-top: 0.625rem;\n    min-height: 1rem;\n    width: 100%;\n\n    ${StyledRichTextEditor} {\n      &:focus-within {\n        box-shadow: none;\n      }\n    }\n  `;\n});\n\nStyledTextAreaOverflow.defaultProps = defaultThemeProp;\n\nexport const StyledFeedNewPost = styled.div(({ theme }) => {\n  return css`\n    ${StyledIcon}:not(${StyledPopover} ${StyledIcon}) {\n      font-size: 1.25rem;\n    }\n\n    ${FeedButton} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeedNewPost.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedNewPost: FC<ForwardProps & FeedNewPostProps> = (props: FeedNewPostProps) => {\n  const {\n    id,\n    attachments = [],\n    interactionInfo,\n    onPost,\n    onFilesAdded,\n    autoFocus,\n    recipients,\n    onRecipientSearch,\n    ...restProps\n  } = props;\n  const rteRef = useRef<RichTextEditorState>();\n  const { textAreaPlaceholder, postLabel } = interactionInfo;\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;\n  const [emptyText, setEmptyText] = useState(true);\n  const [hasFocus, setHasFocus] = useState(autoFocus);\n  const [postType, setPostType] = useState<PostType>('post');\n  const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);\n  const [selectedRecipients, setSelectedRecipients] = useState<RecipientMenuItem[]>([]);\n  const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n  const [newPostEl, setNewPostEl] = useElement<HTMLDivElement>();\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLDivElement>();\n\n  useOuterEvent('mousedown', [newPostEl], () => {\n    if (emptyText) rteRef.current?.clear();\n  });\n\n  const t = useI18n();\n\n  const handlePost = () => {\n    setShowSearchResults?.(false);\n    if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {\n      onPost({\n        newPostId: id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        recipients: selectedRecipients,\n        username,\n        clear: () => {\n          rteRef.current?.clear();\n          setResetPostTypeMenu(true);\n        }\n      });\n    }\n  };\n\n  const handleClear = () => {\n    setShowSearchResults?.(false);\n    rteRef.current?.clear();\n    rteRef.current?.focus();\n  };\n\n  useAfterInitialEffect(() => {\n    if (postType === 'post') {\n      rteRef.current?.focus();\n    }\n    if (postType !== 'private') {\n      setSelectedRecipients([] as RecipientMenuItem[]);\n    }\n  }, [postType]);\n\n  return (\n    <StyledCard ref={setNewPostEl} as={StyledFeedNewPost} {...restProps}>\n      <CardContent>\n        {onRecipientSearch && (\n          <FeedNewPostTypeMenu\n            recipients={recipients || ([] as PostTypeMenuProps['recipients'])}\n            onSetPostType={setPostType}\n            onSelectedRecipientsUpdate={setSelectedRecipients}\n            onRecipientSearch={onRecipientSearch}\n            reset={resetPostTypeMenu}\n            onReset={() => setResetPostTypeMenu(false)}\n          />\n        )}\n\n        <Flex container={{ alignItems: 'start', gap: 1 }}>\n          <Avatar name={fullname} size='l' imageSrc={avatarSrc} />\n\n          <StyledTextAreaOverflow ref={textAreaRef}>\n            <FeedRichText\n              label={t('feed_new_post')}\n              labelHidden\n              onChange={() => {\n                setEmptyText(rteRef.current?.getPlainText().trim() === '');\n                resizeTextArea();\n              }}\n              placeholder={textAreaPlaceholder}\n              autoFocus={autoFocus}\n              onSubmit={handlePost}\n              onFocus={() => setHasFocus(true)}\n              onBlur={() => setHasFocus(false)}\n              ref={rteRef}\n            />\n          </StyledTextAreaOverflow>\n\n          {!emptyText && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={handleClear}\n              icon\n              label={t('feed_cancel_conversation')}\n              tabIndex={-1}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n\n          {onFilesAdded && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={() => {\n                setShowSearchResults?.(false);\n                attachmentEl?.click();\n              }}\n              icon\n              label={\n                attachments.length\n                  ? cap(t('attachments_count', [], { count: 1 }))\n                  : t('file_upload_text_multiple')\n              }\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          )}\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 attachments={attachments} />\n\n        <ExpandCollapse collapsed={!hasFocus && emptyText && !attachments.length}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='primary'\n              disabled={(emptyText && attachments.length === 0) || attachments.some(x => x.error)}\n              onClick={handlePost}\n            >\n              {postLabel}\n            </Button>\n          </Flex>\n        </ExpandCollapse>\n      </CardContent>\n    </StyledCard>\n  );\n};\n\nexport default FeedNewPost;\n"]}

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

@@ -1,3 +1,4 @@
+import { ForwardProps } from '@pega/cosmos-react-core';
 export declare type PostType = 'post' | 'private';
 export interface RecipientOption {
     /** Pretty printed recipient name */
@@ -28,6 +29,6 @@ export interface PostTypeMenuProps {
     reset: boolean;
     onReset: () => void;
 }
-declare const FeedNewPostTypeMenu: ({ recipients, onSetPostType, onSelectedRecipientsUpdate, onRecipientSearch, reset, onReset }: PostTypeMenuProps) => JSX.Element;
+declare const FeedNewPostTypeMenu: ({ recipients, onSetPostType, onSelectedRecipientsUpdate, onRecipientSearch, reset, onReset, ...restProps }: PostTypeMenuProps & ForwardProps) => JSX.Element;
 export default FeedNewPostTypeMenu;
 //# sourceMappingURL=FeedNewPostTypeMenu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedNewPostTypeMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":"AAsBA,oBAAY,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,+BAA+B;IAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,iDAAiD;IACjD,0BAA0B,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACtE,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwLD,QAAA,MAAM,mBAAmB,iGAOtB,iBAAiB,gBAwanB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"FeedNewPostTypeMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAeL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAIjC,oBAAY,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,+BAA+B;IAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,iDAAiD;IACjD,0BAA0B,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACtE,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwLD,QAAA,MAAM,mBAAmB,+GAQtB,iBAAiB,GAAG,YAAY,gBAyalC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/Feed/FeedNewPostTypeMenu.js

@@ -126,7 +126,7 @@ const initialState = {
     recipientMenuItems: [],
     multiSelectItems: []
 };
-const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUpdate, onRecipientSearch, reset, onReset }) => {
+const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUpdate, onRecipientSearch, reset, onReset, ...restProps }) => {
     const menuPopoverId = useMemo(() => createUID(), []);
     const multiSelectInputRef = useRef(null);
     const [toggleEl, setToggleEl] = useElement();
@@ -357,7 +357,7 @@ const FeedNewPostTypeMenu = ({ recipients, onSetPostType, onSelectedRecipientsUp
         multiSelectInputRef.current?.addEventListener('keydown', handleKeydownToggle);
         return () => multiSelectInputRef.current?.removeEventListener('keydown', handleKeydownToggle);
     }, [multiSelectInputRef.current, state.showTypeMenu]);
-    return (_jsxs("div", { children: [_jsxs(StyledTypeMenuToggle, { onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledTypeMenuToggle, { ...restProps, onClick: () => {
                     dispatch({ type: 'toggleTypeMenu' });
                 }, ref: setToggleEl, variant: 'link', "aria-haspopup": 'menu', "aria-expanded": state.showTypeMenu, children: [_jsx("span", { ref: setTypeMenuPopoverTarget, children: typeCopy[state.postType].primary }, void 0), _jsx(Icon, { name: 'arrow-micro-down' }, void 0)] }, void 0), state.postType === 'private' && state.multiSelectItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(StyledRecipientCount, { ref: setRecipientCountEl, "aria-describedby": 'recipients-popover', onMouseEnter: () => {
                             if (!state.showTypeMenu)