@pega/cosmos-react-social 4.0.0-dev.21.0 → 4.0.0-dev.22.0

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

@@ -1,6 +1,6 @@
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';
-import { MenuItemProps } from '@pega/cosmos-react-core';
+import { AvatarProps, MenuItemProps } from '@pega/cosmos-react-core';
 import { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';
 export interface FeedContextValue {
     searchTypes?: string[];
@@ -31,6 +31,7 @@ export interface FeedContextValue {
         username: string;
         fullname: string;
         avatarSrc?: string;
+        userStatus?: AvatarProps['status'];
         meta?: string[];
         timeZone?: string;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.context.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAE7F,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACzF,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE;QACnB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;QACnC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,KAAK,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,WAAW,2CAMtB,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,gDAA2C,CAAC"}
+{"version":3,"file":"Feed.context.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAE7F,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACzF,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE;QACnB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;QACnC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,KAAK,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,WAAW,2CAMtB,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,gDAA2C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.context.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuC,MAAM,OAAO,CAAC;AAkC3E,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,QAAQ,EAAE,GAAG,EAAE;QACb,OAAO,CAAC,CAAwD,CAAC;IACnE,CAAC;CACF,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext, Dispatch, RefObject, SetStateAction } from 'react';\n\nimport { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';\nimport { MenuItemProps } from '@pega/cosmos-react-core';\nimport { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nexport interface FeedContextValue {\n  searchTypes?: string[];\n  onSearch?: (e: { type: 'mention' | 'tag'; search: string; mentionType: string }) => void;\n  searchResults?: MenuItemProps[];\n  showSearchResults?: boolean;\n  setShowSearchResults?: Dispatch<SetStateAction<boolean>>;\n  onMentionClick?: (e: {\n    id: string;\n    text: string;\n    type: string;\n    target?: BaseDialogProps['target'];\n    closeGlimpse?: () => void;\n  }) => JSX.Element | undefined;\n  onMentionPreview?: (e: { id: string; text: string; type: string }) => void;\n  onTagClick?: (tag: string) => void;\n  interactionRenderers?: InteractionRenderers[];\n  markdownMap?: MDMap;\n  userInfo: {\n    username: string;\n    fullname: string;\n    avatarSrc?: string;\n    meta?: string[];\n    timeZone?: string;\n  };\n  announce: (announcement: string) => ReturnType<typeof setTimeout>;\n  feedRef?: RefObject<HTMLDivElement>;\n}\n\nexport const FeedContext = createContext<FeedContextValue>({\n  searchTypes: [],\n  userInfo: { username: '', fullname: '' },\n  announce: () => {\n    return -1 as unknown as ReturnType<FeedContextValue['announce']>;\n  }\n});\n\nexport interface FeedReplyContextValue {\n  onShowReplyInput?: () => void;\n}\n\nexport const FeedReplyContext = createContext<FeedReplyContextValue>({});\n"]}
+{"version":3,"file":"Feed.context.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuC,MAAM,OAAO,CAAC;AAmC3E,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,QAAQ,EAAE,GAAG,EAAE;QACb,OAAO,CAAC,CAAwD,CAAC;IACnE,CAAC;CACF,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext, Dispatch, RefObject, SetStateAction } from 'react';\n\nimport { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';\nimport { AvatarProps, MenuItemProps } from '@pega/cosmos-react-core';\nimport { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nexport interface FeedContextValue {\n  searchTypes?: string[];\n  onSearch?: (e: { type: 'mention' | 'tag'; search: string; mentionType: string }) => void;\n  searchResults?: MenuItemProps[];\n  showSearchResults?: boolean;\n  setShowSearchResults?: Dispatch<SetStateAction<boolean>>;\n  onMentionClick?: (e: {\n    id: string;\n    text: string;\n    type: string;\n    target?: BaseDialogProps['target'];\n    closeGlimpse?: () => void;\n  }) => JSX.Element | undefined;\n  onMentionPreview?: (e: { id: string; text: string; type: string }) => void;\n  onTagClick?: (tag: string) => void;\n  interactionRenderers?: InteractionRenderers[];\n  markdownMap?: MDMap;\n  userInfo: {\n    username: string;\n    fullname: string;\n    avatarSrc?: string;\n    userStatus?: AvatarProps['status'];\n    meta?: string[];\n    timeZone?: string;\n  };\n  announce: (announcement: string) => ReturnType<typeof setTimeout>;\n  feedRef?: RefObject<HTMLDivElement>;\n}\n\nexport const FeedContext = createContext<FeedContextValue>({\n  searchTypes: [],\n  userInfo: { username: '', fullname: '' },\n  announce: () => {\n    return -1 as unknown as ReturnType<FeedContextValue['announce']>;\n  }\n});\n\nexport interface FeedReplyContextValue {\n  onShowReplyInput?: () => void;\n}\n\nexport const FeedReplyContext = createContext<FeedReplyContextValue>({});\n"]}

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

@@ -1,56 +1,6 @@
-import { ReactNode, FC } from 'react';
-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. */
-    id: string;
-    /** Pass a string or a fragment with an Icon and string for the filter label. */
-    label: ReactNode;
-    /**
-     * Disables the filter.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Sets on prop via onFilterChange.
-     * @default false
-     */
-    on?: boolean;
-}
-export interface FeedProps extends NoChildrenProp {
-    /** Title for the feed. */
-    title: string;
-    /** Information related to the user of the Feed. */
-    userInfo: FeedContextValue['userInfo'];
-    /** A set of search types that can be used to determine which data set to conduct a mention search on. */
-    searchTypes?: FeedContextValue['searchTypes'];
-    /** A callback that runs when a decorator search has been run inside of the feed. */
-    onDecoratorSearch?: FeedContextValue['onSearch'];
-    /** Results that will be shown in a Popover for a mention or tag search. */
-    searchResults?: FeedContextValue['searchResults'];
-    /** A callback that is triggered when a mention button is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component. */
-    onMentionClick?: FeedContextValue['onMentionClick'];
-    /** A callback that is triggered when a mention link is previewed. The callback sends back the id, text, and type of the mention. */
-    onMentionPreview?: FeedContextValue['onMentionPreview'];
-    /** A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. */
-    onTagClick?: FeedContextValue['onTagClick'];
-    /** A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern. */
-    interactionRenderers?: FeedContextValue['interactionRenderers'];
-    /** A mapping for various element types to render custom components for within posts. */
-    markdownMap?: FeedContextValue['markdownMap'];
-    /** A set of filters to apply to the Feed. */
-    filters?: Filter[];
-    /** A callback that runs when the filter is toggled. */
-    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 */
-    posts?: ReactNode[];
-}
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { FeedProps } from './Feed.types';
 declare const Feed: FC<ForwardProps & FeedProps>;
 export default Feed;
 //# sourceMappingURL=Feed.d.ts.map

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,EAEL,SAAS,EACT,EAAE,EAOH,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAQZ,cAAc,EAKf,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,EAAE,MAAM,CAAC;IACd,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,qLAAqL;IACrL,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,oIAAoI;IACpI,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACxD,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,CA4LtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAA6D,MAAM,OAAO,CAAC;AAGnG,OAAO,EAOL,YAAY,EAab,MAAM,yBAAyB,CAAC;AASjC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAyCzC,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CAsMtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Feed/Feed.js

