@pega/cosmos-react-social 2.0.0-dev.2.0 → 2.0.0-dev.21.1

package/lib/components/Feed/Feed.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"FeedAttachments.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAEL,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,aAAa,GAAG,mBAAmB,GAAG,IAAI,CAAC;AAEvD,UAAU,oBAAoB;IAC5B,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,wGAYhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAoB7C,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FeedAttachments.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EAEL,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,aAAa,GAAG,mBAAmB,GAAG,IAAI,CAAC;AAEvD,UAAU,oBAAoB;IAC5B,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,wGAYhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAoB7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Feed/FeedAttachments.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { FileUploadItem, Grid, defaultThemeProp } from '@pega/cosmos-react-core';
 export const StyledFeedAttachments = styled.ul(props => {
@@ -16,13 +17,13 @@ export const StyledFeedAttachments = styled.ul(props => {
 StyledFeedAttachments.defaultProps = defaultThemeProp;
 const FeedAttachments = forwardRef((props, ref) => {
     const { attachments } = props;
-    return attachments && !!attachments.length ? (React.createElement(Grid, { ref: ref, as: StyledFeedAttachments, container: {
+    return attachments && !!attachments.length ? (_jsx(Grid, { ref: ref, as: StyledFeedAttachments, container: {
             cols: 'repeat(auto-fill, minmax(15rem, 1fr))',
             gap: 1
-        } }, Array.from(attachments).map(file => {
-        const { name, ...restProps } = file;
-        return React.createElement(FileUploadItem, { key: file.lastModified, name: name, ...restProps });
-    }))) : null;
+        }, children: Array.from(attachments).map(file => {
+            const { name, ...restProps } = file;
+            return _jsx(FileUploadItem, { name: name, ...restProps }, file.lastModified);
+        }) }, void 0)) : null;
 });
 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,KAAK,EAAE,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,cAAc,EAEd,IAAI,EACJ,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AASjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;0BAIN,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,eAAe,GAA6B,UAAU,CAC1D,CAAC,KAA4C,EAAE,GAAgC,EAAE,EAAE;IACjF,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE9B,OAAO,WAAW,IAAI,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3C,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,qBAAqB,EACzB,SAAS,EAAE;YACT,IAAI,EAAE,uCAAuC;YAC7C,GAAG,EAAE,CAAC;SACP,IAEA,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAClC,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,OAAO,oBAAC,cAAc,IAAC,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,KAAM,SAAS,GAAI,CAAC;IAC/E,CAAC,CAAC,CACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React, { FC, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  FileUploadItem,\n  FileUploadItemProps,\n  Grid,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nexport type AttachedFiles = FileUploadItemProps & File;\n\ninterface FeedAttachmentsProps {\n  attachments?: AttachedFiles[];\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledFeedAttachments = styled.ul(props => {\n  const { theme } = props;\n\n  return css`\n    margin: ${theme.base.spacing} 0;\n    overflow-x: auto;\n\n    > li {\n      background-color: ${theme.base.palette['primary-background']};\n      cursor: initial;\n    }\n  `;\n});\n\nStyledFeedAttachments.defaultProps = defaultThemeProp;\n\nconst FeedAttachments: FC<FeedAttachmentsProps> = forwardRef(\n  (props: PropsWithoutRef<FeedAttachmentsProps>, ref: FeedAttachmentsProps['ref']) => {\n    const { attachments } = props;\n\n    return attachments && !!attachments.length ? (\n      <Grid\n        ref={ref}\n        as={StyledFeedAttachments}\n        container={{\n          cols: 'repeat(auto-fill, minmax(15rem, 1fr))',\n          gap: 1\n        }}\n      >\n        {Array.from(attachments).map(file => {\n          const { name, ...restProps } = file;\n          return <FileUploadItem key={file.lastModified} name={name} {...restProps} />;\n        })}\n      </Grid>\n    ) : null;\n  }\n);\n\nexport default FeedAttachments;\n"]}
+{"version":3,"file":"FeedAttachments.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedAttachments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,cAAc,EAEd,IAAI,EACJ,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AASjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;0BAIN,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,eAAe,GAA6B,UAAU,CAC1D,CAAC,KAA4C,EAAE,GAAgC,EAAE,EAAE;IACjF,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE9B,OAAO,WAAW,IAAI,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3C,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,qBAAqB,EACzB,SAAS,EAAE;YACT,IAAI,EAAE,uCAAuC;YAC7C,GAAG,EAAE,CAAC;SACP,YAEA,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAClC,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC;YACpC,OAAO,KAAC,cAAc,IAAyB,IAAI,EAAE,IAAI,KAAM,SAAS,IAA5C,IAAI,CAAC,YAAY,CAA+B,CAAC;QAC/E,CAAC,CAAC,WACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  FileUploadItem,\n  FileUploadItemProps,\n  Grid,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nexport type AttachedFiles = FileUploadItemProps & File;\n\ninterface FeedAttachmentsProps {\n  attachments?: AttachedFiles[];\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledFeedAttachments = styled.ul(props => {\n  const { theme } = props;\n\n  return css`\n    margin: ${theme.base.spacing} 0;\n    overflow-x: auto;\n\n    > li {\n      background-color: ${theme.base.palette['primary-background']};\n      cursor: initial;\n    }\n  `;\n});\n\nStyledFeedAttachments.defaultProps = defaultThemeProp;\n\nconst FeedAttachments: FC<FeedAttachmentsProps> = forwardRef(\n  (props: PropsWithoutRef<FeedAttachmentsProps>, ref: FeedAttachmentsProps['ref']) => {\n    const { attachments } = props;\n\n    return attachments && !!attachments.length ? (\n      <Grid\n        ref={ref}\n        as={StyledFeedAttachments}\n        container={{\n          cols: 'repeat(auto-fill, minmax(15rem, 1fr))',\n          gap: 1\n        }}\n      >\n        {Array.from(attachments).map(file => {\n          const { name, ...restProps } = file;\n          return <FileUploadItem key={file.lastModified} name={name} {...restProps} />;\n        })}\n      </Grid>\n    ) : null;\n  }\n);\n\nexport default FeedAttachments;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedButton.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedButton.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,UAAU;;;SAkBd,CAAC;AAIH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FeedButton.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedButton.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,UAAU;;;SAkBd,CAAC;AAIH,eAAe,UAAU,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"FeedButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedButton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAA2C,KAAK,CAAC,EAAE;IACjF,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1C,OAAO,GAAG,CAAA;aACC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;wCAIzD,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGpD,IAAI;QACN,GAAG,CAAA;;;;KAIF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,eAAe,UAAU,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst FeedButton = styled.button<{ emphasized?: boolean; icon?: boolean }>(props => {\n  const { emphasized, icon, theme } = props;\n\n  return css`\n    color: ${emphasized ? theme.base.palette.interactive : theme.base.palette['foreground-color']};\n    vertical-align: top;\n\n    span {\n      margin-inline-start: calc(0.5 * ${theme.base.spacing});\n    }\n\n    ${icon &&\n    css`\n      display: inline-flex;\n      flex-direction: row;\n      align-items: center;\n    `}\n  `;\n});\n\nFeedButton.defaultProps = defaultThemeProp;\n\nexport default FeedButton;\n"]}
+{"version":3,"file":"FeedButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedButton.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAA2C,KAAK,CAAC,EAAE;IACjF,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1C,OAAO,GAAG,CAAA;aACC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;wCAIzD,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGpD,IAAI;QACN,GAAG,CAAA;;;;KAIF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,eAAe,UAAU,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst FeedButton = styled.button<{ emphasized?: boolean; icon?: boolean }>(props => {\n  const { emphasized, icon, theme } = props;\n\n  return css`\n    color: ${emphasized ? theme.base.palette.interactive : theme.base.palette['foreground-color']};\n    vertical-align: top;\n\n    span {\n      margin-inline-start: calc(0.5 * ${theme.base.spacing});\n    }\n\n    ${icon &&\n    css`\n      display: inline-flex;\n      flex-direction: row;\n      align-items: center;\n    `}\n  `;\n});\n\nFeedButton.defaultProps = defaultThemeProp;\n\nexport default FeedButton;\n"]}

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":"AAAA,OAAc,EACZ,EAAE,EACF,GAAG,EAOH,YAAY,EAEb,MAAM,OAAO,CAAC;AAEf,OAAO,EAAgC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKrF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA6DpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FeedContent.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAOH,YAAY,EAEb,MAAM,OAAO,CAAC;AAEf,OAAO,EAAgC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKrF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAsEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Feed/FeedContent.js

@@ -1,4 +1,5 @@
-import React, { forwardRef, useState, useMemo, useRef, useLayoutEffect, useContext } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo, useRef, useLayoutEffect, useContext } from 'react';
 import { Button, ExpandCollapse, Flex } from '@pega/cosmos-react-core';
 import { RichTextViewer } from '@pega/cosmos-react-rte';
 import { FeedContext } from './Feed.context';
@@ -23,11 +24,16 @@ const FeedContent = forwardRef(({ children, maxContentHeight = Infinity, ...rest
             observer.disconnect();
         };
     }, [rtvRef.current, maxContentHeight]);
-    return useMemo(() => typeof children === 'string' ? (React.createElement(Flex, { ref: ref, container: { direction: 'column', itemGap: 1 } },
-        React.createElement(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content', ...restProps },
-            React.createElement(RichTextViewer, { ref: rtvRef, content: children, type: 'markdown', interactionRenderers: interactionRenderers, markdownMap: markdownMap })),
-        exceedsMaxHeight && (React.createElement(Flex, { container: { justify: 'center' } },
-            React.createElement(Button, { variant: 'link', onClick: () => setCollapsed(current => !current) }, collapsed ? 'Show more' : 'Show less'))))) : (children), [children, collapsed, exceedsMaxHeight, interactionRenderers]);
+    return useMemo(() => typeof children === 'string' ? (_jsxs(Flex, { ref: ref, container: { direction: 'column', gap: 1 }, children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content', ...restProps, children: _jsx(RichTextViewer, { ref: rtvRef, content: children, type: 'markdown', interactionRenderers: interactionRenderers, markdownMap: markdownMap }, void 0) }, void 0), exceedsMaxHeight && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? 'Show more' : 'Show less' }, void 0) }, void 0))] }, void 0)) : (children), [
+        children,
+        collapsed,
+        exceedsMaxHeight,
+        interactionRenderers,
+        markdownMap,
+        maxContentHeight,
+        ref,
+        restProps
+    ]);
 });
 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,KAAK,EAAE,EAGZ,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EACN,eAAe,EAGf,UAAU,EACX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAY7C,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EAAE,QAAQ,EAAE,gBAAgB,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAqC,EAC1F,GAA4B,EAC5B,EAAE;IACF,MAAM,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE5C,eAAe,CAAC,GAAG,EAAE;QACnB,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,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE;QAC5D,oBAAC,cAAc,IACb,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,aAAa,KAC3D,SAAS;YAEb,oBAAC,cAAc,IACb,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAC,UAAU,EACf,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,WAAW,GACxB,CACa;QAChB,gBAAgB,IAAI,CACnB,oBAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;YACpC,oBAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IACpE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAC/B,CACJ,CACR,CACI,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,EACH,CAAC,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CAC9D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import React, {\n  FC,\n  Ref,\n  forwardRef,\n  useState,\n  useMemo,\n  useRef,\n  useLayoutEffect,\n  PropsWithoutRef,\n  ReactElement,\n  useContext\n} from 'react';\n\nimport { Button, ExpandCollapse, Flex, ForwardProps } from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedContentProps {\n  children: ReactElement | string;\n  /**\n   * A maximum height in pixels to display post content within before prompting to expand the post.\n   * @default Infinity\n   */\n  maxContentHeight?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst FeedContent: FC<FeedContentProps & ForwardProps> = forwardRef(\n  (\n    { children, maxContentHeight = Infinity, ...restProps }: PropsWithoutRef<FeedContentProps>,\n    ref: FeedContentProps['ref']\n  ) => {\n    const { interactionRenderers, markdownMap } = useContext(FeedContext);\n    const [collapsed, setCollapsed] = useState(true);\n    const [exceedsMaxHeight, setExceedsMaxHeight] = useState(true);\n    const rtvRef = useRef<HTMLDivElement>(null);\n\n    useLayoutEffect(() => {\n      if (!rtvRef.current) return;\n\n      const observer = new ResizeObserver(entries => {\n        const exceedsHeight = entries.some(({ target, contentRect }) => {\n          if (target !== rtvRef.current) return;\n\n          return contentRect.height > maxContentHeight;\n        });\n\n        setExceedsMaxHeight(exceedsHeight);\n      });\n\n      observer.observe(rtvRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [rtvRef.current, maxContentHeight]);\n\n    return useMemo(\n      () =>\n        typeof children === 'string' ? (\n          <Flex ref={ref} container={{ direction: 'column', itemGap: 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      [children, collapsed, exceedsMaxHeight, interactionRenderers]\n    );\n  }\n);\n\nexport default FeedContent;\n"]}
+{"version":3,"file":"FeedContent.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  useState,\n  useMemo,\n  useRef,\n  useLayoutEffect,\n  PropsWithoutRef,\n  ReactElement,\n  useContext\n} from 'react';\n\nimport { Button, ExpandCollapse, Flex, ForwardProps } from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedContentProps {\n  children: ReactElement | string;\n  /**\n   * A maximum height in pixels to display post content within before prompting to expand the post.\n   * @default Infinity\n   */\n  maxContentHeight?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst FeedContent: FC<FeedContentProps & ForwardProps> = forwardRef(\n  (\n    { children, maxContentHeight = Infinity, ...restProps }: PropsWithoutRef<FeedContentProps>,\n    ref: FeedContentProps['ref']\n  ) => {\n    const { interactionRenderers, markdownMap } = useContext(FeedContext);\n    const [collapsed, setCollapsed] = useState(true);\n    const [exceedsMaxHeight, setExceedsMaxHeight] = useState(true);\n    const rtvRef = useRef<HTMLDivElement>(null);\n\n    useLayoutEffect(() => {\n      if (!rtvRef.current) return;\n\n      const observer = new ResizeObserver(entries => {\n        const exceedsHeight = entries.some(({ target, contentRect }) => {\n          if (target !== rtvRef.current) return;\n\n          return contentRect.height > maxContentHeight;\n        });\n\n        setExceedsMaxHeight(exceedsHeight);\n      });\n\n      observer.observe(rtvRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [rtvRef.current, maxContentHeight]);\n\n    return useMemo(\n      () =>\n        typeof children === 'string' ? (\n          <Flex ref={ref} container={{ direction: 'column', gap: 1 }}>\n            <ExpandCollapse\n              collapsed={collapsed}\n              min={exceedsMaxHeight ? `${maxContentHeight}px` : 'max-content'}\n              {...restProps}\n            >\n              <RichTextViewer\n                ref={rtvRef}\n                content={children}\n                type='markdown'\n                interactionRenderers={interactionRenderers}\n                markdownMap={markdownMap}\n              />\n            </ExpandCollapse>\n            {exceedsMaxHeight && (\n              <Flex container={{ justify: 'center' }}>\n                <Button variant='link' onClick={() => setCollapsed(current => !current)}>\n                  {collapsed ? 'Show more' : 'Show less'}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        ) : (\n          children\n        ),\n      [\n        children,\n        collapsed,\n        exceedsMaxHeight,\n        interactionRenderers,\n        markdownMap,\n        maxContentHeight,\n        ref,\n        restProps\n      ]\n    );\n  }\n);\n\nexport default FeedContent;\n"]}

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { SummaryListItem } from '@pega/cosmos-react-core';
+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: SummaryListItem[];
+    /** A callback that is triggered when the bottom of the Modal list is scrolled into view so that additional data may be displayed. */
+    onLoadMore?: () => void;
+}
+declare const FeedModalList: FC<FeedModalListProps>;
+export default FeedModalList;
+//# sourceMappingURL=FeedModalList.d.ts.map

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

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

package/lib/components/Feed/FeedModalList.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Flex, Progress, useElement, StyledProgressRing, Count, Modal, SummaryListItems } from '@pega/cosmos-react-core';
+const StyledLoadMore = styled.div(({ theme, visible }) => {
+    return css `
+    ${visible &&
+        css `
+      margin-top: calc(2 * ${theme.base.spacing});
+    `}
+
+    ${StyledProgressRing} {
+      min-height: 0;
+      min-width: 0;
+
+      ${visible &&
+        css `
+        min-height: 2rem;
+        min-width: 2rem;
+      `}
+    }
+  `;
+});
+StyledLoadMore.defaultProps = defaultThemeProp;
+const FeedModalList = ({ count, heading, listItems, onLoadMore }) => {
+    const [loadMoreEl, setLoadMoreEl] = useElement();
+    const [listOverflows, setListOverflows] = useState(false);
+    const listOverflowsRef = useRef(false);
+    useEffect(() => {
+        if (loadMoreEl) {
+            const intersectionObserver = new IntersectionObserver(entries => {
+                if (!entries[0].isIntersecting) {
+                    setListOverflows(true);
+                    listOverflowsRef.current = true;
+                }
+                else if (entries[0].isIntersecting && listOverflowsRef.current) {
+                    onLoadMore?.();
+                }
+            });
+            intersectionObserver.observe(loadMoreEl);
+            return () => {
+                intersectionObserver.disconnect();
+            };
+        }
+    }, [loadMoreEl, listOverflowsRef.current]);
+    return (_jsxs(Modal, { heading: _jsxs(Flex, { container: { gap: 1 }, children: [heading, _jsx(Flex, { item: { alignSelf: 'center' }, as: Count, children: count }, void 0)] }, void 0), children: [_jsx(SummaryListItems, { items: listItems }, void 0), onLoadMore && (_jsx(Flex, { ref: setLoadMoreEl, as: StyledLoadMore, visible: listOverflows, container: { justify: 'center' }, children: _jsx(Progress, { placement: 'inline' }, void 0) }, void 0))] }, void 0));
+};
+export default FeedModalList;
+//# sourceMappingURL=FeedModalList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedModalList.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedModalList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,KAAK,EACL,KAAK,EACL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAajC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;MACN,OAAO;QACT,GAAG,CAAA;6BACsB,KAAK,CAAC,IAAI,CAAC,OAAO;KAC1C;;MAEC,kBAAkB;;;;QAIhB,OAAO;QACT,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,aAAa,GAA2B,CAAC,EAC7C,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACS,EAAE,EAAE;IACvB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAkB,CAAC;IACjE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE;YACd,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,OAAO,CAAC,EAAE;gBAC9D,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;oBAC9B,gBAAgB,CAAC,IAAI,CAAC,CAAC;oBACvB,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;iBACjC;qBAAM,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,gBAAgB,CAAC,OAAO,EAAE;oBAChE,UAAU,EAAE,EAAE,CAAC;iBAChB;YACH,CAAC,CAAC,CAAC;YAEH,oBAAoB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAEzC,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;YACpC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3C,OAAO,CACL,MAAC,KAAK,IACJ,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACxB,OAAO,EACR,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,YAC3C,KAAK,WACD,YACF,aAGT,KAAC,gBAAgB,IAAC,KAAK,EAAE,SAAS,WAAI,EAErC,UAAU,IAAI,CACb,KAAC,IAAI,IACH,GAAG,EAAE,aAAa,EAClB,EAAE,EAAE,cAAc,EAClB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAEhC,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,WAAG,WAC1B,CACR,YACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  SummaryListItem,\n  defaultThemeProp,\n  Flex,\n  Progress,\n  useElement,\n  StyledProgressRing,\n  Count,\n  Modal,\n  SummaryListItems\n} from '@pega/cosmos-react-core';\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: SummaryListItem[];\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}\n\nconst StyledLoadMore = styled.div<{ visible: boolean }>(({ theme, visible }) => {\n  return css`\n    ${visible &&\n    css`\n      margin-top: calc(2 * ${theme.base.spacing});\n    `}\n\n    ${StyledProgressRing} {\n      min-height: 0;\n      min-width: 0;\n\n      ${visible &&\n      css`\n        min-height: 2rem;\n        min-width: 2rem;\n      `}\n    }\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst FeedModalList: FC<FeedModalListProps> = ({\n  count,\n  heading,\n  listItems,\n  onLoadMore\n}: FeedModalListProps) => {\n  const [loadMoreEl, setLoadMoreEl] = useElement<HTMLDivElement>();\n  const [listOverflows, setListOverflows] = useState(false);\n  const listOverflowsRef = useRef(false);\n\n  useEffect(() => {\n    if (loadMoreEl) {\n      const intersectionObserver = new IntersectionObserver(entries => {\n        if (!entries[0].isIntersecting) {\n          setListOverflows(true);\n          listOverflowsRef.current = true;\n        } else if (entries[0].isIntersecting && listOverflowsRef.current) {\n          onLoadMore?.();\n        }\n      });\n\n      intersectionObserver.observe(loadMoreEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n      };\n    }\n  }, [loadMoreEl, listOverflowsRef.current]);\n\n  return (\n    <Modal\n      heading={\n        <Flex container={{ gap: 1 }}>\n          {heading}\n          <Flex item={{ alignSelf: 'center' }} as={Count}>\n            {count}\n          </Flex>\n        </Flex>\n      }\n    >\n      <SummaryListItems items={listItems} />\n\n      {onLoadMore && (\n        <Flex\n          ref={setLoadMoreEl}\n          as={StyledLoadMore}\n          visible={listOverflows}\n          container={{ justify: 'center' }}\n        >\n          <Progress placement='inline' />\n        </Flex>\n      )}\n    </Modal>\n  );\n};\n\nexport default FeedModalList;\n"]}

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

@@ -21,7 +21,7 @@ export interface FeedNewPostProps {
         attachments: AttachedFiles[];
         recipients: RecipientMenuItem[];
         username: string;
-        clear(): void;
+        clear: () => void;
     }) => void;
     autoFocus?: boolean;
     /** Array of private recipient options */
@@ -29,6 +29,7 @@ export interface FeedNewPostProps {
     /** Handler for new search on private recipient options */
     onRecipientSearch?: (newSearch: string) => void;
 }
+export declare const StyledTextAreaOverflow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFeedNewPost: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const FeedNewPost: FC<ForwardProps & FeedNewPostProps>;
 export default FeedNewPost;

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

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

package/lib/components/Feed/FeedNewPost.js

@@ -1,16 +1,28 @@
-import React, { useState, useRef, useContext, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { Avatar, Button, CardContent, Flex, Icon, StyledIcon, StyledCard, StyledPopover, defaultThemeProp, useAutoResize, useElement, useOuterEvent, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';
+import { Avatar, Button, CardContent, Flex, Icon, registerIcon, StyledIcon, StyledCard, StyledPopover, defaultThemeProp, useAutoResize, useElement, useOuterEvent, useI18n, ExpandCollapse, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { StyledRichTextEditor } from '@pega/cosmos-react-rte';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';
 import FeedNewPostTypeMenu from './FeedNewPostTypeMenu';
 import FeedAttachments from './FeedAttachments';
 import FeedButton from './FeedButton';
 import FeedRichText from './FeedRichText';
 import { FeedContext } from './Feed.context';
-const StyledTextAreaOverflow = styled.div(({ theme }) => {
+registerIcon(timesIcon, paperClipIcon);
+export const StyledTextAreaOverflow = styled.div(({ theme }) => {
     return css `
     overflow-y: hidden;
     margin-top: ${theme.base.spacing};
+    min-height: 1rem;
     width: 100%;
+
+    ${StyledRichTextEditor} {
+      &:focus-within {
+        box-shadow: none;
+      }
+    }
   `;
 });
 StyledTextAreaOverflow.defaultProps = defaultThemeProp;
@@ -30,10 +42,11 @@ const HiddenFileInput = styled.input `
   display: none;
 `;
 const FeedNewPost = (props) => {
-    var _a;
     const { id, attachments = [], interactionInfo, onPost, onFilesAdded, autoFocus, recipients, onRecipientSearch, ...restProps } = props;
     const rteRef = useRef();
     const { textAreaPlaceholder, postLabel } = interactionInfo;
+    const { setShowSearchResults } = useContext(FeedContext);
+    const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;
     const [emptyText, setEmptyText] = useState(true);
     const [hasFocus, setHasFocus] = useState(autoFocus);
     const [postType, setPostType] = useState('post');
@@ -42,67 +55,54 @@ const FeedNewPost = (props) => {
     const [attachmentEl, setAttachmentEl] = useElement();
     const [newPostEl, setNewPostEl] = useElement();
     const [textAreaRef, resizeTextArea] = useAutoResize();
-    const { avatarSrc, fullname, username } = useContext(FeedContext).userInfo;
     useOuterEvent('mousedown', [newPostEl], () => {
-        var _a, _b;
-        if (((_a = rteRef.current) === null || _a === void 0 ? void 0 : _a.getPlainText()) === '')
-            (_b = rteRef.current) === null || _b === void 0 ? void 0 : _b.clear();
+        if (emptyText)
+            rteRef.current?.clear();
     });
     const t = useI18n();
     const handlePost = () => {
-        var _a;
-        if (!emptyText || attachments.length > 0) {
+        setShowSearchResults?.(false);
+        if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {
             onPost({
                 newPostId: id,
-                value: ((_a = rteRef.current) === null || _a === void 0 ? void 0 : _a.getPlainText()) || '',
+                value: rteRef.current?.getPlainText() || '',
                 attachments: attachments || [],
                 recipients: selectedRecipients,
                 username,
                 clear: () => {
-                    var _a;
-                    (_a = rteRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+                    rteRef.current?.clear();
                     setResetPostTypeMenu(true);
                 }
             });
         }
     };
-    useEffect(() => {
-        var _a;
+    const handleClear = () => {
+        setShowSearchResults?.(false);
+        rteRef.current?.clear();
+    };
+    useAfterInitialEffect(() => {
         if (postType === 'post') {
-            (_a = rteRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            rteRef.current?.focus();
         }
         if (postType !== 'private') {
             setSelectedRecipients([]);
         }
     }, [postType]);
-    return (React.createElement(StyledCard, { ref: setNewPostEl, as: StyledFeedNewPost, ...restProps },
-        React.createElement(CardContent, null,
-            onRecipientSearch && (React.createElement(FeedNewPostTypeMenu, { recipients: recipients || [], onSetPostType: setPostType, onSelectedRecipientsUpdate: setSelectedRecipients, onRecipientSearch: onRecipientSearch, reset: resetPostTypeMenu, onReset: () => setResetPostTypeMenu(false) })),
-            React.createElement(Flex, { container: { alignItems: 'start', itemGap: 1 } },
-                React.createElement(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc }),
-                React.createElement(StyledTextAreaOverflow, { ref: textAreaRef },
-                    React.createElement(FeedRichText, { onChange: () => {
-                            var _a;
-                            setEmptyText(((_a = rteRef.current) === null || _a === void 0 ? void 0 : _a.getPlainText()) === '');
-                            resizeTextArea();
-                        }, placeholder: textAreaPlaceholder, autoFocus: autoFocus, onSubmit: handlePost, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), ref: rteRef })),
-                !emptyText && (React.createElement(Button, { variant: 'simple', as: FeedButton, onClick: (_a = rteRef.current) === null || _a === void 0 ? void 0 : _a.clear, icon: true, label: t('feed_cancel_conversation') },
-                    React.createElement(Icon, { name: 'times' }))),
-                onFilesAdded && (React.createElement(Button, { variant: 'simple', as: FeedButton, onClick: () => attachmentEl === null || attachmentEl === void 0 ? void 0 : attachmentEl.click(), icon: true, label: t('attachment') },
-                    React.createElement(Icon, { name: 'paper-clip' })))),
-            React.createElement(HiddenFileInput, { ref: setAttachmentEl, type: 'file', multiple: true, onChange: () => {
-                    if (attachmentEl === null || attachmentEl === void 0 ? void 0 : attachmentEl.files) {
-                        onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(Array.from(attachmentEl === null || attachmentEl === void 0 ? void 0 : attachmentEl.files));
-                    }
-                }, 
-                // Must trick input to believe there is no value when activated so that the same file may be added consecutively.
-                onClick: (event) => {
-                    event.target.value = '';
-                } }),
-            React.createElement(FeedAttachments, { attachments: attachments }),
-            React.createElement(ExpandCollapse, { collapsed: !hasFocus && emptyText && !attachments.length },
-                React.createElement(Flex, { container: { justify: 'end' } },
-                    React.createElement(Button, { variant: 'primary', disabled: emptyText && attachments.length === 0, onClick: handlePost }, postLabel))))));
+    return (_jsx(StyledCard, { ref: setNewPostEl, as: StyledFeedNewPost, ...restProps, children: _jsxs(CardContent, { children: [onRecipientSearch && (_jsx(FeedNewPostTypeMenu, { recipients: recipients || [], onSetPostType: setPostType, onSelectedRecipientsUpdate: setSelectedRecipients, onRecipientSearch: onRecipientSearch, reset: resetPostTypeMenu, onReset: () => setResetPostTypeMenu(false) }, void 0)), _jsxs(Flex, { container: { alignItems: 'start', gap: 1 }, children: [_jsx(Avatar, { name: fullname, size: 'l', imageSrc: avatarSrc }, void 0), _jsx(StyledTextAreaOverflow, { ref: textAreaRef, children: _jsx(FeedRichText, { label: t('feed_new_post'), labelHidden: true, onChange: () => {
+                                    setEmptyText(rteRef.current?.getPlainText().trim() === '');
+                                    resizeTextArea();
+                                }, placeholder: textAreaPlaceholder, autoFocus: autoFocus, onSubmit: handlePost, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), ref: rteRef }, void 0) }, void 0), !emptyText && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: handleClear, icon: true, label: t('feed_cancel_conversation'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)), onFilesAdded && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => {
+                                setShowSearchResults?.(false);
+                                attachmentEl?.click();
+                            }, icon: true, label: t('attachment'), children: _jsx(Icon, { name: 'paper-clip' }, void 0) }, void 0))] }, void 0), _jsx(HiddenFileInput, { ref: setAttachmentEl, type: 'file', multiple: true, onChange: () => {
+                        if (attachmentEl?.files) {
+                            onFilesAdded?.(Array.from(attachmentEl?.files));
+                        }
+                    }, 
+                    // Must trick input to believe there is no value when activated so that the same file may be added consecutively.
+                    onClick: (event) => {
+                        event.target.value = '';
+                    } }, void 0), _jsx(FeedAttachments, { attachments: attachments }, void 0), _jsx(ExpandCollapse, { collapsed: !hasFocus && emptyText && !attachments.length, children: _jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'primary', disabled: (emptyText && attachments.length === 0) || attachments.some(x => x.error), onClick: handlePost, children: postLabel }, void 0) }, void 0) }, void 0)] }, void 0) }, void 0));
 };
 export default FeedNewPost;
 //# sourceMappingURL=FeedNewPost.js.map