@pega/cosmos-react-social 8.0.0-build.9.0 → 8.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.types.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  Dispatch,\n  MouseEvent,\n  MutableRefObject,\n  ReactElement,\n  ReactNode,\n  Ref,\n  SetStateAction\n} from 'react';\n\nimport type {\n  AvatarProps,\n  DateTimeDisplayProps,\n  FileItemProps,\n  FileListProps,\n  MenuItemProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport type { RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport type { FeedContextValue } from './Feed.context';\n\nexport interface SubComponentVariant {\n  variant: 'post' | 'reply';\n}\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  /** Information related to the Autopilot mention. */\n  autopilotInfo?: FeedContextValue['autopilotInfo'];\n  /** A callback that is triggered when an Autopilot mention is clicked. The callback sends back the target of the element. The callback should return a function component. */\n  onAutopilotClick?: FeedContextValue['onAutopilotClick'];\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\nexport type FeedRichTextProps = Pick<\n  RichTextEditorProps,\n  'label' | 'onChange' | 'onFocus' | 'onBlur' | 'height'\n>;\n\nexport interface FeedAttachmentsProps\n  extends SubComponentVariant,\n    Pick<FileListProps, 'onDownloadAll'> {\n  attachments?: FileItemProps[];\n  ref?: Ref<HTMLDivElement>;\n}\nexport interface FeedCompositionBaseProps {\n  /** A unique ID for the new message. */\n  id: string;\n  /** A set of attachment files. */\n  attachments?: FileItemProps[];\n  /** A callback containing a list of added files that will run whenever files are added to the message. */\n  onFilesAdded?: (files: File[]) => void;\n  /** Callback that runs when the submit button has been clicked. */\n  onSubmit: (event: {\n    id: string;\n    value: string;\n    attachments: FileItemProps[];\n    recipients?: RecipientMenuItem[];\n    username: string;\n    clear: () => void;\n  }) => void;\n}\n\nexport interface FeedInputRegionProps extends SubComponentVariant, FeedCompositionBaseProps {\n  inputRegionEl: HTMLDivElement | null;\n  rteRef: MutableRefObject<RichTextEditorState | undefined>;\n  selectedRecipients?: RecipientMenuItem[];\n}\n\nexport interface FeedEditRegionProps\n  extends SubComponentVariant,\n    Pick<FeedMessageBaseProps, 'id' | 'content' | 'onEditSubmit'> {\n  setEditMode: Dispatch<SetStateAction<boolean>>;\n  emptyEditText: boolean;\n  setEmptyEditText: Dispatch<SetStateAction<boolean>>;\n}\n\nexport interface FeedNewPostProps extends FeedCompositionBaseProps {\n  /** If true, the new post input will focus on page load.  */\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 interface FeedReplyInputProps extends FeedCompositionBaseProps {\n  /** Callback that sets returns a shared ref to the RTE component */\n  onSetInputRef?: (event: { ref: MutableRefObject<RichTextEditorState | undefined> }) => void;\n}\n\nexport interface FeedModalListProps {\n  /** The count for the list of items. */\n  count: number;\n  /** The heading for the Modal. */\n  heading: string;\n  /** The list of MenuItems to render in the Modal. */\n  listItems: MenuItemProps[];\n  /** A callback that is triggered when the bottom of the Modal list is scrolled into view so that additional data may be displayed. */\n  onLoadMore?: () => void;\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n}\n\nexport type PostType = 'post' | 'private';\n\nexport interface RecipientOption {\n  /** Pretty printed recipient name */\n  primary: string;\n  /** Functional identifier of unique recipient */\n  value: string;\n}\n\nexport interface RecipientMenuItem {\n  id: string;\n  selected?: boolean;\n  primary: RecipientOption['primary'];\n  value: RecipientOption['value'];\n  secondary?: MenuItemProps['secondary'];\n  visual?: MenuItemProps['visual'];\n}\nexport interface PostTypeMenuProps {\n  /** Array of private recipient options */\n  recipients: RecipientOption[];\n  /** Post type update handler */\n  onSetPostType: (postType: PostType) => void;\n  /** Private post recipient list update handler */\n  onSelectedRecipientsUpdate: (recipients: RecipientMenuItem[]) => void;\n  /** Handler for new search on private recipient options */\n  onRecipientSearch: (newSearch: string) => void;\n  reset: boolean;\n  onReset: () => void;\n}\n\nexport interface PostTypeMenuState {\n  postType: PostType;\n  itemsLoading: boolean;\n  showTypeMenu: boolean;\n  showRecipientMenu: boolean;\n  viewingRecipients: boolean;\n  searchValue: string;\n  typeMenuItems: {\n    id: string;\n    primary: string;\n    selected: boolean;\n    value: PostType;\n  }[];\n  recipientMenuItems: RecipientMenuItem[];\n  multiSelectItems: RecipientMenuItem[];\n}\n\nexport interface FeedContentProps {\n  children: ReactElement | string;\n  /**\n   * A maximum height in pixels to display post content within before prompting to expand the post.\n   * @default Infinity\n   */\n  maxContentHeight?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface FeedMessageBaseProps {\n  /** Unique ID for the message. */\n  id: string;\n  /** Display name for the message author. */\n  fullname: string;\n  /** Username for the message author. */\n  username: string;\n  /** A timestamp of when the message was initially submitted. */\n  postTimestamp: DateTimeDisplayProps['value'];\n  /** The message content. */\n  content: ReactElement | string;\n  /** Attachments on the message. */\n  attachments?: FileItemProps[];\n  /** An image source for the message author's Avatar. */\n  avatarSrc?: string;\n  /** The name of an icon to render within the Avatar. */\n  icon?: string;\n  /** The status of the message author. */\n  userStatus?: AvatarProps['status'];\n  /** Set true if the user has liked the message. */\n  liked?: boolean;\n  /** A set of users that have liked the message. */\n  likes?: MenuItemProps[];\n  /** The total count of likes on the message. */\n  likeCount?: number;\n  /**\n   * If true, the like and comment buttons will be enabled.\n   * @default true\n   */\n  interactionsEnabled?: boolean;\n  /**\n   * A maximum height in pixels to display message content within before prompting to expand the message.\n   * @default Infinity\n   */\n  maxContentHeight?: FeedContentProps['maxContentHeight'];\n  /** A set of menu options for actions on the message. */\n  menuItems?: MenuItemProps[];\n  /** Callback that updates the message after being edited. If undefined, the message will not be editable. */\n  onEditSubmit?: (event: { id: string; value: string }) => void;\n  /**\n   * Flag that indicates if a message has been previously edited.\n   * @default false\n   */\n  edited?: boolean;\n  /** A timestamp of when the message was last edited. This will only display if edited prop is true. */\n  editTimestamp?: DateTimeDisplayProps['value'];\n  /** Callback that runs when the mouse pointer hovers over the message. */\n  onMouseEnter?: (event: { id: string }) => void;\n  /** Callback that runs when the mouse pointer leaves the message. */\n  onMouseLeave?: (event: { id: string }) => void;\n  /** Callback that runs when the author's name or Avatar has been clicked. */\n  onUserClick?: (event: { id: string; username: string }, clickEvent?: MouseEvent) => void;\n  /** Callback that runs when the comment button has been clicked. */\n  onCommentClick: (event: { id: string; username: string }) => void;\n  /** Callback that runs when the like button has been clicked. */\n  onLikeClick: (event: { id: string; user: MenuItemProps }) => void;\n  /** Callback that runs when the like count on a message is hovered, focused, or clicked. */\n  onLikeCountInteraction?: () => void;\n  /** Callback that runs when the bottom of the extended like list Modal is reached, allowing for more likes to be loaded. */\n  onLoadMoreLikes?: () => void;\n  /** A loading indicator for the likes Modal. */\n  likesLoading?: boolean;\n}\n\nexport interface FeedPostProps extends FeedMessageBaseProps {\n  /**\n   * The type of message. If private, then only the designated recipients will be able to view the message.\n   * @default 'public'\n   */\n  postType?: 'public' | 'private';\n  /** The set of recipients assigned to a private message. */\n  recipients?: MenuItemProps[];\n  /** The total number of private recipients. */\n  recipientsCount?: number;\n  /** The context of the message. */\n  postContext?: ReactElement | string;\n  /** Callback that runs when the private recipient icon on a post is hovered, focused, or clicked. */\n  onRecipientInteraction?: () => void;\n  /** Callback that runs when the bottom of the extended private recipient list Modal is reached, allowing for more recipients to be loaded. */\n  onLoadMoreRecipients?: () => void;\n  /** A loading indicator for the recipients Modal. */\n  recipientsLoading?: boolean;\n  /** Props that will be passed into the reply input, see FeedReplyInput for more information. */\n  replyInput: Pick<FeedReplyInputProps, 'onSubmit' | 'onFilesAdded' | 'attachments'>;\n  /** The default visibility for the reply input. */\n  replyInputShown?: boolean;\n  /** An array to of replies for this message. */\n  replies?: ReactElement[];\n  /** A total count of all replies. */\n  replyCount?: number;\n  /** Callback that runs when the user clicks Show more button for the replies. */\n  onShowMoreReplies?: (event: { id: string }) => void;\n  /** Callback that runs when the user clicks Show less button for the replies. */\n  onShowLessReplies?: (event: { id: string }) => void;\n  /** A loading indicator for the replies. */\n  repliesLoading?: boolean;\n}\n\nexport type FeedReplyProps = FeedMessageBaseProps;\n\nexport interface FeedContentHeaderProps extends SubComponentVariant {\n  id: FeedMessageBaseProps['id'];\n  fullname: FeedMessageBaseProps['fullname'];\n  username: FeedMessageBaseProps['username'];\n  postTimestamp: FeedMessageBaseProps['postTimestamp'];\n  content: FeedMessageBaseProps['content'];\n  avatarSrc?: FeedMessageBaseProps['avatarSrc'];\n  icon?: FeedMessageBaseProps['icon'];\n  userStatus?: FeedMessageBaseProps['userStatus'];\n  postType?: FeedPostProps['postType'];\n  postContext?: FeedPostProps['postContext'];\n  recipients?: FeedPostProps['recipients'];\n  recipientsCount?: FeedPostProps['recipientsCount'];\n  menuItems?: FeedMessageBaseProps['menuItems'];\n  edited?: FeedMessageBaseProps['edited'];\n  editTimestamp?: FeedMessageBaseProps['editTimestamp'];\n  recipientsLoading?: FeedPostProps['recipientsLoading'];\n  onEditSubmit?: FeedMessageBaseProps['onEditSubmit'];\n  onLoadMoreRecipients?: FeedPostProps['onLoadMoreRecipients'];\n  onRecipientInteraction?: FeedPostProps['onRecipientInteraction'];\n  onUserClick?: FeedMessageBaseProps['onUserClick'];\n  setEditMode: Dispatch<SetStateAction<boolean>>;\n}\n\nexport interface FeedContentFooterProps extends SubComponentVariant {\n  id: FeedMessageBaseProps['id'];\n  username: FeedMessageBaseProps['username'];\n  liked?: FeedMessageBaseProps['liked'];\n  likes?: FeedMessageBaseProps['likes'];\n  likeCount?: FeedMessageBaseProps['likeCount'];\n  interactionsEnabled?: FeedMessageBaseProps['interactionsEnabled'];\n  onCommentClick: FeedMessageBaseProps['onCommentClick'];\n  onLikeClick: FeedMessageBaseProps['onLikeClick'];\n  onLikeCountInteraction?: FeedMessageBaseProps['onLikeCountInteraction'];\n  onLoadMoreLikes?: FeedMessageBaseProps['onLoadMoreLikes'];\n  likesLoading?: FeedMessageBaseProps['likesLoading'];\n  replies?: FeedPostProps['replies'];\n  replyCount?: FeedPostProps['replyCount'];\n  onShowMoreReplies?: FeedPostProps['onShowMoreReplies'];\n  onShowLessReplies?: FeedPostProps['onShowMoreReplies'];\n  repliesLoading?: FeedPostProps['repliesLoading'];\n  replyInputOpen?: boolean;\n  setReplyInputOpen?: Dispatch<SetStateAction<boolean>>;\n}\n"]}
+{"version":3,"file":"Feed.types.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  Dispatch,\n  KeyboardEventHandler,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefObject,\n  SetStateAction\n} from 'react';\n\nimport type {\n  AvatarProps,\n  ComboBoxProps,\n  DateTimeDisplayProps,\n  FileItemProps,\n  FileListProps,\n  MenuItemProps,\n  MenuProps,\n  NoChildrenProp,\n  OmitStrict,\n  WithAttributes\n} from '@pega/cosmos-react-core';\nimport type {\n  InteractionRenderers,\n  MDMap,\n  RichTextEditorProps,\n  RichTextEditorState,\n  RichTextViewerProps\n} from '@pega/cosmos-react-rte';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nimport type { OpenGraphData } from '../OpenGraphPreview/OpenGraphPreview';\n\n/*\n * ************************************************************\n *  Internal interfaces\n * ************************************************************\n */\n\nexport interface SubComponentVariant {\n  variant: 'post' | 'reply';\n}\n\nexport interface FeedAttachmentsProps\n  extends SubComponentVariant,\n    Pick<FileListProps, 'onDownloadAll'> {\n  attachments?: FileItemProps[];\n  /* OpenGraph data for an external link. If provided will render a link card. */\n  openGraphData?: OpenGraphData;\n  disabled?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface PostVisibilityControlProps extends Pick<FeedNewPostProps, 'visibilityMode'> {\n  /* Default visibility set for the post. */\n  visibility: Visibility;\n  /* State setter for selecting visibility. */\n  setVisibility?: Dispatch<SetStateAction<Visibility>>;\n  /** Props for the private recipient control. */\n  recipientInput: RecipientInputProps;\n}\n\nexport interface CustomPostSubmitEvent {\n  /* The id of the post. */\n  id: FeedNewPostProps['id'];\n  /* The username of the post author. */\n  username: string;\n  /** The object identifying the type of the post. */\n  postType?: PostType;\n  /* The visibility of the post. */\n  visibility?: Visibility;\n  /* A list of recipients who have been selected to view the post. If no recipients have been added, then the post visibility is public. */\n  recipients?: RecipientMenuItem[];\n}\n\nexport interface DefaultPostSubmitEvent extends CustomPostSubmitEvent {\n  /* The markdown content of the post. */\n  value: string;\n  /* A list of attachments. */\n  attachments: FileItemProps[];\n  /* A function to clear any recipients selected for private posts. */\n  clear: () => void;\n}\n\ninterface FeedBaseInputRegionProps extends SubComponentVariant, FeedCompositionBaseProps {\n  recipients?: RecipientMenuItem[];\n  postType?: PostType;\n  postTypeMenu?: ReactNode;\n  visibility?: Visibility;\n  visibilityControl?: ReactNode;\n}\n\nexport interface FeedInputRegionProps extends FeedBaseInputRegionProps, DefaultPostConfig {\n  rteRef: RefObject<RichTextEditorState>;\n}\n\nexport type FeedCustomInputRegionProps = FeedBaseInputRegionProps & CustomPostConfig;\n\nexport interface FeedEditRegionProps\n  extends SubComponentVariant,\n    DefaultEditConfig,\n    Pick<FeedPostBaseProps, 'id'>,\n    Pick<FeedPostProps, 'visibility' | 'recipients'> {\n  content: RichTextEditorProps['defaultValue'];\n  emptyEditText: boolean;\n  setEmptyEditText: Dispatch<SetStateAction<boolean>>;\n}\n\nexport type FeedCustomEditRegionProps = CustomEditConfig &\n  Pick<FeedPostBaseProps, 'id'> &\n  Pick<FeedPostProps, 'visibility' | 'recipients'>;\n\nexport interface FeedModalListProps {\n  /* The count for the list of items. */\n  count?: number;\n  /* The heading for the Modal. */\n  heading: string;\n  /* The list of MenuItems to render in the Modal. */\n  listItems: MenuItemProps[];\n  /* A callback that is triggered when the bottom of the Modal list is scrolled into view so that additional data may be displayed. */\n  onLoadMore?: () => void;\n  /* Indicates if the data is being currently loading */\n  loading?: boolean;\n}\n\nexport interface AutopilotInfo {\n  id: string;\n  label: string;\n  meta?: string;\n  description?: string;\n}\n\nexport interface FeedContentProps {\n  children: ReactElement | string;\n  /*\n   * A maximum height in pixels to display post content within before prompting to expand the post.\n   * @default Infinity\n   */\n  maxContentHeight?: number;\n  onLinkRender?: RichTextViewerProps['onMarkdownLinkRender'];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type FeedContentHeaderProps = SubComponentVariant &\n  Pick<\n    FeedPostBaseProps,\n    | 'id'\n    | 'fullname'\n    | 'username'\n    | 'postTimestamp'\n    | 'avatarSrc'\n    | 'icon'\n    | 'userStatus'\n    | 'menuItems'\n    | 'edited'\n    | 'editTimestamp'\n    | 'onEdit'\n    | 'onUserClick'\n  > &\n  Pick<\n    FeedPostProps,\n    | 'visibility'\n    | 'postType'\n    | 'postContext'\n    | 'recipients'\n    | 'recipientsCount'\n    | 'recipientsLoading'\n    | 'onLoadMoreRecipients'\n    | 'onRecipientInteraction'\n  >;\n\nexport type FeedContentFooterProps = SubComponentVariant &\n  Pick<\n    FeedPostBaseProps,\n    | 'id'\n    | 'username'\n    | 'liked'\n    | 'likes'\n    | 'likeCount'\n    | 'interactionsEnabled'\n    | 'onCommentClick'\n    | 'onLikeClick'\n    | 'onLikeCountInteraction'\n    | 'onLoadMoreLikes'\n    | 'likesLoading'\n  > &\n  Pick<\n    FeedPostProps,\n    'replies' | 'replyCount' | 'onShowMoreReplies' | 'onShowLessReplies' | 'repliesLoading'\n  >;\n\n/*\n * ************************************************************\n *  External interfaces\n * ************************************************************\n */\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 FeedRichTextProps\n  extends Pick<\n      RichTextEditorProps,\n      'label' | 'onChange' | 'onFocus' | 'onBlur' | 'height' | 'defaultValue'\n    >,\n    Pick<FeedProps, 'onLinkRender'> {\n  onKeyDown?: KeyboardEventHandler;\n}\n\nexport type SearchType = { id: string; label: string };\n\nexport type FeedProps = WithAttributes<\n  'div',\n  NoChildrenProp & {\n    /* Title for the feed. */\n    title: string;\n    /* Information related to the user of the Feed. */\n    userInfo: {\n      username: string;\n      fullname: string;\n      avatarSrc?: string;\n      userStatus?: AvatarProps['status'];\n      meta?: string[];\n      timeZone?: string;\n    };\n    /* A set of search types that can be used to determine which data set to conduct a mention search on. */\n    searchTypes?: SearchType[];\n    /* A callback that runs when a decorator search has been run inside of the feed. */\n    onDecoratorSearch?: (e: {\n      type: 'mention' | 'tag';\n      search: string;\n      mentionType: string;\n    }) => void;\n    /* Results that will be shown in a Popover for a mention or tag search. */\n    searchResults?: MenuItemProps[];\n    /* Information related to the Autopilot mention. */\n    autopilotInfo?: AutopilotInfo;\n    /* A callback that is triggered when an Autopilot mention is clicked. The callback sends back the target of the element. The callback should return a function component. */\n    onAutopilotClick?: (e: {\n      target?: BaseDialogProps['target'];\n      onDismiss?: () => void;\n    }) => JSX.Element | undefined;\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?: (e: {\n      id: string;\n      text: string;\n      type: string;\n      target?: BaseDialogProps['target'];\n      closeGlimpse?: () => void;\n    }) => JSX.Element | undefined;\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?: (e: { id: string; text: string; type: string }) => void;\n    /* A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. */\n    onTagClick?: (tag: string) => void;\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?: InteractionRenderers[];\n    /* A mapping for various element types to render custom components for within posts. */\n    markdownMap?: MDMap;\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    /* A callback that runs when a link is rendered in the RichTextViewer. */\n    onLinkRender?: (href: string, signal: AbortSignal) => Promise<OpenGraphData>;\n  }\n>;\n\nexport type Visibility = 'public' | 'private';\n\nexport type PostType = { id: string; label: string; icon?: string };\n\nexport type RecipientMenuItem = Pick<\n  MenuItemProps,\n  'id' | 'selected' | 'primary' | 'secondary' | 'visual'\n>;\n\nexport interface RecipientInputProps\n  extends Pick<MenuProps, 'loadMore' | 'loading'>,\n    Pick<ComboBoxProps, 'onMenuOpen'> {\n  /* Array of private recipient options. */\n  availableRecipients: RecipientMenuItem[];\n  /* Array of selected private recipients. */\n  recipients: RecipientMenuItem[];\n  /* Callback that returns the modified search string. */\n  onSearch: (search: string) => void;\n  /* Callback that is triggered when a recipient is selected. */\n  onAdd: (id: MenuItemProps['id']) => void;\n  /* Callback that is triggered when a recipient is deselected. */\n  onRemove: (id: MenuItemProps['id']) => void;\n  /* Callback that is triggered when a recipient is selected or deselected. */\n  onToggle?: (id: MenuItemProps['id']) => void;\n}\n\ninterface FeedCompositionBaseProps {\n  /* A unique ID for the post. */\n  id: string;\n  /* Region to render any banners associated with the post. */\n  banners?: ReactNode;\n  /* If true, a progress indicator will overlay content. */\n  progress?: boolean;\n}\n\nexport interface DefaultPostConfig {\n  /* A set of attachment files. */\n  attachments?: FileItemProps[];\n  /* A callback containing a list of added files that will run whenever files are added to the message. */\n  onFilesAdded?: (files: File[]) => void;\n  /* Callback that runs when the submit button has been clicked. */\n  onSubmit: (event: DefaultPostSubmitEvent) => void;\n}\n\nexport interface CustomPostConfig {\n  /* The content composing the custom post type. */\n  content: ReactNode;\n  /* Callback function for the submit button. */\n  onSubmit: (event: CustomPostSubmitEvent) => void;\n  /* Callback function for the cancel button. */\n  onCancel: (id: FeedNewPostProps['id']) => void;\n}\n\nexport type FeedNewPostProps = WithAttributes<\n  'div',\n  FeedCompositionBaseProps & {\n    /*\n     * What visibility controls are available for this post.\n     * @default 'public'\n     * */\n    visibilityMode?: Visibility | 'selectable';\n    /** Props for the private recipient Combobox. */\n    recipientInput?: RecipientInputProps;\n    /* Configuration for the default post type. */\n    defaultConfig?: DefaultPostConfig;\n    /* Configuration for custom post types. */\n    customConfig?: CustomPostConfig;\n    /* The type of the post. */\n    postType?: PostType;\n    /* Array of available post types. */\n    postTypes?: PostType[];\n    /* Callback that is triggered when the post type selection is updated. */\n    onPostTypeChange?: (postType: PostType) => void;\n  }\n>;\n\nexport type FeedReplyInputProps = WithAttributes<\n  'div',\n  FeedCompositionBaseProps &\n    DefaultPostConfig & {\n      /* Callback that sets returns a shared ref to the RTE component */\n      onSetInputRef?: (event: { ref: RefObject<RichTextEditorState> }) => void;\n    }\n>;\n\nexport interface FeedPostBaseProps {\n  /* Unique ID for the post. */\n  id: string;\n  /* Display name for the message author. */\n  fullname: string;\n  /* Username for the message author. */\n  username: string;\n  /* A timestamp of when the message was initially submitted. */\n  postTimestamp: DateTimeDisplayProps['value'];\n  /* The message content. */\n  content: ReactElement | string;\n  /* Attachments on the message. */\n  attachments?: FileItemProps[];\n  /* An image source for the message author's Avatar. */\n  avatarSrc?: string;\n  /* The name of an icon to render within the Avatar. */\n  icon?: string;\n  /* The status of the message author. */\n  userStatus?: AvatarProps['status'];\n  /* Set true if the user has liked the message. */\n  liked?: boolean;\n  /* A set of users that have liked the message. */\n  likes?: MenuItemProps[];\n  /* The total count of likes on the message. */\n  likeCount?: number;\n  /*\n   * If true, the like and comment buttons will be enabled.\n   * @default true\n   */\n  interactionsEnabled?: boolean;\n  /*\n   * A maximum height in pixels to display message content within before prompting to expand the message.\n   * @default Infinity\n   */\n  maxContentHeight?: FeedContentProps['maxContentHeight'];\n  /* A set of menu options for actions on the message. */\n  menuItems?: MenuItemProps[];\n  /* Callback that is triggered when the edit action is clicked. If undefined, the message will not be editable. */\n  onEdit?: (event: {\n    id: string;\n    postType?: PostType;\n    visibility?: Visibility;\n    recipients?: RecipientMenuItem[];\n  }) => void;\n  /*\n   * Flag that indicates if a message has been previously edited.\n   * @default false\n   */\n  edited?: boolean;\n  /* A timestamp of when the message was last edited. This will only display if edited prop is true. */\n  editTimestamp?: DateTimeDisplayProps['value'];\n  /* Callback that runs when the mouse pointer hovers over the message. */\n  onMouseEnter?: (event: { id: string }) => void;\n  /* Callback that runs when the mouse pointer leaves the message. */\n  onMouseLeave?: (event: { id: string }) => void;\n  /* Callback that runs when the author's name or Avatar has been clicked. */\n  onUserClick?: (event: { id: string; username: string }, clickEvent?: MouseEvent) => void;\n  /* Callback that runs when the comment button has been clicked. */\n  onCommentClick: (event: { id: string; username: string }) => void;\n  /* Callback that runs when the like button has been clicked. */\n  onLikeClick: (event: { id: string; user: MenuItemProps }) => void;\n  /* Callback that runs when the like count on a message is hovered, focused, or clicked. */\n  onLikeCountInteraction?: () => void;\n  /* Callback that runs when the bottom of the extended like list Modal is reached, allowing for more likes to be loaded. */\n  onLoadMoreLikes?: () => void;\n  /* A loading indicator for the likes Modal. */\n  likesLoading?: boolean;\n}\n\nexport interface DefaultEditConfig extends Pick<FeedCompositionBaseProps, 'progress' | 'banners'> {\n  editContent?: never;\n  /* Callback function for the update button. */\n  onEditSubmit: (event: {\n    id: FeedPostBaseProps['id'];\n    value: string;\n    visibility?: Visibility;\n    recipients?: RecipientMenuItem[];\n  }) => void;\n  /* Callback function for the cancel button. */\n  onEditCancel?: (id: FeedPostBaseProps['id']) => void;\n  /** Props for the private recipient Combobox. */\n  recipientInput?: RecipientInputProps;\n}\n\nexport interface CustomEditConfig extends Pick<FeedCompositionBaseProps, 'progress' | 'banners'> {\n  /* The content composing the custom post type. */\n  editContent: ReactNode;\n  /* Callback function for the update button. */\n  onEditSubmit: (event: {\n    id: FeedPostBaseProps['id'];\n    visibility?: Visibility;\n    recipients?: RecipientMenuItem[];\n  }) => void;\n  /* Callback function for the cancel button. */\n  onEditCancel: (id: FeedPostBaseProps['id']) => void;\n  /** Props for the private recipient Combobox. */\n  recipientInput?: RecipientInputProps;\n}\n\nexport type FeedPostProps = WithAttributes<\n  'div',\n  FeedPostBaseProps & {\n    /* Configuration for editing the post. */\n    editConfig?: DefaultEditConfig | CustomEditConfig;\n    /*\n     * The type of message. If private, then only the designated recipients will be able to view the message.\n     * @default 'public'\n     */\n    visibility?: Visibility;\n    /* The type of the post. */\n    postType?: PostType;\n    /* The set of recipients assigned to a private message. */\n    recipients?: RecipientMenuItem[];\n    /* The total number of private recipients. */\n    recipientsCount?: number;\n    /* The context of the message. */\n    postContext?: ReactElement | string;\n    /* Callback that runs when the private recipient icon on a post is hovered, focused, or clicked. */\n    onRecipientInteraction?: () => void;\n    /* Callback that runs when the bottom of the extended private recipient list Modal is reached, allowing for more recipients to be loaded. */\n    onLoadMoreRecipients?: () => void;\n    /* A loading indicator for the recipients Modal. */\n    recipientsLoading?: boolean;\n    /* Props that will be passed into the reply input, see FeedReplyInput for more information. */\n    replyInput: OmitStrict<FeedCompositionBaseProps, 'id'> & DefaultPostConfig;\n    /* Determines if the reply input should be rendered. */\n    replyInputShown?: boolean;\n    /* An array to of replies for this message. */\n    replies?: ReactElement[];\n    /* A total count of all replies. */\n    replyCount?: number;\n    /* Callback that runs when the user clicks Show more button for the replies. */\n    onShowMoreReplies?: (event: { id: FeedPostBaseProps['id'] }) => void;\n    /* Callback that runs when the user clicks Show less button for the replies. */\n    onShowLessReplies?: (event: { id: FeedPostBaseProps['id'] }) => void;\n    /* A loading indicator for the replies. */\n    repliesLoading?: boolean;\n  }\n>;\n\nexport type FeedReplyProps = WithAttributes<\n  'div',\n  FeedPostBaseProps & {\n    /* Configuration for editing the post. */\n    editConfig?: DefaultEditConfig;\n  }\n>;\n"]}

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

@@ -1,7 +1,6 @@
-import type { FC } from 'react';
 import type { FeedAttachmentsProps } from './Feed.types';
-export declare const StyledImagePreview: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledImagePreview: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAttachmentsRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FeedAttachmentsProps, never>;
-declare const FeedAttachments: FC<FeedAttachmentsProps>;
+declare const FeedAttachments: import("react").ForwardRefExoticComponent<Omit<FeedAttachmentsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default FeedAttachments;
 //# sourceMappingURL=FeedAttachments.d.ts.map

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":"AACA,OAAO,KAAK,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAOjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEzD,eAAO,MAAM,kBAAkB,0QAqB7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,2HAKlC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2B5C,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FeedAttachments.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEzD,eAAO,MAAM,kBAAkB,yPAqB7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,2HASlC,CAAC;AAIH,QAAA,MAAM,eAAe,8HAoBnB,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/lib/components/Feed/FeedAttachments.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useContext } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, usePrevious, useI18n, FileList } from '@pega/cosmos-react-core';
+import { defaultThemeProp, FileList, useConsolidatedRef } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
-import { FeedContext } from './Feed.context';
+import { StyledOpenGraphAnchor } from '../OpenGraphPreview/OpenGraphPreview.styles';
+import OpenGraphPreview from '../OpenGraphPreview';
 export const StyledImagePreview = styled(BareButton)(({ theme }) => {
     return css `
     line-height: 0;
@@ -31,25 +32,17 @@ export const StyledAttachmentsRegion = styled.div(({ variant, theme }) => {
     return css `
     margin: ${theme.base.spacing} calc(5 * ${theme.base.spacing}) 0
       calc(${variant === 'post' ? 6 : 5} * ${theme.base.spacing});
+
+    ${StyledOpenGraphAnchor} {
+      margin-block-end: calc(${theme.base.spacing} / 2);
+    }
   `;
 });
 StyledAttachmentsRegion.defaultProps = defaultThemeProp;
 const FeedAttachments = forwardRef(function FeedAttachments(props, ref) {
-    const { variant, attachments = [], onDownloadAll } = 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);
-            const timeoutId = announce(t(`feed_attachments_${difference > 0 ? 'added' : 'removed'}`, [normalizedDifference], {
-                count: normalizedDifference
-            }));
-            return () => clearTimeout(timeoutId);
-        }
-    }, [attachments]);
-    return (_jsx(StyledAttachmentsRegion, { variant: variant, children: _jsx(FileList, { type: 'item', items: attachments, onDownloadAll: onDownloadAll, ref: ref }) }));
+    const { variant, attachments = [], openGraphData, disabled, onDownloadAll } = props;
+    const containerRef = useConsolidatedRef(ref);
+    return (_jsxs(StyledAttachmentsRegion, { variant: variant, ref: containerRef, children: [openGraphData && _jsx(OpenGraphPreview, { data: openGraphData, containerRef: containerRef }), _jsx(FileList, { type: 'item', items: attachments, disabled: disabled, onDownloadAll: onDownloadAll, ref: ref })] }));
 });
 export default FeedAttachments;
 //# sourceMappingURL=FeedAttachments.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedAttachments.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC3F,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;;;gCAGoB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;oBAOvC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;kCAIzB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAK1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;aAClD,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;GAC5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,eAAe,GAA6B,UAAU,CAAC,SAAS,eAAe,CACnF,KAA4C,EAC5C,GAAgC;IAEhC,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,EAAE,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,MAAM,KAAK,eAAe,EAAE,MAAM,EAAE,CAAC;YACnD,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;YAC/D,MAAM,oBAAoB,GAAG,UAAU,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACpE,MAAM,SAAS,GAAG,QAAQ,CACxB,CAAC,CAAC,oBAAoB,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,EAAE;gBACpF,KAAK,EAAE,oBAAoB;aAC5B,CAAC,CACH,CAAC;YACF,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,KAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,YACvC,KAAC,QAAQ,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,GAAI,GAC5D,CAC3B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, useEffect, useContext } from 'react';\nimport type { FC, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, usePrevious, useI18n, FileList } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { FeedContext } from './Feed.context';\nimport type { FeedAttachmentsProps } from './Feed.types';\n\nexport const StyledImagePreview = styled(BareButton)(({ theme }) => {\n  return css`\n    line-height: 0;\n    width: fit-content;\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: 10rem;\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledImagePreview.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsRegion = styled.div<FeedAttachmentsProps>(({ variant, theme }) => {\n  return css`\n    margin: ${theme.base.spacing} calc(5 * ${theme.base.spacing}) 0\n      calc(${variant === 'post' ? 6 : 5} * ${theme.base.spacing});\n  `;\n});\n\nStyledAttachmentsRegion.defaultProps = defaultThemeProp;\n\nconst FeedAttachments: FC<FeedAttachmentsProps> = forwardRef(function FeedAttachments(\n  props: PropsWithoutRef<FeedAttachmentsProps>,\n  ref: FeedAttachmentsProps['ref']\n) {\n  const { variant, attachments = [], onDownloadAll } = 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      const timeoutId = announce(\n        t(`feed_attachments_${difference > 0 ? 'added' : 'removed'}`, [normalizedDifference], {\n          count: normalizedDifference\n        })\n      );\n      return () => clearTimeout(timeoutId);\n    }\n  }, [attachments]);\n\n  return (\n    <StyledAttachmentsRegion variant={variant}>\n      <FileList type='item' items={attachments} onDownloadAll={onDownloadAll} ref={ref} />\n    </StyledAttachmentsRegion>\n  );\n});\n\nexport default FeedAttachments;\n"]}
