@pega/cosmos-react-social 4.0.0-dev.19.3 → 4.0.0-dev.19.5

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAGL,WAAW,EAEX,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAA6B,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,kCAAkC;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,6DAA6D;IAC7D,IAAI,EAAE,aAAa,CAAC;IACpB,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,yBAAyB,CAAC;IACjD,kBAAkB;IAClB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IACnD,yDAAyD;IACzD,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AA8DD,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAqBrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAGL,WAAW,EAEX,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAA6B,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,kCAAkC;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,6DAA6D;IAC7D,IAAI,EAAE,aAAa,CAAC;IACpB,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,yBAAyB,CAAC;IACjD,kBAAkB;IAClB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IACnD,yDAAyD;IACzD,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAgED,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAqBrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Chat/Chat.js

@@ -11,11 +11,12 @@ const StyledUtilityContainer = styled.div ``;
 const StyledUtilityMerger = styled.div ``;
 const StyledUtilityContent = styled.div ``;
 const StyledChatContainer = styled.section(props => {
-    const { theme: { base: { spacing, shadow: { high: shadowHigh }, palette: { 'primary-background': primaryBackground, 'secondary-background': secondaryBackground } } } } = props;
+    const { theme: { base: { spacing, shadow: { high: shadowHigh }, palette: { 'primary-background': primaryBackground, 'secondary-background': secondaryBackground }, 'border-radius': borderRadius } } } = props;
     return css `
     height: 100%;
     background: ${primaryBackground};
     width: 100%;
+    border-radius: ${borderRadius};
     ${StyledUtilityMerger} {
       min-height: 15rem;
       position: relative;

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,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,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;AAEpF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AACjE,OAAO,UAA+B,MAAM,cAAc,CAAC;AAC3D,OAAO,oBAAmD,MAAM,wBAAwB,CAAC;AAyBzF,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,QAAQ,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAErF,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,SAAS,aAEb,KAAC,UAAU,OAAK,MAAM,GAAI,EACzB,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,GAAI,EACzE,KAAC,QAAQ,OAAK,IAAI,GAAI,EACrB,oBAAoB,IAAI,KAAC,oBAAoB,OAAK,oBAAoB,GAAI,EAC3E,KAAC,YAAY,OAAK,QAAQ,GAAI,IACzB,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } 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, { ChatComposerProps } from './ChatComposer';\nimport ChatHeader, { ChatHeaderProps } from './ChatHeader';\nimport SuggestedReplyPicker, { SuggestedReplyPickerProps } from './SuggestedReplyPicker';\nimport { ChatBodyProps } from './Chat.types';\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: ChatHeaderProps;\n  /** Wrapper of message groups, system messages, type ahead */\n  body: ChatBodyProps;\n  /** Wrapper of suggested replies */\n  suggestedReplyPicker?: SuggestedReplyPickerProps;\n  /** chat banner */\n  banner?: Pick<BannerProps, 'variant' | 'messages'>;\n  /** Wrapper of conversation input, emojis, attachments */\n  composer: ChatComposerProps;\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, composer, banner, suggestedReplyPicker, ...restProps } = props;\n\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatContainer}\n        container={{\n          direction: 'column'\n        }}\n        {...restProps}\n      >\n        <ChatHeader {...header} />\n        {banner && <Banner variant={banner.variant} messages={banner.messages} />}\n        <ChatBody {...body} />\n        {suggestedReplyPicker && <SuggestedReplyPicker {...suggestedReplyPicker} />}\n        <ChatComposer {...composer} />\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,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,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;AAEpF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AACjE,OAAO,UAA+B,MAAM,cAAc,CAAC;AAC3D,OAAO,oBAAmD,MAAM,wBAAwB,CAAC;AAyBzF,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,EACD,eAAe,EAAE,YAAY,EAC9B,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;kBAEM,iBAAiB;;qBAEd,YAAY;MAC3B,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,QAAQ,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAErF,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,SAAS,aAEb,KAAC,UAAU,OAAK,MAAM,GAAI,EACzB,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,GAAI,EACzE,KAAC,QAAQ,OAAK,IAAI,GAAI,EACrB,oBAAoB,IAAI,KAAC,oBAAoB,OAAK,oBAAoB,GAAI,EAC3E,KAAC,YAAY,OAAK,QAAQ,GAAI,IACzB,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } 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, { ChatComposerProps } from './ChatComposer';\nimport ChatHeader, { ChatHeaderProps } from './ChatHeader';\nimport SuggestedReplyPicker, { SuggestedReplyPickerProps } from './SuggestedReplyPicker';\nimport { ChatBodyProps } from './Chat.types';\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: ChatHeaderProps;\n  /** Wrapper of message groups, system messages, type ahead */\n  body: ChatBodyProps;\n  /** Wrapper of suggested replies */\n  suggestedReplyPicker?: SuggestedReplyPickerProps;\n  /** chat banner */\n  banner?: Pick<BannerProps, 'variant' | 'messages'>;\n  /** Wrapper of conversation input, emojis, attachments */\n  composer: ChatComposerProps;\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        'border-radius': borderRadius\n      }\n    }\n  } = props;\n  return css`\n    height: 100%;\n    background: ${primaryBackground};\n    width: 100%;\n    border-radius: ${borderRadius};\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, composer, banner, suggestedReplyPicker, ...restProps } = props;\n\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatContainer}\n        container={{\n          direction: 'column'\n        }}\n        {...restProps}\n      >\n        <ChatHeader {...header} />\n        {banner && <Banner variant={banner.variant} messages={banner.messages} />}\n        <ChatBody {...body} />\n        {suggestedReplyPicker && <SuggestedReplyPicker {...suggestedReplyPicker} />}\n        <ChatComposer {...composer} />\n      </Flex>\n    );\n  }\n);\n\nexport default Chat;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EAEH,SAAS,EAOT,SAAS,EACT,aAAa,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,EAcL,YAAY,EAKZ,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,YAAY,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iCAAiC,CAAC,CAAC;CAC9C;AA0ED,eAAO,MAAM,8BAA8B,yGAUzC,CAAC;AAEH,MAAM,WAAW,iCAAiC;IAChD,mCAAmC;IACnC,eAAe,EAAE,CACf,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,KACjD,IAAI,CAAC;IACV,4CAA4C;IAC5C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAgTrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EAEH,SAAS,EAOT,SAAS,EACT,aAAa,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,EAcL,YAAY,EAKZ,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,YAAY,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iCAAiC,CAAC,CAAC;CAC9C;AA4ED,eAAO,MAAM,8BAA8B,yGAUzC,CAAC;AAEH,MAAM,WAAW,iCAAiC;IAChD,mCAAmC;IACnC,eAAe,EAAE,CACf,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,KACjD,IAAI,CAAC;IACV,4CAA4C;IAC5C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiTrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Chat/ChatComposer.js

