@pega/cosmos-react-social 5.0.0-dev.4.8 → 5.0.0-dev.5.0

package/lib/components/Feed/FeedInputRegion.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Avatar, Button, defaultThemeProp, Flex, Icon, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import { FeedContext } from './Feed.context';
+import FeedAttachments from './FeedAttachments';
+import FeedButton from './FeedButton';
+import FeedRichText from './FeedRichText';
+export const minInputHeight = '4rem';
+const StyledAvatar = styled(Avatar)(({ theme }) => {
+    return css `
+    margin-block-start: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledAvatar.defaultProps = defaultThemeProp;
+const StyledTextAreaContainer = styled.div(({ theme }) => {
+    return css `
+    width: 100%;
+    overflow-y: hidden;
+    padding: 0 ${theme.base.spacing} calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};
+  `;
+});
+StyledTextAreaContainer.defaultProps = defaultThemeProp;
+export const StyledActions = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: calc(2.5 * ${theme.base.spacing});
+
+    ${FeedButton} + ${FeedButton} {
+      margin-inline-start: 0;
+    }
+  `;
+});
+StyledActions.defaultProps = defaultThemeProp;
+const HiddenFileInput = styled.input `
+  display: none;
+`;
+const FeedInputRegion = (props) => {
+    const { variant, id, attachments = [], onFilesAdded, onSubmit, inputRegionEl, rteRef, selectedRecipients } = props;
+    const t = useI18n();
+    const { setShowSearchResults } = useContext(FeedContext);
+    const { avatarSrc, fullname, username, userStatus } = useContext(FeedContext).userInfo;
+    const [emptyText, setEmptyText] = useState(true);
+    const [attachmentEl, setAttachmentEl] = useElement();
+    useOuterEvent('mousedown', [inputRegionEl], () => {
+        if (emptyText)
+            rteRef.current?.clear();
+    });
+    const handleSubmit = () => {
+        setShowSearchResults?.(false);
+        if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {
+            onSubmit({
+                id,
+                value: rteRef.current?.getPlainText() || '',
+                attachments: attachments || [],
+                username,
+                recipients: variant === 'post' ? selectedRecipients : undefined,
+                clear: () => {
+                    rteRef.current?.clear();
+                }
+            });
+        }
+    };
+    const onKeyDown = (event) => {
+        setShowSearchResults?.(true);
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter')
+            handleSubmit();
+    };
+    const inputLabel = t(variant === 'post' ? 'feed_new_post' : 'feed_new_comment');
+    const submitLabel = t(variant === 'post' ? 'feed_new_post_submit' : 'feed_new_comment_submit');
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'start' }, children: [_jsx(StyledAvatar, { name: fullname, size: variant === 'post' ? 'l' : 'm', imageSrc: avatarSrc, status: userStatus }), _jsx(StyledTextAreaContainer, { children: _jsx(FeedRichText, { label: inputLabel, onChange: () => {
+                                setEmptyText(rteRef.current?.getPlainText().trim() === '');
+                            }, onKeyDown: onKeyDown, height: { min: minInputHeight }, ref: rteRef }) }), _jsxs(Flex, { as: StyledActions, container: { direction: 'column', gap: 0.25 }, children: [onFilesAdded && (_jsx(Button, { variant: 'simple', as: FeedButton, onClick: () => {
+                                    setShowSearchResults?.(false);
+                                    attachmentEl?.click();
+                                }, icon: true, label: t('feed_attach_files'), children: _jsx(Icon, { name: 'paper-clip' }) })), _jsx(Button, { as: FeedButton, disabled: (emptyText && attachments.length === 0) || attachments.some(x => x.error), variant: 'simple', onClick: handleSubmit, icon: true, label: submitLabel, children: _jsx(Icon, { name: 'send' }) })] })] }), _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 = '';
+                } }), _jsx(FeedAttachments, { variant: variant, attachments: attachments })] }));
+};
+export default FeedInputRegion;
+//# sourceMappingURL=FeedInputRegion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedInputRegion.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedInputRegion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, useContext, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  useElement,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from './Feed.context';\nimport FeedAttachments from './FeedAttachments';\nimport FeedButton from './FeedButton';\nimport FeedRichText from './FeedRichText';\nimport { FeedInputRegionProps } from './Feed.types';\n\nexport const minInputHeight = '4rem';\n\nconst StyledAvatar = styled(Avatar)(({ theme }) => {\n  return css`\n    margin-block-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nconst StyledTextAreaContainer = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    overflow-y: hidden;\n    padding: 0 ${theme.base.spacing} calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};\n  `;\n});\n\nStyledTextAreaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(2.5 * ${theme.base.spacing});\n\n    ${FeedButton} + ${FeedButton} {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nStyledActions.defaultProps = defaultThemeProp;\n\nconst HiddenFileInput = styled.input`\n  display: none;\n`;\n\nconst FeedInputRegion: FC<ForwardProps & FeedInputRegionProps> = (\n  props: ForwardProps & FeedInputRegionProps\n) => {\n  const {\n    variant,\n    id,\n    attachments = [],\n    onFilesAdded,\n    onSubmit,\n    inputRegionEl,\n    rteRef,\n    selectedRecipients\n  } = props;\n\n  const t = useI18n();\n  const { setShowSearchResults } = useContext(FeedContext);\n  const { avatarSrc, fullname, username, userStatus } = useContext(FeedContext).userInfo;\n\n  const [emptyText, setEmptyText] = useState(true);\n  const [attachmentEl, setAttachmentEl] = useElement<HTMLInputElement>();\n\n  useOuterEvent('mousedown', [inputRegionEl], () => {\n    if (emptyText) rteRef.current?.clear();\n  });\n\n  const handleSubmit = () => {\n    setShowSearchResults?.(false);\n    if ((!emptyText || attachments.length > 0) && attachments.every(x => !x.error)) {\n      onSubmit({\n        id,\n        value: rteRef.current?.getPlainText() || '',\n        attachments: attachments || [],\n        username,\n        recipients: variant === 'post' ? selectedRecipients : undefined,\n        clear: () => {\n          rteRef.current?.clear();\n        }\n      });\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    setShowSearchResults?.(true);\n    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') handleSubmit();\n  };\n\n  const inputLabel = t(variant === 'post' ? 'feed_new_post' : 'feed_new_comment');\n  const submitLabel = t(variant === 'post' ? 'feed_new_post_submit' : 'feed_new_comment_submit');\n\n  return (\n    <>\n      <Flex container={{ alignItems: 'start' }}>\n        <StyledAvatar\n          name={fullname}\n          size={variant === 'post' ? 'l' : 'm'}\n          imageSrc={avatarSrc}\n          status={userStatus}\n        />\n\n        <StyledTextAreaContainer>\n          <FeedRichText\n            label={inputLabel}\n            onChange={() => {\n              setEmptyText(rteRef.current?.getPlainText().trim() === '');\n            }}\n            onKeyDown={onKeyDown}\n            height={{ min: minInputHeight }}\n            ref={rteRef}\n          />\n        </StyledTextAreaContainer>\n\n        <Flex as={StyledActions} container={{ direction: 'column', gap: 0.25 }}>\n          {onFilesAdded && (\n            <Button\n              variant='simple'\n              as={FeedButton}\n              onClick={() => {\n                setShowSearchResults?.(false);\n                attachmentEl?.click();\n              }}\n              icon\n              label={t('feed_attach_files')}\n            >\n              <Icon name='paper-clip' />\n            </Button>\n          )}\n\n          <Button\n            as={FeedButton}\n            disabled={(emptyText && attachments.length === 0) || attachments.some(x => x.error)}\n            variant='simple'\n            onClick={handleSubmit}\n            icon\n            label={submitLabel}\n          >\n            <Icon name='send' />\n          </Button>\n        </Flex>\n      </Flex>\n\n      <HiddenFileInput\n        ref={setAttachmentEl}\n        type='file'\n        multiple\n        onChange={() => {\n          if (attachmentEl?.files) {\n            onFilesAdded?.(Array.from(attachmentEl?.files));\n          }\n        }}\n        // Must trick input to believe there is no value when activated so that the same file may be added consecutively.\n        onClick={(event: MouseEvent) => {\n          (event.target as HTMLInputElement).value = '';\n        }}\n      />\n\n      <FeedAttachments variant={variant} attachments={attachments} />\n    </>\n  );\n};\n\nexport default FeedInputRegion;\n"]}

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { FeedMessageBaseProps } from './Feed.types';
+type FeedLikeButtonProps = Pick<FeedMessageBaseProps, 'id' | 'liked' | 'likeCount' | 'likes' | 'onLikeClick' | 'onLikeCountInteraction' | 'onLoadMoreLikes' | 'likesLoading'>;
+declare const FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps>;
+export default FeedLikeButton;
+//# sourceMappingURL=FeedLikeButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedLikeButton.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAGnG,OAAO,EACL,YAAY,EAeb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,oBAAoB,EAAsB,MAAM,cAAc,CAAC;AAgCxE,KAAK,mBAAmB,GAAG,IAAI,CAC7B,oBAAoB,EAClB,IAAI,GACJ,OAAO,GACP,WAAW,GACX,OAAO,GACP,aAAa,GACb,wBAAwB,GACxB,iBAAiB,GACjB,cAAc,CACjB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAyHzD,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/lib/components/Feed/FeedLikeButton.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useMemo, useRef, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, Icon, Avatar, Count, Tooltip, useModalManager, useI18n, useConfiguration, useElement, formatListToLocaleString, Flex, defaultThemeProp, useUID } from '@pega/cosmos-react-core';
+import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
+import { FeedContext } from './Feed.context';
+import FeedButton from './FeedButton';
+import FeedModalList from './FeedModalList';
+const InlineBareButton = styled(BareRoleButton)(({ theme }) => {
+    return css `
+    position: relative;
+    display: inline-block;
+    line-height: 1;
+    outline: none;
+    border-radius: calc(${theme.base['border-radius']} * 9999);
+
+    &:hover {
+      ::before {
+        content: '';
+        position: absolute;
+        top: calc(${theme.components.button['border-width']} * -1);
+        bottom: calc(${theme.components.button['border-width']} * -1);
+        left: calc(${theme.components.button['border-width']} * -1);
+        right: calc(${theme.components.button['border-width']} * -1);
+        border-radius: inherit;
+        background-color: currentColor;
+        opacity: 0.15;
+      }
+    }
+
+    &:focus {
+      box-shadow: ${theme.components.button['focus-shadow']};
+    }
+  `;
+});
+InlineBareButton.defaultProps = defaultThemeProp;
+const FeedLikeButton = forwardRef(function FeedLikeButton(props, ref) {
+    const { id, liked, likeCount = 0, likes = [], onLikeClick, onLikeCountInteraction, onLoadMoreLikes, likesLoading } = props;
+    const t = useI18n();
+    const { locale } = useConfiguration();
+    const { create } = useModalManager();
+    const { userInfo: loggedInUser } = useContext(FeedContext);
+    const [countEl, setCountEl] = useElement(null);
+    const likesModalRef = useRef();
+    const likeCountId = useUID();
+    useEffect(() => {
+        likesModalRef.current?.update({
+            count: likeCount,
+            heading: t('feed_likes'),
+            listItems: likes,
+            onLoadMore: onLoadMoreLikes,
+            loading: likesLoading
+        });
+    }, [likeCount, likes, onLoadMoreLikes, likesLoading]);
+    const likesAttributes = useMemo(() => {
+        const likesList = likes.map(x => x.primary.toString());
+        return {
+            ariaLabel: likeCount
+                ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList.slice(0, 2), t, locale, {
+                    count: likeCount
+                })}`
+                : t('feed_post_likes', [likeCount], { count: likeCount }),
+            label: `${t('feed_liked_by')}:\n${formatListToLocaleString(likesList.slice(0, 2), t, locale, {
+                count: likeCount,
+                separator: '\n'
+            })}`
+        };
+    }, [likes, likeCount]);
+    const onLikeCountClick = () => {
+        if (likes.length) {
+            likesModalRef.current = create(FeedModalList, {
+                count: likeCount,
+                heading: t('feed_likes'),
+                listItems: likes,
+                onLoadMore: onLoadMoreLikes,
+                loading: likesLoading
+            });
+        }
+        else {
+            onLikeCountInteraction?.();
+        }
+    };
+    return (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { variant: 'simple', icon: true, compact: true, as: FeedButton, onClick: () => {
+                    const user = {
+                        id: loggedInUser.username,
+                        primary: loggedInUser.fullname,
+                        secondary: loggedInUser.meta,
+                        visual: (_jsx(Avatar, { size: 'l', imageSrc: loggedInUser.avatarSrc, name: loggedInUser.fullname }))
+                    };
+                    onLikeClick({
+                        id,
+                        user
+                    });
+                }, emphasized: liked, "aria-pressed": liked, label: liked ? t('feed_unlike_label') : t('feed_like_label'), "aria-describedby": likeCount > 0 ? likeCountId : undefined, ref: ref, children: _jsx(Icon, { name: liked ? 'thumbs-up-solid' : 'thumbs-up' }) }), likeCount > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineBareButton, { ref: setCountEl, role: likes.length ? 'button' : undefined, onClick: onLikeCountClick, onFocus: onLikeCountInteraction, onMouseOver: onLikeCountInteraction, "aria-label": likesAttributes.ariaLabel, tabIndex: 0, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                onLikeCountClick();
+                            }
+                        }, children: _jsx(Count, { id: likeCountId, "aria-label": t('feed_post_likes', [likeCount], { count: likeCount }), children: likeCount }) }), _jsx(Tooltip, { target: countEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount }) })] }))] }));
+});
+export default FeedLikeButton;
+//# sourceMappingURL=FeedLikeButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedLikeButton.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedLikeButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, useContext, useMemo, useRef, useEffect, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  Button,\n  Icon,\n  Avatar,\n  Count,\n  Tooltip,\n  ModalMethods,\n  useModalManager,\n  useI18n,\n  useConfiguration,\n  useElement,\n  formatListToLocaleString,\n  Flex,\n  defaultThemeProp,\n  useUID\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedModalList from './FeedModalList';\nimport { FeedMessageBaseProps, FeedModalListProps } from './Feed.types';\n\nconst InlineBareButton = styled(BareRoleButton)(({ theme }) => {\n  return css`\n    position: relative;\n    display: inline-block;\n    line-height: 1;\n    outline: none;\n    border-radius: calc(${theme.base['border-radius']} * 9999);\n\n    &:hover {\n      ::before {\n        content: '';\n        position: absolute;\n        top: calc(${theme.components.button['border-width']} * -1);\n        bottom: calc(${theme.components.button['border-width']} * -1);\n        left: calc(${theme.components.button['border-width']} * -1);\n        right: calc(${theme.components.button['border-width']} * -1);\n        border-radius: inherit;\n        background-color: currentColor;\n        opacity: 0.15;\n      }\n    }\n\n    &:focus {\n      box-shadow: ${theme.components.button['focus-shadow']};\n    }\n  `;\n});\n\nInlineBareButton.defaultProps = defaultThemeProp;\n\ntype FeedLikeButtonProps = Pick<\n  FeedMessageBaseProps,\n  | 'id'\n  | 'liked'\n  | 'likeCount'\n  | 'likes'\n  | 'onLikeClick'\n  | 'onLikeCountInteraction'\n  | 'onLoadMoreLikes'\n  | 'likesLoading'\n>;\n\nconst FeedLikeButton: FC<FeedLikeButtonProps & ForwardProps> = forwardRef(function FeedLikeButton(\n  props,\n  ref: Ref<HTMLButtonElement>\n) {\n  const {\n    id,\n    liked,\n    likeCount = 0,\n    likes = [],\n    onLikeClick,\n    onLikeCountInteraction,\n    onLoadMoreLikes,\n    likesLoading\n  } = props;\n  const t = useI18n();\n  const { locale } = useConfiguration();\n  const { create } = useModalManager();\n  const { userInfo: loggedInUser } = useContext(FeedContext);\n  const [countEl, setCountEl] = useElement(null);\n  const likesModalRef = useRef<ModalMethods<FeedModalListProps>>();\n  const likeCountId = useUID();\n\n  useEffect(() => {\n    likesModalRef.current?.update({\n      count: likeCount,\n      heading: t('feed_likes'),\n      listItems: likes,\n      onLoadMore: onLoadMoreLikes,\n      loading: likesLoading\n    });\n  }, [likeCount, likes, onLoadMoreLikes, likesLoading]);\n\n  const likesAttributes = useMemo(() => {\n    const likesList = likes.map(x => x.primary.toString());\n    return {\n      ariaLabel: likeCount\n        ? `${t('feed_liked_by')} ${formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n            count: likeCount\n          })}`\n        : t('feed_post_likes', [likeCount], { count: likeCount }),\n      label: `${t('feed_liked_by')}:\\n${formatListToLocaleString(likesList.slice(0, 2), t, locale, {\n        count: likeCount,\n        separator: '\\n'\n      })}`\n    };\n  }, [likes, likeCount]);\n\n  const onLikeCountClick = () => {\n    if (likes.length) {\n      likesModalRef.current = create(FeedModalList, {\n        count: likeCount,\n        heading: t('feed_likes'),\n        listItems: likes,\n        onLoadMore: onLoadMoreLikes,\n        loading: likesLoading\n      });\n    } else {\n      onLikeCountInteraction?.();\n    }\n  };\n\n  return (\n    <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n      <Button\n        variant='simple'\n        icon\n        compact\n        as={FeedButton}\n        onClick={() => {\n          const user = {\n            id: loggedInUser.username,\n            primary: loggedInUser.fullname,\n            secondary: loggedInUser.meta,\n            visual: (\n              <Avatar size='l' imageSrc={loggedInUser.avatarSrc} name={loggedInUser.fullname} />\n            )\n          };\n          onLikeClick({\n            id,\n            user\n          });\n        }}\n        emphasized={liked}\n        aria-pressed={liked}\n        label={liked ? t('feed_unlike_label') : t('feed_like_label')}\n        aria-describedby={likeCount > 0 ? likeCountId : undefined}\n        ref={ref}\n      >\n        <Icon name={liked ? 'thumbs-up-solid' : 'thumbs-up'} />\n      </Button>\n      {likeCount > 0 && (\n        <>\n          <InlineBareButton\n            ref={setCountEl}\n            role={likes.length ? 'button' : undefined}\n            onClick={onLikeCountClick}\n            onFocus={onLikeCountInteraction}\n            onMouseOver={onLikeCountInteraction}\n            aria-label={likesAttributes.ariaLabel}\n            tabIndex={0}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                onLikeCountClick();\n              }\n            }}\n          >\n            <Count\n              id={likeCountId}\n              aria-label={t('feed_post_likes', [likeCount], { count: likeCount })}\n            >\n              {likeCount}\n            </Count>\n          </InlineBareButton>\n          <Tooltip target={countEl} showDelay='none' hideDelay='none' describeTarget={false}>\n            {likesAttributes.label || t('feed_post_likes', [likeCount], { count: likeCount })}\n          </Tooltip>\n        </>\n      )}\n    </Flex>\n  );\n});\n\nexport default FeedLikeButton;\n"]}

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { FeedModalListProps } from './Feed.types';
+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;AAiBxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAYlD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2DzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Feed/FeedModalList.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Flex, Progress, Count, Modal, SummaryListItems, useItemIntersection, usePrevious, useI18n, MetaList } from '@pega/cosmos-react-core';
+import FeedAnnouncer from './FeedAnnouncer';
+const StyledLoadMore = styled.div(({ theme }) => {
+    return css `
+    margin-top: ${theme.base.spacing};
+    min-height: 2rem;
+    min-width: 2rem;
+  `;
+});
+StyledLoadMore.defaultProps = defaultThemeProp;
+const FeedModalList = ({ loading, count, heading, listItems, onLoadMore }) => {
+    const t = useI18n();
+    const listRef = useRef(null);
+    const prevItems = usePrevious(listItems);
+    const [announcementText, setAnnouncementText] = useState('');
+    useEffect(() => {
+        if (loading)
+            setAnnouncementText(t('loading'));
+    }, [loading]);
+    useEffect(() => {
+        if (prevItems) {
+            const difference = listItems.length - prevItems.length;
+            if (difference > 0)
+                setAnnouncementText(t('new_item_added', [difference], { count: difference }));
+        }
+    }, [listItems]);
+    useItemIntersection(listRef, listItems.length - 1, () => {
+        onLoadMore?.();
+    }, ':scope li');
+    return (_jsxs(Modal, { heading: _jsxs(Flex, { container: { gap: 1 }, children: [heading, _jsx(Flex, { item: { alignSelf: 'center' }, as: Count, children: count })] }), ref: listRef, children: [_jsx(FeedAnnouncer, { children: announcementText }), _jsx(SummaryListItems, { items: listItems.map(item => ({
+                    ...item,
+                    secondary: item.secondary && _jsx(MetaList, { items: item.secondary })
+                })) }), loading && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] }));
+};
+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,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,OAAO,EACP,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9C,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACS,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO;YAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;YACvD,IAAI,UAAU,GAAG,CAAC;gBAChB,mBAAmB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;SACjF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,mBAAmB,CACjB,OAAO,EACP,SAAS,CAAC,MAAM,GAAG,CAAC,EACpB,GAAG,EAAE;QACH,UAAU,EAAE,EAAE,CAAC;IACjB,CAAC,EACD,WAAW,CACZ,CAAC;IAEF,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,GACD,IACF,EAET,GAAG,EAAE,OAAO,aAEZ,KAAC,aAAa,cAAE,gBAAgB,GAAiB,EACjD,KAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC5B,GAAG,IAAI;oBACP,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAI;iBACjE,CAAC,CAAC,GACH,EACD,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YACxD,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC1B,CACR,IACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useRef, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  Progress,\n  Count,\n  Modal,\n  SummaryListItems,\n  useItemIntersection,\n  usePrevious,\n  useI18n,\n  MetaList\n} from '@pega/cosmos-react-core';\n\nimport FeedAnnouncer from './FeedAnnouncer';\nimport { FeedModalListProps } from './Feed.types';\n\nconst StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin-top: ${theme.base.spacing};\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst FeedModalList: FC<FeedModalListProps> = ({\n  loading,\n  count,\n  heading,\n  listItems,\n  onLoadMore\n}: FeedModalListProps) => {\n  const t = useI18n();\n  const listRef = useRef(null);\n  const prevItems = usePrevious(listItems);\n  const [announcementText, setAnnouncementText] = useState('');\n\n  useEffect(() => {\n    if (loading) setAnnouncementText(t('loading'));\n  }, [loading]);\n\n  useEffect(() => {\n    if (prevItems) {\n      const difference = listItems.length - prevItems.length;\n      if (difference > 0)\n        setAnnouncementText(t('new_item_added', [difference], { count: difference }));\n    }\n  }, [listItems]);\n\n  useItemIntersection(\n    listRef,\n    listItems.length - 1,\n    () => {\n      onLoadMore?.();\n    },\n    ':scope li'\n  );\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      ref={listRef}\n    >\n      <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n      <SummaryListItems\n        items={listItems.map(item => ({\n          ...item,\n          secondary: item.secondary && <MetaList items={item.secondary} />\n        }))}\n      />\n      {loading && (\n        <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n          <Progress placement='inline' />\n        </Flex>\n      )}\n    </Modal>\n  );\n};\n\nexport default FeedModalList;\n"]}

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { FeedNewPostProps } from './Feed.types';
+export declare const StyledFeedNewPost: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const FeedNewPost: FC<ForwardProps & FeedNewPostProps>;
+export default FeedNewPost;
+//# sourceMappingURL=FeedNewPost.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedNewPost.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoB,MAAM,OAAO,CAAC;AAG7C,OAAO,EAIL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,gBAAgB,EAAkD,MAAM,cAAc,CAAC;AAKhG,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAI9C,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CAmDpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Feed/FeedNewPost.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import styled from 'styled-components';
+import { registerIcon, defaultThemeProp, useElement, useAfterInitialEffect } from '@pega/cosmos-react-core';
+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 FeedInputRegion from './FeedInputRegion';
+registerIcon(timesIcon, paperClipIcon);
+export const StyledFeedNewPost = styled.div ``;
+StyledFeedNewPost.defaultProps = defaultThemeProp;
+const FeedNewPost = (props) => {
+    const { id, attachments = [], onSubmit, onFilesAdded, autoFocus, recipients, onRecipientSearch, ...restProps } = props;
+    const rteRef = useRef();
+    const [postType, setPostType] = useState('post');
+    const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);
+    const [selectedRecipients, setSelectedRecipients] = useState([]);
+    const [newPostEl, setNewPostEl] = useElement();
+    useAfterInitialEffect(() => {
+        if (postType === 'post') {
+            rteRef.current?.focus();
+        }
+        if (postType !== 'private') {
+            setSelectedRecipients([]);
+        }
+    }, [postType]);
+    return (_jsxs(StyledFeedNewPost, { ref: setNewPostEl, ...restProps, children: [onRecipientSearch && (_jsx(FeedNewPostTypeMenu, { recipients: recipients || [], onSetPostType: setPostType, onSelectedRecipientsUpdate: setSelectedRecipients, onRecipientSearch: onRecipientSearch, reset: resetPostTypeMenu, onReset: () => setResetPostTypeMenu(false) })), _jsx(FeedInputRegion, { variant: 'post', id: id, attachments: attachments, onFilesAdded: onFilesAdded, onSubmit: onSubmit, inputRegionEl: newPostEl, rteRef: rteRef, selectedRecipients: selectedRecipients })] }));
+};
+export default FeedNewPost;
+//# sourceMappingURL=FeedNewPost.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedNewPost.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPost.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,UAAU,EAEV,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAEnG,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,YAAY,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAwC,CAAC,KAAuB,EAAE,EAAE;IACnF,MAAM,EACJ,EAAE,EACF,WAAW,GAAG,EAAE,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,MAAM,EAAuB,CAAC;IAC7C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,MAAM,CAAC,CAAC;IAC3D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAC;IACtF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAkB,CAAC;IAE/D,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SACzB;QACD,IAAI,QAAQ,KAAK,SAAS,EAAE;YAC1B,qBAAqB,CAAC,EAAyB,CAAC,CAAC;SAClD;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,MAAC,iBAAiB,IAAC,GAAG,EAAE,YAAY,KAAM,SAAS,aAChD,iBAAiB,IAAI,CACpB,KAAC,mBAAmB,IAClB,UAAU,EAAE,UAAU,IAAK,EAAsC,EACjE,aAAa,EAAE,WAAW,EAC1B,0BAA0B,EAAE,qBAAqB,EACjD,iBAAiB,EAAE,iBAAiB,EACpC,KAAK,EAAE,iBAAiB,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,GAC1C,CACH,EAED,KAAC,eAAe,IACd,OAAO,EAAC,MAAM,EACd,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,SAAS,EACxB,MAAM,EAAE,MAAM,EACd,kBAAkB,EAAE,kBAAkB,GACtC,IACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, useState, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  registerIcon,\n  defaultThemeProp,\n  useElement,\n  ForwardProps,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorState } from '@pega/cosmos-react-rte';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport FeedNewPostTypeMenu from './FeedNewPostTypeMenu';\nimport { FeedNewPostProps, PostType, PostTypeMenuProps, RecipientMenuItem } from './Feed.types';\nimport FeedInputRegion from './FeedInputRegion';\n\nregisterIcon(timesIcon, paperClipIcon);\n\nexport const StyledFeedNewPost = styled.div``;\n\nStyledFeedNewPost.defaultProps = defaultThemeProp;\n\nconst FeedNewPost: FC<ForwardProps & FeedNewPostProps> = (props: FeedNewPostProps) => {\n  const {\n    id,\n    attachments = [],\n    onSubmit,\n    onFilesAdded,\n    autoFocus,\n    recipients,\n    onRecipientSearch,\n    ...restProps\n  } = props;\n  const rteRef = useRef<RichTextEditorState>();\n  const [postType, setPostType] = useState<PostType>('post');\n  const [resetPostTypeMenu, setResetPostTypeMenu] = useState(false);\n  const [selectedRecipients, setSelectedRecipients] = useState<RecipientMenuItem[]>([]);\n  const [newPostEl, setNewPostEl] = useElement<HTMLDivElement>();\n\n  useAfterInitialEffect(() => {\n    if (postType === 'post') {\n      rteRef.current?.focus();\n    }\n    if (postType !== 'private') {\n      setSelectedRecipients([] as RecipientMenuItem[]);\n    }\n  }, [postType]);\n\n  return (\n    <StyledFeedNewPost ref={setNewPostEl} {...restProps}>\n      {onRecipientSearch && (\n        <FeedNewPostTypeMenu\n          recipients={recipients || ([] as PostTypeMenuProps['recipients'])}\n          onSetPostType={setPostType}\n          onSelectedRecipientsUpdate={setSelectedRecipients}\n          onRecipientSearch={onRecipientSearch}\n          reset={resetPostTypeMenu}\n          onReset={() => setResetPostTypeMenu(false)}\n        />\n      )}\n\n      <FeedInputRegion\n        variant='post'\n        id={id}\n        attachments={attachments}\n        onFilesAdded={onFilesAdded}\n        onSubmit={onSubmit}\n        inputRegionEl={newPostEl}\n        rteRef={rteRef}\n        selectedRecipients={selectedRecipients}\n      />\n    </StyledFeedNewPost>\n  );\n};\n\nexport default FeedNewPost;\n"]}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { PostTypeMenuProps } from './Feed.types';
+declare const FeedNewPostTypeMenu: ({ recipients, onSetPostType, onSelectedRecipientsUpdate, onRecipientSearch, reset, onReset, ...restProps }: PostTypeMenuProps & ForwardProps) => JSX.Element;
+export default FeedNewPostTypeMenu;
+//# sourceMappingURL=FeedNewPostTypeMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedNewPostTypeMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedNewPostTypeMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAiBL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAIL,iBAAiB,EAGlB,MAAM,cAAc,CAAC;AAyJtB,QAAA,MAAM,mBAAmB,+GAQtB,iBAAiB,GAAG,YAAY,gBAialC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}