+{"version":3,"file":"FeedAttachments.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AACpF,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AAInD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;;;gCAGoB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;oBAOvC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;kCAIzB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAK1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;aAClD,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEzD,qBAAqB;+BACI,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,eAAe,GAAG,UAAU,CAGhC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAEpF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,OAAO,CACL,MAAC,uBAAuB,IAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,aACzD,aAAa,IAAI,KAAC,gBAAgB,IAAC,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,GAAI,EACvF,KAAC,QAAQ,IACP,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,GAAG,GACR,IACsB,CAC3B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { RefElement } from '@pega/cosmos-react-core';\nimport { defaultThemeProp, FileList, useConsolidatedRef } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { StyledOpenGraphAnchor } from '../OpenGraphPreview/OpenGraphPreview.styles';\nimport OpenGraphPreview from '../OpenGraphPreview';\n\nimport type { FeedAttachmentsProps } from './Feed.types';\n\nexport const StyledImagePreview = styled(BareButton)(({ theme }) => {\n  return css`\n    line-height: 0;\n    width: fit-content;\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: 10rem;\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledImagePreview.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsRegion = styled.div<FeedAttachmentsProps>(({ variant, theme }) => {\n  return css`\n    margin: ${theme.base.spacing} calc(5 * ${theme.base.spacing}) 0\n      calc(${variant === 'post' ? 6 : 5} * ${theme.base.spacing});\n\n    ${StyledOpenGraphAnchor} {\n      margin-block-end: calc(${theme.base.spacing} / 2);\n    }\n  `;\n});\n\nStyledAttachmentsRegion.defaultProps = defaultThemeProp;\n\nconst FeedAttachments = forwardRef<\n  RefElement<FeedAttachmentsProps>,\n  PropsWithoutRef<FeedAttachmentsProps>\n>(function FeedAttachments(props, ref) {\n  const { variant, attachments = [], openGraphData, disabled, onDownloadAll } = props;\n\n  const containerRef = useConsolidatedRef(ref);\n\n  return (\n    <StyledAttachmentsRegion variant={variant} ref={containerRef}>\n      {openGraphData && <OpenGraphPreview data={openGraphData} containerRef={containerRef} />}\n      <FileList\n        type='item'\n        items={attachments}\n        disabled={disabled}\n        onDownloadAll={onDownloadAll}\n        ref={ref}\n      />\n    </StyledAttachmentsRegion>\n  );\n});\n\nexport default FeedAttachments;\n"]}

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

