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

package/lib/components/Chat/SuggestedReplyPicker.d.ts

@@ -21,6 +21,12 @@ export interface SuggestedReplyPickerProps {
     ref?: Ref<HTMLDivElement>;
     /** Suggested replies */
     replies?: SuggestedReply[];
+    /** Id of the current reply */
+    currentReplyId?: SuggestedReply['id'];
+    /** Fired when user clicks on left or right buttons
+     *  @param id Id of the new reply
+     */
+    onReplyChange: (id: SuggestedReply['id']) => void;
     /** Current state of the panel */
     collapsed: boolean;
     /** Callback for expand or collapse click */

package/lib/components/Chat/SuggestedReplyPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAY,MAAM,OAAO,CAAC;AAGtF,OAAO,EAQL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAQjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAoCF,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CA6KnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAa,MAAM,OAAO,CAAC;AAGvF,OAAO,EAQL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAQjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAoCF,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CA4KnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}

package/lib/components/Chat/SuggestedReplyPicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import { forwardRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp, useLiveLog, ExpandCollapse, Alert, useDirection, EmptyState } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
@@ -59,34 +59,32 @@ const StyledSuggestedReplyContainer = styled.div(props => {
 });
 StyledSuggestedReplyContainer.defaultProps = defaultThemeProp;
 const SuggestedReplyPicker = forwardRef((props, ref) => {
-    const { replies = [], collapsed, onExpandCollapse, showNotification, onSelect, ...restProps } = props;
+    const { replies = [], collapsed, onExpandCollapse, showNotification, onSelect, currentReplyId, onReplyChange, ...restProps } = props;
     const { announcePolite } = useLiveLog();
-    const [currentReply, setCurrentReply] = useState(replies[0] ?? null);
     const t = useI18n();
     const { rtl, ltr } = useDirection();
-    // Making the suggested replies left/right button cyclic and SR to announce on change
+    // Allows suggested replies to cycle
     const onSuggestedReplyChange = (mode) => {
-        setCurrentReply(prevReply => {
-            if (prevReply) {
-                const prevReplyIndex = replies.indexOf(prevReply);
-                const totalReplies = replies.length;
-                if (totalReplies > 0) {
-                    let replyIndex = mode === 'prev' ? prevReplyIndex - 1 : prevReplyIndex + 1;
-                    replyIndex = (replyIndex + totalReplies) % totalReplies;
-                    announcePolite({
-                        message: `${t('suggested_replies_current_of_total', [
-                            replyIndex + 1,
-                            replies.length
-                        ])},
-                 ${t('confidence_percentage', [replies[replyIndex].confidence])},${replies[replyIndex]?.message}`,
-                        type: 'acknowledgement'
-                    });
-                    return replies[replyIndex];
-                }
-            }
-            return null;
-        });
+        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);
+        let newReplyIndex = mode === 'prev' ? currentReplyIndex - 1 : currentReplyIndex + 1;
+        newReplyIndex = (newReplyIndex + replies.length) % replies.length;
+        onReplyChange(replies[newReplyIndex].id);
     };
+    // SR announcement when current reply changes
+    useEffect(() => {
+        if (!replies || replies.length === 0 || !currentReplyId) {
+            return;
+        }
+        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);
+        announcePolite({
+            message: `${t('suggested_replies_current_of_total', [
+                currentReplyIndex + 1,
+                replies.length
+            ])},
+           ${t('confidence_percentage', [replies[currentReplyIndex]?.confidence])},${replies[currentReplyIndex]?.message}`,
+            type: 'acknowledgement'
+        });
+    }, [currentReplyId]);
     return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsx(Flex, { as: StyledSuggestedReplyHeader, container: {
                     justify: 'between',
                     alignContent: 'center'
@@ -96,24 +94,24 @@ const SuggestedReplyPicker = forwardRef((props, ref) => {
                     }, children: [ltr && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(Icon, { name: 'caret-down', suggestedReplyCollapsed: collapsed, as: StyledSuggestedReplyIcon }) })), _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies') }), collapsed && showNotification && _jsx(Alert, { variant: 'urgent' })] }), rtl && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(Icon, { name: 'caret-down', suggestedReplyCollapsed: collapsed, as: StyledSuggestedReplyIcon }) }))] }) }), _jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsxs(Flex, { container: {
                         direction: 'column',
                         gap: 1
-                    }, as: StyledSuggestedReplyContent, children: [currentReply && replies.length ? (_jsx(Flex, { container: true, as: StyledReply, children: currentReply.message })) : (_jsx(EmptyState, {})), _jsxs(Flex, { container: {
+                    }, as: StyledSuggestedReplyContent, children: [currentReplyId && replies.length ? (_jsx(Flex, { container: true, as: StyledReply, children: replies.find(reply => reply.id === currentReplyId)?.message })) : (_jsx(EmptyState, {})), _jsxs(Flex, { container: {
                                 justify: 'center'
-                            }, as: StyledRepliesAction, children: [replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.length <= 1, onClick: () => {
+                            }, as: StyledRepliesAction, children: [replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReplyId === undefined || replies.length <= 1, onClick: () => {
                                         onSuggestedReplyChange('prev');
-                                    }, children: _jsx(Icon, { name: 'caret-left' }) })), _jsx(Button, { disabled: currentReply === null, onClick: () => {
-                                        if (currentReply) {
-                                            onSelect(currentReply);
-                                        }
-                                    }, "aria-label": replies.length > 0 && currentReply
+                                    }, children: _jsx(Icon, { name: 'caret-left' }) })), _jsx(Button, { disabled: currentReplyId === undefined || !replies || replies.length === 0, onClick: () => {
+                                        const selectedReply = replies.find(reply => reply.id === currentReplyId);
+                                        if (selectedReply)
+                                            onSelect(selectedReply);
+                                    }, "aria-label": replies.length > 0 && currentReplyId
                                         ? t('use_current_template', [
-                                            replies.length > 0 && currentReply
-                                                ? replies.indexOf(currentReply) + 1
+                                            replies.length > 0 && currentReplyId
+                                                ? replies.findIndex(reply => reply.id === currentReplyId) + 1
                                                 : 0,
                                             replies.length
                                         ])
                                         : '', children: t('use') }), replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', onClick: () => {
                                         onSuggestedReplyChange('next');
-                                    }, disabled: currentReply === null || replies.length <= 1, children: _jsx(Icon, { name: 'caret-right' }) }))] })] }) })] }));
+                                    }, disabled: currentReplyId === undefined || replies.length <= 1, children: _jsx(Icon, { name: 'caret-right' }) }))] })] }) })] }));
 });
 export default SuggestedReplyPicker;
 //# sourceMappingURL=SuggestedReplyPicker.js.map