@@ -1,30 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Flex, Icon, registerIcon, Popover, Switch, Text, Progress, usePrevious, useItemIntersection, useUID, useConsolidatedRef, getFocusables } from '@pega/cosmos-react-core';
+import { Button, Card, CardContent, CardHeader, defaultThemeProp, Flex, getFocusables, Icon, registerIcon, Popover, StyledCard, Switch, Text, Progress, usePrevious, useItemIntersection, useUID, useConsolidatedRef } 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';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 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 `
-    ${StyledFeedNewPost}:not(:last-child), ${StyledFeedPost}:not(:last-child) {
-      margin-bottom: calc(2 * ${props.theme.base.spacing});
-    }
-  `;
-});
+const StyledFeed = styled.div `
+  ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {
+    padding-bottom: 0.25rem;
+  }
+`;
 StyledFeed.defaultProps = defaultThemeProp;
-const StyledHeading = styled.div(props => {
-    return css `
-    margin: ${props.theme.base.spacing} 0;
-  `;
-});
-StyledHeading.defaultProps = defaultThemeProp;
 const StyledFilterMenu = styled.div(props => {
     return css `
     padding: calc(2 * ${props.theme.base.spacing});
@@ -63,7 +54,7 @@ const Feed = forwardRef((props, ref) => {
     useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
         setMountPopover(false);
     });