@@ -1,6 +1,5 @@
-import type { FC } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { FeedContentProps } from './Feed.types';
-declare const FeedContent: FC<FeedContentProps & ForwardProps>;
+declare const FeedContent: ForwardRefForwardPropsComponent<FeedContentProps>;
 export default FeedContent;
 //# sourceMappingURL=FeedContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedContent.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQrD,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAoEnD,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FeedContent.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGrD,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAWlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Feed/FeedContent.js

@@ -1,46 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useMemo, useRef, useEffect, useContext } from 'react';
-import styled from 'styled-components';
-import { Button, ExpandCollapse, Flex } from '@pega/cosmos-react-core';
-import { RichTextViewer } from '@pega/cosmos-react-rte';
-import { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';
-import { FeedContext } from './Feed.context';
-const StyledContent = styled.div `
-  ${StyledEditorContainer} {
-    padding: 0;
-  }
-`;
-const FeedContent = forwardRef(function FeedContent({ children, maxContentHeight = Infinity, ...restProps }, ref) {
-    const { interactionRenderers, markdownMap } = useContext(FeedContext);
-    const [collapsed, setCollapsed] = useState(true);
-    const [exceedsMaxHeight, setExceedsMaxHeight] = useState(true);
-    const rtvRef = useRef(null);
-    useEffect(() => {
-        if (!rtvRef.current)
-            return;
-        const observer = new ResizeObserver(entries => {
-            const exceedsHeight = entries.some(({ target, contentRect }) => {
-                if (target !== rtvRef.current)
-                    return;
-                return contentRect.height > maxContentHeight;
-            });
-            setExceedsMaxHeight(exceedsHeight);
-        });
-        observer.observe(rtvRef.current);
-        return () => {
-            observer.disconnect();
-        };
-    }, [rtvRef.current, maxContentHeight]);
-    return useMemo(() => typeof children === 'string' ? (_jsxs(Flex, { as: StyledContent, ref: ref, container: { direction: 'column', gap: 1 }, children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content', ...restProps, children: _jsx(RichTextViewer, { ref: rtvRef, content: children, type: 'markdown', interactionRenderers: interactionRenderers, markdownMap: markdownMap }) }), exceedsMaxHeight && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? 'Show more' : 'Show less' }) }))] })) : (children), [
-        children,
-        collapsed,
-        exceedsMaxHeight,
-        interactionRenderers,
-        markdownMap,
-        maxContentHeight,
-        ref,
-        restProps
-    ]);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import FeedRichTextViewer from './FeedRichTextViewer';
+const FeedContent = forwardRef(function FeedContent({ children, onLinkRender, ...restProps }, ref) {
+    return typeof children === 'string' ? (_jsx(FeedRichTextViewer, { ...restProps, ref: ref, content: children, onLinkRender: onLinkRender })) : (children);
 });
 export default FeedContent;
 //# sourceMappingURL=FeedContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedContent.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4EAA4E,CAAC;AAEnH,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;IAC5B,qBAAqB;;;CAGxB,CAAC;AAEF,MAAM,WAAW,GAAwC,UAAU,CAAC,SAAS,WAAW,CACtF,EAAE,QAAQ,EAAE,gBAAgB,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAqC,EAC1F,GAA4B;IAE5B,MAAM,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,CAAC,OAAO;YAAE,OAAO;QAE5B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAC5C,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;gBAC7D,IAAI,MAAM,KAAK,MAAM,CAAC,OAAO;oBAAE,OAAO;gBAEtC,OAAO,WAAW,CAAC,MAAM,GAAG,gBAAgB,CAAC;YAC/C,CAAC,CAAC,CAAC;YAEH,mBAAmB,CAAC,aAAa,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAEjC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEvC,OAAO,OAAO,CACZ,GAAG,EAAE,CACH,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,MAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC3E,KAAC,cAAc,IACb,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,aAAa,KAC3D,SAAS,YAEb,KAAC,cAAc,IACb,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAC,UAAU,EACf,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,WAAW,GACxB,GACa,EAChB,gBAAgB,IAAI,CACnB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,YACpE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,GAC/B,GACJ,CACR,IACI,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,EACH;QACE,QAAQ;QACR,SAAS;QACT,gBAAgB;QAChB,oBAAoB;QACpB,WAAW;QACX,gBAAgB;QAChB,GAAG;QACH,SAAS;KACV,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, useState, useMemo, useRef, useEffect, useContext } from 'react';\nimport type { FC, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Button, ExpandCollapse, Flex } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';\n\nimport { FeedContext } from './Feed.context';\nimport type { FeedContentProps } from './Feed.types';\n\nconst StyledContent = styled.div`\n  ${StyledEditorContainer} {\n    padding: 0;\n  }\n`;\n\nconst FeedContent: FC<FeedContentProps & ForwardProps> = forwardRef(function FeedContent(\n  { children, maxContentHeight = Infinity, ...restProps }: PropsWithoutRef<FeedContentProps>,\n  ref: FeedContentProps['ref']\n) {\n  const { interactionRenderers, markdownMap } = useContext(FeedContext);\n  const [collapsed, setCollapsed] = useState(true);\n  const [exceedsMaxHeight, setExceedsMaxHeight] = useState(true);\n  const rtvRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!rtvRef.current) return;\n\n    const observer = new ResizeObserver(entries => {\n      const exceedsHeight = entries.some(({ target, contentRect }) => {\n        if (target !== rtvRef.current) return;\n\n        return contentRect.height > maxContentHeight;\n      });\n\n      setExceedsMaxHeight(exceedsHeight);\n    });\n\n    observer.observe(rtvRef.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [rtvRef.current, maxContentHeight]);\n\n  return useMemo(\n    () =>\n      typeof children === 'string' ? (\n        <Flex as={StyledContent} ref={ref} container={{ direction: 'column', gap: 1 }}>\n          <ExpandCollapse\n            collapsed={collapsed}\n            min={exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content'}\n            {...restProps}\n          >\n            <RichTextViewer\n              ref={rtvRef}\n              content={children}\n              type='markdown'\n              interactionRenderers={interactionRenderers}\n              markdownMap={markdownMap}\n            />\n          </ExpandCollapse>\n          {exceedsMaxHeight && (\n            <Flex container={{ justify: 'center' }}>\n              <Button variant='link' onClick={() => setCollapsed(current => !current)}>\n                {collapsed ? 'Show more' : 'Show less'}\n              </Button>\n            </Flex>\n          )}\n        </Flex>\n      ) : (\n        children\n      ),\n    [\n      children,\n      collapsed,\n      exceedsMaxHeight,\n      interactionRenderers,\n      markdownMap,\n      maxContentHeight,\n      ref,\n      restProps\n    ]\n  );\n});\n\nexport default FeedContent;\n"]}
+{"version":3,"file":"FeedContent.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,GAAsD,UAAU,CAC/E,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,SAAS,EAAqC,EAC3E,GAA4B;IAE5B,OAAO,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpC,KAAC,kBAAkB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,GAAI,CAC/F,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { FeedContentProps } from './Feed.types';\nimport FeedRichTextViewer from './FeedRichTextViewer';\n\nconst FeedContent: ForwardRefForwardPropsComponent<FeedContentProps> = forwardRef(\n  function FeedContent(\n    { children, onLinkRender, ...restProps }: PropsWithoutRef<FeedContentProps>,\n    ref: FeedContentProps['ref']\n  ) {\n    return typeof children === 'string' ? (\n      <FeedRichTextViewer {...restProps} ref={ref} content={children} onLinkRender={onLinkRender} />\n    ) : (\n      children\n    );\n  }\n);\n\nexport default FeedContent;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedContentFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContentFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAkBhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAW3D,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAkGjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FeedContentFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContentFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAiBhC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAW3D,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAsFjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Feed/FeedContentFooter.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { Button, Count, defaultThemeProp, Flex, Icon, Progress, Text, useI18n, useUID } from '@pega/cosmos-react-core';
 import FeedButton from './FeedButton';
 import FeedLikeButton from './FeedLikeButton';
-import { FeedReplyContext } from './Feed.context';
 const StyledFeedContentFooter = styled.div(({ theme }) => {
     return css `
     margin-block-start: ${theme.base.spacing};
@@ -13,22 +11,11 @@ const StyledFeedContentFooter = styled.div(({ theme }) => {
 });
 StyledFeedContentFooter.defaultProps = defaultThemeProp;
 const FeedContentFooter = (props) => {
-    const { variant, id, username, liked, likes, likeCount, interactionsEnabled = true, likesLoading, replies = [], replyCount, repliesLoading, onCommentClick, onLikeClick, onLikeCountInteraction, onLoadMoreLikes, onShowMoreReplies, onShowLessReplies, replyInputOpen, setReplyInputOpen } = props;
+    const { variant, id, username, liked, likes, likeCount, interactionsEnabled = true, likesLoading, replies = [], replyCount, repliesLoading, onCommentClick, onLikeClick, onLikeCountInteraction, onLoadMoreLikes, onShowMoreReplies, onShowLessReplies } = props;
     const t = useI18n();
     const commentCountId = useUID();
-    const { onShowReplyInput } = useContext(FeedReplyContext);
     const numReplies = replyCount || replies.length;
-    return (_jsxs(Flex, { as: StyledFeedContentFooter, container: { justify: 'between', alignItems: 'center', wrap: 'wrap', gap: 1 }, children: [interactionsEnabled ? (_jsxs(Flex, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { variant: 'simple', as: FeedButton, icon: true, compact: true, onClick: () => {
-                                    onCommentClick?.({ id, username });
-                                    if (variant === 'post') {
-                                        if (!replyInputOpen) {
-                                            setReplyInputOpen?.(true);
-                                        }
-                                    }
-                                    else {
-                                        onShowReplyInput?.();
-                                    }
-                                }, label: t('feed_comment_label'), "aria-describedby": variant === 'post' && numReplies > 0 ? commentCountId : undefined, children: _jsx(Icon, { name: 'chat' }) }), numReplies > 0 && (_jsx(Count, { "aria-label": t('feed_post_comments', [numReplies], { count: numReplies }), id: commentCountId, children: numReplies }))] }), _jsx(FeedLikeButton, { id: id, onLikeClick: onLikeClick, onLikeCountInteraction: onLikeCountInteraction, onLoadMoreLikes: onLoadMoreLikes, likesLoading: likesLoading, liked: liked, likes: likes, likeCount: likeCount })] })) : (_jsx("div", {})), (onShowLessReplies || onShowMoreReplies) && (_jsxs(Flex, { container: { gap: 0.5 }, children: [replies.length !== numReplies && (_jsxs(_Fragment, { children: [_jsx(Text, { children: t('showing_num_of_num', [replies.length, numReplies]) }), _jsx("span", { children: "\u2022" })] })), onShowMoreReplies && replies.length < numReplies && (_jsx(Button, { variant: 'link', onClick: () => onShowMoreReplies({ id }), children: t('show_more') })), repliesLoading && _jsx(Progress, { placement: 'inline' })] }))] }));
+    return (_jsxs(Flex, { as: StyledFeedContentFooter, container: { justify: 'between', alignItems: 'center', wrap: 'wrap', gap: 1 }, children: [interactionsEnabled ? (_jsxs(Flex, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { variant: 'simple', as: FeedButton, icon: true, compact: true, onClick: () => onCommentClick?.({ id, username }), label: t('feed_comment_label'), "aria-describedby": variant === 'post' && numReplies > 0 ? commentCountId : undefined, children: _jsx(Icon, { name: 'chat' }) }), numReplies > 0 && (_jsx(Count, { "aria-label": t('feed_post_comments', [numReplies], { count: numReplies }), id: commentCountId, children: numReplies }))] }), _jsx(FeedLikeButton, { id: id, onLikeClick: onLikeClick, onLikeCountInteraction: onLikeCountInteraction, onLoadMoreLikes: onLoadMoreLikes, likesLoading: likesLoading, liked: liked, likes: likes, likeCount: likeCount })] })) : (_jsx("div", {})), (onShowLessReplies || onShowMoreReplies) && (_jsxs(Flex, { container: { gap: 0.5 }, children: [replies.length !== numReplies && (_jsxs(_Fragment, { children: [_jsx(Text, { children: t('showing_num_of_num', [replies.length, numReplies]) }), _jsx("span", { children: "\u2022" })] })), onShowMoreReplies && replies.length < numReplies && (_jsx(Button, { variant: 'link', onClick: () => onShowMoreReplies({ id }), children: t('show_more') })), repliesLoading && _jsx(Progress, { placement: 'inline' })] }))] }));
 };
 export default FeedContentFooter;
 //# sourceMappingURL=FeedContentFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedContentFooter.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedContentFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext } from 'react';\nimport type { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Count,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  Progress,\n  Text,\n  useI18n,\n  useUID\n} from '@pega/cosmos-react-core';\n\nimport FeedButton from './FeedButton';\nimport FeedLikeButton from './FeedLikeButton';\nimport { FeedReplyContext } from './Feed.context';\nimport type { FeedContentFooterProps } from './Feed.types';\n\nconst StyledFeedContentFooter = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n    margin-inline-end: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledFeedContentFooter.defaultProps = defaultThemeProp;\n\nconst FeedContentFooter: FC<FeedContentFooterProps> = (props: FeedContentFooterProps) => {\n  const {\n    variant,\n    id,\n    username,\n    liked,\n    likes,\n    likeCount,\n    interactionsEnabled = true,\n    likesLoading,\n    replies = [],\n    replyCount,\n    repliesLoading,\n    onCommentClick,\n    onLikeClick,\n    onLikeCountInteraction,\n    onLoadMoreLikes,\n    onShowMoreReplies,\n    onShowLessReplies,\n    replyInputOpen,\n    setReplyInputOpen\n  } = props;\n\n  const t = useI18n();\n  const commentCountId = useUID();\n  const { onShowReplyInput } = useContext(FeedReplyContext);\n\n  const numReplies = replyCount || replies.length;\n\n  return (\n    <Flex\n      as={StyledFeedContentFooter}\n      container={{ justify: 'between', alignItems: 'center', wrap: 'wrap', gap: 1 }}\n    >\n      {interactionsEnabled ? (\n        <Flex container={{ gap: 2 }}>\n          <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n            <Button\n              variant='simple'\n              as={FeedButton}\n              icon\n              compact\n              onClick={() => {\n                onCommentClick?.({ id, username });\n                if (variant === 'post') {\n                  if (!replyInputOpen) {\n                    setReplyInputOpen?.(true);\n                  }\n                } else {\n                  onShowReplyInput?.();\n                }\n              }}\n              label={t('feed_comment_label')}\n              aria-describedby={variant === 'post' && numReplies > 0 ? commentCountId : undefined}\n            >\n              <Icon name='chat' />\n            </Button>\n            {numReplies > 0 && (\n              <Count\n                aria-label={t('feed_post_comments', [numReplies], { count: numReplies })}\n                id={commentCountId}\n              >\n                {numReplies}\n              </Count>\n            )}\n          </Flex>\n          <FeedLikeButton\n            id={id}\n            onLikeClick={onLikeClick}\n            onLikeCountInteraction={onLikeCountInteraction}\n            onLoadMoreLikes={onLoadMoreLikes}\n            likesLoading={likesLoading}\n            liked={liked}\n            likes={likes}\n            likeCount={likeCount}\n          />\n        </Flex>\n      ) : (\n        <div />\n      )}\n      {(onShowLessReplies || onShowMoreReplies) && (\n        <Flex container={{ gap: 0.5 }}>\n          {replies.length !== numReplies && (\n            <>\n              <Text>{t('showing_num_of_num', [replies.length, numReplies])}</Text>\n              <span>&bull;</span>\n            </>\n          )}\n          {onShowMoreReplies && replies.length < numReplies && (\n            <Button variant='link' onClick={() => onShowMoreReplies({ id })}>\n              {t('show_more')}\n            </Button>\n          )}\n          {repliesLoading && <Progress placement='inline' />}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default FeedContentFooter;\n"]}
+{"version":3,"file":"FeedContentFooter.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedContentFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Count,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  Progress,\n  Text,\n  useI18n,\n  useUID\n} from '@pega/cosmos-react-core';\n\nimport FeedButton from './FeedButton';\nimport FeedLikeButton from './FeedLikeButton';\nimport type { FeedContentFooterProps } from './Feed.types';\n\nconst StyledFeedContentFooter = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n    margin-inline-end: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledFeedContentFooter.defaultProps = defaultThemeProp;\n\nconst FeedContentFooter: FC<FeedContentFooterProps> = (props: FeedContentFooterProps) => {\n  const {\n    variant,\n    id,\n    username,\n    liked,\n    likes,\n    likeCount,\n    interactionsEnabled = true,\n    likesLoading,\n    replies = [],\n    replyCount,\n    repliesLoading,\n    onCommentClick,\n    onLikeClick,\n    onLikeCountInteraction,\n    onLoadMoreLikes,\n    onShowMoreReplies,\n    onShowLessReplies\n  } = props;\n\n  const t = useI18n();\n  const commentCountId = useUID();\n\n  const numReplies = replyCount || replies.length;\n\n  return (\n    <Flex\n      as={StyledFeedContentFooter}\n      container={{ justify: 'between', alignItems: 'center', wrap: 'wrap', gap: 1 }}\n    >\n      {interactionsEnabled ? (\n        <Flex container={{ gap: 2 }}>\n          <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n            <Button\n              variant='simple'\n              as={FeedButton}\n              icon\n              compact\n              onClick={() => onCommentClick?.({ id, username })}\n              label={t('feed_comment_label')}\n              aria-describedby={variant === 'post' && numReplies > 0 ? commentCountId : undefined}\n            >\n              <Icon name='chat' />\n            </Button>\n            {numReplies > 0 && (\n              <Count\n                aria-label={t('feed_post_comments', [numReplies], { count: numReplies })}\n                id={commentCountId}\n              >\n                {numReplies}\n              </Count>\n            )}\n          </Flex>\n          <FeedLikeButton\n            id={id}\n            onLikeClick={onLikeClick}\n            onLikeCountInteraction={onLikeCountInteraction}\n            onLoadMoreLikes={onLoadMoreLikes}\n            likesLoading={likesLoading}\n            liked={liked}\n            likes={likes}\n            likeCount={likeCount}\n          />\n        </Flex>\n      ) : (\n        <div />\n      )}\n      {(onShowLessReplies || onShowMoreReplies) && (\n        <Flex container={{ gap: 0.5 }}>\n          {replies.length !== numReplies && (\n            <>\n              <Text>{t('showing_num_of_num', [replies.length, numReplies])}</Text>\n              <span>&bull;</span>\n            </>\n          )}\n          {onShowMoreReplies && replies.length < numReplies && (\n            <Button variant='link' onClick={() => onShowMoreReplies({ id })}>\n              {t('show_more')}\n            </Button>\n          )}\n          {repliesLoading && <Progress placement='inline' />}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default FeedContentFooter;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedContentHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContentHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAgC5C,OAAO,KAAK,EAAE,sBAAsB,EAAsB,MAAM,cAAc,CAAC;AAsB/E,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA+MjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FeedContentHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContentHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAmC5C,OAAO,KAAK,EAAE,sBAAsB,EAAsB,MAAM,cAAc,CAAC;AAoC/E,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAmOjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Feed/FeedContentHeader.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Avatar, Button, DateTimeDisplay, defaultThemeProp, Flex, Icon, MenuButton, MetaList, StyledSecondary, SummaryItem, Text, Tooltip, useConfiguration, useElement, useI18n, useModalManager } from '@pega/cosmos-react-core';
-import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { Avatar, Button, calculateFontSize, DateTimeDisplay, defaultThemeProp, Icon, isValidDate, MenuButton, MetaList, NoValue, registerIcon, StyledSecondary, SummaryItem, Text, Tooltip, useConfiguration, useElement, useI18n, useModalManager } from '@pega/cosmos-react-core';
 import { parseToDate } from '@pega/cosmos-react-core/lib/components/DateTime/Input/utils';
 import { formatDateTime } from '@pega/cosmos-react-core/lib/components/DateTime/utils';
 import { formatListToLocaleString } from '@pega/cosmos-react-core/lib/utils';
+import * as usersSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/users-solid.icon';
 import AutopilotAvatar from '../Autopilot/AutopilotAvatar';
 import { FeedContext } from './Feed.context';
 import FeedModalList from './FeedModalList';
 import FeedButton from './FeedButton';
+registerIcon(usersSolidIcon);
 const StyledFeedContentHeader = styled.div(({ theme }) => {
     return css `
     margin-block-end: ${theme.base.spacing};
@@ -27,8 +28,17 @@ StyledFeedContentHeader.defaultProps = defaultThemeProp;
 const StyledName = styled(Text) `
   display: inline-block;
 `;
+const StyledIcon = styled(Icon)(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    height: ${fontSizes[theme.components.text.secondary['font-size']]};
+    fill: ${theme.base.palette['foreground-color']};
+    padding-inline-end: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledIcon.defaultProps = defaultThemeProp;
 const FeedContentHeader = (props) => {
-    const { variant, id, fullname, username, postTimestamp, content, avatarSrc, icon, userStatus, postType, postContext, recipients = [], recipientsCount = 0, menuItems, edited, editTimestamp, recipientsLoading, onEditSubmit, onLoadMoreRecipients, onRecipientInteraction, onUserClick, setEditMode } = props;
+    const { variant, id, fullname, username, postTimestamp, avatarSrc, icon, userStatus, visibility, postType, postContext, recipients = [], recipientsCount = 0, menuItems, edited, editTimestamp, recipientsLoading, onEdit, onLoadMoreRecipients, onRecipientInteraction, onUserClick } = props;
     const { autopilotInfo: { id: autopilotId, label: autopilotLabel }, userInfo: loggedInUser } = useContext(FeedContext);
     const t = useI18n();
     const { locale } = useConfiguration();
@@ -37,70 +47,92 @@ const FeedContentHeader = (props) => {
     const [postTimestampEl, setPostTimestampEl] = useElement();
     const [editTimestampEl, setEditTimestampEl] = useElement();
     const autopilotAuthor = username === autopilotId;
-    const timestamps = [
+    const metaData = [
         _jsxs(_Fragment, { children: [_jsx(DateTimeDisplay, { ref: setPostTimestampEl, value: postTimestamp, variant: 'relative' }), postTimestamp && (_jsx(Tooltip, { target: postTimestampEl, children: formatDateTime(parseToDate(postTimestamp), {
                         t,
                         locale,
-                        format: 'short',
+                        format: 'medium',
                         variant: 'datetime',
                         timeZone: loggedInUser.timeZone
                     }) }))] })
     ];
     if (edited) {
-        timestamps.push(_jsxs(_Fragment, { children: [_jsx(Text, { ref: setEditTimestampEl, variant: 'secondary', children: t('edited', [_jsx(DateTimeDisplay, { value: editTimestamp, variant: 'relative' })]) }), editTimestamp && (_jsx(Tooltip, { target: editTimestampEl, children: formatDateTime(parseToDate(editTimestamp), {
+        metaData.push(_jsxs(_Fragment, { children: [_jsx(Text, { ref: setEditTimestampEl, variant: 'secondary', children: t('edited', [
+                        (editTimestamp || editTimestamp === 0) && isValidDate(parseToDate(editTimestamp)) ? (formatDateTime(parseToDate(editTimestamp), {
+                            t,
+                            locale,
+                            format: 'medium',
+                            variant: 'relative'
+                        })) : (_jsx(NoValue, {}))
+                    ]) }), editTimestamp && (_jsx(Tooltip, { target: editTimestampEl, children: formatDateTime(parseToDate(editTimestamp), {
                         t,
                         locale,
-                        format: 'short',
+                        format: 'medium',
                         variant: 'datetime',
                         timeZone: loggedInUser.timeZone
                     }) }))] }));
     }
+    if (postType) {
+        if (postType.icon) {
+            metaData.push(_jsxs(_Fragment, { children: [_jsx(StyledIcon, { name: postType.icon }), _jsx(Text, { variant: 'secondary', children: postType.label })] }));
+        }
+        else {
+            metaData.push(postType.label);
+        }
+    }
+    if (visibility === 'private') {
+        const recipientsList = recipients.map(x => x.primary);
+        if (recipientsList.length === 0) {
+            metaData.push(`${t('feed_visible_to')} ${t('you').toLowerCase()}`);
+        }
+        else if (recipientsList.length === 1) {
+            metaData.push(`${t('feed_visible_to')} ${recipients[0].primary}`);
+        }
+        else {
+            metaData.push(_jsxs(_Fragment, { children: [_jsxs(Text, { variant: 'secondary', children: [t('feed_visible_to'), " "] }), _jsxs(Button, { variant: 'link', onClick: () => {
+                            recipientsModalRef.current = create(FeedModalList, {
+                                heading: t('feed_visible_to'),
+                                listItems: recipients,
+                                onLoadMore: onLoadMoreRecipients,
+                                loading: recipientsLoading
+                            });
+                        }, onFocus: onRecipientInteraction, onMouseOver: onRecipientInteraction, "aria-label": `${t('feed_private')} ${t('feed_visible_to')} ${formatListToLocaleString(recipientsList, t, locale, {
+                            count: recipientsCount
+                        })}`, label: formatListToLocaleString(recipientsList, t, locale, {
+                            count: recipientsCount,
+                            separator: '\n'
+                        }), children: [recipientsCount, " ", t('feed_users').toLowerCase()] })] }));
+        }
+    }
     const userVisual = autopilotAuthor ? (_jsx(AutopilotAvatar, {})) : (_jsx(Avatar, { name: fullname, size: variant === 'post' ? 'l' : 'm', imageSrc: avatarSrc, icon: icon, status: userStatus }));
-    const recipientsList = recipients.map(x => x.primary);
+    const actionMenuItems = useMemo(() => {
+        let actions = [];
+        if (username === loggedInUser.username && onEdit) {
+            actions.push({
+                primary: t('edit'),
+                id: 'edit',
+                onClick: () => onEdit({ id, postType, visibility, recipients })
+            });
+        }
+        if (menuItems) {
+            actions = actions.concat(menuItems);
+        }
+        return actions;
+    }, [menuItems, username, loggedInUser.username, onEdit, id, postType, visibility, recipients]);
     useEffect(() => {
         if (recipients.length) {
             recipientsModalRef.current?.update({
-                count: recipientsCount,
-                heading: t('feed_recipients'),
+                heading: t('feed_visible_to'),
                 listItems: recipients,
                 onLoadMore: onLoadMoreRecipients,
                 loading: recipientsLoading
             });
         }
-    }, [recipientsCount, recipients, onLoadMoreRecipients, recipientsLoading]);
-    return (_jsx(SummaryItem, { as: StyledFeedContentHeader, visual: onUserClick ? (_jsx(BareButton, { onClick: (event) => {
-                onUserClick?.({ id, username }, event);
-            }, children: userVisual })) : (userVisual), primary: _jsxs("div", { children: [onUserClick ? (_jsx(Button, { variant: 'text', onClick: (event) => {
+    }, [recipients, onLoadMoreRecipients, recipientsLoading]);
+    return (_jsx(SummaryItem, { as: StyledFeedContentHeader, visual: userVisual, primary: _jsxs("div", { children: [onUserClick ? (_jsx(Button, { variant: 'text', onClick: (event) => {
                         onUserClick?.({ id, username }, event);
-                    }, children: _jsx(Text, { variant: 'h3', children: autopilotAuthor ? autopilotLabel : fullname }) })) : (_jsx(StyledName, { variant: 'h3', children: autopilotAuthor ? autopilotLabel : fullname })), postContext && _jsxs(Text, { variant: 'primary', children: [" ", t('feed_context', [postContext])] })] }), secondary: _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [postType === 'private' && (_jsx(Button, { variant: 'simple', as: FeedButton, icon: true, compact: true, onClick: recipients.length
-                        ? () => {
-                            if (recipientsCount > 3) {
-                                recipientsModalRef.current = create(FeedModalList, {
-                                    count: recipientsCount,
-                                    heading: t('feed_recipients'),
-                                    listItems: recipients,
-                                    onLoadMore: onLoadMoreRecipients,
-                                    loading: recipientsLoading
-                                });
-                            }
-                        }
-                        : onRecipientInteraction, onFocus: onRecipientInteraction, onMouseOver: onRecipientInteraction, "aria-label": `${t('feed_private_post')} ${t('feed_recipients')} ${formatListToLocaleString(recipientsList, t, locale, {
-                        count: recipientsCount
-                    })}`, label: `${t('feed_private_post')}:\n${formatListToLocaleString(recipientsList, t, locale, {
-                        count: recipientsCount,
-                        separator: '\n'
-                    }) || t('feed_private_post')}`, children: _jsx(Icon, { name: 'lock-closed-solid' }) })), _jsx(MetaList, { items: timestamps })] }), actions: menuItems ? (_jsx(MenuButton, { text: t('actions'), "aria-label": t('actions_for', [fullname]), menu: {
-                items: onEditSubmit && typeof content === 'string' && username === loggedInUser.username
-                    ? [
-                        {
-                            primary: t('edit'),
-                            id: 'edit',
-                            onClick: () => setEditMode(true),
-                            disabled: content.includes('<pega-autopilot/>')
-                        },
-                        ...menuItems
-                    ]
-                    : menuItems
+                    }, children: _jsx(Text, { variant: variant === 'post' ? 'h3' : 'h4', children: autopilotAuthor ? autopilotLabel : fullname }) })) : (_jsx(StyledName, { variant: variant === 'post' ? 'h3' : 'h4', children: autopilotAuthor ? autopilotLabel : fullname })), postContext && _jsxs(Text, { variant: 'primary', children: [" ", t('feed_context', [postContext])] })] }), secondary: _jsx(MetaList, { items: metaData }), actions: actionMenuItems.length ? (_jsx(MenuButton, { text: t('actions'), "aria-label": t('actions_for', [fullname]), menu: {
+                items: actionMenuItems
             }, icon: 'more', iconOnly: true, variant: 'simple' })) : undefined }));
 };
 export default FeedContentHeader;