@@ -25,6 +25,8 @@ const StyledChatComposer = styled.footer(({ theme, disabled, theme: { base: { 'd
     return css `
       padding: calc(2 * ${spacing});
       background-color: ${theme.base.palette['secondary-background']};
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
       textarea {
         border-radius: ${theme.base['border-radius']};
         height: 5rem;
@@ -203,7 +205,7 @@ const ChatComposer = forwardRef((props, ref) => {
                                         return _createElement(StyledAttachmentItem, { ...attachmentProps, key: attachmentProps.name });
                                     }
                                     return (_jsx("div", { "aria-label": `${t('attachments_x_of_y', [idx + 1, attachments.length])}`, children: _jsx(StyledAttachmentItem, { ...attachment }) }, 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
+                                }) }), _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'), autoResize: false })] }), _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' }) }), 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);

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  useElement,\n  defaultThemeProp,\n  PropsWithDefaults,\n  ForwardProps,\n  Tooltip,\n  useOuterEvent,\n  VisuallyHiddenText,\n  FileUploadItem,\n  FileUploadItemProps,\n  Grid\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\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?: FileUploadItemProps[];\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(FileUploadItem)``;\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: { 'disabled-opacity': transparentBg, spacing }\n    }\n  }) => {\n    return css`\n      padding: calc(2 * ${spacing});\n      background-color: ${theme.base.palette['secondary-background']};\n      textarea {\n        border-radius: ${theme.base['border-radius']};\n        height: 5rem;\n        border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};\n        max-width: 100%;\n      }\n      ${StyledAttachmentItem} {\n        ${disabled &&\n        css`\n          pointer-events: none;\n          opacity: ${transparentBg};\n        `}\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(({ theme }) => {\n  return css`\n    max-height: 5rem;\n    overflow-y: auto;\n\n    &:focus-within {\n      box-shadow: ${theme.base.shadow['focus-group']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n    }\n  `;\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 = useRef<HTMLTextAreaElement>(null);\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n    const [announcement, setAnnouncement] = useState('');\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        }\n      },\n      [onSend]\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            setAnnouncement(t('message_sent'));\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        setAnnouncement('');\n      },\n      [setMessage]\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    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            <Grid\n              container={{\n                cols: 'repeat(auto-fill, minmax(12rem, 1fr))',\n                gap: 1\n              }}\n              role='group'\n              aria-label={`${t('attachments')}`}\n              as={StyledAttachmentsListContainer}\n            >\n              {attachments.map((attachment, idx) => {\n                if (disabled) {\n                  const attachmentProps = {\n                    ...attachment,\n                    onDelete: undefined,\n                    onDownload: undefined,\n                    onPreview: undefined,\n                    onEdit: undefined,\n                    onCancel: undefined\n                  };\n                  return <StyledAttachmentItem {...attachmentProps} key={attachmentProps.name} />;\n                }\n                return (\n                  <div\n                    aria-label={`${t('attachments_x_of_y', [idx + 1, attachments.length])}`}\n                    key={attachment.name}\n                  >\n                    <StyledAttachmentItem {...attachment} />\n                  </div>\n                );\n              })}\n            </Grid>\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                setAnnouncement(t('message_sent'));\n              }}\n            >\n              {t('send_label')}\n            </Button>\n            {announcement && (\n              <VisuallyHiddenText aria-live='assertive'>{announcement}</VisuallyHiddenText>\n            )}\n          </Flex>\n        </Flex>\n        <Popover\n          show={showEmojiPicker}\n          target={emojiBtnEl}\n          placement='top-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  useElement,\n  defaultThemeProp,\n  PropsWithDefaults,\n  ForwardProps,\n  Tooltip,\n  useOuterEvent,\n  VisuallyHiddenText,\n  FileUploadItem,\n  FileUploadItemProps,\n  Grid\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\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?: FileUploadItemProps[];\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(FileUploadItem)``;\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: { 'disabled-opacity': transparentBg, spacing }\n    }\n  }) => {\n    return css`\n      padding: calc(2 * ${spacing});\n      background-color: ${theme.base.palette['secondary-background']};\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n      textarea {\n        border-radius: ${theme.base['border-radius']};\n        height: 5rem;\n        border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};\n        max-width: 100%;\n      }\n      ${StyledAttachmentItem} {\n        ${disabled &&\n        css`\n          pointer-events: none;\n          opacity: ${transparentBg};\n        `}\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(({ theme }) => {\n  return css`\n    max-height: 5rem;\n    overflow-y: auto;\n\n    &:focus-within {\n      box-shadow: ${theme.base.shadow['focus-group']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n    }\n  `;\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 = useRef<HTMLTextAreaElement>(null);\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n    const [announcement, setAnnouncement] = useState('');\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        }\n      },\n      [onSend]\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            setAnnouncement(t('message_sent'));\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        setAnnouncement('');\n      },\n      [setMessage]\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    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            <Grid\n              container={{\n                cols: 'repeat(auto-fill, minmax(12rem, 1fr))',\n                gap: 1\n              }}\n              role='group'\n              aria-label={`${t('attachments')}`}\n              as={StyledAttachmentsListContainer}\n            >\n              {attachments.map((attachment, idx) => {\n                if (disabled) {\n                  const attachmentProps = {\n                    ...attachment,\n                    onDelete: undefined,\n                    onDownload: undefined,\n                    onPreview: undefined,\n                    onEdit: undefined,\n                    onCancel: undefined\n                  };\n                  return <StyledAttachmentItem {...attachmentProps} key={attachmentProps.name} />;\n                }\n                return (\n                  <div\n                    aria-label={`${t('attachments_x_of_y', [idx + 1, attachments.length])}`}\n                    key={attachment.name}\n                  >\n                    <StyledAttachmentItem {...attachment} />\n                  </div>\n                );\n              })}\n            </Grid>\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              autoResize={false}\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                setAnnouncement(t('message_sent'));\n              }}\n            >\n              {t('send_label')}\n            </Button>\n            {announcement && (\n              <VisuallyHiddenText aria-live='assertive'>{announcement}</VisuallyHiddenText>\n            )}\n          </Flex>\n        </Flex>\n        <Popover\n          show={showEmojiPicker}\n          target={emojiBtnEl}\n          placement='top-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/Email/EmailConversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAKlG,OAAO,EAQL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAEvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;SASzE,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAe5B,CAAC;AAIH,eAAO,MAAM,uBAAuB;;;SAalC,CAAC;AAGH,eAAO,MAAM,yBAAyB,wKAwBpC,CAAC;AA6DH,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA6I/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAKlG,OAAO,EAQL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAEvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;SAczE,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAsB7B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;;SAqBnC,CAAC;AAGF,eAAO,MAAM,yBAAyB,wKA4BrC,CAAC;AAuEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA6I/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Email/EmailConversation.js

@@ -21,109 +21,109 @@ export const StyledCompactTimeStampDisplay = styled(Text) `
   margin-top: calc(${props => props.theme.base.spacing} / 2);
 `;
 StyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;
-export const StyledConversationHeader = styled.header(({ theme, collapsed }) => {
+export const StyledConversationHeader = styled.header(({ theme: { base: { palette } }, collapsed }) => {
     return css `
-      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${theme.base.palette['border-line']};
+      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${palette['border-line']};
       position: sticky;
       top: 0;
       z-index: 1;
     `;
 });
 StyledConversationHeader.defaultProps = defaultThemeProp;
-export const StyledUnReadCount = styled.div(({ theme: { base } }) => {
-    const readableBackground = readableHue(base.palette['brand-primary'], base.palette['primary-background']);
+export const StyledUnReadCount = styled.div(({ theme: { base: { spacing, palette, 'font-weight': { 'semi-bold': fontWeightSemiBold } } } }) => {
+    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
     const readableTextColor = readableColor(readableBackground);
     return css `
-    align-self: flex-start;
-    background-color: ${readableBackground};
-    color: ${readableTextColor};
-    padding: 0 ${base.spacing};
-    font-weight: ${base['font-weight']['semi-bold']};
-    width: fit-content;
-  `;
+      align-self: flex-start;
+      background-color: ${readableBackground};
+      color: ${readableTextColor};
+      padding: 0 ${spacing};
+      font-weight: ${fontWeightSemiBold};
+      width: fit-content;
+    `;
 });
 StyledUnReadCount.defaultProps = defaultThemeProp;
-export const StyledEmailConversation = styled.li(({ theme: { base }, singleConversation, showHeader }) => {
+export const StyledEmailConversation = styled.li(({ theme: { base: { spacing, palette, 'border-radius': baseBorderRadius } }, singleConversation, showHeader }) => {
     return css `
-    margin-bottom: ${base.spacing};
-    border-radius: ${singleConversation && showHeader
-        ? `0 0 ${base['border-radius']} ${base['border-radius']}`
-        : base['border-radius']};
-    overflow: hidden;
-    background-color: ${base.palette['primary-background']};
-    list-style-type: none;
-  `;
+      margin-bottom: ${spacing};
+      border-radius: ${singleConversation && showHeader
+        ? `0 0 ${baseBorderRadius} ${baseBorderRadius}`
+        : baseBorderRadius};
+      overflow: hidden;
+      background-color: ${palette['primary-background']};
+      list-style-type: none;
+    `;
 });
 StyledEmailConversation.defaultProps = defaultThemeProp;
-export const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base } }) => {
-    const readableBackground = readableHue(base.palette['brand-primary'], base.palette['primary-background']);
+export const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base: { spacing, palette } } }) => {
+    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
     return css `
-    padding: calc(2 * ${base.spacing}) 0;
-    position: relative;
-    :not(:last-child) {
-      border-bottom: 0.0625rem solid ${base.palette['border-line']};
-    }
-    ${unRead &&
-        css `
-      &::before {
-        content: '';
-        background-color: ${readableBackground};
-        position: absolute;
-        inset: 0;
-        height: calc(100% + 0.0625rem);
-        top: -0.0625rem;
-        width: 0.125rem;
+      padding: calc(2 * ${spacing}) 0;
+      position: relative;
+      :not(:last-child) {
+        border-bottom: 0.0625rem solid ${palette['border-line']};
       }
-    `}
-  `;
+      ${unRead &&
+        css `
+        &::before {
+          content: '';
+          background-color: ${readableBackground};
+          position: absolute;
+          inset: 0;
+          height: calc(100% + 0.0625rem);
+          top: -0.0625rem;
+          width: 0.125rem;
+        }
+      `}
+    `;
 });
 StyledEmailInConversation.defaultProps = defaultThemeProp;
-const StyledUnreadIndicator = styled.span(({ theme, isVisible }) => {
-    const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
+const StyledUnreadIndicator = styled.span(({ theme: { base: { palette } }, isVisible }) => {
+    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
     const diameter = '0.375rem';
     return css `
-    width: ${isVisible ? diameter : 0};
-    margin: 0 ${isVisible ? 0 : '0.188rem'};
-    height: ${diameter};
-    display: inline-block;
-    border-radius: 50%;
-    background: ${readableBackground};
-    position: relative;
-    top: 0.375rem;
-    align-self: flex-start;
-  `;
+      width: ${isVisible ? diameter : 0};
+      margin: 0 ${isVisible ? 0 : '0.188rem'};
+      height: ${diameter};
+      display: inline-block;
+      border-radius: 50%;
+      background: ${readableBackground};
+      position: relative;
+      top: 0.375rem;
+      align-self: flex-start;
+    `;
 });
 StyledUnreadIndicator.defaultProps = defaultThemeProp;
-const StyledConversationButton = styled.button(({ theme }) => {
-    const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette['brand-primary']));
+const StyledConversationButton = styled.button(({ theme: { base: { spacing, palette } } }) => {
+    const hoverColor = tryCatch(() => mix(0.85, palette['primary-background'], palette['brand-primary']));
     return css `
-    border-width: 0;
-    width: 100%;
-    padding: ${theme.base.spacing};
-    background: ${theme.base.palette['primary-background']};
-    position: sticky;
-    top: 0;
-    z-index: 1;
+      border-width: 0;
+      width: 100%;
+      padding: ${spacing};
+      background: ${palette['primary-background']};
+      color: ${palette['foreground-color']};
+      position: sticky;
+      top: 0;
+      z-index: 1;
 
-    &[aria-expanded='true'] {
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    }
+      &[aria-expanded='true'] {
+        border-bottom: 0.0625rem solid ${palette['border-line']};
+      }
 
-    &:focus {
-      background: ${theme.base.palette['secondary-background']};
-      outline: none;
-    }
+      &:focus {
+        background: ${palette['secondary-background']};
+        outline: none;
+      }
 
-    &:hover {
-      background: ${hoverColor};
-      outline: none;
-    }
+      &:hover {
+        background: ${hoverColor};
+        outline: none;
+      }
 
-    & > ${StyledIcon} {
-      align-self: flex-start;
-      color: ${theme.base.palette['foreground-color']};
-    }
-  `;
+      & > ${StyledIcon} {
+        align-self: flex-start;
+      }
+    `;
 });
 StyledConversationButton.defaultProps = defaultThemeProp;
 const EmailConversation = forwardRef((props, ref) => {

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

@@ -1 +1 @@
-{"version":3,"file":"EmailConversation.js","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport {\n  ExpandCollapse,\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  useAfterInitialEffect,\n  DateTimeDisplay,\n  readableHue,\n  useBreakpoint,\n  useConfiguration,\n  StyledIcon,\n  tryCatch,\n  useDirection,\n  Status\n} from '@pega/cosmos-react-core';\n\nimport Email from './Email';\nimport { EmailConversationProps } from './Email.types';\n\nregisterIcon(caretDownIcon);\n\nconst EmailParticipantTextCss = css`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledEmailParticipantsText = styled(Text)`\n  ${EmailParticipantTextCss}\n`;\n\nStyledEmailParticipantsText.defaultProps = defaultThemeProp;\n\nexport const StyledCompactTimeStampDisplay = styled(Text)`\n  ${EmailParticipantTextCss}\n  margin-top: calc(${props => props.theme.base.spacing} / 2);\n`;\nStyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledConversationHeader = styled.header<{ collapsed: boolean }>(\n  ({ theme, collapsed }) => {\n    return css`\n      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${theme.base.palette['border-line']};\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    `;\n  }\n);\nStyledConversationHeader.defaultProps = defaultThemeProp;\n\nexport const StyledUnReadCount = styled.div(({ theme: { base } }) => {\n  const readableBackground = readableHue(\n    base.palette['brand-primary'],\n    base.palette['primary-background']\n  );\n  const readableTextColor = readableColor(readableBackground);\n\n  return css`\n    align-self: flex-start;\n    background-color: ${readableBackground};\n    color: ${readableTextColor};\n    padding: 0 ${base.spacing};\n    font-weight: ${base['font-weight']['semi-bold']};\n    width: fit-content;\n  `;\n});\n\nStyledUnReadCount.defaultProps = defaultThemeProp;\n\nexport const StyledEmailConversation = styled.li<{\n  singleConversation?: boolean;\n  showHeader?: boolean;\n}>(({ theme: { base }, singleConversation, showHeader }) => {\n  return css`\n    margin-bottom: ${base.spacing};\n    border-radius: ${singleConversation && showHeader\n      ? `0 0 ${base['border-radius']} ${base['border-radius']}`\n      : base['border-radius']};\n    overflow: hidden;\n    background-color: ${base.palette['primary-background']};\n    list-style-type: none;\n  `;\n});\nStyledEmailConversation.defaultProps = defaultThemeProp;\n\nexport const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base } }) => {\n  const readableBackground = readableHue(\n    base.palette['brand-primary'],\n    base.palette['primary-background']\n  );\n  return css`\n    padding: calc(2 * ${base.spacing}) 0;\n    position: relative;\n    :not(:last-child) {\n      border-bottom: 0.0625rem solid ${base.palette['border-line']};\n    }\n    ${unRead &&\n    css`\n      &::before {\n        content: '';\n        background-color: ${readableBackground};\n        position: absolute;\n        inset: 0;\n        height: calc(100% + 0.0625rem);\n        top: -0.0625rem;\n        width: 0.125rem;\n      }\n    `}\n  `;\n});\nStyledEmailInConversation.defaultProps = defaultThemeProp;\n\nconst StyledUnreadIndicator = styled.span<{ isVisible: boolean }>(({ theme, isVisible }) => {\n  const readableBackground = readableHue(\n    theme.base.palette['brand-primary'],\n    theme.base.palette['primary-background']\n  );\n\n  const diameter = '0.375rem';\n\n  return css`\n    width: ${isVisible ? diameter : 0};\n    margin: 0 ${isVisible ? 0 : '0.188rem'};\n    height: ${diameter};\n    display: inline-block;\n    border-radius: 50%;\n    background: ${readableBackground};\n    position: relative;\n    top: 0.375rem;\n    align-self: flex-start;\n  `;\n});\nStyledUnreadIndicator.defaultProps = defaultThemeProp;\n\nconst StyledConversationButton = styled.button(({ theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette['brand-primary'])\n  );\n  return css`\n    border-width: 0;\n    width: 100%;\n    padding: ${theme.base.spacing};\n    background: ${theme.base.palette['primary-background']};\n    position: sticky;\n    top: 0;\n    z-index: 1;\n\n    &[aria-expanded='true'] {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    &:focus {\n      background: ${theme.base.palette['secondary-background']};\n      outline: none;\n    }\n\n    &:hover {\n      background: ${hoverColor};\n      outline: none;\n    }\n\n    & > ${StyledIcon} {\n      align-self: flex-start;\n      color: ${theme.base.palette['foreground-color']};\n    }\n  `;\n});\n\nStyledConversationButton.defaultProps = defaultThemeProp;\n\nconst EmailConversation: FunctionComponent<EmailConversationProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailConversationProps>, ref: EmailConversationProps['ref']) => {\n    const {\n      id,\n      emails,\n      from,\n      to,\n      unReadEmailCount,\n      timeStamp,\n      isForwarded = false,\n      isCollapsed = false,\n      onCollapse,\n      onExpand,\n      undelivered,\n      drafts,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const [collapsedState, setCollapsedState] = useState(isCollapsed);\n    useAfterInitialEffect(() => {\n      setCollapsedState(isCollapsed);\n    }, [isCollapsed]);\n    const onExpandCollapse = () => {\n      setCollapsedState(!collapsedState);\n    };\n\n    const headerRef = useRef<HTMLDivElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm', {\n      breakpointRef: headerRef,\n      themeProp: 'content-width'\n    });\n    const { locale } = useConfiguration();\n    const { rtl } = useDirection();\n\n    const caretDirection = rtl ? 'caret-left' : 'caret-right';\n    const generateRecipientList = useMemo(() => {\n      const recipientElements = to.slice(0, 2).map((recipient, i) => {\n        return `${recipient.shortName}${i < to.length - 1 ? ';' : ''} `;\n      });\n      if (to.length > 2) {\n        return [...recipientElements, `+${to.length - 2} more`];\n      }\n      return recipientElements;\n    }, [to]);\n\n    return (\n      <StyledEmailConversation {...restProps} id={id} ref={ref}>\n        <Flex\n          as={StyledConversationButton}\n          id={`conversation-heading${id}`}\n          aria-controls={id}\n          aria-expanded={!collapsedState}\n          container={{ gap: 1, alignItems: 'center', pad: 1 }}\n          onClick={onExpandCollapse}\n          ref={headerRef}\n        >\n          <Icon name={collapsedState ? caretDirection : 'caret-down'} />\n          <StyledUnreadIndicator isVisible={!!unReadEmailCount} />\n          <Flex\n            container={{\n              wrap: 'nowrap',\n              alignItems: 'start',\n              direction: 'column'\n            }}\n            item={{\n              grow: 1,\n              shrink: 1\n            }}\n          >\n            <Flex container={{ gap: 1 }}>\n              <Text variant='primary' as={StyledEmailParticipantsText}>\n                {`${isForwarded ? 'FW' : t('from')}: ${from.fullName}`}\n              </Text>\n\n              {(undelivered || drafts) && (\n                <>\n                  {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n                  {/* Passing Infinity for count so the correct plural translation is chosen\n                  along with an empty tokens array so that a count is not shown. */}\n                  {drafts && (\n                    <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>\n                  )}\n                </>\n              )}\n            </Flex>\n            <Text variant='secondary' as={StyledEmailParticipantsText}>\n              {`${t('to')}: `}\n              {generateRecipientList}\n            </Text>\n            {!isSmallOrAbove && (\n              <Text variant='secondary' as={StyledCompactTimeStampDisplay}>\n                {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                  new Date(timeStamp)\n                )}, `}\n                <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n              </Text>\n            )}\n          </Flex>\n          <Flex\n            container={{\n              gap: 1,\n              alignItems: 'center'\n            }}\n            item={{\n              shrink: 0\n            }}\n          >\n            {isSmallOrAbove && (\n              <Text variant='secondary' as={StyledEmailParticipantsText}>\n                {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                  new Date(timeStamp)\n                )}, `}\n                <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n              </Text>\n            )}\n          </Flex>\n        </Flex>\n\n        <ExpandCollapse\n          as={Flex}\n          container={{ direction: 'column' }}\n          collapsed={collapsedState}\n          onBeforeCollapse={onCollapse}\n          onBeforeExpand={onExpand}\n          role='region'\n          aria-labelledby={`conversation-heading${id}`}\n          id={`conversation-content${id}`}\n        >\n          {!!unReadEmailCount && (\n            <Text as={StyledUnReadCount} id={`unread-emailCount-${id}`} variant='secondary'>\n              {t('new_emails_count', [unReadEmailCount], { count: unReadEmailCount })}\n            </Text>\n          )}\n          {emails &&\n            emails.map(email => {\n              return <StyledEmailInConversation key={email.id} {...email} />;\n            })}\n        </ExpandCollapse>\n      </StyledEmailConversation>\n    );\n  }\n);\n\nexport default EmailConversation;\n"]}
+{"version":3,"file":"EmailConversation.js","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport {\n  ExpandCollapse,\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  useAfterInitialEffect,\n  DateTimeDisplay,\n  readableHue,\n  useBreakpoint,\n  useConfiguration,\n  StyledIcon,\n  tryCatch,\n  useDirection,\n  Status\n} from '@pega/cosmos-react-core';\n\nimport Email from './Email';\nimport { EmailConversationProps } from './Email.types';\n\nregisterIcon(caretDownIcon);\n\nconst EmailParticipantTextCss = css`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledEmailParticipantsText = styled(Text)`\n  ${EmailParticipantTextCss}\n`;\n\nStyledEmailParticipantsText.defaultProps = defaultThemeProp;\n\nexport const StyledCompactTimeStampDisplay = styled(Text)`\n  ${EmailParticipantTextCss}\n  margin-top: calc(${props => props.theme.base.spacing} / 2);\n`;\nStyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledConversationHeader = styled.header<{ collapsed: boolean }>(\n  ({\n    theme: {\n      base: { palette }\n    },\n    collapsed\n  }) => {\n    return css`\n      border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${palette['border-line']};\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    `;\n  }\n);\nStyledConversationHeader.defaultProps = defaultThemeProp;\n\nexport const StyledUnReadCount = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette,\n        'font-weight': { 'semi-bold': fontWeightSemiBold }\n      }\n    }\n  }) => {\n    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\n    const readableTextColor = readableColor(readableBackground);\n\n    return css`\n      align-self: flex-start;\n      background-color: ${readableBackground};\n      color: ${readableTextColor};\n      padding: 0 ${spacing};\n      font-weight: ${fontWeightSemiBold};\n      width: fit-content;\n    `;\n  }\n);\n\nStyledUnReadCount.defaultProps = defaultThemeProp;\n\nexport const StyledEmailConversation = styled.li<{\n  singleConversation?: boolean;\n  showHeader?: boolean;\n}>(\n  ({\n    theme: {\n      base: { spacing, palette, 'border-radius': baseBorderRadius }\n    },\n    singleConversation,\n    showHeader\n  }) => {\n    return css`\n      margin-bottom: ${spacing};\n      border-radius: ${singleConversation && showHeader\n        ? `0 0 ${baseBorderRadius} ${baseBorderRadius}`\n        : baseBorderRadius};\n      overflow: hidden;\n      background-color: ${palette['primary-background']};\n      list-style-type: none;\n    `;\n  }\n);\nStyledEmailConversation.defaultProps = defaultThemeProp;\n\nexport const StyledEmailInConversation = styled(Email)(\n  ({\n    unRead,\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\n    return css`\n      padding: calc(2 * ${spacing}) 0;\n      position: relative;\n      :not(:last-child) {\n        border-bottom: 0.0625rem solid ${palette['border-line']};\n      }\n      ${unRead &&\n      css`\n        &::before {\n          content: '';\n          background-color: ${readableBackground};\n          position: absolute;\n          inset: 0;\n          height: calc(100% + 0.0625rem);\n          top: -0.0625rem;\n          width: 0.125rem;\n        }\n      `}\n    `;\n  }\n);\nStyledEmailInConversation.defaultProps = defaultThemeProp;\n\nconst StyledUnreadIndicator = styled.span<{ isVisible: boolean }>(\n  ({\n    theme: {\n      base: { palette }\n    },\n    isVisible\n  }) => {\n    const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\n\n    const diameter = '0.375rem';\n\n    return css`\n      width: ${isVisible ? diameter : 0};\n      margin: 0 ${isVisible ? 0 : '0.188rem'};\n      height: ${diameter};\n      display: inline-block;\n      border-radius: 50%;\n      background: ${readableBackground};\n      position: relative;\n      top: 0.375rem;\n      align-self: flex-start;\n    `;\n  }\n);\nStyledUnreadIndicator.defaultProps = defaultThemeProp;\n\nconst StyledConversationButton = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    const hoverColor = tryCatch(() =>\n      mix(0.85, palette['primary-background'], palette['brand-primary'])\n    );\n    return css`\n      border-width: 0;\n      width: 100%;\n      padding: ${spacing};\n      background: ${palette['primary-background']};\n      color: ${palette['foreground-color']};\n      position: sticky;\n      top: 0;\n      z-index: 1;\n\n      &[aria-expanded='true'] {\n        border-bottom: 0.0625rem solid ${palette['border-line']};\n      }\n\n      &:focus {\n        background: ${palette['secondary-background']};\n        outline: none;\n      }\n\n      &:hover {\n        background: ${hoverColor};\n        outline: none;\n      }\n\n      & > ${StyledIcon} {\n        align-self: flex-start;\n      }\n    `;\n  }\n);\n\nStyledConversationButton.defaultProps = defaultThemeProp;\n\nconst EmailConversation: FunctionComponent<EmailConversationProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailConversationProps>, ref: EmailConversationProps['ref']) => {\n    const {\n      id,\n      emails,\n      from,\n      to,\n      unReadEmailCount,\n      timeStamp,\n      isForwarded = false,\n      isCollapsed = false,\n      onCollapse,\n      onExpand,\n      undelivered,\n      drafts,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const [collapsedState, setCollapsedState] = useState(isCollapsed);\n    useAfterInitialEffect(() => {\n      setCollapsedState(isCollapsed);\n    }, [isCollapsed]);\n    const onExpandCollapse = () => {\n      setCollapsedState(!collapsedState);\n    };\n\n    const headerRef = useRef<HTMLDivElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm', {\n      breakpointRef: headerRef,\n      themeProp: 'content-width'\n    });\n    const { locale } = useConfiguration();\n    const { rtl } = useDirection();\n\n    const caretDirection = rtl ? 'caret-left' : 'caret-right';\n    const generateRecipientList = useMemo(() => {\n      const recipientElements = to.slice(0, 2).map((recipient, i) => {\n        return `${recipient.shortName}${i < to.length - 1 ? ';' : ''} `;\n      });\n      if (to.length > 2) {\n        return [...recipientElements, `+${to.length - 2} more`];\n      }\n      return recipientElements;\n    }, [to]);\n\n    return (\n      <StyledEmailConversation {...restProps} id={id} ref={ref}>\n        <Flex\n          as={StyledConversationButton}\n          id={`conversation-heading${id}`}\n          aria-controls={id}\n          aria-expanded={!collapsedState}\n          container={{ gap: 1, alignItems: 'center', pad: 1 }}\n          onClick={onExpandCollapse}\n          ref={headerRef}\n        >\n          <Icon name={collapsedState ? caretDirection : 'caret-down'} />\n          <StyledUnreadIndicator isVisible={!!unReadEmailCount} />\n          <Flex\n            container={{\n              wrap: 'nowrap',\n              alignItems: 'start',\n              direction: 'column'\n            }}\n            item={{\n              grow: 1,\n              shrink: 1\n            }}\n          >\n            <Flex container={{ gap: 1 }}>\n              <Text variant='primary' as={StyledEmailParticipantsText}>\n                {`${isForwarded ? 'FW' : t('from')}: ${from.fullName}`}\n              </Text>\n\n              {(undelivered || drafts) && (\n                <>\n                  {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n                  {/* Passing Infinity for count so the correct plural translation is chosen\n                  along with an empty tokens array so that a count is not shown. */}\n                  {drafts && (\n                    <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>\n                  )}\n                </>\n              )}\n            </Flex>\n            <Text variant='secondary' as={StyledEmailParticipantsText}>\n              {`${t('to')}: `}\n              {generateRecipientList}\n            </Text>\n            {!isSmallOrAbove && (\n              <Text variant='secondary' as={StyledCompactTimeStampDisplay}>\n                {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                  new Date(timeStamp)\n                )}, `}\n                <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n              </Text>\n            )}\n          </Flex>\n          <Flex\n            container={{\n              gap: 1,\n              alignItems: 'center'\n            }}\n            item={{\n              shrink: 0\n            }}\n          >\n            {isSmallOrAbove && (\n              <Text variant='secondary' as={StyledEmailParticipantsText}>\n                {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n                  new Date(timeStamp)\n                )}, `}\n                <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n              </Text>\n            )}\n          </Flex>\n        </Flex>\n\n        <ExpandCollapse\n          as={Flex}\n          container={{ direction: 'column' }}\n          collapsed={collapsedState}\n          onBeforeCollapse={onCollapse}\n          onBeforeExpand={onExpand}\n          role='region'\n          aria-labelledby={`conversation-heading${id}`}\n          id={`conversation-content${id}`}\n        >\n          {!!unReadEmailCount && (\n            <Text as={StyledUnReadCount} id={`unread-emailCount-${id}`} variant='secondary'>\n              {t('new_emails_count', [unReadEmailCount], { count: unReadEmailCount })}\n            </Text>\n          )}\n          {emails &&\n            emails.map(email => {\n              return <StyledEmailInConversation key={email.id} {...email} />;\n            })}\n        </ExpandCollapse>\n      </StyledEmailConversation>\n    );\n  }\n);\n\nexport default EmailConversation;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-social",
-  "version": "4.0.0-dev.19.3",
+  "version": "4.0.0-dev.19.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -23,9 +23,9 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.19.3",
-    "@pega/cosmos-react-rte": "4.0.0-dev.19.3",
-    "@pega/cosmos-react-work": "4.0.0-dev.19.3",
+    "@pega/cosmos-react-core": "4.0.0-dev.19.5",
+    "@pega/cosmos-react-rte": "4.0.0-dev.19.5",
+    "@pega/cosmos-react-work": "4.0.0-dev.19.5",
     "@types/parse5": "^6.0.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",