package/lib/components/Chat/SuggestedReplyPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Button,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  useLiveLog,\n  ExpandCollapse,\n  Alert,\n  useDirection,\n  EmptyState\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledReply = styled.div``;\nexport const StyledRepliesAction = styled.div``;\nexport const StyledNotification = styled.div``;\nconst maxNumOfLines = 5;\nconst minNumOfLines = 2;\n\nexport const StyledSuggestedReplyIcon = styled.svg<{ suggestedReplyCollapsed?: boolean }>(\n  ({ suggestedReplyCollapsed, theme }) => {\n    const { rtl } = useDirection();\n    const {\n      base: {\n        animation: {\n          speed,\n          timing: { ease }\n        }\n      }\n    } = theme;\n    return css`\n      transition-property: transform;\n      transition-duration: ${speed};\n      transition-timing-function: ${ease};\n      ${suggestedReplyCollapsed &&\n      css`\n        transform: rotateZ(${rtl ? '0deg' : '-90deg'});\n      `}\n    `;\n  }\n);\n\nStyledSuggestedReplyIcon.defaultProps = defaultThemeProp;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n\n    > ${StyledSuggestedReplyHeader} {\n      padding: ${theme.base.spacing};\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledAlert} {\n      position: relative;\n      inset-block-start: calc(-0.25 * ${theme.base.spacing});\n      inset-inline-start: calc(-0.5 * ${theme.base.spacing});\n    }\n\n    ${StyledSuggestedReplyContent} {\n      padding: calc(2 * ${theme.base.spacing});\n      position: relative;\n\n      > ${StyledReply} {\n        overflow-y: auto;\n        max-height: calc(2.5 * ${theme.base.spacing} * ${maxNumOfLines});\n        min-height: calc(2.5 * ${theme.base.spacing} * ${minNumOfLines});\n      }\n    }\n  `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReply {\n  /** Id for this suggested reply */\n  id: string;\n  /** Suggested reply message */\n  message: string;\n  /** Confidence of this suggested reply */\n  confidence: number;\n}\n\nexport interface SuggestedReplyPickerProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Suggested replies */\n  replies?: SuggestedReply[];\n  /** Current state of the panel */\n  collapsed: boolean;\n  /** Callback for expand or collapse click */\n  onExpandCollapse: () => void;\n  /** Callback for the event when a suggested reply is selected */\n  onSelect: (suggestedReply: SuggestedReply) => void;\n  /** Show notification on picker header */\n  showNotification?: boolean;\n}\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n  forwardRef(\n    (props: PropsWithoutRef<SuggestedReplyPickerProps>, ref: SuggestedReplyPickerProps['ref']) => {\n      const {\n        replies = [],\n        collapsed,\n        onExpandCollapse,\n        showNotification,\n        onSelect,\n        ...restProps\n      } = props;\n      const { announcePolite } = useLiveLog();\n      const [currentReply, setCurrentReply] = useState<SuggestedReply | null>(replies[0] ?? null);\n      const t = useI18n();\n      const { rtl, ltr } = useDirection();\n\n      // Making the suggested replies left/right button cyclic and SR to announce on change\n      const onSuggestedReplyChange = (mode: 'prev' | 'next') => {\n        setCurrentReply(prevReply => {\n          if (prevReply) {\n            const prevReplyIndex = replies.indexOf(prevReply);\n            const totalReplies = replies.length;\n            if (totalReplies > 0) {\n              let replyIndex = mode === 'prev' ? prevReplyIndex - 1 : prevReplyIndex + 1;\n              replyIndex = (replyIndex + totalReplies) % totalReplies;\n\n              announcePolite({\n                message: `${t('suggested_replies_current_of_total', [\n                  replyIndex + 1,\n                  replies.length\n                ])},\n                 ${t('confidence_percentage', [replies[replyIndex].confidence])},${\n                  replies[replyIndex]?.message\n                }`,\n                type: 'acknowledgement'\n              });\n              return replies[replyIndex];\n            }\n          }\n          return null;\n        });\n      };\n\n      return (\n        <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n          <Flex\n            as={StyledSuggestedReplyHeader}\n            container={{\n              justify: 'between',\n              alignContent: 'center'\n            }}\n          >\n            <Flex\n              container={{\n                alignItems: 'center',\n                gap: 1\n              }}\n            >\n              {ltr && (\n                <Button\n                  variant='simple'\n                  label={collapsed ? t('expand') : t('collapse')}\n                  aria-label={t(\n                    collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n                  )}\n                  icon\n                  onClick={onExpandCollapse}\n                >\n                  <Icon\n                    name='caret-down'\n                    suggestedReplyCollapsed={collapsed}\n                    as={StyledSuggestedReplyIcon}\n                  />\n                </Button>\n              )}\n\n              <Flex container={{ gap: 0.5 }}>\n                <Text variant='h3'>{t('suggested_replies')}</Text>\n                {collapsed && showNotification && <Alert variant='urgent' />}\n              </Flex>\n\n              {rtl && (\n                <Button\n                  variant='simple'\n                  label={collapsed ? t('expand') : t('collapse')}\n                  aria-label={t(\n                    collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n                  )}\n                  icon\n                  onClick={onExpandCollapse}\n                >\n                  <Icon\n                    name='caret-down'\n                    suggestedReplyCollapsed={collapsed}\n                    as={StyledSuggestedReplyIcon}\n                  />\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n          <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n            <Flex\n              container={{\n                direction: 'column',\n                gap: 1\n              }}\n              as={StyledSuggestedReplyContent}\n            >\n              {currentReply && replies.length ? (\n                <Flex container as={StyledReply}>\n                  {currentReply.message}\n                </Flex>\n              ) : (\n                <EmptyState />\n              )}\n              <Flex\n                container={{\n                  justify: 'center'\n                }}\n                as={StyledRepliesAction}\n              >\n                {replies.length > 1 && (\n                  <Button\n                    icon\n                    aria-label={t('prev_suggested_reply')}\n                    variant='simple'\n                    disabled={currentReply === null || replies.length <= 1}\n                    onClick={() => {\n                      onSuggestedReplyChange('prev');\n                    }}\n                  >\n                    <Icon name='caret-left' />\n                  </Button>\n                )}\n                <Button\n                  disabled={currentReply === null}\n                  onClick={() => {\n                    if (currentReply) {\n                      onSelect(currentReply);\n                    }\n                  }}\n                  aria-label={\n                    replies.length > 0 && currentReply\n                      ? t('use_current_template', [\n                          replies.length > 0 && currentReply\n                            ? replies.indexOf(currentReply) + 1\n                            : 0,\n                          replies.length\n                        ])\n                      : ''\n                  }\n                >\n                  {t('use')}\n                </Button>\n                {replies.length > 1 && (\n                  <Button\n                    icon\n                    aria-label={t('next_suggested_reply')}\n                    variant='simple'\n                    onClick={() => {\n                      onSuggestedReplyChange('next');\n                    }}\n                    disabled={currentReply === null || replies.length <= 1}\n                  >\n                    <Icon name='caret-right' />\n                  </Button>\n                )}\n              </Flex>\n            </Flex>\n          </ExpandCollapse>\n        </StyledSuggestedReplyContainer>\n      );\n    }\n  );\n\nexport default SuggestedReplyPicker;\n"]}
+{"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Button,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  useLiveLog,\n  ExpandCollapse,\n  Alert,\n  useDirection,\n  EmptyState\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledReply = styled.div``;\nexport const StyledRepliesAction = styled.div``;\nexport const StyledNotification = styled.div``;\nconst maxNumOfLines = 5;\nconst minNumOfLines = 2;\n\nexport const StyledSuggestedReplyIcon = styled.svg<{ suggestedReplyCollapsed?: boolean }>(\n  ({ suggestedReplyCollapsed, theme }) => {\n    const { rtl } = useDirection();\n    const {\n      base: {\n        animation: {\n          speed,\n          timing: { ease }\n        }\n      }\n    } = theme;\n    return css`\n      transition-property: transform;\n      transition-duration: ${speed};\n      transition-timing-function: ${ease};\n      ${suggestedReplyCollapsed &&\n      css`\n        transform: rotateZ(${rtl ? '0deg' : '-90deg'});\n      `}\n    `;\n  }\n);\n\nStyledSuggestedReplyIcon.defaultProps = defaultThemeProp;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n\n    > ${StyledSuggestedReplyHeader} {\n      padding: ${theme.base.spacing};\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledAlert} {\n      position: relative;\n      inset-block-start: calc(-0.25 * ${theme.base.spacing});\n      inset-inline-start: calc(-0.5 * ${theme.base.spacing});\n    }\n\n    ${StyledSuggestedReplyContent} {\n      padding: calc(2 * ${theme.base.spacing});\n      position: relative;\n\n      > ${StyledReply} {\n        overflow-y: auto;\n        max-height: calc(2.5 * ${theme.base.spacing} * ${maxNumOfLines});\n        min-height: calc(2.5 * ${theme.base.spacing} * ${minNumOfLines});\n      }\n    }\n  `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReply {\n  /** Id for this suggested reply */\n  id: string;\n  /** Suggested reply message */\n  message: string;\n  /** Confidence of this suggested reply */\n  confidence: number;\n}\n\nexport interface SuggestedReplyPickerProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Suggested replies */\n  replies?: SuggestedReply[];\n  /** Id of the current reply */\n  currentReplyId?: SuggestedReply['id'];\n  /** Fired when user clicks on left or right buttons\n   *  @param id Id of the new reply\n   */\n  onReplyChange: (id: SuggestedReply['id']) => void;\n  /** Current state of the panel */\n  collapsed: boolean;\n  /** Callback for expand or collapse click */\n  onExpandCollapse: () => void;\n  /** Callback for the event when a suggested reply is selected */\n  onSelect: (suggestedReply: SuggestedReply) => void;\n  /** Show notification on picker header */\n  showNotification?: boolean;\n}\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n  forwardRef(\n    (props: PropsWithoutRef<SuggestedReplyPickerProps>, ref: SuggestedReplyPickerProps['ref']) => {\n      const {\n        replies = [],\n        collapsed,\n        onExpandCollapse,\n        showNotification,\n        onSelect,\n        currentReplyId,\n        onReplyChange,\n        ...restProps\n      } = props;\n      const { announcePolite } = useLiveLog();\n      const t = useI18n();\n      const { rtl, ltr } = useDirection();\n\n      // Allows suggested replies to cycle\n      const onSuggestedReplyChange = (mode: 'prev' | 'next') => {\n        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);\n        let newReplyIndex = mode === 'prev' ? currentReplyIndex - 1 : currentReplyIndex + 1;\n        newReplyIndex = (newReplyIndex + replies.length) % replies.length;\n        onReplyChange(replies[newReplyIndex].id);\n      };\n\n      // SR announcement when current reply changes\n      useEffect(() => {\n        if (!replies || replies.length === 0 || !currentReplyId) {\n          return;\n        }\n        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);\n        announcePolite({\n          message: `${t('suggested_replies_current_of_total', [\n            currentReplyIndex + 1,\n            replies.length\n          ])},\n           ${t('confidence_percentage', [replies[currentReplyIndex]?.confidence])},${\n            replies[currentReplyIndex]?.message\n          }`,\n          type: 'acknowledgement'\n        });\n      }, [currentReplyId]);\n\n      return (\n        <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n          <Flex\n            as={StyledSuggestedReplyHeader}\n            container={{\n              justify: 'between',\n              alignContent: 'center'\n            }}\n          >\n            <Flex\n              container={{\n                alignItems: 'center',\n                gap: 1\n              }}\n            >\n              {ltr && (\n                <Button\n                  variant='simple'\n                  label={collapsed ? t('expand') : t('collapse')}\n                  aria-label={t(\n                    collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n                  )}\n                  icon\n                  onClick={onExpandCollapse}\n                >\n                  <Icon\n                    name='caret-down'\n                    suggestedReplyCollapsed={collapsed}\n                    as={StyledSuggestedReplyIcon}\n                  />\n                </Button>\n              )}\n\n              <Flex container={{ gap: 0.5 }}>\n                <Text variant='h3'>{t('suggested_replies')}</Text>\n                {collapsed && showNotification && <Alert variant='urgent' />}\n              </Flex>\n\n              {rtl && (\n                <Button\n                  variant='simple'\n                  label={collapsed ? t('expand') : t('collapse')}\n                  aria-label={t(\n                    collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n                  )}\n                  icon\n                  onClick={onExpandCollapse}\n                >\n                  <Icon\n                    name='caret-down'\n                    suggestedReplyCollapsed={collapsed}\n                    as={StyledSuggestedReplyIcon}\n                  />\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n          <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n            <Flex\n              container={{\n                direction: 'column',\n                gap: 1\n              }}\n              as={StyledSuggestedReplyContent}\n            >\n              {currentReplyId && replies.length ? (\n                <Flex container as={StyledReply}>\n                  {replies.find(reply => reply.id === currentReplyId)?.message}\n                </Flex>\n              ) : (\n                <EmptyState />\n              )}\n              <Flex\n                container={{\n                  justify: 'center'\n                }}\n                as={StyledRepliesAction}\n              >\n                {replies.length > 1 && (\n                  <Button\n                    icon\n                    aria-label={t('prev_suggested_reply')}\n                    variant='simple'\n                    disabled={currentReplyId === undefined || replies.length <= 1}\n                    onClick={() => {\n                      onSuggestedReplyChange('prev');\n                    }}\n                  >\n                    <Icon name='caret-left' />\n                  </Button>\n                )}\n                <Button\n                  disabled={currentReplyId === undefined || !replies || replies.length === 0}\n                  onClick={() => {\n                    const selectedReply = replies.find(reply => reply.id === currentReplyId);\n                    if (selectedReply) onSelect(selectedReply);\n                  }}\n                  aria-label={\n                    replies.length > 0 && currentReplyId\n                      ? t('use_current_template', [\n                          replies.length > 0 && currentReplyId\n                            ? replies.findIndex(reply => reply.id === currentReplyId) + 1\n                            : 0,\n                          replies.length\n                        ])\n                      : ''\n                  }\n                >\n                  {t('use')}\n                </Button>\n                {replies.length > 1 && (\n                  <Button\n                    icon\n                    aria-label={t('next_suggested_reply')}\n                    variant='simple'\n                    onClick={() => {\n                      onSuggestedReplyChange('next');\n                    }}\n                    disabled={currentReplyId === undefined || replies.length <= 1}\n                  >\n                    <Icon name='caret-right' />\n                  </Button>\n                )}\n              </Flex>\n            </Flex>\n          </ExpandCollapse>\n        </StyledSuggestedReplyContainer>\n      );\n    }\n  );\n\nexport default SuggestedReplyPicker;\n"]}

package/lib/components/Chat/index.d.ts

@@ -1,9 +1,13 @@
-export { default, ChatProps } from './Chat';
-export { default as ChatHeader, ChatHeaderProps } from './ChatHeader';
+export { default } from './Chat';
+export type { ChatProps } from './Chat';
+export { default as ChatHeader } from './ChatHeader';
+export type { ChatHeaderProps } from './ChatHeader';
 export { default as ChatBody, NewMessageSeparatorId } from './ChatBody';
-export { default as ChatComposer, ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';
-export { default as SuggestedReplyPicker, SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';
-export { AttachmentItemProps, ChatSettingsPanelProps, MediaPageLinks, MessageProps, MessageHeaderProps, ChatBodyProps, ChatBodyListItemProps, ChatBodyHandleValue, TypeIndicatorProps, SystemMessageProps } from './Chat.types';
+export { default as ChatComposer } from './ChatComposer';
+export type { ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';
+export { default as SuggestedReplyPicker } from './SuggestedReplyPicker';
+export type { SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';
+export type { AttachmentItemProps, ChatSettingsPanelProps, MediaPageLinks, MessageProps, MessageHeaderProps, ChatBodyProps, ChatBodyListItemProps, ChatBodyHandleValue, TypeIndicatorProps, SystemMessageProps } from './Chat.types';
 export { default as Message } from './Message';
 export { default as SystemMessage } from './SystemMessage';
 export { default as TypeIndicator } from './TypeIndicator';

package/lib/components/Chat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,iBAAiB,EACjB,iCAAiC,EAClC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,yBAAyB,EACzB,cAAc,EACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxF,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/Chat/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAa,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAmB,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EACL,OAAO,IAAI,YAAY,EAGxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,OAAO,IAAI,oBAAoB,EAGhC,MAAM,wBAAwB,CAAC;AAahC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default, ChatProps } from './Chat';\nexport { default as ChatHeader, ChatHeaderProps } from './ChatHeader';\nexport { default as ChatBody, NewMessageSeparatorId } from './ChatBody';\nexport {\n  default as ChatComposer,\n  ChatComposerProps,\n  ChatComposerImperativeHandleProps\n} from './ChatComposer';\nexport {\n  default as SuggestedReplyPicker,\n  SuggestedReplyPickerProps,\n  SuggestedReply\n} from './SuggestedReplyPicker';\nexport {\n  AttachmentItemProps,\n  ChatSettingsPanelProps,\n  MediaPageLinks,\n  MessageProps,\n  MessageHeaderProps,\n  ChatBodyProps,\n  ChatBodyListItemProps,\n  ChatBodyHandleValue,\n  TypeIndicatorProps,\n  SystemMessageProps\n} from './Chat.types';\nexport { default as Message } from './Message';\nexport { default as SystemMessage } from './SystemMessage';\nexport { default as TypeIndicator } from './TypeIndicator';\nexport { default as ChatSettingsPanel } from './ChatSettingsPanel';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAczE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './Chat';\nexport type { ChatProps } from './Chat';\nexport { default as ChatHeader } from './ChatHeader';\nexport type { ChatHeaderProps } from './ChatHeader';\nexport { default as ChatBody, NewMessageSeparatorId } from './ChatBody';\nexport { default as ChatComposer } from './ChatComposer';\nexport type { ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';\nexport { default as SuggestedReplyPicker } from './SuggestedReplyPicker';\nexport type { SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';\nexport type {\n  AttachmentItemProps,\n  ChatSettingsPanelProps,\n  MediaPageLinks,\n  MessageProps,\n  MessageHeaderProps,\n  ChatBodyProps,\n  ChatBodyListItemProps,\n  ChatBodyHandleValue,\n  TypeIndicatorProps,\n  SystemMessageProps\n} from './Chat.types';\nexport { default as Message } from './Message';\nexport { default as SystemMessage } from './SystemMessage';\nexport { default as TypeIndicator } from './TypeIndicator';\nexport { default as ChatSettingsPanel } from './ChatSettingsPanel';\n"]}

package/lib/components/Email/index.d.ts

@@ -1,5 +1,5 @@
 export { default } from './Email';
-export { EmailUser, EmailProps, EmailComposerProps, EmailConversationProps, EmailShellProps, EntityListProps, EmailManagerProps, EmailTemplate, EmailSummaryListProps, EmailSummaryItemProps, EmailCaseViewProps, EmailNotificationPanelProps } from './Email.types';
+export type { EmailUser, EmailProps, EmailComposerProps, EmailConversationProps, EmailShellProps, EntityListProps, EmailManagerProps, EmailTemplate, EmailSummaryListProps, EmailSummaryItemProps, EmailCaseViewProps, EmailNotificationPanelProps } from './Email.types';
 export { default as EmailConversation } from './EmailConversation';
 export { default as EmailShell } from './EmailShell';
 export { default as EmailComposer } from './EmailComposer';

package/lib/components/Email/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EACL,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,2BAA2B,EAC5B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,2BAA2B,IAAI,wBAAwB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EACV,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,2BAA2B,EAC5B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,2BAA2B,IAAI,wBAAwB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Email/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAelC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,2BAA2B,IAAI,wBAAwB,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Email';\nexport {\n  EmailUser,\n  EmailProps,\n  EmailComposerProps,\n  EmailConversationProps,\n  EmailShellProps,\n  EntityListProps,\n  EmailManagerProps,\n  EmailTemplate,\n  EmailSummaryListProps,\n  EmailSummaryItemProps,\n  EmailCaseViewProps,\n  EmailNotificationPanelProps\n} from './Email.types';\nexport { default as EmailConversation } from './EmailConversation';\nexport { default as EmailShell } from './EmailShell';\nexport { default as EmailComposer } from './EmailComposer';\nexport { default as EmailSummaryItem } from './EmailSummaryItem';\nexport { default as EmailSummaryList } from './EmailSummaryList';\nexport { default as EntityList } from './EntityList';\nexport { default as EmailManager } from './EmailManager';\nexport { default as EmailCaseView } from './EmailCaseView';\nexport { default as EmailNotificationPanel } from './EmailNotificationPanel';\nexport { StyledEmailNotificationList as AppshellEmailSummaryList } from './Email.styles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Email/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAelC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,2BAA2B,IAAI,wBAAwB,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Email';\nexport type {\n  EmailUser,\n  EmailProps,\n  EmailComposerProps,\n  EmailConversationProps,\n  EmailShellProps,\n  EntityListProps,\n  EmailManagerProps,\n  EmailTemplate,\n  EmailSummaryListProps,\n  EmailSummaryItemProps,\n  EmailCaseViewProps,\n  EmailNotificationPanelProps\n} from './Email.types';\nexport { default as EmailConversation } from './EmailConversation';\nexport { default as EmailShell } from './EmailShell';\nexport { default as EmailComposer } from './EmailComposer';\nexport { default as EmailSummaryItem } from './EmailSummaryItem';\nexport { default as EmailSummaryList } from './EmailSummaryList';\nexport { default as EntityList } from './EntityList';\nexport { default as EmailManager } from './EmailManager';\nexport { default as EmailCaseView } from './EmailCaseView';\nexport { default as EmailNotificationPanel } from './EmailNotificationPanel';\nexport { StyledEmailNotificationList as AppshellEmailSummaryList } from './Email.styles';\n"]}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,EAAE,EAOH,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAQZ,cAAc,EAKf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQ/D,MAAM,WAAW,MAAM;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC,yGAAyG;IACzG,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACjD,2EAA2E;IAC3E,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,qLAAqL;IACrL,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,oIAAoI;IACpI,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACxD,2GAA2G;IAC3G,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC5C,yIAAyI;IACzI,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAChE,wFAAwF;IACxF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,gIAAgI;IAChI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAiDD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CA4LtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Feed.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAA6D,MAAM,OAAO,CAAC;AAGnG,OAAO,EAOL,YAAY,EAab,MAAM,yBAAyB,CAAC;AASjC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAyCzC,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,YAAY,GAAG,SAAS,CAsMtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Feed/Feed.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Feed.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EAEJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,WAAW,EAEX,mBAAmB,EACnB,MAAM,EACN,kBAAkB,EAClB,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClG,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AAEjG,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAsDvC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACpC,OAAO,GAAG,CAAA;MACN,iBAAiB,sBAAsB,cAAc;gCAC3B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvC,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;GACnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAC1C,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAK7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAA;;;CAGjC,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,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,IAAI,GAAiC,UAAU,CACnD,CAAC,KAA+B,EAAE,GAAwB,EAAE,EAAE;IAC5D,MAAM,EACJ,YAAY,GAAG,KAAK,EACpB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,GAAG,EAAE,EAClB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,oBAAoB,GAAG,EAAE,EACzB,WAAW,EACX,OAAO,EACP,cAAc,EACd,UAAU,EACV,aAAa,EACb,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAe,CAAC;IAC5D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAe,CAAC;IAC1D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAExC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,SAAS,CAAC,SAAS,CAAC,CAAC;IAErB,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE;QACrD,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,aAAa,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE;QACnD,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QAC3C,IAAI,GAAG,KAAK,QAAQ;YAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACpB,mBAAmB,CACjB,EAAE,OAAO,EAAE,IAAI,EAAE,EACjB,KAAK,CAAC,MAAM,GAAG,CAAC,EAChB,GAAG,EAAE;QACH,UAAU,EAAE,EAAE,CAAC;IACjB,CAAC,EACD,IAAI,EAAE,qBAAqB,CAC5B,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,YAAoB,EAAE,EAAE;QACpD,mBAAmB,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,UAAU,CAAC,GAAG,EAAE;YACrB,mBAAmB,CAAC,YAAY,CAAC,CAAC;QACpC,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE;YAChB,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;YAC9C,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,IAAI,SAAwC,CAAC;YAC7C,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;YACnD,IAAI,UAAU,GAAG,CAAC;gBAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC;iBAChD,IAAI,UAAU,GAAG,CAAC;gBACrB,QAAQ,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;YAE1E,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ;IACnB,mEAAmE;;QAAnE,mEAAmE;QACnE,KAAK,EAAE;YACL,WAAW;YACX,QAAQ,EAAE,CAAC,CAAC,EAAE;gBACZ,IAAI,iBAAiB;oBAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC9C,CAAC;YACD,aAAa;YACb,iBAAiB;YACjB,oBAAoB;YACpB,cAAc;YACd,gBAAgB;YAChB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,QAAQ;YACR,QAAQ;YACR,OAAO;SACR,YAED,MAAC,UAAU,IAAC,GAAG,EAAE,OAAO,KAAM,SAAS,aACrC,KAAC,aAAa,cAAE,gBAAgB,GAAiB,EACjD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,aAC9E,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAChC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,MAAM,IACL,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAC7C,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE;gCAClC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,YAAY,EAAE;oCAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;oCACvB,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;oCAC5C,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;iCACxB;4BACH,CAAC,EACD,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,WAAW,EAAE,EAAE,EAC1E,UAAU,kBAEV,KAAC,IAAI,IACH,IAAI,EACF,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC;oCACpE,CAAC,CAAC,WAAW;oCACb,CAAC,CAAC,QAAQ,GAEd,GACK,CACV,IACI,EACP,KAAC,OAAO,IACN,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,YAAY,EAC/B,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,QAAQ,EAChB,EAAE,EAAE,gBAAgB,EACpB,MAAM,EAAE,OAAO,CAAC,OAAO,IAAI,SAAS,EACpC,kBAAkB,kBAElB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAC,UAAU,aAC7D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,QAAQ,YAC3B,CAAC,CAAC,SAAS,CAAC,GACR,EACP,KAAC,gBAAgB,IAAC,GAAG,EAAE,SAAS,YAC7B,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE;oCACrB,OAAO,CACL,uBACE,KAAC,MAAM,OACD,MAAM,EACV,QAAQ,EAAE,CAAC,KAAoC,EAAE,EAAE,CACjD,cAAc,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAEzD,IANK,MAAM,CAAC,EAAE,CAOb,CACN,CAAC;gCACJ,CAAC,CAAC,GACe,IACd,GACC,EAEV,eAAK,EAAE,EAAE,EAAE,aACR,aAAa,EACb,KAAK,IACF,EAEL,YAAY,IAAI,CACf,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YACxD,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,GAC1B,CACR,IACU,GACQ,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  ChangeEvent,\n  ReactNode,\n  FC,\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Popover,\n  Switch,\n  Text,\n  Progress,\n  usePrevious,\n  NoChildrenProp,\n  useItemIntersection,\n  useUID,\n  useConsolidatedRef,\n  getFocusables\n} from '@pega/cosmos-react-core';\nimport { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport { FeedContext, FeedContextValue } from './Feed.context';\nimport { StyledFeedNewPost } from './FeedNewPost';\nimport { StyledFeedPost } from './FeedPost';\nimport FeedButton from './FeedButton';\nimport FeedAnnouncer from './FeedAnnouncer';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nexport interface Filter {\n  /** Sets DOM id for the control and associates label element via 'for' attribute. */\n  id: string;\n  /** Pass a string or a fragment with an Icon and string for the filter label. */\n  label: ReactNode;\n  /**\n   * Disables the filter.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Sets on prop via onFilterChange.\n   * @default false\n   */\n  on?: boolean;\n}\n\nexport interface FeedProps extends NoChildrenProp {\n  /** Title for the feed. */\n  title: string;\n  /** Information related to the user of the Feed. */\n  userInfo: FeedContextValue['userInfo'];\n  /** A set of search types that can be used to determine which data set to conduct a mention search on. */\n  searchTypes?: FeedContextValue['searchTypes'];\n  /** A callback that runs when a decorator search has been run inside of the feed. */\n  onDecoratorSearch?: FeedContextValue['onSearch'];\n  /** Results that will be shown in a Popover for a mention or tag search. */\n  searchResults?: FeedContextValue['searchResults'];\n  /** A callback that is triggered when a mention button is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component. */\n  onMentionClick?: FeedContextValue['onMentionClick'];\n  /** A callback that is triggered when a mention link is previewed. The callback sends back the id, text, and type of the mention. */\n  onMentionPreview?: FeedContextValue['onMentionPreview'];\n  /** A callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag. */\n  onTagClick?: FeedContextValue['onTagClick'];\n  /** A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern. */\n  interactionRenderers?: FeedContextValue['interactionRenderers'];\n  /** A mapping for various element types to render custom components for within posts. */\n  markdownMap?: FeedContextValue['markdownMap'];\n  /** A set of filters to apply to the Feed. */\n  filters?: Filter[];\n  /** A callback that runs when the filter is toggled. */\n  onFilterChange?: (filterId: string, on: boolean) => void;\n  /** A callback that is triggered when the bottom of the Feed is scrolled into view so that additional posts may be displayed. */\n  onLoadMore?: () => void;\n  /** Indicates if the posts are being currently loading */\n  loadingPosts?: boolean;\n  /** A region to hold the new post component */\n  newPostRegion?: ReactNode;\n  /** A list of FeedPost components */\n  posts?: ReactNode[];\n}\n\nconst StyledFeed = styled.div(props => {\n  return css`\n    ${StyledFeedNewPost}:not(:last-child), ${StyledFeedPost}:not(:last-child) {\n      margin-bottom: calc(2 * ${props.theme.base.spacing});\n    }\n  `;\n});\n\nStyledFeed.defaultProps = defaultThemeProp;\n\nconst StyledHeading = styled.div(props => {\n  return css`\n    margin: ${props.theme.base.spacing} 0;\n  `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nconst StyledFilterMenu = styled.div(props => {\n  return css`\n    padding: calc(2 * ${props.theme.base.spacing});\n\n    fieldset {\n      border: none;\n    }\n  `;\n});\n\nStyledFilterMenu.defaultProps = defaultThemeProp;\n\nconst StyledFilterList = styled.ul`\n  list-style-type: none;\n  min-width: 10rem;\n`;\n\nStyledFilterList.defaultProps = defaultThemeProp;\n\nconst StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin-top: ${theme.base.spacing};\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst Feed: FC<ForwardProps & FeedProps> = forwardRef(\n  (props: ForwardProps & FeedProps, ref: Ref<HTMLDivElement>) => {\n    const {\n      loadingPosts = false,\n      variant,\n      children,\n      userInfo,\n      className,\n      title,\n      searchTypes,\n      onDecoratorSearch,\n      searchResults = [],\n      onMentionClick,\n      onMentionPreview,\n      onTagClick,\n      mentionContent,\n      interactionRenderers = [],\n      markdownMap,\n      filters,\n      onFilterChange,\n      onLoadMore,\n      newPostRegion,\n      posts = [],\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n    const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n    const [mountPopover, setMountPopover] = useState(false);\n    const [showSearchResults, setShowSearchResults] = useState(false);\n    const prevPosts = usePrevious(posts);\n    const [announcementText, setAnnouncementText] = useState('');\n\n    const feedRef = useConsolidatedRef(ref);\n\n    const filterRef = useRef(null);\n    useArrows(filterRef);\n\n    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n      setMountPopover(false);\n    });\n\n    useOuterEvent('focusin', [popoverEl, buttonEl], () => {\n      setMountPopover(false);\n    });\n\n    const onKeydown = ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') setMountPopover(false);\n    };\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, []);\n\n    const id = useUID();\n    useItemIntersection(\n      { current: null },\n      posts.length - 1,\n      () => {\n        onLoadMore?.();\n      },\n      `#${id} > div[role='none']`\n    );\n\n    const announce = useCallback((announcement: string) => {\n      setAnnouncementText('');\n      return setTimeout(() => {\n        setAnnouncementText(announcement);\n      }, 0);\n    }, []);\n\n    useEffect(() => {\n      if (loadingPosts) {\n        const timeoutId = announce(t('loading_post'));\n        return () => clearTimeout(timeoutId);\n      }\n    }, [loadingPosts]);\n\n    useEffect(() => {\n      if (prevPosts) {\n        let timeoutId: ReturnType<typeof setTimeout>;\n        const difference = posts.length - prevPosts.length;\n        if (difference < 0) announce(t('feed_post_removed'));\n        else if (difference > 0)\n          announce(t('feed_new_post_added', [difference], { count: difference }));\n\n        return () => clearTimeout(timeoutId);\n      }\n    }, [posts]);\n\n    return (\n      <FeedContext.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          searchTypes,\n          onSearch: e => {\n            if (onDecoratorSearch) onDecoratorSearch(e);\n          },\n          searchResults,\n          showSearchResults,\n          setShowSearchResults,\n          onMentionClick,\n          onMentionPreview,\n          onTagClick,\n          interactionRenderers,\n          markdownMap,\n          userInfo,\n          announce,\n          feedRef\n        }}\n      >\n        <StyledFeed ref={feedRef} {...restProps}>\n          <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n          <Flex container={{ justify: 'between', alignItems: 'center' }} as={StyledHeading}>\n            <Text variant='h2'>{title}</Text>\n            {filters && filters.length > 0 && (\n              <Button\n                as={FeedButton}\n                ref={setButtonEl}\n                variant='simple'\n                icon\n                onClick={() => setMountPopover(curr => !curr)}\n                onKeyDown={(event: KeyboardEvent) => {\n                  if (event.key === 'ArrowDown' && mountPopover) {\n                    event.preventDefault();\n                    const focusables = getFocusables(filterRef);\n                    focusables[0]?.focus();\n                  }\n                }}\n                label={mountPopover ? undefined : `${title} ${t('filters').toLowerCase()}`}\n                emphasized\n              >\n                <Icon\n                  name={\n                    filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)\n                      ? 'filter-on'\n                      : 'filter'\n                  }\n                />\n              </Button>\n            )}\n          </Flex>\n          <Popover\n            show={!!filters && mountPopover}\n            ref={setPopoverEl}\n            target={buttonEl}\n            as={StyledFilterMenu}\n            portal={feedRef.current ?? undefined}\n            hideOnTargetHidden\n          >\n            <Flex container={{ direction: 'column', gap: 2 }} as='fieldset'>\n              <Text variant='h3' as='legend'>\n                {t('filters')}\n              </Text>\n              <StyledFilterList ref={filterRef}>\n                {filters?.map(filter => {\n                  return (\n                    <li key={filter.id}>\n                      <Switch\n                        {...filter}\n                        onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                          onFilterChange?.(event.target.id, event.target.checked)\n                        }\n                      />\n                    </li>\n                  );\n                })}\n              </StyledFilterList>\n            </Flex>\n          </Popover>\n\n          <div id={id}>\n            {newPostRegion}\n            {posts}\n          </div>\n\n          {loadingPosts && (\n            <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n              <Progress placement='inline' />\n            </Flex>\n          )}\n        </StyledFeed>\n      </FeedContext.Provider>\n    );\n  }\n);\n\nexport default Feed;\n"]}
+{"version":3,"file":"Feed.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FC, useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  getFocusables,\n  Icon,\n  registerIcon,\n  Popover,\n  StyledCard,\n  Switch,\n  Text,\n  Progress,\n  usePrevious,\n  useItemIntersection,\n  useUID,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\nimport { useArrows, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core/lib/hooks';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nimport { FeedContext } from './Feed.context';\nimport FeedButton from './FeedButton';\nimport FeedAnnouncer from './FeedAnnouncer';\nimport { FeedProps } from './Feed.types';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst StyledFeed = styled.div`\n  ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {\n    padding-bottom: 0.25rem;\n  }\n`;\n\nStyledFeed.defaultProps = defaultThemeProp;\n\nconst StyledFilterMenu = styled.div(props => {\n  return css`\n    padding: calc(2 * ${props.theme.base.spacing});\n\n    fieldset {\n      border: none;\n    }\n  `;\n});\n\nStyledFilterMenu.defaultProps = defaultThemeProp;\n\nconst StyledFilterList = styled.ul`\n  list-style-type: none;\n  min-width: 10rem;\n`;\n\nStyledFilterList.defaultProps = defaultThemeProp;\n\nconst StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin-top: ${theme.base.spacing};\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nconst Feed: FC<ForwardProps & FeedProps> = forwardRef(\n  (props: ForwardProps & FeedProps, ref: Ref<HTMLDivElement>) => {\n    const {\n      loadingPosts = false,\n      variant,\n      children,\n      userInfo,\n      className,\n      title,\n      searchTypes,\n      onDecoratorSearch,\n      searchResults = [],\n      onMentionClick,\n      onMentionPreview,\n      onTagClick,\n      mentionContent,\n      interactionRenderers = [],\n      markdownMap,\n      filters,\n      onFilterChange,\n      onLoadMore,\n      newPostRegion,\n      posts = [],\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n    const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n    const [mountPopover, setMountPopover] = useState(false);\n    const [showSearchResults, setShowSearchResults] = useState(false);\n    const prevPosts = usePrevious(posts);\n    const [announcementText, setAnnouncementText] = useState('');\n\n    const feedRef = useConsolidatedRef(ref);\n\n    const filterRef = useRef(null);\n    useArrows(filterRef);\n\n    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n      setMountPopover(false);\n    });\n\n    useOuterEvent('focusin', [popoverEl], () => {\n      setMountPopover(false);\n    });\n\n    const onKeydown = ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') setMountPopover(false);\n    };\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, []);\n\n    const id = useUID();\n    useItemIntersection(\n      { current: null },\n      posts.length - 1,\n      () => {\n        onLoadMore?.();\n      },\n      `#${id} > article[role='none']`\n    );\n\n    const announce = useCallback((announcement: string) => {\n      setAnnouncementText('');\n      return setTimeout(() => {\n        setAnnouncementText(announcement);\n      }, 0);\n    }, []);\n\n    useEffect(() => {\n      if (loadingPosts) {\n        const timeoutId = announce(t('loading_post'));\n        return () => clearTimeout(timeoutId);\n      }\n    }, [loadingPosts]);\n\n    useEffect(() => {\n      if (prevPosts) {\n        let timeoutId: ReturnType<typeof setTimeout>;\n        const difference = posts.length - prevPosts.length;\n        if (difference < 0) announce(t('feed_post_removed'));\n        else if (difference > 0)\n          announce(t('feed_new_post_added', [difference], { count: difference }));\n\n        return () => clearTimeout(timeoutId);\n      }\n    }, [posts]);\n\n    useEffect(() => {\n      if (mountPopover) {\n        setTimeout(() => {\n          const focusables = getFocusables(filterRef);\n          focusables[0]?.focus();\n        }, 0);\n      }\n    }, [mountPopover]);\n\n    return (\n      <FeedContext.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          searchTypes,\n          onSearch: e => {\n            if (onDecoratorSearch) onDecoratorSearch(e);\n          },\n          searchResults,\n          showSearchResults,\n          setShowSearchResults,\n          onMentionClick,\n          onMentionPreview,\n          onTagClick,\n          interactionRenderers,\n          markdownMap,\n          userInfo,\n          announce,\n          feedRef\n        }}\n      >\n        <StyledFeed ref={feedRef} {...restProps}>\n          <FeedAnnouncer>{announcementText}</FeedAnnouncer>\n          <Card>\n            <CardHeader>\n              <Text variant='h2'>{title}</Text>\n              {filters && filters.length > 0 && (\n                <Button\n                  as={FeedButton}\n                  ref={setButtonEl}\n                  variant='simple'\n                  icon\n                  onClick={() => setMountPopover(curr => !curr)}\n                  label={`${title} ${t('filters').toLowerCase()}`}\n                  emphasized\n                >\n                  <Icon\n                    name={\n                      filters?.map(filter => !!filter.on).reduce((acc, curr) => acc || curr)\n                        ? 'filter-on'\n                        : 'filter'\n                    }\n                  />\n                </Button>\n              )}\n\n              <Popover\n                show={!!filters && mountPopover}\n                ref={setPopoverEl}\n                target={buttonEl}\n                as={StyledFilterMenu}\n                portal={feedRef.current ?? undefined}\n                hideOnTargetHidden\n                onKeyDown={(event: KeyboardEvent) => {\n                  if (event.key === 'Tab') {\n                    event.preventDefault();\n                    buttonEl?.focus();\n                  }\n                }}\n              >\n                <Flex container={{ direction: 'column', gap: 2 }} as='fieldset'>\n                  <Text variant='h3' as='legend'>\n                    {t('filters')}\n                  </Text>\n                  <StyledFilterList ref={filterRef}>\n                    {filters?.map(filter => {\n                      return (\n                        <li key={filter.id}>\n                          <Switch\n                            {...filter}\n                            onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                              onFilterChange?.(event.target.id, event.target.checked)\n                            }\n                          />\n                        </li>\n                      );\n                    })}\n                  </StyledFilterList>\n                </Flex>\n              </Popover>\n            </CardHeader>\n\n            <CardContent>{newPostRegion}</CardContent>\n          </Card>\n\n          <div id={id}>{posts}</div>\n\n          {loadingPosts && (\n            <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n              <Progress placement='inline' />\n            </Flex>\n          )}\n        </StyledFeed>\n      </FeedContext.Provider>\n    );\n  }\n);\n\nexport default Feed;\n"]}