-    useOuterEvent('focusin', [popoverEl, buttonEl], () => {
+    useOuterEvent('focusin', [popoverEl], () => {
         setMountPopover(false);
     });
     const onKeydown = ({ key }) => {
@@ -79,7 +70,7 @@ const Feed = forwardRef((props, ref) => {
     const id = useUID();
     useItemIntersection({ current: null }, posts.length - 1, () => {
         onLoadMore?.();
-    }, `#${id} > div[role='none']`);
+    }, `#${id} > article[role='none']`);
     const announce = useCallback((announcement) => {
         setAnnouncementText('');
         return setTimeout(() => {
@@ -103,6 +94,14 @@ const Feed = forwardRef((props, ref) => {
             return () => clearTimeout(timeoutId);
         }
     }, [posts]);
+    useEffect(() => {
+        if (mountPopover) {
+            setTimeout(() => {
+                const focusables = getFocusables(filterRef);
+                focusables[0]?.focus();
+            }, 0);
+        }
+    }, [mountPopover]);
     return (_jsx(FeedContext.Provider
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     , { 
@@ -124,17 +123,16 @@ const Feed = forwardRef((props, ref) => {
             userInfo,
             announce,
             feedRef
-        }, children: _jsxs(StyledFeed, { ref: feedRef, ...restProps, children: [_jsx(FeedAnnouncer, { children: announcementText }), _jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, as: StyledHeading, children: [_jsx(Text, { variant: 'h2', children: title }), filters && filters.length > 0 && (_jsx(Button, { as: FeedButton, ref: setButtonEl, variant: 'simple', icon: true, onClick: () => setMountPopover(curr => !curr), onKeyDown: (event) => {
-                                if (event.key === 'ArrowDown' && mountPopover) {
-                                    event.preventDefault();
-                                    const focusables = getFocusables(filterRef);
-                                    focusables[0]?.focus();
-                                }
-                            }, label: mountPopover ? undefined : `${title} ${t('filters').toLowerCase()}`, emphasized: true, children: _jsx(Icon, { name: filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)
-                                    ? 'filter-on'
-                                    : 'filter' }) }))] }), _jsx(Popover, { show: !!filters && mountPopover, ref: setPopoverEl, target: buttonEl, as: StyledFilterMenu, portal: feedRef.current ?? undefined, hideOnTargetHidden: true, children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: 'fieldset', children: [_jsx(Text, { variant: 'h3', as: 'legend', children: t('filters') }), _jsx(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' }) }))] }) }));
+        }, children: _jsxs(StyledFeed, { ref: feedRef, ...restProps, children: [_jsx(FeedAnnouncer, { children: announcementText }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(Text, { variant: 'h2', children: title }), filters && filters.length > 0 && (_jsx(Button, { as: FeedButton, ref: setButtonEl, variant: 'simple', icon: true, onClick: () => setMountPopover(curr => !curr), label: `${title} ${t('filters').toLowerCase()}`, emphasized: true, children: _jsx(Icon, { name: filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)
+                                            ? 'filter-on'
+                                            : 'filter' }) })), _jsx(Popover, { show: !!filters && mountPopover, ref: setPopoverEl, target: buttonEl, as: StyledFilterMenu, portal: feedRef.current ?? undefined, hideOnTargetHidden: true, onKeyDown: (event) => {
+                                        if (event.key === 'Tab') {
+                                            event.preventDefault();
+                                            buttonEl?.focus();
+                                        }
+                                    }, children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, as: 'fieldset', children: [_jsx(Text, { variant: 'h3', as: 'legend', children: t('filters') }), _jsx(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));
+                                                }) })] }) })] }), _jsx(CardContent, { children: newPostRegion })] }), _jsx("div", { id: id, children: 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

@@ -1 +1 @@
-{"version":3,"file":"Feed.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  ReactNode,\n  FC,\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Popover,\n  Switch,\n  Text,\n  Progress,\n  usePrevious,\n  NoChildrenProp,\n  useItemIntersection,\n  useUID,\n  useConsolidatedRef,\n  getFocusables\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 button 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 mention link is previewed. The callback sends back the id, text, and type of the mention. */\n  onMentionPreview?: FeedContextValue['onMentionPreview'];\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> = forwardRef(\n  (props: ForwardProps & FeedProps, ref: Ref<HTMLDivElement>) => {\n    const {\n      loadingPosts = false,\n      variant,\n      children,\n      userInfo,\n      className,\n      title,\n      searchTypes,\n      onDecoratorSearch,\n      searchResults = [],\n      onMentionClick,\n      onMentionPreview,\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 feedRef = useConsolidatedRef(ref);\n\n    const filterRef = useRef(null);\n    useArrows(filterRef);\n\n    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n      setMountPopover(false);\n    });\n\n    useOuterEvent('focusin', [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='none']`\n    );\n\n    const announce = useCallback((announcement: string) => {\n      setAnnouncementText('');\n      return setTimeout(() => {\n        setAnnouncementText(announcement);\n      }, 0);\n    }, []);\n\n    useEffect(() => {\n      if (loadingPosts) {\n        const timeoutId = announce(t('loading_post'));\n        return () => clearTimeout(timeoutId);\n      }\n    }, [loadingPosts]);\n\n    useEffect(() => {\n      if (prevPosts) {\n        let timeoutId: ReturnType<typeof setTimeout>;\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        return () => clearTimeout(timeoutId);\n      }\n    }, [posts]);\n\n    return (\n      <FeedContext.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          searchTypes,\n          onSearch: e => {\n            if (onDecoratorSearch) onDecoratorSearch(e);\n          },\n          searchResults,\n          showSearchResults,\n          setShowSearchResults,\n          onMentionClick,\n          onMentionPreview,\n          onTagClick,\n          interactionRenderers,\n          markdownMap,\n          userInfo,\n          announce,\n          feedRef\n        }}\n      >\n        <StyledFeed ref={feedRef} {...restProps}>\n          <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n          <Flex container={{ justify: 'between', alignItems: 'center' }} as={StyledHeading}>\n            <Text variant='h2'>{title}</Text>\n            {filters && filters.length > 0 && (\n              <Button\n                as={FeedButton}\n                ref={setButtonEl}\n                variant='simple'\n                icon\n                onClick={() => setMountPopover(curr => !curr)}\n                onKeyDown={(event: KeyboardEvent) => {\n                  if (event.key === 'ArrowDown' && mountPopover) {\n                    event.preventDefault();\n                    const focusables = getFocusables(filterRef);\n                    focusables[0]?.focus();\n                  }\n                }}\n                label={mountPopover ? undefined : `${title} ${t('filters').toLowerCase()}`}\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          <Popover\n            show={!!filters && mountPopover}\n            ref={setPopoverEl}\n            target={buttonEl}\n            as={StyledFilterMenu}\n            portal={feedRef.current ?? undefined}\n            hideOnTargetHidden\n          >\n            <Flex container={{ direction: 'column', gap: 2 }} as='fieldset'>\n              <Text variant='h3' as='legend'>\n                {t('filters')}\n              </Text>\n              <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              </StyledFilterList>\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);\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, FC, useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  getFocusables,\n  Icon,\n  registerIcon,\n  Popover,\n  StyledCard,\n  Switch,\n  Text,\n  Progress,\n  usePrevious,\n  useItemIntersection,\n  useUID,\n  useConsolidatedRef\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';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedAnnouncer from './FeedAnnouncer';\nimport { FeedProps } from './Feed.types';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst StyledFeed = styled.div`\n  ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {\n    padding-bottom: 0.25rem;\n  }\n`;\n\nStyledFeed.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> = forwardRef(\n  (props: ForwardProps & FeedProps, ref: Ref<HTMLDivElement>) => {\n    const {\n      loadingPosts = false,\n      variant,\n      children,\n      userInfo,\n      className,\n      title,\n      searchTypes,\n      onDecoratorSearch,\n      searchResults = [],\n      onMentionClick,\n      onMentionPreview,\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 feedRef = useConsolidatedRef(ref);\n\n    const filterRef = useRef(null);\n    useArrows(filterRef);\n\n    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n      setMountPopover(false);\n    });\n\n    useOuterEvent('focusin', [popoverEl], () => {\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} > article[role='none']`\n    );\n\n    const announce = useCallback((announcement: string) => {\n      setAnnouncementText('');\n      return setTimeout(() => {\n        setAnnouncementText(announcement);\n      }, 0);\n    }, []);\n\n    useEffect(() => {\n      if (loadingPosts) {\n        const timeoutId = announce(t('loading_post'));\n        return () => clearTimeout(timeoutId);\n      }\n    }, [loadingPosts]);\n\n    useEffect(() => {\n      if (prevPosts) {\n        let timeoutId: ReturnType<typeof setTimeout>;\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        return () => clearTimeout(timeoutId);\n      }\n    }, [posts]);\n\n    useEffect(() => {\n      if (mountPopover) {\n        setTimeout(() => {\n          const focusables = getFocusables(filterRef);\n          focusables[0]?.focus();\n        }, 0);\n      }\n    }, [mountPopover]);\n\n    return (\n      <FeedContext.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          searchTypes,\n          onSearch: e => {\n            if (onDecoratorSearch) onDecoratorSearch(e);\n          },\n          searchResults,\n          showSearchResults,\n          setShowSearchResults,\n          onMentionClick,\n          onMentionPreview,\n          onTagClick,\n          interactionRenderers,\n          markdownMap,\n          userInfo,\n          announce,\n          feedRef\n        }}\n      >\n        <StyledFeed ref={feedRef} {...restProps}>\n          <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n          <Card>\n            <CardHeader>\n              <Text variant='h2'>{title}</Text>\n              {filters && filters.length > 0 && (\n                <Button\n                  as={FeedButton}\n                  ref={setButtonEl}\n                  variant='simple'\n                  icon\n                  onClick={() => setMountPopover(curr => !curr)}\n                  label={`${title} ${t('filters').toLowerCase()}`}\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\n              <Popover\n                show={!!filters && mountPopover}\n                ref={setPopoverEl}\n                target={buttonEl}\n                as={StyledFilterMenu}\n                portal={feedRef.current ?? undefined}\n                hideOnTargetHidden\n                onKeyDown={(event: KeyboardEvent) => {\n                  if (event.key === 'Tab') {\n                    event.preventDefault();\n                    buttonEl?.focus();\n                  }\n                }}\n              >\n                <Flex container={{ direction: 'column', gap: 2 }} as='fieldset'>\n                  <Text variant='h3' as='legend'>\n                    {t('filters')}\n                  </Text>\n                  <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                  </StyledFilterList>\n                </Flex>\n              </Popover>\n            </CardHeader>\n\n            <CardContent>{newPostRegion}</CardContent>\n          </Card>\n\n          <div id={id}>{posts}</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);\n\nexport default Feed;\n"]}

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

@@ -0,0 +1,330 @@
+import { Dispatch, MouseEvent, MutableRefObject, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
+import { AvatarProps, DateTimeDisplayProps, FileUploadItemProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';
+import { FeedContextValue } from './Feed.context';
+export interface SubComponentVariant {
+    variant: 'post' | 'reply';
+}
+export interface Filter {
+    /** Sets DOM id for the control and associates label element via 'for' attribute. */
+    id: string;
+    /** Pass a string or a fragment with an Icon and string for the filter label. */
+    label: ReactNode;
+    /**
+     * Disables the filter.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets on prop via onFilterChange.
+     * @default false
+     */
+    on?: boolean;
+}
+export interface FeedProps extends NoChildrenProp {
+    /** Title for the feed. */
+    title: string;
+    /** Information related to the user of the Feed. */
+    userInfo: FeedContextValue['userInfo'];
+    /** A set of search types that can be used to determine which data set to conduct a mention search on. */
+    searchTypes?: FeedContextValue['searchTypes'];
+    /** A callback that runs when a decorator search has been run inside of the feed. */
+    onDecoratorSearch?: FeedContextValue['onSearch'];
+    /** Results that will be shown in a Popover for a mention or tag search. */
+    searchResults?: FeedContextValue['searchResults'];
+    /** A callback that is triggered when a mention button is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component. */
+    onMentionClick?: FeedContextValue['onMentionClick'];
+    /** A callback that is triggered when a mention link is previewed. The callback sends back the id, text, and type of the mention. */
+    onMentionPreview?: FeedContextValue['onMentionPreview'];
+    /** A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. */
+    onTagClick?: FeedContextValue['onTagClick'];
+    /** A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern. */
+    interactionRenderers?: FeedContextValue['interactionRenderers'];
+    /** A mapping for various element types to render custom components for within posts. */
+    markdownMap?: FeedContextValue['markdownMap'];
+    /** A set of filters to apply to the Feed. */
+    filters?: Filter[];
+    /** A callback that runs when the filter is toggled. */
+    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 */
+    posts?: ReactNode[];
+}
+export type FeedRichTextProps = Pick<RichTextEditorProps, 'label' | 'onChange' | 'onFocus' | 'onBlur' | 'height'>;
+export type AttachedFiles = FileUploadItemProps & File;
+export interface FeedAttachmentsProps extends SubComponentVariant {
+    attachments?: AttachedFiles[];
+    readOnly?: boolean;
+    ref?: Ref<HTMLUListElement>;
+}
+export interface FeedCompositionBaseProps {
+    /** A unique ID for the new message. */
+    id: string;
+    /** A set of attachment files. */
+    attachments?: AttachedFiles[];
+    /** A callback containing a list of added files that will run whenever files are added to the message. */
+    onFilesAdded?: (files: AttachedFiles[]) => void;
+    /** Callback that runs when the submit button has been clicked. */
+    onSubmit: (event: {
+        id: string;
+        value: string;
+        attachments: AttachedFiles[];
+        recipients?: RecipientMenuItem[];
+        username: string;
+        clear: () => void;
+    }) => void;
+}
+export interface FeedInputRegionProps extends SubComponentVariant, FeedCompositionBaseProps {
+    inputRegionEl: HTMLDivElement | null;
+    rteRef: MutableRefObject<RichTextEditorState | undefined>;
+    selectedRecipients?: RecipientMenuItem[];
+}
+export interface FeedEditRegionProps extends SubComponentVariant, Pick<FeedMessageBaseProps, 'id' | 'content' | 'onEditSubmit'> {
+    setEditMode: Dispatch<SetStateAction<boolean>>;
+    emptyEditText: boolean;
+    setEmptyEditText: Dispatch<SetStateAction<boolean>>;
+}
+export interface FeedNewPostProps extends FeedCompositionBaseProps {
+    /** If true, the new post input will focus on page load.  */
+    autoFocus?: boolean;
+    /** Array of private recipient options. */
+    recipients?: PostTypeMenuProps['recipients'];
+    /** Handler for new search on private recipient options. */
+    onRecipientSearch?: (newSearch: string) => void;
+}
+export interface FeedReplyInputProps extends FeedCompositionBaseProps {
+    /** Callback that sets returns a shared ref to the RTE component */
+    onSetInputRef?: (event: {
+        ref: MutableRefObject<RichTextEditorState | undefined>;
+    }) => void;
+}
+export interface FeedModalListProps {
+    /** The count for the list of items. */
+    count: number;
+    /** The heading for the Modal. */
+    heading: string;
+    /** The list of MenuItems to render in the Modal. */
+    listItems: MenuItemProps[];
+    /** 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;
+}
+export type PostType = 'post' | 'private';
+export interface RecipientOption {
+    /** Pretty printed recipient name */
+    primary: string;
+    /** Functional identifier of unique recipient */
+    value: string;
+}
+export interface RecipientMenuItem {
+    id: string;
+    selected?: boolean;
+    primary: RecipientOption['primary'];
+    value: RecipientOption['value'];
+    secondary?: MenuItemProps['secondary'];
+    visual?: MenuItemProps['visual'];
+}
+export interface PostTypeMenuProps {
+    /** Array of private recipient options */
+    recipients: RecipientOption[];
+    /** Post type update handler */
+    onSetPostType: (postType: PostType) => void;
+    /** Private post recipient list update handler */
+    onSelectedRecipientsUpdate: (recipients: RecipientMenuItem[]) => void;
+    /** Handler for new search on private recipient options */
+    onRecipientSearch: (newSearch: string) => void;
+    reset: boolean;
+    onReset: () => void;
+}
+export interface PostTypeMenuState {
+    postType: PostType;
+    itemsLoading: boolean;
+    showTypeMenu: boolean;
+    showRecipientMenu: boolean;
+    viewingRecipients: boolean;
+    searchValue: string;
+    typeMenuItems: {
+        id: string;
+        primary: string;
+        selected: boolean;
+        value: PostType;
+    }[];
+    recipientMenuItems: RecipientMenuItem[];
+    multiSelectItems: RecipientMenuItem[];
+}
+export interface FeedContentProps {
+    children: ReactElement | string;
+    /**
+     * A maximum height in pixels to display post content within before prompting to expand the post.
+     * @default Infinity
+     */
+    maxContentHeight?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface FeedMessageBaseProps {
+    /** Unique ID for the message. */
+    id: string;
+    /** Display name for the message author. */
+    fullname: string;
+    /** Username for the message author. */
+    username: string;
+    /** A timestamp of when the message was initially submitted. */
+    postTimestamp: DateTimeDisplayProps['value'];
+    /** The message content. */
+    content: ReactElement | string;
+    /** Attachments on the message. */
+    attachments?: AttachedFiles[];
+    /** An image source for the message author's Avatar. */
+    avatarSrc?: string;
+    /** The name of an icon to render within the Avatar. */
+    icon?: string;
+    /** The status of the message author. */
+    userStatus?: AvatarProps['status'];
+    /** Set true if the user has liked the message. */
+    liked?: boolean;
+    /** A set of users that have liked the message. */
+    likes?: MenuItemProps[];
+    /** The total count of likes on the message. */
+    likeCount?: number;
+    /**
+     * If true, the like and comment buttons will be enabled.
+     * @default true
+     */
+    interactionsEnabled?: boolean;
+    /**
+     * A maximum height in pixels to display message content within before prompting to expand the message.
+     * @default Infinity
+     */
+    maxContentHeight?: FeedContentProps['maxContentHeight'];
+    /** A set of menu options for actions on the message. */
+    menuItems?: MenuItemProps[];
+    /** Callback that updates the message after being edited. If undefined, the message will not be editable. */
+    onEditSubmit?: (event: {
+        id: string;
+        value: string;
+    }) => void;
+    /**
+     * Flag that indicates if a message has been previously edited.
+     * @default false
+     */
+    edited?: boolean;
+    /** A timestamp of when the message was last edited. This will only display if edited prop is true. */
+    editTimestamp?: DateTimeDisplayProps['value'];
+    /** Callback that runs when the mouse pointer hovers over the message. */
+    onMouseEnter?: (event: {
+        id: string;
+    }) => void;
+    /** Callback that runs when the mouse pointer leaves the message. */
+    onMouseLeave?: (event: {
+        id: string;
+    }) => void;
+    /** Callback that runs when the author's name or Avatar has been clicked. */
+    onUserClick?: (event: {
+        id: string;
+        username: string;
+    }, clickEvent?: MouseEvent) => void;
+    /** Callback that runs when the comment button has been clicked. */
+    onCommentClick: (event: {
+        id: string;
+        username: string;
+    }) => void;
+    /** Callback that runs when the like button has been clicked. */
+    onLikeClick: (event: {
+        id: string;
+        user: MenuItemProps;
+    }) => void;
+    /** Callback that runs when the like count on a message is hovered, focused, or clicked. */
+    onLikeCountInteraction?: () => void;
+    /** Callback that runs when the bottom of the extended like list Modal is reached, allowing for more likes to be loaded. */
+    onLoadMoreLikes?: () => void;
+    /** A loading indicator for the likes Modal. */
+    likesLoading?: boolean;
+}
+export interface FeedPostProps extends FeedMessageBaseProps {
+    /**
+     * The type of message. If private, then only the designated recipients will be able to view the message.
+     * @default 'public'
+     */
+    postType?: 'public' | 'private';
+    /** The set of recipients assigned to a private message. */
+    recipients?: MenuItemProps[];
+    /** The total number of private recipients. */
+    recipientsCount?: number;
+    /** The context of the message. */
+    postContext?: ReactElement | string;
+    /** Callback that runs when the private recipient icon on a post is hovered, focused, or clicked. */
+    onRecipientInteraction?: () => void;
+    /** Callback that runs when the bottom of the extended private recipient list Modal is reached, allowing for more recipients to be loaded. */
+    onLoadMoreRecipients?: () => void;
+    /** A loading indicator for the recipients Modal. */
+    recipientsLoading?: boolean;
+    /** Props that will be passed into the reply input, see FeedReplyInput for more information. */
+    replyInput: Pick<FeedReplyInputProps, 'onSubmit' | 'onFilesAdded' | 'attachments'>;
+    /** The default visibility for the reply input. */
+    replyInputShown?: boolean;
+    /** An array to of replies for this message. */
+    replies?: ReactElement[];
+    /** A total count of all replies. */
+    replyCount?: number;
+    /** Callback that runs when the user clicks Show more button for the replies. */
+    onShowMoreReplies?: (event: {
+        id: string;
+    }) => void;
+    /** Callback that runs when the user clicks Show less button for the replies. */
+    onShowLessReplies?: (event: {
+        id: string;
+    }) => void;
+    /** A loading indicator for the replies. */
+    repliesLoading?: boolean;
+}
+export type FeedReplyProps = FeedMessageBaseProps;
+export interface FeedContentHeaderProps extends SubComponentVariant {
+    id: FeedMessageBaseProps['id'];
+    fullname: FeedMessageBaseProps['fullname'];
+    username: FeedMessageBaseProps['username'];
+    postTimestamp: FeedMessageBaseProps['postTimestamp'];
+    content: FeedMessageBaseProps['content'];
+    avatarSrc?: FeedMessageBaseProps['avatarSrc'];
+    icon?: FeedMessageBaseProps['icon'];
+    userStatus?: FeedMessageBaseProps['userStatus'];
+    postType?: FeedPostProps['postType'];
+    postContext?: FeedPostProps['postContext'];
+    recipients?: FeedPostProps['recipients'];
+    recipientsCount?: FeedPostProps['recipientsCount'];
+    menuItems?: FeedMessageBaseProps['menuItems'];
+    edited?: FeedMessageBaseProps['edited'];
+    editTimestamp?: FeedMessageBaseProps['editTimestamp'];
+    recipientsLoading?: FeedPostProps['recipientsLoading'];
+    onEditSubmit?: FeedMessageBaseProps['onEditSubmit'];
+    onLoadMoreRecipients?: FeedPostProps['onLoadMoreRecipients'];
+    onRecipientInteraction?: FeedPostProps['onRecipientInteraction'];
+    onUserClick?: FeedMessageBaseProps['onUserClick'];
+    setEditMode: Dispatch<SetStateAction<boolean>>;
+}
+export interface FeedContentFooterProps extends SubComponentVariant {
+    id: FeedMessageBaseProps['id'];
+    username: FeedMessageBaseProps['username'];
+    liked?: FeedMessageBaseProps['liked'];
+    likes?: FeedMessageBaseProps['likes'];
+    likeCount?: FeedMessageBaseProps['likeCount'];
+    interactionsEnabled?: FeedMessageBaseProps['interactionsEnabled'];
+    onCommentClick: FeedMessageBaseProps['onCommentClick'];
+    onLikeClick: FeedMessageBaseProps['onLikeClick'];
+    onLikeCountInteraction?: FeedMessageBaseProps['onLikeCountInteraction'];
+    onLoadMoreLikes?: FeedMessageBaseProps['onLoadMoreLikes'];
+    likesLoading?: FeedMessageBaseProps['likesLoading'];
+    replies?: FeedPostProps['replies'];
+    replyCount?: FeedPostProps['replyCount'];
+    onShowMoreReplies?: FeedPostProps['onShowMoreReplies'];
+    onShowLessReplies?: FeedPostProps['onShowMoreReplies'];
+    repliesLoading?: FeedPostProps['repliesLoading'];
+    replyInputOpen?: boolean;
+    setReplyInputOpen?: Dispatch<SetStateAction<boolean>>;
+}
+//# sourceMappingURL=Feed.types.d.ts.map