@pega/cosmos-react-social 3.0.0-dev.4.2 → 3.0.0-dev.5.0

package/lib/components/Chat/Chat.js

@@ -61,7 +61,7 @@ const Chat = forwardRef((props, ref) => {
                     direction: 'column'
                 }, as: StyledUtilityMerger, children: [utility && (_jsx(Flex, { tabIndex: 0, as: StyledUtilityContainer, container: {
                             direction: 'column'
-                        }, children: _jsx(StyledUtilityContent, { ref: utilityContentRef, children: utility }, void 0) }, void 0)), banner && (_jsx(Banner, { id: banner.id, variant: banner.variant, heading: banner.heading, messages: banner.messages }, void 0)), body] }, void 0), suggestedReplyPicker, footer] }, void 0));
+                        }, children: _jsx(StyledUtilityContent, { ref: utilityContentRef, children: utility }) })), banner && (_jsx(Banner, { id: banner.id, variant: banner.variant, heading: banner.heading, messages: banner.messages })), body] }), suggestedReplyPicker, footer] }));
 });
 export default Chat;
 //# sourceMappingURL=Chat.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAIV,MAAM,EACN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,MAAM,EAEN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AA+BpF,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC5C,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACzC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAC5B,OAAO,EAAE,EACP,oBAAoB,EAAE,iBAAiB,EACvC,sBAAsB,EAAE,mBAAmB,EAC5C,EACF,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;kBAEM,iBAAiB;;MAE7B,mBAAmB;;;;;;MAMnB,sBAAsB;;;;;;;0BAOF,mBAAmB;UACnC,oBAAoB;mBACX,OAAO;sBACJ,UAAU;;;;sCAIM,mBAAmB;oDACL,mBAAmB;;;;;;;;MAQjE,YAAY;0BACQ,OAAO;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5F,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,SAAS,aAEZ,MAAM,EACP,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;iBACpB,EACD,EAAE,EAAE,mBAAmB,aAEtB,OAAO,IAAI,CACV,KAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE;4BACT,SAAS,EAAE,QAAQ;yBACpB,YAED,KAAC,oBAAoB,IAAC,GAAG,EAAE,iBAAiB,YAAG,OAAO,WAAwB,WACzE,CACR,EAEA,MAAM,IAAI,CACT,KAAC,MAAM,IACL,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,WACzB,CACH,EACA,IAAI,YACA,EACN,oBAAoB,EACpB,MAAM,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  ReactElement,\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Banner,\n  BannerProps,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\n\nimport ChatBody from './ChatBody';\nimport ChatComposer from './ChatComposer';\nimport ChatHeader from './ChatHeader';\nimport SuggestedReplyPicker from './SuggestedReplyPicker';\n\nexport type ChatBannerProps = {\n  /** Content */\n  content: string;\n  /** Name of the icon */\n  icon: string;\n};\n\nexport interface ChatProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Header of conversation pane */\n  header: ReactElement<typeof ChatHeader>;\n  /** Utility - This is used by utility container internally. It has predefined styles and visible conditionally based on utility prop is */\n  utility?: ReactNode;\n  /** Wrapper of message groups, system messages, type ahead */\n  body: ReactElement<typeof ChatBody>;\n  /** Wrapper of suggested replies */\n  suggestedReplyPicker?: ReactElement<typeof SuggestedReplyPicker>;\n  /** chat banner */\n  banner?: BannerProps;\n  /** Wrapper of conversation input, emojis, attachments */\n  footer: ReactElement<typeof ChatComposer>;\n}\n\nconst StyledUtilityContainer = styled.div``;\nconst StyledUtilityMerger = styled.div``;\nconst StyledUtilityContent = styled.div``;\n\nconst StyledChatContainer = styled.section(props => {\n  const {\n    theme: {\n      base: {\n        spacing,\n        shadow: { high: shadowHigh },\n        palette: {\n          'primary-background': primaryBackground,\n          'secondary-background': secondaryBackground\n        }\n      }\n    }\n  } = props;\n  return css`\n    height: 100%;\n    background: ${primaryBackground};\n    width: 100%;\n    ${StyledUtilityMerger} {\n      min-height: 15rem;\n      position: relative;\n      height: 100%;\n      overflow-y: hidden;\n    }\n    ${StyledUtilityContainer} {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 2;\n      max-height: 60%;\n      width: 100%;\n      background-color: ${secondaryBackground};\n      > ${StyledUtilityContent} {\n        padding: ${spacing} 0;\n        box-shadow: ${shadowHigh};\n        height: auto;\n        width: 100%;\n        overflow-y: auto;\n        background: linear-gradient(${secondaryBackground} 10%, rgba(255, 255, 255, 0)),\n          linear-gradient(rgba(255, 255, 255, 0), ${secondaryBackground} 10%) 0 100%,\n          radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),\n          radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;\n        background-repeat: no-repeat;\n        background-size: 100% 1rem, 100% 1rem, 100% 0.25rem, 100% 0.25rem;\n        background-attachment: local, local, scroll, scroll;\n      }\n    }\n    ${StyledBanner} {\n      padding: calc(2 * ${spacing});\n      margin-bottom: 0;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledChatContainer.defaultProps = defaultThemeProp;\n\nconst Chat: FunctionComponent<ChatProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatProps>, ref: ChatProps['ref']) => {\n    const { header, body, footer, utility, banner, suggestedReplyPicker, ...restProps } = props;\n\n    const utilityContentRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      utilityContentRef.current?.focus();\n    }, [utility]);\n\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatContainer}\n        container={{\n          direction: 'column'\n        }}\n        {...restProps}\n      >\n        {header}\n        <Flex\n          container={{\n            direction: 'column'\n          }}\n          as={StyledUtilityMerger}\n        >\n          {utility && (\n            <Flex\n              tabIndex={0}\n              as={StyledUtilityContainer}\n              container={{\n                direction: 'column'\n              }}\n            >\n              <StyledUtilityContent ref={utilityContentRef}>{utility}</StyledUtilityContent>\n            </Flex>\n          )}\n\n          {banner && (\n            <Banner\n              id={banner.id}\n              variant={banner.variant}\n              heading={banner.heading}\n              messages={banner.messages}\n            />\n          )}\n          {body}\n        </Flex>\n        {suggestedReplyPicker}\n        {footer}\n      </Flex>\n    );\n  }\n);\n\nexport default Chat;\n"]}
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAIV,MAAM,EACN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,MAAM,EAEN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AA+BpF,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC5C,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACzC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAC5B,OAAO,EAAE,EACP,oBAAoB,EAAE,iBAAiB,EACvC,sBAAsB,EAAE,mBAAmB,EAC5C,EACF,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;kBAEM,iBAAiB;;MAE7B,mBAAmB;;;;;;MAMnB,sBAAsB;;;;;;;0BAOF,mBAAmB;UACnC,oBAAoB;mBACX,OAAO;sBACJ,UAAU;;;;sCAIM,mBAAmB;oDACL,mBAAmB;;;;;;;;MAQjE,YAAY;0BACQ,OAAO;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5F,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,SAAS,aAEZ,MAAM,EACP,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;iBACpB,EACD,EAAE,EAAE,mBAAmB,aAEtB,OAAO,IAAI,CACV,KAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE;4BACT,SAAS,EAAE,QAAQ;yBACpB,YAED,KAAC,oBAAoB,IAAC,GAAG,EAAE,iBAAiB,YAAG,OAAO,GAAwB,GACzE,CACR,EAEA,MAAM,IAAI,CACT,KAAC,MAAM,IACL,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,GACzB,CACH,EACA,IAAI,IACA,EACN,oBAAoB,EACpB,MAAM,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  ReactElement,\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Banner,\n  BannerProps,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\n\nimport ChatBody from './ChatBody';\nimport ChatComposer from './ChatComposer';\nimport ChatHeader from './ChatHeader';\nimport SuggestedReplyPicker from './SuggestedReplyPicker';\n\nexport type ChatBannerProps = {\n  /** Content */\n  content: string;\n  /** Name of the icon */\n  icon: string;\n};\n\nexport interface ChatProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Header of conversation pane */\n  header: ReactElement<typeof ChatHeader>;\n  /** Utility - This is used by utility container internally. It has predefined styles and visible conditionally based on utility prop is */\n  utility?: ReactNode;\n  /** Wrapper of message groups, system messages, type ahead */\n  body: ReactElement<typeof ChatBody>;\n  /** Wrapper of suggested replies */\n  suggestedReplyPicker?: ReactElement<typeof SuggestedReplyPicker>;\n  /** chat banner */\n  banner?: BannerProps;\n  /** Wrapper of conversation input, emojis, attachments */\n  footer: ReactElement<typeof ChatComposer>;\n}\n\nconst StyledUtilityContainer = styled.div``;\nconst StyledUtilityMerger = styled.div``;\nconst StyledUtilityContent = styled.div``;\n\nconst StyledChatContainer = styled.section(props => {\n  const {\n    theme: {\n      base: {\n        spacing,\n        shadow: { high: shadowHigh },\n        palette: {\n          'primary-background': primaryBackground,\n          'secondary-background': secondaryBackground\n        }\n      }\n    }\n  } = props;\n  return css`\n    height: 100%;\n    background: ${primaryBackground};\n    width: 100%;\n    ${StyledUtilityMerger} {\n      min-height: 15rem;\n      position: relative;\n      height: 100%;\n      overflow-y: hidden;\n    }\n    ${StyledUtilityContainer} {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 2;\n      max-height: 60%;\n      width: 100%;\n      background-color: ${secondaryBackground};\n      > ${StyledUtilityContent} {\n        padding: ${spacing} 0;\n        box-shadow: ${shadowHigh};\n        height: auto;\n        width: 100%;\n        overflow-y: auto;\n        background: linear-gradient(${secondaryBackground} 10%, rgba(255, 255, 255, 0)),\n          linear-gradient(rgba(255, 255, 255, 0), ${secondaryBackground} 10%) 0 100%,\n          radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),\n          radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;\n        background-repeat: no-repeat;\n        background-size: 100% 1rem, 100% 1rem, 100% 0.25rem, 100% 0.25rem;\n        background-attachment: local, local, scroll, scroll;\n      }\n    }\n    ${StyledBanner} {\n      padding: calc(2 * ${spacing});\n      margin-bottom: 0;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledChatContainer.defaultProps = defaultThemeProp;\n\nconst Chat: FunctionComponent<ChatProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatProps>, ref: ChatProps['ref']) => {\n    const { header, body, footer, utility, banner, suggestedReplyPicker, ...restProps } = props;\n\n    const utilityContentRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      utilityContentRef.current?.focus();\n    }, [utility]);\n\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatContainer}\n        container={{\n          direction: 'column'\n        }}\n        {...restProps}\n      >\n        {header}\n        <Flex\n          container={{\n            direction: 'column'\n          }}\n          as={StyledUtilityMerger}\n        >\n          {utility && (\n            <Flex\n              tabIndex={0}\n              as={StyledUtilityContainer}\n              container={{\n                direction: 'column'\n              }}\n            >\n              <StyledUtilityContent ref={utilityContentRef}>{utility}</StyledUtilityContent>\n            </Flex>\n          )}\n\n          {banner && (\n            <Banner\n              id={banner.id}\n              variant={banner.variant}\n              heading={banner.heading}\n              messages={banner.messages}\n            />\n          )}\n          {body}\n        </Flex>\n        {suggestedReplyPicker}\n        {footer}\n      </Flex>\n    );\n  }\n);\n\nexport default Chat;\n"]}

package/lib/components/Chat/ChatBody.js

@@ -12,7 +12,7 @@ const ChatBody = forwardRef((props, ref) => {
             grow: 1
         }, container: {
             direction: 'column'
-        }, "aria-live": 'polite', ref: ref, ...restProps, children: children }, void 0));
+        }, "aria-live": 'polite', ref: ref, ...restProps, children: children }));
 });
 export default ChatBody;
 //# sourceMappingURL=ChatBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatBody.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAsC,MAAM,OAAO,CAAC;AAC1F,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAW7D,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzC,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzC,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,eACS,QAAQ,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,YAEZ,QAAQ,WACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, ReactElement } from 'react';\nimport styled from 'styled-components';\n\nimport { Flex, ForwardProps } from '@pega/cosmos-react-core';\n\nimport MessageList from './MessageList';\n\nexport interface ChatBodyProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Message data Array */\n  children: ReactElement<typeof MessageList>;\n}\n\nconst StyledChatBodyContainer = styled.div`\n  position: relative;\n  overflow-y: hidden;\n`;\n\nconst ChatBody: FunctionComponent<ChatBodyProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatBodyProps>, ref: ChatBodyProps['ref']) => {\n    const { children, ...restProps } = props;\n\n    return (\n      <Flex\n        as={StyledChatBodyContainer}\n        item={{\n          grow: 1\n        }}\n        container={{\n          direction: 'column'\n        }}\n        aria-live='polite'\n        ref={ref}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nexport default ChatBody;\n"]}
+{"version":3,"file":"ChatBody.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAsC,MAAM,OAAO,CAAC;AAC1F,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAW7D,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzC,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzC,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,eACS,QAAQ,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, ReactElement } from 'react';\nimport styled from 'styled-components';\n\nimport { Flex, ForwardProps } from '@pega/cosmos-react-core';\n\nimport MessageList from './MessageList';\n\nexport interface ChatBodyProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Message data Array */\n  children: ReactElement<typeof MessageList>;\n}\n\nconst StyledChatBodyContainer = styled.div`\n  position: relative;\n  overflow-y: hidden;\n`;\n\nconst ChatBody: FunctionComponent<ChatBodyProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatBodyProps>, ref: ChatBodyProps['ref']) => {\n    const { children, ...restProps } = props;\n\n    return (\n      <Flex\n        as={StyledChatBodyContainer}\n        item={{\n          grow: 1\n        }}\n        container={{\n          direction: 'column'\n        }}\n        aria-live='polite'\n        ref={ref}\n        {...restProps}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nexport default ChatBody;\n"]}

package/lib/components/Chat/ChatComposer.js

@@ -195,19 +195,19 @@ const ChatComposer = forwardRef((props, ref) => {
                                             alignItems: 'center'
                                         }, as: StyledAttachmentItem, children: [_jsx(BareButton, { as: StyledPreviewButton, disabled: disabled, onClick: () => {
                                                     attachment.onPreview?.(attachment.name);
-                                                }, children: attachment.name }, void 0), _jsx(BareButton, { as: StyledDeleteButton, disabled: disabled, "aria-label": t('email_remove_attachment'), onClick: () => {
+                                                }, children: attachment.name }), _jsx(BareButton, { as: StyledDeleteButton, disabled: disabled, "aria-label": t('email_remove_attachment'), onClick: () => {
                                                     attachment.onDelete?.(attachment.name);
-                                                }, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, attachment.name));
-                                }) }, void 0), _jsx(TextArea, { ref: textAreaRef, maxLength: maxLength, displayCharCount: maxLength !== undefined, hardStop: false, placeholder: defaultPlaceHolder, value: message, disabled: disabled, onKeyUp: handleSpecialKey, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: handleTextAreaChange, "aria-label": t('enter_message') }, void 0)] }, void 0), _jsxs(Flex, { container: { gap: 0.5 }, children: [showEmoji && (_jsx(Button, { ref: setEmojiBtnEl, onClick: toggleEmoji, variant: 'simple', disabled: disabled, icon: true, "aria-label": t('add_emoji'), children: _jsx(Icon, { name: 'face-happy' }, void 0) }, void 0)), maxAttachments > 0 && (_jsxs(StyledAttachmentElementContainer, { disabled: attachments.length >= maxAttachments, ref: setAttachmentsBtnEl, tabIndex: attachments.length >= maxAttachments ? 0 : undefined, role: 'button', children: [_jsx(Button, { onClick: onAddAttachment, variant: 'simple', disabled: !!(disabled || attachments.length >= maxAttachments), icon: true, "aria-label": attachments.length >= maxAttachments
+                                                }, children: _jsx(Icon, { name: 'times' }) })] }, attachment.name));
+                                }) }), _jsx(TextArea, { ref: textAreaRef, maxLength: maxLength, displayCharCount: maxLength !== undefined, hardStop: false, placeholder: defaultPlaceHolder, value: message, disabled: disabled, onKeyUp: handleSpecialKey, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: handleTextAreaChange, "aria-label": t('enter_message') })] }), _jsxs(Flex, { container: { gap: 0.5 }, children: [showEmoji && (_jsx(Button, { ref: setEmojiBtnEl, onClick: toggleEmoji, variant: 'simple', disabled: disabled, icon: true, "aria-label": t('add_emoji'), children: _jsx(Icon, { name: 'face-happy' }) })), maxAttachments > 0 && (_jsxs(StyledAttachmentElementContainer, { disabled: attachments.length >= maxAttachments, ref: setAttachmentsBtnEl, tabIndex: attachments.length >= maxAttachments ? 0 : undefined, role: 'button', children: [_jsx(Button, { onClick: onAddAttachment, variant: 'simple', disabled: !!(disabled || attachments.length >= maxAttachments), icon: true, "aria-label": attachments.length >= maxAttachments
                                             ? t('email_disable_attachment', [maxAttachments])
-                                            : t('email_add_attachment', [maxAttachments]), children: _jsx(Icon, { name: 'paper-clip' }, void 0) }, void 0), attachments.length >= maxAttachments && (_jsx(Tooltip, { target: attachmentsBtnEl, showDelay: 'none', hideDelay: 'none', ...restProps, children: t('email_disable_attachment', [maxAttachments]) }, void 0))] }, void 0)), _jsx(Flex, { item: { grow: 1 }, children: children }, void 0), _jsx(Button, { variant: 'primary', disabled: disabled || (!!maxLength && message.length > maxLength), onClick: () => {
+                                            : t('email_add_attachment', [maxAttachments]), children: _jsx(Icon, { name: 'paper-clip' }) }), attachments.length >= maxAttachments && (_jsx(Tooltip, { target: attachmentsBtnEl, showDelay: 'none', hideDelay: 'none', ...restProps, children: t('email_disable_attachment', [maxAttachments]) }))] })), _jsx(Flex, { item: { grow: 1 }, children: children }), _jsx(Button, { variant: 'primary', disabled: disabled || (!!maxLength && message.length > maxLength), onClick: () => {
                                     sendMessage(message);
-                                }, children: t('send_label') }, void 0)] }, void 0)] }, void 0), _jsx(Popover, { show: showEmojiPicker, target: emojiBtnEl, placement: 'bottom-start', modifiers: [
+                                }, children: t('send_label') })] })] }), _jsx(Popover, { show: showEmojiPicker, target: emojiBtnEl, placement: 'bottom-start', modifiers: [
                     {
                         name: 'flip',
                         enabled: true
                     }
-                ], children: _jsx(EmojiPicker, { ref: EmojiPickerRef, onSelect: onEmojiSelect }, void 0) }, void 0)] }, void 0));
+                ], children: _jsx(EmojiPicker, { ref: EmojiPickerRef, onSelect: onEmojiSelect }) })] }));
 });
 export default ChatComposer;
 //# sourceMappingURL=ChatComposer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ReactNode,\n  useState,\n  useEffect,\n  useCallback,\n  ChangeEvent,\n  useImperativeHandle,\n  useRef,\n  RefObject,\n  KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  TextArea,\n  Button,\n  Icon,\n  registerIcon,\n  Popover,\n  EmojiPicker,\n  EmojiPickerProps,\n  hasProp,\n  useI18n,\n  useAutoResize,\n  useElement,\n  defaultThemeProp,\n  PropsWithDefaults,\n  ForwardProps,\n  Tooltip,\n  useOuterEvent,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport { AttachmentItemProps } from './Chat.types';\n\nregisterIcon(timesIcon, faceHappyIcon, paperClipIcon);\n\nexport type SpecialKeysConfig = {\n  /** Collection of specialKeys */\n  keys: string[];\n  /** onSpecialKey is fired when a special key is typed in Textarea */\n  onSpecialKey: (e: KeyboardEvent<HTMLTextAreaElement>, key: string) => void;\n};\n\nexport interface ChatComposerProps {\n  /** Place holder */\n  placeholder?: string;\n  /** Default message to populate on load */\n  defaultMessage?: string;\n  /** Max character limit */\n  maxLength?: number;\n  /** Callback when send button is clicked */\n  onSend: (message: string) => void;\n  /** Enter / Return key sends message */\n  enterKeySendsMessage?: boolean;\n  /** Max number of attachments to be allowed in chat composer.\n   * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.\n   * If attachments added are >= maxAttachments, add attachments icon will be disabled.\n   */\n  maxAttachments?: number;\n  /** show/hide emoji */\n  showEmoji?: boolean;\n  /** Attachments list */\n  attachments?: AttachmentItemProps[];\n  /** Callback when attachment icon is clicked */\n  onAddAttachment?: () => void;\n  /** Special Keys configuration */\n  specialKeysConfig?: SpecialKeysConfig;\n  /** Disables the composer area */\n  disabled?: boolean;\n  /** Children */\n  children?: ReactNode;\n  /** Ref to the Imperative handle */\n  ref?: Ref<ChatComposerImperativeHandleProps>;\n}\n\nconst StyledAttachmentItem = styled.div``;\n\ninterface DisableAttachmentProps {\n  disabled?: boolean;\n}\nconst StyledAttachmentElementContainer = styled.div<DisableAttachmentProps>(\n  ({ disabled, theme }) => {\n    return (\n      disabled &&\n      css`\n        &:focus {\n          box-shadow: ${theme.base.shadow.focus};\n          border-radius: 50%;\n          outline: none;\n        }\n      `\n    );\n  }\n);\nconst StyledPreviewButton = styled(BareButton)``;\nconst StyledDeleteButton = styled(BareButton)``;\n\nconst StyledChatComposer = styled.footer<PropsWithDefaults<ChatComposerProps, 'disabled'>>(\n  ({\n    theme,\n    disabled,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, 'disabled-opacity': transparentBg },\n      components: {\n        link: { color: linkColor }\n      }\n    }\n  }) => {\n    const { xxs: fontSizeXXS } = calculateFontSize(fontSize, fontScale);\n    return css`\n      padding: calc(2 * ${theme.base.spacing});\n      background-color: ${theme.base.palette['secondary-background']};\n      textarea {\n        border-radius: ${theme.base['border-radius']};\n        height: 2.4rem;\n        min-height: 2.4rem;\n        border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};\n        max-width: 100%;\n      }\n      ${StyledAttachmentItem} {\n        color: ${linkColor};\n        background-color: ${theme.base.palette['primary-background']};\n        padding: calc(0.5 * ${theme.base.spacing});\n        border-radius: calc(0.25 * ${theme.base['border-radius']});\n        font-size: ${fontSizeXXS};\n        font-weight: bold;\n        margin-bottom: calc(0.5 * ${theme.base.spacing});\n        opacity: ${disabled ? transparentBg : 1};\n      }\n\n      ${StyledAttachmentElementContainer} {\n        ${disabled &&\n        css`\n          pointer-events: none;\n        `}\n      }\n\n      ${StyledPreviewButton} {\n        color: ${theme.base.palette.interactive};\n        font-weight: bold;\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      ${StyledDeleteButton} {\n        color: ${theme.base.palette.interactive};\n      }\n    `;\n  }\n);\n\nStyledChatComposer.defaultProps = defaultThemeProp;\nStyledAttachmentElementContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsListContainer = styled.div`\n  max-height: 4rem;\n  overflow-y: auto;\n`;\n\nexport interface ChatComposerImperativeHandleProps {\n  /** Function to append a message */\n  appendToMessage: (\n    appendMessage: string,\n    position?: 'cursor' | 'start' | 'end' | 'specialKey'\n  ) => void;\n  /** Actual ref to Chat composer component */\n  chatComposerRef: RefObject<HTMLDivElement | undefined>;\n  textAreaRef: RefObject<HTMLTextAreaElement | undefined>;\n}\n\nconst ChatComposer: FunctionComponent<ChatComposerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatComposerProps>, ref: ChatComposerProps['ref']) => {\n    const {\n      children,\n      attachments = [],\n      maxAttachments = 0,\n      onAddAttachment,\n      maxLength,\n      placeholder: defaultPlaceHolder,\n      defaultMessage = '',\n      onSend,\n      specialKeysConfig,\n      disabled = false,\n      enterKeySendsMessage = true,\n      showEmoji,\n      ...restProps\n    } = props;\n    const [message, setMessage] = useState(defaultMessage);\n    useEffect(() => {\n      setMessage(defaultMessage);\n    }, [defaultMessage]);\n\n    const t = useI18n();\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(75.1);\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n\n    const lastEnteredSpecialKey = useRef<string | null>(null);\n\n    const appendToMessage = useCallback(\n      (\n        appendMessage: string,\n        position?: 'cursor' | 'start' | 'end' | 'specialKey',\n        selectText: boolean = true\n      ) => {\n        let selectionStart;\n        let selectionEnd;\n        if (textAreaRef.current) {\n          if (position === 'start') {\n            textAreaRef.current.value = appendMessage + textAreaRef.current.value;\n            selectionStart = 0;\n            selectionEnd = appendMessage.length;\n          } else if (position === 'end') {\n            const initialEnd = textAreaRef.current.value.length;\n            textAreaRef.current.value += appendMessage;\n            selectionStart = initialEnd;\n            selectionEnd = initialEnd + appendMessage.length;\n          } else if (position === 'specialKey' && lastEnteredSpecialKey.current) {\n            const replaceChars = lastEnteredSpecialKey.current.length;\n            const currentSelectionStart = textAreaRef.current.selectionStart;\n            textAreaRef.current.value =\n              textAreaRef.current.value.substring(\n                0,\n                textAreaRef.current.selectionStart - replaceChars\n              ) +\n              appendMessage +\n              textAreaRef.current.value.substring(\n                textAreaRef.current.selectionStart,\n                textAreaRef.current.value.length\n              );\n            selectionStart = currentSelectionStart - replaceChars;\n            selectionEnd = currentSelectionStart + appendMessage.length - replaceChars;\n            lastEnteredSpecialKey.current = null;\n          } else {\n            const currentSelectionStart = textAreaRef.current.selectionStart;\n            textAreaRef.current.value =\n              textAreaRef.current.value.substring(0, textAreaRef.current.selectionStart) +\n              appendMessage +\n              textAreaRef.current.value.substring(\n                textAreaRef.current.selectionStart,\n                textAreaRef.current.value.length\n              );\n            selectionStart = currentSelectionStart;\n            selectionEnd = currentSelectionStart + appendMessage.length;\n          }\n          textAreaRef.current.selectionStart = selectText ? selectionStart : selectionEnd;\n          textAreaRef.current.selectionEnd = selectionEnd;\n          textAreaRef.current.focus();\n          setMessage(textAreaRef.current.value);\n        }\n      },\n      [setMessage, textAreaRef.current]\n    );\n\n    const chatComposerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({ appendToMessage, chatComposerRef, textAreaRef }), [\n      appendToMessage,\n      chatComposerRef.current,\n      textAreaRef.current\n    ]);\n\n    const sendMessage = useCallback(\n      (newMessage: string) => {\n        if (onSend) {\n          onSend(newMessage);\n          setMessage('');\n          resizeTextArea();\n        }\n      },\n      [onSend, resizeTextArea]\n    );\n\n    const handleEnterKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (enterKeySendsMessage && e.keyCode === 13 && !e.shiftKey) {\n          if (!maxLength || message.length <= maxLength) {\n            sendMessage(message);\n          }\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      },\n      [onSend, message, maxLength]\n    );\n\n    const handleTextAreaChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        setMessage(e.currentTarget.value);\n        resizeTextArea();\n      },\n      [setMessage, resizeTextArea]\n    );\n\n    const handleSpecialKey = useCallback(\n      (e: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!specialKeysConfig) return;\n        const { keys, onSpecialKey } = specialKeysConfig;\n        if (specialKeysConfig && keys.length > 0) {\n          const composerValue = e.currentTarget.value.substring(0, e.currentTarget.selectionStart);\n          const specialKey = keys.find(key => composerValue.endsWith(key));\n          if (specialKey) {\n            lastEnteredSpecialKey.current = specialKey;\n            onSpecialKey(e, specialKey);\n          }\n        }\n      },\n      [specialKeysConfig]\n    );\n\n    const toggleEmoji = () => {\n      setShowEmojiPicker(!showEmojiPicker);\n    };\n    const onEmojiSelect: EmojiPickerProps['onSelect'] = emojiElem => {\n      // Check that it is not a custom emoji\n      if (hasProp(emojiElem, 'native')) {\n        appendToMessage(emojiElem.native, 'cursor', false);\n      }\n      setShowEmojiPicker(false);\n    };\n\n    const EmojiPickerRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {\n      setShowEmojiPicker(false);\n    });\n\n    useEffect(() => {\n      resizeTextArea();\n    }, []);\n\n    return (\n      <>\n        <Flex\n          as={StyledChatComposer}\n          disabled={disabled}\n          container={{\n            direction: 'column',\n            gap: 2\n          }}\n          item={{\n            shrink: 0\n          }}\n          {...restProps}\n          ref={chatComposerRef}\n        >\n          <Flex\n            container={{\n              direction: 'column',\n              gap: 0.5\n            }}\n          >\n            <Flex\n              container={{\n                wrap: 'wrap',\n                gap: 0.5\n              }}\n              as={StyledAttachmentsListContainer}\n            >\n              {attachments.map(attachment => {\n                return (\n                  <Flex\n                    key={attachment.name}\n                    container={{\n                      gap: 1,\n                      alignItems: 'center'\n                    }}\n                    as={StyledAttachmentItem}\n                  >\n                    <BareButton\n                      as={StyledPreviewButton}\n                      disabled={disabled}\n                      onClick={() => {\n                        attachment.onPreview?.(attachment.name);\n                      }}\n                    >\n                      {attachment.name}\n                    </BareButton>\n                    <BareButton\n                      as={StyledDeleteButton}\n                      disabled={disabled}\n                      aria-label={t('email_remove_attachment')}\n                      onClick={() => {\n                        attachment.onDelete?.(attachment.name);\n                      }}\n                    >\n                      <Icon name='times' />\n                    </BareButton>\n                  </Flex>\n                );\n              })}\n            </Flex>\n            <TextArea\n              ref={textAreaRef}\n              maxLength={maxLength}\n              displayCharCount={maxLength !== undefined}\n              hardStop={false}\n              placeholder={defaultPlaceHolder}\n              value={message}\n              disabled={disabled}\n              onKeyUp={handleSpecialKey}\n              onKeyDown={handleEnterKeyDown}\n              onChange={handleTextAreaChange}\n              onFocus={handleTextAreaChange}\n              aria-label={t('enter_message')}\n            />\n          </Flex>\n          <Flex container={{ gap: 0.5 }}>\n            {showEmoji && (\n              <Button\n                ref={setEmojiBtnEl}\n                onClick={toggleEmoji}\n                variant='simple'\n                disabled={disabled}\n                icon\n                aria-label={t('add_emoji')}\n              >\n                <Icon name='face-happy' />\n              </Button>\n            )}\n            {maxAttachments > 0 && (\n              <StyledAttachmentElementContainer\n                disabled={attachments.length >= maxAttachments}\n                ref={setAttachmentsBtnEl}\n                tabIndex={attachments.length >= maxAttachments ? 0 : undefined}\n                role='button'\n              >\n                <Button\n                  onClick={onAddAttachment}\n                  variant='simple'\n                  disabled={!!(disabled || attachments.length >= maxAttachments)}\n                  icon\n                  aria-label={\n                    attachments.length >= maxAttachments\n                      ? t('email_disable_attachment', [maxAttachments])\n                      : t('email_add_attachment', [maxAttachments])\n                  }\n                >\n                  <Icon name='paper-clip' />\n                </Button>\n                {attachments.length >= maxAttachments && (\n                  <Tooltip\n                    target={attachmentsBtnEl}\n                    showDelay='none'\n                    hideDelay='none'\n                    {...restProps}\n                  >\n                    {t('email_disable_attachment', [maxAttachments])}\n                  </Tooltip>\n                )}\n              </StyledAttachmentElementContainer>\n            )}\n            <Flex item={{ grow: 1 }}>{children}</Flex>\n            <Button\n              variant='primary'\n              disabled={disabled || (!!maxLength && message.length > maxLength)}\n              onClick={() => {\n                sendMessage(message);\n              }}\n            >\n              {t('send_label')}\n            </Button>\n          </Flex>\n        </Flex>\n        <Popover\n          show={showEmojiPicker}\n          target={emojiBtnEl}\n          placement='bottom-start'\n          modifiers={[\n            {\n              name: 'flip',\n              enabled: true\n            }\n          ]}\n        >\n          <EmojiPicker ref={EmojiPickerRef} onSelect={onEmojiSelect} />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default ChatComposer;\n"]}
+{"version":3,"file":"ChatComposer.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ReactNode,\n  useState,\n  useEffect,\n  useCallback,\n  ChangeEvent,\n  useImperativeHandle,\n  useRef,\n  RefObject,\n  KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  TextArea,\n  Button,\n  Icon,\n  registerIcon,\n  Popover,\n  EmojiPicker,\n  EmojiPickerProps,\n  hasProp,\n  useI18n,\n  useAutoResize,\n  useElement,\n  defaultThemeProp,\n  PropsWithDefaults,\n  ForwardProps,\n  Tooltip,\n  useOuterEvent,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport { AttachmentItemProps } from './Chat.types';\n\nregisterIcon(timesIcon, faceHappyIcon, paperClipIcon);\n\nexport type SpecialKeysConfig = {\n  /** Collection of specialKeys */\n  keys: string[];\n  /** onSpecialKey is fired when a special key is typed in Textarea */\n  onSpecialKey: (e: KeyboardEvent<HTMLTextAreaElement>, key: string) => void;\n};\n\nexport interface ChatComposerProps {\n  /** Place holder */\n  placeholder?: string;\n  /** Default message to populate on load */\n  defaultMessage?: string;\n  /** Max character limit */\n  maxLength?: number;\n  /** Callback when send button is clicked */\n  onSend: (message: string) => void;\n  /** Enter / Return key sends message */\n  enterKeySendsMessage?: boolean;\n  /** Max number of attachments to be allowed in chat composer.\n   * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.\n   * If attachments added are >= maxAttachments, add attachments icon will be disabled.\n   */\n  maxAttachments?: number;\n  /** show/hide emoji */\n  showEmoji?: boolean;\n  /** Attachments list */\n  attachments?: AttachmentItemProps[];\n  /** Callback when attachment icon is clicked */\n  onAddAttachment?: () => void;\n  /** Special Keys configuration */\n  specialKeysConfig?: SpecialKeysConfig;\n  /** Disables the composer area */\n  disabled?: boolean;\n  /** Children */\n  children?: ReactNode;\n  /** Ref to the Imperative handle */\n  ref?: Ref<ChatComposerImperativeHandleProps>;\n}\n\nconst StyledAttachmentItem = styled.div``;\n\ninterface DisableAttachmentProps {\n  disabled?: boolean;\n}\nconst StyledAttachmentElementContainer = styled.div<DisableAttachmentProps>(\n  ({ disabled, theme }) => {\n    return (\n      disabled &&\n      css`\n        &:focus {\n          box-shadow: ${theme.base.shadow.focus};\n          border-radius: 50%;\n          outline: none;\n        }\n      `\n    );\n  }\n);\nconst StyledPreviewButton = styled(BareButton)``;\nconst StyledDeleteButton = styled(BareButton)``;\n\nconst StyledChatComposer = styled.footer<PropsWithDefaults<ChatComposerProps, 'disabled'>>(\n  ({\n    theme,\n    disabled,\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, 'disabled-opacity': transparentBg },\n      components: {\n        link: { color: linkColor }\n      }\n    }\n  }) => {\n    const { xxs: fontSizeXXS } = calculateFontSize(fontSize, fontScale);\n    return css`\n      padding: calc(2 * ${theme.base.spacing});\n      background-color: ${theme.base.palette['secondary-background']};\n      textarea {\n        border-radius: ${theme.base['border-radius']};\n        height: 2.4rem;\n        min-height: 2.4rem;\n        border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};\n        max-width: 100%;\n      }\n      ${StyledAttachmentItem} {\n        color: ${linkColor};\n        background-color: ${theme.base.palette['primary-background']};\n        padding: calc(0.5 * ${theme.base.spacing});\n        border-radius: calc(0.25 * ${theme.base['border-radius']});\n        font-size: ${fontSizeXXS};\n        font-weight: bold;\n        margin-bottom: calc(0.5 * ${theme.base.spacing});\n        opacity: ${disabled ? transparentBg : 1};\n      }\n\n      ${StyledAttachmentElementContainer} {\n        ${disabled &&\n        css`\n          pointer-events: none;\n        `}\n      }\n\n      ${StyledPreviewButton} {\n        color: ${theme.base.palette.interactive};\n        font-weight: bold;\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      ${StyledDeleteButton} {\n        color: ${theme.base.palette.interactive};\n      }\n    `;\n  }\n);\n\nStyledChatComposer.defaultProps = defaultThemeProp;\nStyledAttachmentElementContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsListContainer = styled.div`\n  max-height: 4rem;\n  overflow-y: auto;\n`;\n\nexport interface ChatComposerImperativeHandleProps {\n  /** Function to append a message */\n  appendToMessage: (\n    appendMessage: string,\n    position?: 'cursor' | 'start' | 'end' | 'specialKey'\n  ) => void;\n  /** Actual ref to Chat composer component */\n  chatComposerRef: RefObject<HTMLDivElement | undefined>;\n  textAreaRef: RefObject<HTMLTextAreaElement | undefined>;\n}\n\nconst ChatComposer: FunctionComponent<ChatComposerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatComposerProps>, ref: ChatComposerProps['ref']) => {\n    const {\n      children,\n      attachments = [],\n      maxAttachments = 0,\n      onAddAttachment,\n      maxLength,\n      placeholder: defaultPlaceHolder,\n      defaultMessage = '',\n      onSend,\n      specialKeysConfig,\n      disabled = false,\n      enterKeySendsMessage = true,\n      showEmoji,\n      ...restProps\n    } = props;\n    const [message, setMessage] = useState(defaultMessage);\n    useEffect(() => {\n      setMessage(defaultMessage);\n    }, [defaultMessage]);\n\n    const t = useI18n();\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(75.1);\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n\n    const lastEnteredSpecialKey = useRef<string | null>(null);\n\n    const appendToMessage = useCallback(\n      (\n        appendMessage: string,\n        position?: 'cursor' | 'start' | 'end' | 'specialKey',\n        selectText: boolean = true\n      ) => {\n        let selectionStart;\n        let selectionEnd;\n        if (textAreaRef.current) {\n          if (position === 'start') {\n            textAreaRef.current.value = appendMessage + textAreaRef.current.value;\n            selectionStart = 0;\n            selectionEnd = appendMessage.length;\n          } else if (position === 'end') {\n            const initialEnd = textAreaRef.current.value.length;\n            textAreaRef.current.value += appendMessage;\n            selectionStart = initialEnd;\n            selectionEnd = initialEnd + appendMessage.length;\n          } else if (position === 'specialKey' && lastEnteredSpecialKey.current) {\n            const replaceChars = lastEnteredSpecialKey.current.length;\n            const currentSelectionStart = textAreaRef.current.selectionStart;\n            textAreaRef.current.value =\n              textAreaRef.current.value.substring(\n                0,\n                textAreaRef.current.selectionStart - replaceChars\n              ) +\n              appendMessage +\n              textAreaRef.current.value.substring(\n                textAreaRef.current.selectionStart,\n                textAreaRef.current.value.length\n              );\n            selectionStart = currentSelectionStart - replaceChars;\n            selectionEnd = currentSelectionStart + appendMessage.length - replaceChars;\n            lastEnteredSpecialKey.current = null;\n          } else {\n            const currentSelectionStart = textAreaRef.current.selectionStart;\n            textAreaRef.current.value =\n              textAreaRef.current.value.substring(0, textAreaRef.current.selectionStart) +\n              appendMessage +\n              textAreaRef.current.value.substring(\n                textAreaRef.current.selectionStart,\n                textAreaRef.current.value.length\n              );\n            selectionStart = currentSelectionStart;\n            selectionEnd = currentSelectionStart + appendMessage.length;\n          }\n          textAreaRef.current.selectionStart = selectText ? selectionStart : selectionEnd;\n          textAreaRef.current.selectionEnd = selectionEnd;\n          textAreaRef.current.focus();\n          setMessage(textAreaRef.current.value);\n        }\n      },\n      [setMessage, textAreaRef.current]\n    );\n\n    const chatComposerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({ appendToMessage, chatComposerRef, textAreaRef }), [\n      appendToMessage,\n      chatComposerRef.current,\n      textAreaRef.current\n    ]);\n\n    const sendMessage = useCallback(\n      (newMessage: string) => {\n        if (onSend) {\n          onSend(newMessage);\n          setMessage('');\n          resizeTextArea();\n        }\n      },\n      [onSend, resizeTextArea]\n    );\n\n    const handleEnterKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (enterKeySendsMessage && e.keyCode === 13 && !e.shiftKey) {\n          if (!maxLength || message.length <= maxLength) {\n            sendMessage(message);\n          }\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      },\n      [onSend, message, maxLength]\n    );\n\n    const handleTextAreaChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        setMessage(e.currentTarget.value);\n        resizeTextArea();\n      },\n      [setMessage, resizeTextArea]\n    );\n\n    const handleSpecialKey = useCallback(\n      (e: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!specialKeysConfig) return;\n        const { keys, onSpecialKey } = specialKeysConfig;\n        if (specialKeysConfig && keys.length > 0) {\n          const composerValue = e.currentTarget.value.substring(0, e.currentTarget.selectionStart);\n          const specialKey = keys.find(key => composerValue.endsWith(key));\n          if (specialKey) {\n            lastEnteredSpecialKey.current = specialKey;\n            onSpecialKey(e, specialKey);\n          }\n        }\n      },\n      [specialKeysConfig]\n    );\n\n    const toggleEmoji = () => {\n      setShowEmojiPicker(!showEmojiPicker);\n    };\n    const onEmojiSelect: EmojiPickerProps['onSelect'] = emojiElem => {\n      // Check that it is not a custom emoji\n      if (hasProp(emojiElem, 'native')) {\n        appendToMessage(emojiElem.native, 'cursor', false);\n      }\n      setShowEmojiPicker(false);\n    };\n\n    const EmojiPickerRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {\n      setShowEmojiPicker(false);\n    });\n\n    useEffect(() => {\n      resizeTextArea();\n    }, []);\n\n    return (\n      <>\n        <Flex\n          as={StyledChatComposer}\n          disabled={disabled}\n          container={{\n            direction: 'column',\n            gap: 2\n          }}\n          item={{\n            shrink: 0\n          }}\n          {...restProps}\n          ref={chatComposerRef}\n        >\n          <Flex\n            container={{\n              direction: 'column',\n              gap: 0.5\n            }}\n          >\n            <Flex\n              container={{\n                wrap: 'wrap',\n                gap: 0.5\n              }}\n              as={StyledAttachmentsListContainer}\n            >\n              {attachments.map(attachment => {\n                return (\n                  <Flex\n                    key={attachment.name}\n                    container={{\n                      gap: 1,\n                      alignItems: 'center'\n                    }}\n                    as={StyledAttachmentItem}\n                  >\n                    <BareButton\n                      as={StyledPreviewButton}\n                      disabled={disabled}\n                      onClick={() => {\n                        attachment.onPreview?.(attachment.name);\n                      }}\n                    >\n                      {attachment.name}\n                    </BareButton>\n                    <BareButton\n                      as={StyledDeleteButton}\n                      disabled={disabled}\n                      aria-label={t('email_remove_attachment')}\n                      onClick={() => {\n                        attachment.onDelete?.(attachment.name);\n                      }}\n                    >\n                      <Icon name='times' />\n                    </BareButton>\n                  </Flex>\n                );\n              })}\n            </Flex>\n            <TextArea\n              ref={textAreaRef}\n              maxLength={maxLength}\n              displayCharCount={maxLength !== undefined}\n              hardStop={false}\n              placeholder={defaultPlaceHolder}\n              value={message}\n              disabled={disabled}\n              onKeyUp={handleSpecialKey}\n              onKeyDown={handleEnterKeyDown}\n              onChange={handleTextAreaChange}\n              onFocus={handleTextAreaChange}\n              aria-label={t('enter_message')}\n            />\n          </Flex>\n          <Flex container={{ gap: 0.5 }}>\n            {showEmoji && (\n              <Button\n                ref={setEmojiBtnEl}\n                onClick={toggleEmoji}\n                variant='simple'\n                disabled={disabled}\n                icon\n                aria-label={t('add_emoji')}\n              >\n                <Icon name='face-happy' />\n              </Button>\n            )}\n            {maxAttachments > 0 && (\n              <StyledAttachmentElementContainer\n                disabled={attachments.length >= maxAttachments}\n                ref={setAttachmentsBtnEl}\n                tabIndex={attachments.length >= maxAttachments ? 0 : undefined}\n                role='button'\n              >\n                <Button\n                  onClick={onAddAttachment}\n                  variant='simple'\n                  disabled={!!(disabled || attachments.length >= maxAttachments)}\n                  icon\n                  aria-label={\n                    attachments.length >= maxAttachments\n                      ? t('email_disable_attachment', [maxAttachments])\n                      : t('email_add_attachment', [maxAttachments])\n                  }\n                >\n                  <Icon name='paper-clip' />\n                </Button>\n                {attachments.length >= maxAttachments && (\n                  <Tooltip\n                    target={attachmentsBtnEl}\n                    showDelay='none'\n                    hideDelay='none'\n                    {...restProps}\n                  >\n                    {t('email_disable_attachment', [maxAttachments])}\n                  </Tooltip>\n                )}\n              </StyledAttachmentElementContainer>\n            )}\n            <Flex item={{ grow: 1 }}>{children}</Flex>\n            <Button\n              variant='primary'\n              disabled={disabled || (!!maxLength && message.length > maxLength)}\n              onClick={() => {\n                sendMessage(message);\n              }}\n            >\n              {t('send_label')}\n            </Button>\n          </Flex>\n        </Flex>\n        <Popover\n          show={showEmojiPicker}\n          target={emojiBtnEl}\n          placement='bottom-start'\n          modifiers={[\n            {\n              name: 'flip',\n              enabled: true\n            }\n          ]}\n        >\n          <EmojiPicker ref={EmojiPickerRef} onSelect={onEmojiSelect} />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default ChatComposer;\n"]}

package/lib/components/Chat/ChatHeader.js

@@ -22,7 +22,7 @@ const ChatHeader = forwardRef((props, ref) => {
                 }, container: {
                     gap: 2,
                     alignItems: 'center'
-                }, as: StyledChatPrimaryInfoContainer, children: [icon && _jsx(Icon, { name: icon }, void 0), _jsx(Text, { variant: 'h3', children: title }, void 0)] }, void 0), actions] }, void 0));
+                }, as: StyledChatPrimaryInfoContainer, children: [icon && _jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h3', children: title })] }), actions] }));
 });
 export default ChatHeader;
 //# sourceMappingURL=ChatHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAajC,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CACpC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,IAAI,EAAE,EACjB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iBACG,OAAO,aAAa,OAAO;uCACL,IAAI,CAAC,KAAK;QACzC,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACrD,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,gBAAgB,EACpB,SAAS,QACT,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,KACG,SAAS,aAEb,MAAC,IAAI,IACH,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,EACD,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,UAAU,EAAE,QAAQ;iBACrB,EACD,EAAE,EAAE,8BAA8B,aAEjC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,EAC7B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAQ,YAC5B,EACN,OAAO,YACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  Icon,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface ChatHeaderProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Title: Used to show username || channel || group name */\n  title: string;\n  /** Icon: Used to show the channel icons, pass the icon name from the cosmos library to render */\n  icon?: string;\n  /** Primary actions: Used to show frequent user actions to be performed */\n  actions?: ReactNode;\n}\n\nconst StyledChatPrimaryInfoContainer = styled.div``;\n\nconst StyledChatHeader = styled.header(\n  ({\n    theme: {\n      base: {\n        spacing,\n        colors: { gray }\n      }\n    }\n  }) => {\n    return css`\n      padding: ${spacing} calc(2 * ${spacing});\n      border-bottom: 0.0625rem solid ${gray.light};\n      ${StyledChatPrimaryInfoContainer} {\n        font-size: 1rem;\n      }\n    `;\n  }\n);\nStyledChatHeader.defaultProps = defaultThemeProp;\n\nconst ChatHeader: FunctionComponent<ChatHeaderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatHeaderProps>, ref: ChatHeaderProps['ref']) => {\n    const { title, actions, icon, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatHeader}\n        container\n        item={{\n          shrink: 0\n        }}\n        {...restProps}\n      >\n        <Flex\n          item={{\n            grow: 1\n          }}\n          container={{\n            gap: 2,\n            alignItems: 'center'\n          }}\n          as={StyledChatPrimaryInfoContainer}\n        >\n          {icon && <Icon name={icon} />}\n          <Text variant='h3'>{title}</Text>\n        </Flex>\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default ChatHeader;\n"]}
+{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAajC,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CACpC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,IAAI,EAAE,EACjB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;iBACG,OAAO,aAAa,OAAO;uCACL,IAAI,CAAC,KAAK;QACzC,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACrD,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,gBAAgB,EACpB,SAAS,QACT,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,KACG,SAAS,aAEb,MAAC,IAAI,IACH,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,EACD,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,UAAU,EAAE,QAAQ;iBACrB,EACD,EAAE,EAAE,8BAA8B,aAEjC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC7B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,IAC5B,EACN,OAAO,IACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  Icon,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface ChatHeaderProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Title: Used to show username || channel || group name */\n  title: string;\n  /** Icon: Used to show the channel icons, pass the icon name from the cosmos library to render */\n  icon?: string;\n  /** Primary actions: Used to show frequent user actions to be performed */\n  actions?: ReactNode;\n}\n\nconst StyledChatPrimaryInfoContainer = styled.div``;\n\nconst StyledChatHeader = styled.header(\n  ({\n    theme: {\n      base: {\n        spacing,\n        colors: { gray }\n      }\n    }\n  }) => {\n    return css`\n      padding: ${spacing} calc(2 * ${spacing});\n      border-bottom: 0.0625rem solid ${gray.light};\n      ${StyledChatPrimaryInfoContainer} {\n        font-size: 1rem;\n      }\n    `;\n  }\n);\nStyledChatHeader.defaultProps = defaultThemeProp;\n\nconst ChatHeader: FunctionComponent<ChatHeaderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatHeaderProps>, ref: ChatHeaderProps['ref']) => {\n    const { title, actions, icon, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatHeader}\n        container\n        item={{\n          shrink: 0\n        }}\n        {...restProps}\n      >\n        <Flex\n          item={{\n            grow: 1\n          }}\n          container={{\n            gap: 2,\n            alignItems: 'center'\n          }}\n          as={StyledChatPrimaryInfoContainer}\n        >\n          {icon && <Icon name={icon} />}\n          <Text variant='h3'>{title}</Text>\n        </Flex>\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default ChatHeader;\n"]}

package/lib/components/Chat/ChatTranscript.js

@@ -30,7 +30,7 @@ const ChatTranscript = forwardRef((props, ref) => {
     return (_jsxs(Flex, { ref: ref, as: StyledChatTranscriptContainer, container: {
             direction: 'column',
             gap: 0.5
-        }, ...restProps, children: [title && (_jsx(Text, { variant: 'h4', as: StyledChatTranscriptHeading, children: title }, void 0)), _jsx(RepeatingView, { rows: transcriptItems, children: item => {
+        }, ...restProps, children: [title && (_jsx(Text, { variant: 'h4', as: StyledChatTranscriptHeading, children: title })), _jsx(RepeatingView, { rows: transcriptItems, children: item => {
                     const { id, type, ...transcriptItemRestProps } = item;
                     if (type === 'transcript') {
                         return (_jsx(TranscriptMessage, { ...transcriptItemRestProps }, id));
@@ -38,8 +38,8 @@ const ChatTranscript = forwardRef((props, ref) => {
                     if (type === 'system') {
                         return (_jsx(SystemMessage, { ...transcriptItemRestProps }, id));
                     }
-                    return _jsx(_Fragment, {}, void 0);
-                } }, void 0)] }, void 0));
+                    return _jsx(_Fragment, {});
+                } })] }));
 });
 export default ChatTranscript;
 //# sourceMappingURL=ChatTranscript.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatTranscript.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatTranscript.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,aAAa,EAAE,EAAoB,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAO,iBAA6C,MAAM,qBAAqB,CAAC;AAChF,OAAO,aAAa,EAAE,EAAsB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAezF,MAAM,2BAA2B,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAEhD,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9B,OAAO,EACR,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;;;oBAKQ,WAAW;;MAEzB,2BAA2B,KAAK,uBAAuB,KAAK,mBAAmB;4BACzD,OAAO;6BACN,OAAO;;MAE9B,mBAAmB;;;GAGtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,cAAc,GAA0D,UAAU,CACtF,CAAC,KAA2C,EAAE,GAA+B,EAAE,EAAE;IAC/E,MAAM,EAAE,UAAU,EAAE,eAAe,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,6BAA6B,EACjC,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,GAAG;SACT,KACG,SAAS,aAEZ,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,2BAA2B,YAC/C,KAAK,WACD,CACR,EACD,KAAC,aAAa,IAAC,IAAI,EAAE,eAAe,YACjC,IAAI,CAAC,EAAE;oBACN,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,uBAAuB,EAAE,GAAG,IAA0B,CAAC;oBAC5E,IAAI,IAAI,KAAK,YAAY,EAAE;wBACzB,OAAO,CACL,KAAC,iBAAiB,OAEX,uBAAkD,IADlD,EAAE,CAEP,CACH,CAAC;qBACH;oBACD,IAAI,IAAI,KAAK,QAAQ,EAAE;wBACrB,OAAO,CACL,KAAC,aAAa,OAAe,uBAA8C,IAAvD,EAAE,CAAyD,CAChF,CAAC;qBACH;oBACD,OAAO,2BAAK,CAAC;gBACf,CAAC,WACa,YACX,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp, ForwardProps, Text } from '@pega/cosmos-react-core';\n\nimport RepeatingView, { RepeatingViewRow, StyledRepeatingViewItem } from './RepeatingView';\nimport TranscriptMessage, { TranscriptMessageProps } from './TranscriptMessage';\nimport SystemMessage, { SystemMessageProps, StyledSystemMessage } from './SystemMessage';\n\nexport type ChatTranscriptItem =\n  | (TranscriptMessageProps & { type: 'transcript'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] });\n\nexport interface ChatTranscriptProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Title for transcript's body */\n  title?: string;\n  /** Transcript messages array */\n  transcript: ChatTranscriptItem[];\n}\n\nconst StyledChatTranscriptHeading = styled.h4``;\n\nconst StyledChatTranscriptContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { focus: shadowFocus },\n        spacing\n      }\n    }\n  } = props;\n  return css`\n    width: 100%;\n    outline: none;\n    padding: 0 0.75rem 0.5rem;\n    &:focus {\n      box-shadow: ${shadowFocus};\n    }\n    ${StyledChatTranscriptHeading}, ${StyledRepeatingViewItem}, ${StyledSystemMessage} {\n      margin: calc(0.25 * ${spacing});\n      padding: calc(0.25 * ${spacing});\n    }\n    ${StyledSystemMessage} {\n      padding: 0;\n    }\n  `;\n});\n\nStyledChatTranscriptContainer.defaultProps = defaultThemeProp;\n\nconst ChatTranscript: FunctionComponent<ChatTranscriptProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatTranscriptProps>, ref: ChatTranscriptProps['ref']) => {\n    const { transcript: transcriptItems = [], title, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatTranscriptContainer}\n        container={{\n          direction: 'column',\n          gap: 0.5\n        }}\n        {...restProps}\n      >\n        {title && (\n          <Text variant='h4' as={StyledChatTranscriptHeading}>\n            {title}\n          </Text>\n        )}\n        <RepeatingView rows={transcriptItems}>\n          {item => {\n            const { id, type, ...transcriptItemRestProps } = item as ChatTranscriptItem;\n            if (type === 'transcript') {\n              return (\n                <TranscriptMessage\n                  key={id}\n                  {...(transcriptItemRestProps as TranscriptMessageProps)}\n                />\n              );\n            }\n            if (type === 'system') {\n              return (\n                <SystemMessage key={id} {...(transcriptItemRestProps as SystemMessageProps)} />\n              );\n            }\n            return <></>;\n          }}\n        </RepeatingView>\n      </Flex>\n    );\n  }\n);\n\nexport default ChatTranscript;\n"]}
+{"version":3,"file":"ChatTranscript.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatTranscript.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,aAAa,EAAE,EAAoB,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAO,iBAA6C,MAAM,qBAAqB,CAAC;AAChF,OAAO,aAAa,EAAE,EAAsB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAezF,MAAM,2BAA2B,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAEhD,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9B,OAAO,EACR,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;;;oBAKQ,WAAW;;MAEzB,2BAA2B,KAAK,uBAAuB,KAAK,mBAAmB;4BACzD,OAAO;6BACN,OAAO;;MAE9B,mBAAmB;;;GAGtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,cAAc,GAA0D,UAAU,CACtF,CAAC,KAA2C,EAAE,GAA+B,EAAE,EAAE;IAC/E,MAAM,EAAE,UAAU,EAAE,eAAe,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,6BAA6B,EACjC,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,GAAG;SACT,KACG,SAAS,aAEZ,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,2BAA2B,YAC/C,KAAK,GACD,CACR,EACD,KAAC,aAAa,IAAC,IAAI,EAAE,eAAe,YACjC,IAAI,CAAC,EAAE;oBACN,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,uBAAuB,EAAE,GAAG,IAA0B,CAAC;oBAC5E,IAAI,IAAI,KAAK,YAAY,EAAE;wBACzB,OAAO,CACL,KAAC,iBAAiB,OAEX,uBAAkD,IADlD,EAAE,CAEP,CACH,CAAC;qBACH;oBACD,IAAI,IAAI,KAAK,QAAQ,EAAE;wBACrB,OAAO,CACL,KAAC,aAAa,OAAe,uBAA8C,IAAvD,EAAE,CAAyD,CAChF,CAAC;qBACH;oBACD,OAAO,mBAAK,CAAC;gBACf,CAAC,GACa,IACX,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp, ForwardProps, Text } from '@pega/cosmos-react-core';\n\nimport RepeatingView, { RepeatingViewRow, StyledRepeatingViewItem } from './RepeatingView';\nimport TranscriptMessage, { TranscriptMessageProps } from './TranscriptMessage';\nimport SystemMessage, { SystemMessageProps, StyledSystemMessage } from './SystemMessage';\n\nexport type ChatTranscriptItem =\n  | (TranscriptMessageProps & { type: 'transcript'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] });\n\nexport interface ChatTranscriptProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Title for transcript's body */\n  title?: string;\n  /** Transcript messages array */\n  transcript: ChatTranscriptItem[];\n}\n\nconst StyledChatTranscriptHeading = styled.h4``;\n\nconst StyledChatTranscriptContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { focus: shadowFocus },\n        spacing\n      }\n    }\n  } = props;\n  return css`\n    width: 100%;\n    outline: none;\n    padding: 0 0.75rem 0.5rem;\n    &:focus {\n      box-shadow: ${shadowFocus};\n    }\n    ${StyledChatTranscriptHeading}, ${StyledRepeatingViewItem}, ${StyledSystemMessage} {\n      margin: calc(0.25 * ${spacing});\n      padding: calc(0.25 * ${spacing});\n    }\n    ${StyledSystemMessage} {\n      padding: 0;\n    }\n  `;\n});\n\nStyledChatTranscriptContainer.defaultProps = defaultThemeProp;\n\nconst ChatTranscript: FunctionComponent<ChatTranscriptProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatTranscriptProps>, ref: ChatTranscriptProps['ref']) => {\n    const { transcript: transcriptItems = [], title, ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatTranscriptContainer}\n        container={{\n          direction: 'column',\n          gap: 0.5\n        }}\n        {...restProps}\n      >\n        {title && (\n          <Text variant='h4' as={StyledChatTranscriptHeading}>\n            {title}\n          </Text>\n        )}\n        <RepeatingView rows={transcriptItems}>\n          {item => {\n            const { id, type, ...transcriptItemRestProps } = item as ChatTranscriptItem;\n            if (type === 'transcript') {\n              return (\n                <TranscriptMessage\n                  key={id}\n                  {...(transcriptItemRestProps as TranscriptMessageProps)}\n                />\n              );\n            }\n            if (type === 'system') {\n              return (\n                <SystemMessage key={id} {...(transcriptItemRestProps as SystemMessageProps)} />\n              );\n            }\n            return <></>;\n          }}\n        </RepeatingView>\n      </Flex>\n    );\n  }\n);\n\nexport default ChatTranscript;\n"]}

package/lib/components/Chat/Message.js

@@ -22,11 +22,11 @@ const Message = forwardRef((props, ref) => {
             direction: direction === 'in' ? 'row' : 'row-reverse'
         }, item: {
             shrink: 0
-        }, messageDirection: direction, variant: variant, typing: typing, messageHeader: messageHeader, ...restProps, children: [avatarInfo && (_jsx(Avatar, { name: avatarInfo.name, size: 'm', shape: 'circle', imageSrc: avatarInfo.imageSrc }, void 0)), _jsxs(Flex, { container: {
+        }, messageDirection: direction, variant: variant, typing: typing, messageHeader: messageHeader, ...restProps, children: [avatarInfo && (_jsx(Avatar, { name: avatarInfo.name, size: 'm', shape: 'circle', imageSrc: avatarInfo.imageSrc })), _jsxs(Flex, { container: {
                     direction: 'column',
                     alignItems: direction === 'in' ? 'start' : 'end',
                     justify: 'center'
-                }, as: StyledMessageMain, children: [_jsxs(StyledMessageBubble, { children: [messageHeader && (_jsxs(Flex, { container: { gap: 0.5, justify: 'between' }, as: StyledMessageHeader, children: [_jsx(StyledMessageHeaderContent, { children: messageHeader.content }, void 0), _jsx(StyledMessageHeaderMeta, { children: messageHeader.meta }, void 0)] }, void 0)), message && (_jsx(StyledMessageBubbleContent, { children: _jsx(EmojiDisplay, { content: message, size: 20 }, void 0) }, void 0)), (attachments.length > 0 || pagePushLinks.length > 0) && (_jsxs(StyledMediaList, { children: [attachments.map(attachment => {
+                }, as: StyledMessageMain, children: [_jsxs(StyledMessageBubble, { children: [messageHeader && (_jsxs(Flex, { container: { gap: 0.5, justify: 'between' }, as: StyledMessageHeader, children: [_jsx(StyledMessageHeaderContent, { children: messageHeader.content }), _jsx(StyledMessageHeaderMeta, { children: messageHeader.meta })] })), message && (_jsx(StyledMessageBubbleContent, { children: _jsx(EmojiDisplay, { content: message, size: 20 }) })), (attachments.length > 0 || pagePushLinks.length > 0) && (_jsxs(StyledMediaList, { children: [attachments.map(attachment => {
                                         const { id, icon, name, meta, onDownload, onPreview, thumbnail } = attachment;
                                         return (_jsxs(Flex, { as: StyledMediaListItem, container: {
                                                 direction: 'column'
@@ -34,26 +34,26 @@ const Message = forwardRef((props, ref) => {
                                                         e.preventDefault();
                                                         e.stopPropagation();
                                                         onPreview?.(id);
-                                                    }, alt: name }, void 0)), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaButton, { onClick: (e) => {
+                                                    }, alt: name })), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaButton, { onClick: (e) => {
                                                             e.preventDefault();
                                                             e.stopPropagation();
                                                             onPreview?.(id);
-                                                        }, children: name }, void 0), secondary: meta, visual: _jsx(Icon, { name: icon || 'document-doc' }, void 0), actions: _jsx(BareButton, { "aria-label": t('download'), as: StyledMediaDownloadButton, onClick: (e) => {
+                                                        }, children: name }), secondary: meta, visual: _jsx(Icon, { name: icon || 'document-doc' }), actions: _jsx(BareButton, { "aria-label": t('download'), as: StyledMediaDownloadButton, onClick: (e) => {
                                                             e.preventDefault();
                                                             e.stopPropagation();
                                                             onDownload?.(id);
-                                                        }, children: _jsx(Icon, { name: 'download' }, void 0) }, void 0) }, void 0)] }, id));
+                                                        }, children: _jsx(Icon, { name: 'download' }) }) })] }, id));
                                     }), pagePushLinks.map(pagePushLink => {
                                         const { id, href, title, thumbnail } = pagePushLink;
                                         return (_jsxs(Flex, { as: StyledMediaListItem, container: {
                                                 direction: 'column'
-                                            }, children: [thumbnail && (_jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, alt: title || href }, void 0)), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaLink, { "aria-label": title, href: href, target: '_blank', rel: 'noreferrer', children: href }, void 0), visual: _jsx(Icon, { name: 'chain-up' }, void 0) }, void 0)] }, id));
-                                    })] }, void 0))] }, void 0), !typing && (_jsxs(Flex, { as: StyledMetaInfoContainer, container: {
+                                            }, children: [thumbnail && (_jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, alt: title || href })), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaLink, { "aria-label": title, href: href, target: '_blank', rel: 'noreferrer', children: href }), visual: _jsx(Icon, { name: 'chain-up' }) })] }, id));
+                                    })] }))] }), !typing && (_jsxs(Flex, { as: StyledMetaInfoContainer, container: {
                             justify: messageMetaJustify,
                             gap: 1.5
-                        }, children: [timeStamp && _jsx(StyledMetaInfo, { children: timeStamp }, void 0), status && _jsx(StyledMetaInfo, { children: status }, void 0)] }, void 0)), typing && (_jsxs(Flex, { container: {
+                        }, children: [timeStamp && _jsx(StyledMetaInfo, { children: timeStamp }), status && _jsx(StyledMetaInfo, { children: status })] })), typing && (_jsxs(Flex, { container: {
                             gap: 0.25
-                        }, children: [_jsx(StyledBlinkingDot, { delay: 0 }, void 0), _jsx(StyledBlinkingDot, { delay: 0.25 }, void 0), _jsx(StyledBlinkingDot, { delay: 0.5 }, void 0)] }, void 0))] }, void 0)] }, void 0));
+                        }, children: [_jsx(StyledBlinkingDot, { delay: 0 }), _jsx(StyledBlinkingDot, { delay: 0.25 }), _jsx(StyledBlinkingDot, { delay: 0.5 })] }))] })] }));
 });
 export default Message;
 //# sourceMappingURL=Message.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, ReactNode, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport {\n  AvatarProps,\n  Avatar,\n  Flex,\n  Icon,\n  registerIcon,\n  LinkProps,\n  SummaryItem,\n  Image,\n  FlexContainerProps,\n  EmojiDisplay,\n  useI18n,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as downloadIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/download.icon';\nimport * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';\nimport * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';\n\nimport { AttachmentItemProps } from './Chat.types';\nimport {\n  StyledMessageContainer,\n  StyledMessageMain,\n  StyledMessageBubble,\n  StyledMessageBubbleContent,\n  StyledMediaList,\n  StyledMediaListItem,\n  StyledMediaThumbNail,\n  StyledSummaryItem,\n  StyledMediaLink,\n  StyledMediaDownloadButton,\n  StyledMetaInfoContainer,\n  StyledMetaInfo,\n  StyledBlinkingDot,\n  StyledMediaButton,\n  StyledMessageHeader,\n  StyledMessageHeaderContent,\n  StyledMessageHeaderMeta\n} from './Message.styles';\n\nregisterIcon(downloadIcon, documentDocIcon, chainUpIcon);\n\nexport interface MediaPageLinks extends Pick<LinkProps, 'href'> {\n  /** Unique id for this push link */\n  id: string;\n  /** A string to be used as an image src for a thumbnail. */\n  thumbnail?: AttachmentItemProps['thumbnail'];\n  /** Additional information about the linked resource. */\n  title?: string;\n}\n\nexport type MessageHeaderProps = {\n  /** message header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface MessageProps {\n  /** ref to the message wrapper */\n  ref?: Ref<HTMLDivElement>;\n  /** Message to be displayed */\n  message?: ReactNode;\n  /** Attachment list */\n  attachments?: AttachmentItemProps[];\n  /** Message page push links list */\n  pagePushLinks?: MediaPageLinks[];\n  /** 3 themes supported by default to differentiate between sender, receiver and other */\n  variant: 'sender' | 'receiver' | 'other';\n  /** timestamp of the message(Formatted) */\n  timeStamp?: string;\n  /** Incoming message/ outgoing message */\n  direction: 'in' | 'out';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Content type */\n  contentType?: 'rich-text' | 'plain-text';\n  /** Message status */\n  status?: string;\n  /** Indicates if this message is being currently typed */\n  typing?: boolean;\n  /** Message header */\n  messageHeader?: MessageHeaderProps;\n}\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageProps>, ref: MessageProps['ref']) => {\n    const {\n      message,\n      direction,\n      variant,\n      avatarInfo,\n      timeStamp,\n      attachments = [],\n      pagePushLinks = [],\n      status,\n      typing,\n      messageHeader,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    let messageMetaJustify: FlexContainerProps['justify'] = 'between';\n    if (timeStamp && !status) {\n      messageMetaJustify = 'start';\n    } else if (!timeStamp && status) {\n      messageMetaJustify = 'end';\n    }\n\n    return (\n      <Flex\n        as={StyledMessageContainer}\n        ref={ref}\n        container={{\n          gap: 0.5,\n          direction: direction === 'in' ? 'row' : 'row-reverse'\n        }}\n        item={{\n          shrink: 0\n        }}\n        messageDirection={direction}\n        variant={variant}\n        typing={typing}\n        messageHeader={messageHeader}\n        {...restProps}\n      >\n        {avatarInfo && (\n          <Avatar name={avatarInfo.name} size='m' shape='circle' imageSrc={avatarInfo.imageSrc} />\n        )}\n        <Flex\n          container={{\n            direction: 'column',\n            alignItems: direction === 'in' ? 'start' : 'end',\n            justify: 'center'\n          }}\n          as={StyledMessageMain}\n        >\n          <StyledMessageBubble>\n            {messageHeader && (\n              <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n                <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n                <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n              </Flex>\n            )}\n            {message && (\n              <StyledMessageBubbleContent>\n                <EmojiDisplay content={message} size={20} />\n              </StyledMessageBubbleContent>\n            )}\n            {(attachments.length > 0 || pagePushLinks.length > 0) && (\n              <StyledMediaList>\n                {attachments.map(attachment => {\n                  const { id, icon, name, meta, onDownload, onPreview, thumbnail } = attachment;\n                  return (\n                    <Flex\n                      key={id}\n                      as={StyledMediaListItem}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image\n                          as={StyledMediaThumbNail}\n                          src={thumbnail}\n                          onClick={(e: MouseEvent) => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            onPreview?.(id);\n                          }}\n                          alt={name}\n                        />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaButton\n                            onClick={(e: MouseEvent) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              onPreview?.(id);\n                            }}\n                          >\n                            {name}\n                          </StyledMediaButton>\n                        }\n                        secondary={meta}\n                        visual={<Icon name={icon || 'document-doc'} />}\n                        actions={\n                          <BareButton\n                            aria-label={t('download')}\n                            as={StyledMediaDownloadButton}\n                            onClick={(e: MouseEvent) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              onDownload?.(id);\n                            }}\n                          >\n                            <Icon name='download' />\n                          </BareButton>\n                        }\n                      />\n                    </Flex>\n                  );\n                })}\n                {pagePushLinks.map(pagePushLink => {\n                  const { id, href, title, thumbnail } = pagePushLink;\n                  return (\n                    <Flex\n                      as={StyledMediaListItem}\n                      key={id}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image as={StyledMediaThumbNail} src={thumbnail} alt={title || href} />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaLink\n                            aria-label={title}\n                            href={href}\n                            target='_blank'\n                            rel='noreferrer'\n                          >\n                            {href}\n                          </StyledMediaLink>\n                        }\n                        visual={<Icon name='chain-up' />}\n                      />\n                    </Flex>\n                  );\n                })}\n              </StyledMediaList>\n            )}\n          </StyledMessageBubble>\n          {!typing && (\n            <Flex\n              as={StyledMetaInfoContainer}\n              container={{\n                justify: messageMetaJustify,\n                gap: 1.5\n              }}\n            >\n              {timeStamp && <StyledMetaInfo>{timeStamp}</StyledMetaInfo>}\n              {status && <StyledMetaInfo>{status}</StyledMetaInfo>}\n            </Flex>\n          )}\n          {typing && (\n            <Flex\n              container={{\n                gap: 0.25\n              }}\n            >\n              <StyledBlinkingDot delay={0} />\n              <StyledBlinkingDot delay={0.25} />\n              <StyledBlinkingDot delay={0.5} />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default Message;\n"]}
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, ReactNode, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport {\n  AvatarProps,\n  Avatar,\n  Flex,\n  Icon,\n  registerIcon,\n  LinkProps,\n  SummaryItem,\n  Image,\n  FlexContainerProps,\n  EmojiDisplay,\n  useI18n,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as downloadIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/download.icon';\nimport * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';\nimport * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';\n\nimport { AttachmentItemProps } from './Chat.types';\nimport {\n  StyledMessageContainer,\n  StyledMessageMain,\n  StyledMessageBubble,\n  StyledMessageBubbleContent,\n  StyledMediaList,\n  StyledMediaListItem,\n  StyledMediaThumbNail,\n  StyledSummaryItem,\n  StyledMediaLink,\n  StyledMediaDownloadButton,\n  StyledMetaInfoContainer,\n  StyledMetaInfo,\n  StyledBlinkingDot,\n  StyledMediaButton,\n  StyledMessageHeader,\n  StyledMessageHeaderContent,\n  StyledMessageHeaderMeta\n} from './Message.styles';\n\nregisterIcon(downloadIcon, documentDocIcon, chainUpIcon);\n\nexport interface MediaPageLinks extends Pick<LinkProps, 'href'> {\n  /** Unique id for this push link */\n  id: string;\n  /** A string to be used as an image src for a thumbnail. */\n  thumbnail?: AttachmentItemProps['thumbnail'];\n  /** Additional information about the linked resource. */\n  title?: string;\n}\n\nexport type MessageHeaderProps = {\n  /** message header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface MessageProps {\n  /** ref to the message wrapper */\n  ref?: Ref<HTMLDivElement>;\n  /** Message to be displayed */\n  message?: ReactNode;\n  /** Attachment list */\n  attachments?: AttachmentItemProps[];\n  /** Message page push links list */\n  pagePushLinks?: MediaPageLinks[];\n  /** 3 themes supported by default to differentiate between sender, receiver and other */\n  variant: 'sender' | 'receiver' | 'other';\n  /** timestamp of the message(Formatted) */\n  timeStamp?: string;\n  /** Incoming message/ outgoing message */\n  direction: 'in' | 'out';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Content type */\n  contentType?: 'rich-text' | 'plain-text';\n  /** Message status */\n  status?: string;\n  /** Indicates if this message is being currently typed */\n  typing?: boolean;\n  /** Message header */\n  messageHeader?: MessageHeaderProps;\n}\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageProps>, ref: MessageProps['ref']) => {\n    const {\n      message,\n      direction,\n      variant,\n      avatarInfo,\n      timeStamp,\n      attachments = [],\n      pagePushLinks = [],\n      status,\n      typing,\n      messageHeader,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    let messageMetaJustify: FlexContainerProps['justify'] = 'between';\n    if (timeStamp && !status) {\n      messageMetaJustify = 'start';\n    } else if (!timeStamp && status) {\n      messageMetaJustify = 'end';\n    }\n\n    return (\n      <Flex\n        as={StyledMessageContainer}\n        ref={ref}\n        container={{\n          gap: 0.5,\n          direction: direction === 'in' ? 'row' : 'row-reverse'\n        }}\n        item={{\n          shrink: 0\n        }}\n        messageDirection={direction}\n        variant={variant}\n        typing={typing}\n        messageHeader={messageHeader}\n        {...restProps}\n      >\n        {avatarInfo && (\n          <Avatar name={avatarInfo.name} size='m' shape='circle' imageSrc={avatarInfo.imageSrc} />\n        )}\n        <Flex\n          container={{\n            direction: 'column',\n            alignItems: direction === 'in' ? 'start' : 'end',\n            justify: 'center'\n          }}\n          as={StyledMessageMain}\n        >\n          <StyledMessageBubble>\n            {messageHeader && (\n              <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n                <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n                <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n              </Flex>\n            )}\n            {message && (\n              <StyledMessageBubbleContent>\n                <EmojiDisplay content={message} size={20} />\n              </StyledMessageBubbleContent>\n            )}\n            {(attachments.length > 0 || pagePushLinks.length > 0) && (\n              <StyledMediaList>\n                {attachments.map(attachment => {\n                  const { id, icon, name, meta, onDownload, onPreview, thumbnail } = attachment;\n                  return (\n                    <Flex\n                      key={id}\n                      as={StyledMediaListItem}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image\n                          as={StyledMediaThumbNail}\n                          src={thumbnail}\n                          onClick={(e: MouseEvent) => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            onPreview?.(id);\n                          }}\n                          alt={name}\n                        />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaButton\n                            onClick={(e: MouseEvent) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              onPreview?.(id);\n                            }}\n                          >\n                            {name}\n                          </StyledMediaButton>\n                        }\n                        secondary={meta}\n                        visual={<Icon name={icon || 'document-doc'} />}\n                        actions={\n                          <BareButton\n                            aria-label={t('download')}\n                            as={StyledMediaDownloadButton}\n                            onClick={(e: MouseEvent) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                              onDownload?.(id);\n                            }}\n                          >\n                            <Icon name='download' />\n                          </BareButton>\n                        }\n                      />\n                    </Flex>\n                  );\n                })}\n                {pagePushLinks.map(pagePushLink => {\n                  const { id, href, title, thumbnail } = pagePushLink;\n                  return (\n                    <Flex\n                      as={StyledMediaListItem}\n                      key={id}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image as={StyledMediaThumbNail} src={thumbnail} alt={title || href} />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaLink\n                            aria-label={title}\n                            href={href}\n                            target='_blank'\n                            rel='noreferrer'\n                          >\n                            {href}\n                          </StyledMediaLink>\n                        }\n                        visual={<Icon name='chain-up' />}\n                      />\n                    </Flex>\n                  );\n                })}\n              </StyledMediaList>\n            )}\n          </StyledMessageBubble>\n          {!typing && (\n            <Flex\n              as={StyledMetaInfoContainer}\n              container={{\n                justify: messageMetaJustify,\n                gap: 1.5\n              }}\n            >\n              {timeStamp && <StyledMetaInfo>{timeStamp}</StyledMetaInfo>}\n              {status && <StyledMetaInfo>{status}</StyledMetaInfo>}\n            </Flex>\n          )}\n          {typing && (\n            <Flex\n              container={{\n                gap: 0.25\n              }}\n            >\n              <StyledBlinkingDot delay={0} />\n              <StyledBlinkingDot delay={0.25} />\n              <StyledBlinkingDot delay={0.5} />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default Message;\n"]}

package/lib/components/Chat/MessageList.js

@@ -48,7 +48,7 @@ const ScrollToLatest = props => {
                 scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;
         }
     });
-    return _jsx(_Fragment, {}, void 0);
+    return _jsx(_Fragment, {});
 };
 const MessageList = forwardRef((props, ref) => {
     const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;
@@ -102,7 +102,7 @@ const MessageList = forwardRef((props, ref) => {
                                 scrollToLatestMessage();
                             }
                             onScrollToButtonClick?.();
-                        }, icon: unReadMessageCount === 0, children: [_jsx(Icon, { name: 'caret-down' }, void 0), unReadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] }, void 0)] }, void 0)), _jsx(RepeatingView, { as: StyledMessageList, container: { direction: 'column' }, ref: conversationRef, rows: messages, onScroll: debounce(onMessageListScroll, 100), ...restProps, children: (item) => {
+                        }, icon: unReadMessageCount === 0, children: [_jsx(Icon, { name: 'caret-down' }), unReadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] })] })), _jsx(RepeatingView, { as: StyledMessageList, container: { direction: 'column' }, ref: conversationRef, rows: messages, onScroll: debounce(onMessageListScroll, 100), ...restProps, children: (item) => {
                             const { id, type, ...messageListItemRestProps } = item;
                             if (type === 'message') {
                                 return _jsx(Message, { ...messageListItemRestProps }, id);
@@ -117,7 +117,7 @@ const MessageList = forwardRef((props, ref) => {
                             if (type === 'typing') {
                                 return (_jsx(TypeIndicator, { ...messageListItemRestProps }, id));
                             }
-                        } }, void 0)] }, void 0), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef }, void 0)] }, void 0));
+                        } })] }), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef })] }));
 });
 export default MessageList;
 //# sourceMappingURL=MessageList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../src/components/Chat/MessageList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  Ref,\n  useImperativeHandle,\n  useRef,\n  useCallback,\n  useState,\n  useLayoutEffect,\n  RefObject\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledButton,\n  useI18n,\n  debounce,\n  defaultThemeProp,\n  ForwardProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport RepeatingView, {\n  RepeatingViewProps,\n  RepeatingViewRow,\n  StyledRepeatingView,\n  StyledRepeatingViewItem,\n  StyledRepeatingViewUL\n} from './RepeatingView';\nimport Message, { MessageProps } from './Message';\nimport SystemMessage, { SystemMessageProps } from './SystemMessage';\nimport TypeIndicator, { TypeIndicatorProps } from './TypeIndicator';\n\nregisterIcon(caretDownIcon);\n\nexport interface MessageListImperativeHandleProps {\n  isScrolledToLatest: () => boolean;\n  scrollToLatestMessage: () => void;\n  scrollToNewMessage: () => void;\n}\n\nexport type MessageListItemProps =\n  | (MessageProps & { type: 'message'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] })\n  | (TypeIndicatorProps & { type: 'typing'; id: RepeatingViewRow['id'] });\n\nexport interface MessageListProps\n  extends OmitStrict<RepeatingViewProps, 'children' | 'rows' | 'ref'> {\n  /** Messages Data array */\n  messages: MessageListItemProps[];\n  /** ref to the message list */\n  ref?: Ref<MessageListImperativeHandleProps>;\n  /** Total unread messages */\n  unReadMessageCount?: number;\n  /** on scroll to button */\n  onScrollToButtonClick?: () => void;\n}\n\nconst StyledMessageList = styled.div``;\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageListContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { high: shadowHigh },\n        colors: { white }\n      }\n    }\n  } = props;\n  return css`\n    position: relative;\n    overflow-y: hidden;\n    > ${StyledMessageList} {\n      overflow-y: auto;\n    }\n    > ${StyledButton} {\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-shadow: ${shadowHigh};\n      z-index: 1;\n      background-color: ${white};\n    }\n    ${StyledRepeatingView} {\n      overflow-y: hidden;\n    }\n    ${StyledRepeatingViewUL} {\n      padding: 1rem;\n    }\n\n    ${StyledRepeatingViewItem} {\n      padding: 0.125rem 0;\n    }\n  `;\n});\n\nStyledMessageListContainer.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n  scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n  const { scrollContainerRef } = props;\n  useLayoutEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTop =\n        scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n    }\n  });\n  return <></>;\n};\n\nconst MessageList: FunctionComponent<MessageListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageListProps>, ref: MessageListProps['ref']) => {\n    const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;\n\n    const t = useI18n();\n\n    const conversationRef = useRef<HTMLUListElement>(null);\n\n    const isScrolledToLatest: MessageListImperativeHandleProps['isScrolledToLatest'] =\n      useCallback(() => {\n        return conversationRef.current\n          ? conversationRef.current.scrollHeight -\n              conversationRef.current.scrollTop -\n              conversationRef.current.offsetHeight <=\n              30\n          : true;\n      }, [conversationRef.current]);\n\n    const scrollToLatestMessage: MessageListImperativeHandleProps['scrollToLatestMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n        }\n      }, [conversationRef.current]);\n\n    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n    const onMessageListScroll = useCallback(() => {\n      setDisplayScrollToLatest(!isScrolledToLatest());\n    }, [isScrolledToLatest()]);\n\n    const scrollToNewMessage: MessageListImperativeHandleProps['scrollToNewMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          setDisplayScrollToLatest(false);\n          const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n            '[data-new-message-separator]'\n          );\n          if (newMessageIndicatorEle) {\n            conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n          } else {\n            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n          }\n        }\n      }, [conversationRef.current]);\n\n    useImperativeHandle<MessageListImperativeHandleProps, MessageListImperativeHandleProps>(\n      ref,\n      () => ({\n        isScrolledToLatest,\n        scrollToLatestMessage,\n        scrollToNewMessage\n      }),\n      [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n    );\n\n    return (\n      <>\n        <Flex\n          as={StyledMessageListContainer}\n          item={{\n            grow: 1\n          }}\n          container={{\n            direction: 'column'\n          }}\n          {...restProps}\n        >\n          {(unReadMessageCount > 0 || displayScrollLatest) && (\n            <Button\n              aria-label={\n                unReadMessageCount > 0\n                  ? t('scroll_to_unread_messages')\n                  : t('scroll_to_latest_message')\n              }\n              onClick={() => {\n                if (unReadMessageCount > 0) {\n                  scrollToNewMessage();\n                } else {\n                  scrollToLatestMessage();\n                }\n                onScrollToButtonClick?.();\n              }}\n              icon={unReadMessageCount === 0}\n            >\n              <Icon name='caret-down' />\n              {unReadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n            </Button>\n          )}\n          <RepeatingView\n            as={StyledMessageList}\n            container={{ direction: 'column' }}\n            ref={conversationRef}\n            rows={messages}\n            onScroll={debounce(onMessageListScroll, 100)}\n            {...restProps}\n          >\n            {(item: RepeatingViewRow) => {\n              const { id, type, ...messageListItemRestProps } = item as MessageListItemProps;\n              if (type === 'message') {\n                return <Message key={id} {...(messageListItemRestProps as MessageProps)} />;\n              }\n\n              if (type === 'system') {\n                const extraProps: Record<string, string> = {};\n                if (id === NewMessageSeparatorId) {\n                  extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n                }\n                return (\n                  <SystemMessage\n                    key={id}\n                    {...(messageListItemRestProps as SystemMessageProps)}\n                    {...extraProps}\n                  />\n                );\n              }\n              if (type === 'typing') {\n                return (\n                  <TypeIndicator key={id} {...(messageListItemRestProps as TypeIndicatorProps)} />\n                );\n              }\n            }}\n          </RepeatingView>\n        </Flex>\n        {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n      </>\n    );\n  }\n);\n\nexport default MessageList;\n"]}
+{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../src/components/Chat/MessageList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  Ref,\n  useImperativeHandle,\n  useRef,\n  useCallback,\n  useState,\n  useLayoutEffect,\n  RefObject\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledButton,\n  useI18n,\n  debounce,\n  defaultThemeProp,\n  ForwardProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport RepeatingView, {\n  RepeatingViewProps,\n  RepeatingViewRow,\n  StyledRepeatingView,\n  StyledRepeatingViewItem,\n  StyledRepeatingViewUL\n} from './RepeatingView';\nimport Message, { MessageProps } from './Message';\nimport SystemMessage, { SystemMessageProps } from './SystemMessage';\nimport TypeIndicator, { TypeIndicatorProps } from './TypeIndicator';\n\nregisterIcon(caretDownIcon);\n\nexport interface MessageListImperativeHandleProps {\n  isScrolledToLatest: () => boolean;\n  scrollToLatestMessage: () => void;\n  scrollToNewMessage: () => void;\n}\n\nexport type MessageListItemProps =\n  | (MessageProps & { type: 'message'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] })\n  | (TypeIndicatorProps & { type: 'typing'; id: RepeatingViewRow['id'] });\n\nexport interface MessageListProps\n  extends OmitStrict<RepeatingViewProps, 'children' | 'rows' | 'ref'> {\n  /** Messages Data array */\n  messages: MessageListItemProps[];\n  /** ref to the message list */\n  ref?: Ref<MessageListImperativeHandleProps>;\n  /** Total unread messages */\n  unReadMessageCount?: number;\n  /** on scroll to button */\n  onScrollToButtonClick?: () => void;\n}\n\nconst StyledMessageList = styled.div``;\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageListContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { high: shadowHigh },\n        colors: { white }\n      }\n    }\n  } = props;\n  return css`\n    position: relative;\n    overflow-y: hidden;\n    > ${StyledMessageList} {\n      overflow-y: auto;\n    }\n    > ${StyledButton} {\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-shadow: ${shadowHigh};\n      z-index: 1;\n      background-color: ${white};\n    }\n    ${StyledRepeatingView} {\n      overflow-y: hidden;\n    }\n    ${StyledRepeatingViewUL} {\n      padding: 1rem;\n    }\n\n    ${StyledRepeatingViewItem} {\n      padding: 0.125rem 0;\n    }\n  `;\n});\n\nStyledMessageListContainer.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n  scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n  const { scrollContainerRef } = props;\n  useLayoutEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTop =\n        scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n    }\n  });\n  return <></>;\n};\n\nconst MessageList: FunctionComponent<MessageListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageListProps>, ref: MessageListProps['ref']) => {\n    const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;\n\n    const t = useI18n();\n\n    const conversationRef = useRef<HTMLUListElement>(null);\n\n    const isScrolledToLatest: MessageListImperativeHandleProps['isScrolledToLatest'] =\n      useCallback(() => {\n        return conversationRef.current\n          ? conversationRef.current.scrollHeight -\n              conversationRef.current.scrollTop -\n              conversationRef.current.offsetHeight <=\n              30\n          : true;\n      }, [conversationRef.current]);\n\n    const scrollToLatestMessage: MessageListImperativeHandleProps['scrollToLatestMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n        }\n      }, [conversationRef.current]);\n\n    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n    const onMessageListScroll = useCallback(() => {\n      setDisplayScrollToLatest(!isScrolledToLatest());\n    }, [isScrolledToLatest()]);\n\n    const scrollToNewMessage: MessageListImperativeHandleProps['scrollToNewMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          setDisplayScrollToLatest(false);\n          const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n            '[data-new-message-separator]'\n          );\n          if (newMessageIndicatorEle) {\n            conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n          } else {\n            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n          }\n        }\n      }, [conversationRef.current]);\n\n    useImperativeHandle<MessageListImperativeHandleProps, MessageListImperativeHandleProps>(\n      ref,\n      () => ({\n        isScrolledToLatest,\n        scrollToLatestMessage,\n        scrollToNewMessage\n      }),\n      [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n    );\n\n    return (\n      <>\n        <Flex\n          as={StyledMessageListContainer}\n          item={{\n            grow: 1\n          }}\n          container={{\n            direction: 'column'\n          }}\n          {...restProps}\n        >\n          {(unReadMessageCount > 0 || displayScrollLatest) && (\n            <Button\n              aria-label={\n                unReadMessageCount > 0\n                  ? t('scroll_to_unread_messages')\n                  : t('scroll_to_latest_message')\n              }\n              onClick={() => {\n                if (unReadMessageCount > 0) {\n                  scrollToNewMessage();\n                } else {\n                  scrollToLatestMessage();\n                }\n                onScrollToButtonClick?.();\n              }}\n              icon={unReadMessageCount === 0}\n            >\n              <Icon name='caret-down' />\n              {unReadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n            </Button>\n          )}\n          <RepeatingView\n            as={StyledMessageList}\n            container={{ direction: 'column' }}\n            ref={conversationRef}\n            rows={messages}\n            onScroll={debounce(onMessageListScroll, 100)}\n            {...restProps}\n          >\n            {(item: RepeatingViewRow) => {\n              const { id, type, ...messageListItemRestProps } = item as MessageListItemProps;\n              if (type === 'message') {\n                return <Message key={id} {...(messageListItemRestProps as MessageProps)} />;\n              }\n\n              if (type === 'system') {\n                const extraProps: Record<string, string> = {};\n                if (id === NewMessageSeparatorId) {\n                  extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n                }\n                return (\n                  <SystemMessage\n                    key={id}\n                    {...(messageListItemRestProps as SystemMessageProps)}\n                    {...extraProps}\n                  />\n                );\n              }\n              if (type === 'typing') {\n                return (\n                  <TypeIndicator key={id} {...(messageListItemRestProps as TypeIndicatorProps)} />\n                );\n              }\n            }}\n          </RepeatingView>\n        </Flex>\n        {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n      </>\n    );\n  }\n);\n\nexport default MessageList;\n"]}

package/lib/components/Chat/RepeatingView.js

@@ -41,7 +41,7 @@ const RepeatingView = forwardRef((props, ref) => {
                 }, as: StyledRepeatingViewUL, ref: listRef, children: [rows.map(row => {
                         const { ariaLabel, ...rowRestProps } = row;
                         return (_jsx(StyledRepeatingViewItem, { "aria-label": ariaLabel, tabIndex: 0, children: renderer(rowRestProps) }, row.id));
-                    }), isLoading && (_jsx(StyledRepeatingViewItem, { children: _jsx(Progress, { placement: 'inline' }, void 0) }, 'loader'))] }, void 0), !isLoading && rows.length === 0 && emptyView && (_jsx(StyledEmptyView, { children: emptyView }, void 0))] }, void 0));
+                    }), isLoading && (_jsx(StyledRepeatingViewItem, { children: _jsx(Progress, { placement: 'inline' }) }, 'loader'))] }), !isLoading && rows.length === 0 && emptyView && (_jsx(StyledEmptyView, { children: emptyView }))] }));
 });
 export default RepeatingView;
 //# sourceMappingURL=RepeatingView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RepeatingView.js","sourceRoot":"","sources":["../../../src/components/Chat/RepeatingView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsC,UAAU,EAAkB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EACJ,QAAQ,EAAE,QAAQ,EAClB,MAAM,GAAG,CAAC,CAAC,EACX,QAAQ,EACR,OAAO,EAAE,SAAS,GAAG,KAAK,EAC1B,IAAI,GAAG,EAAE,EACT,SAAS,EACT,eAAe,GAAG,eAAe,EACjC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,MAAM,EACN,GAAG,EAAE;QACH,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EACD,aAAa,CACd,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,mBAAmB,KACnB,SAAS,aAEb,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;oBACT,SAAS,EAAE,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;iBAC7E,EACD,EAAE,EAAE,qBAAqB,EACzB,GAAG,EAAE,OAAO,aAEX,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACd,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,GAAG,GAAG,CAAC;wBAC3C,OAAO,CACL,KAAC,uBAAuB,kBAAa,SAAS,EAAE,QAAQ,EAAE,CAAC,YACxD,QAAQ,CAAC,YAAY,CAAC,IADyC,GAAG,CAAC,EAAE,CAE9C,CAC3B,CAAC;oBACJ,CAAC,CAAC,EACD,SAAS,IAAI,CACZ,KAAC,uBAAuB,cACtB,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,WAAG,IADJ,QAAQ,CAEX,CAC3B,YACI,EACN,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,IAAI,CAC/C,KAAC,eAAe,cAAE,SAAS,WAAmB,CAC/C,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Progress,\n  useItemIntersection,\n  useConsolidatedRef,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface RepeatingViewRow {\n  id: string | number;\n  ariaLabel?: string;\n}\n\nexport interface RepeatingViewProps {\n  /** ref to the list element */\n  ref?: Ref<HTMLUListElement>;\n  /** Callback to render the view */\n  children: (row: RepeatingViewRow) => ReactNode;\n  /** Data rows */\n  rows?: RepeatingViewRow[];\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n  /** Offset of the row item that need to trigger the load more callback */\n  offset?: number;\n  /** Callback to fetch more rows */\n  loadMore?: () => void;\n  /** UI that needs to be shown when list is empty */\n  emptyView?: ReactNode;\n  /** Scroll direction */\n  scrollDirection?: 'top-to-bottom' | 'bottom-to-top';\n}\nexport const StyledRepeatingViewItem = styled.li(({ theme }) => {\n  return css`\n    outline: none;\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\nStyledRepeatingViewItem.defaultProps = defaultThemeProp;\n\nexport const StyledRepeatingViewUL = styled.ul`\n  list-style-type: none;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledRepeatingView = styled.div`\n  position: relative;\n`;\n\nexport const StyledEmptyView = styled.div`\n  position: absolute;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n`;\n\nconst RepeatingView: FunctionComponent<RepeatingViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RepeatingViewProps>, ref: RepeatingViewProps['ref']) => {\n    const {\n      children: renderer,\n      offset = -1,\n      loadMore,\n      loading: isLoading = false,\n      rows = [],\n      emptyView,\n      scrollDirection = 'top-to-bottom',\n      ...restProps\n    } = props;\n\n    const listRef = useConsolidatedRef(ref);\n    useItemIntersection(\n      listRef,\n      offset,\n      () => {\n        loadMore?.();\n      },\n      ':scope > li'\n    );\n\n    return (\n      <Flex\n        container={{\n          alignItems: 'center',\n          justify: 'center'\n        }}\n        tabindex={0}\n        as={StyledRepeatingView}\n        {...restProps}\n      >\n        <Flex\n          {...restProps}\n          container={{\n            direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'\n          }}\n          as={StyledRepeatingViewUL}\n          ref={listRef}\n        >\n          {rows.map(row => {\n            const { ariaLabel, ...rowRestProps } = row;\n            return (\n              <StyledRepeatingViewItem aria-label={ariaLabel} tabIndex={0} key={row.id}>\n                {renderer(rowRestProps)}\n              </StyledRepeatingViewItem>\n            );\n          })}\n          {isLoading && (\n            <StyledRepeatingViewItem key='loader'>\n              <Progress placement='inline' />\n            </StyledRepeatingViewItem>\n          )}\n        </Flex>\n        {!isLoading && rows.length === 0 && emptyView && (\n          <StyledEmptyView>{emptyView}</StyledEmptyView>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default RepeatingView;\n"]}
+{"version":3,"file":"RepeatingView.js","sourceRoot":"","sources":["../../../src/components/Chat/RepeatingView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsC,UAAU,EAAkB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EACJ,QAAQ,EAAE,QAAQ,EAClB,MAAM,GAAG,CAAC,CAAC,EACX,QAAQ,EACR,OAAO,EAAE,SAAS,GAAG,KAAK,EAC1B,IAAI,GAAG,EAAE,EACT,SAAS,EACT,eAAe,GAAG,eAAe,EACjC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,MAAM,EACN,GAAG,EAAE;QACH,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EACD,aAAa,CACd,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,mBAAmB,KACnB,SAAS,aAEb,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;oBACT,SAAS,EAAE,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;iBAC7E,EACD,EAAE,EAAE,qBAAqB,EACzB,GAAG,EAAE,OAAO,aAEX,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACd,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,GAAG,GAAG,CAAC;wBAC3C,OAAO,CACL,KAAC,uBAAuB,kBAAa,SAAS,EAAE,QAAQ,EAAE,CAAC,YACxD,QAAQ,CAAC,YAAY,CAAC,IADyC,GAAG,CAAC,EAAE,CAE9C,CAC3B,CAAC;oBACJ,CAAC,CAAC,EACD,SAAS,IAAI,CACZ,KAAC,uBAAuB,cACtB,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,IADJ,QAAQ,CAEX,CAC3B,IACI,EACN,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,IAAI,CAC/C,KAAC,eAAe,cAAE,SAAS,GAAmB,CAC/C,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Progress,\n  useItemIntersection,\n  useConsolidatedRef,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface RepeatingViewRow {\n  id: string | number;\n  ariaLabel?: string;\n}\n\nexport interface RepeatingViewProps {\n  /** ref to the list element */\n  ref?: Ref<HTMLUListElement>;\n  /** Callback to render the view */\n  children: (row: RepeatingViewRow) => ReactNode;\n  /** Data rows */\n  rows?: RepeatingViewRow[];\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n  /** Offset of the row item that need to trigger the load more callback */\n  offset?: number;\n  /** Callback to fetch more rows */\n  loadMore?: () => void;\n  /** UI that needs to be shown when list is empty */\n  emptyView?: ReactNode;\n  /** Scroll direction */\n  scrollDirection?: 'top-to-bottom' | 'bottom-to-top';\n}\nexport const StyledRepeatingViewItem = styled.li(({ theme }) => {\n  return css`\n    outline: none;\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\nStyledRepeatingViewItem.defaultProps = defaultThemeProp;\n\nexport const StyledRepeatingViewUL = styled.ul`\n  list-style-type: none;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledRepeatingView = styled.div`\n  position: relative;\n`;\n\nexport const StyledEmptyView = styled.div`\n  position: absolute;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n`;\n\nconst RepeatingView: FunctionComponent<RepeatingViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RepeatingViewProps>, ref: RepeatingViewProps['ref']) => {\n    const {\n      children: renderer,\n      offset = -1,\n      loadMore,\n      loading: isLoading = false,\n      rows = [],\n      emptyView,\n      scrollDirection = 'top-to-bottom',\n      ...restProps\n    } = props;\n\n    const listRef = useConsolidatedRef(ref);\n    useItemIntersection(\n      listRef,\n      offset,\n      () => {\n        loadMore?.();\n      },\n      ':scope > li'\n    );\n\n    return (\n      <Flex\n        container={{\n          alignItems: 'center',\n          justify: 'center'\n        }}\n        tabindex={0}\n        as={StyledRepeatingView}\n        {...restProps}\n      >\n        <Flex\n          {...restProps}\n          container={{\n            direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'\n          }}\n          as={StyledRepeatingViewUL}\n          ref={listRef}\n        >\n          {rows.map(row => {\n            const { ariaLabel, ...rowRestProps } = row;\n            return (\n              <StyledRepeatingViewItem aria-label={ariaLabel} tabIndex={0} key={row.id}>\n                {renderer(rowRestProps)}\n              </StyledRepeatingViewItem>\n            );\n          })}\n          {isLoading && (\n            <StyledRepeatingViewItem key='loader'>\n              <Progress placement='inline' />\n            </StyledRepeatingViewItem>\n          )}\n        </Flex>\n        {!isLoading && rows.length === 0 && emptyView && (\n          <StyledEmptyView>{emptyView}</StyledEmptyView>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default RepeatingView;\n"]}