@pega/cosmos-react-social 4.0.0-dev.16.1 → 4.0.0-dev.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Chat/Chat.types.d.ts +1 -1
- package/lib/components/Chat/Chat.types.d.ts.map +1 -1
- package/lib/components/Chat/Chat.types.js.map +1 -1
- package/lib/components/Chat/Message.d.ts.map +1 -1
- package/lib/components/Chat/Message.js +30 -13
- package/lib/components/Chat/Message.js.map +1 -1
- package/lib/components/Email/Email.styles.d.ts +12 -4
- package/lib/components/Email/Email.styles.d.ts.map +1 -1
- package/package.json +10 -10
|
@@ -60,7 +60,7 @@ export interface MessageProps {
|
|
|
60
60
|
/** Avatar information, can be image and name */
|
|
61
61
|
avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;
|
|
62
62
|
/** Message status */
|
|
63
|
-
status?: 'delivered' | 'opened' | 'undeliverable';
|
|
63
|
+
status?: 'delivered' | 'opened' | 'undeliverable' | 'sent';
|
|
64
64
|
/** Indicates if this message is being currently typed */
|
|
65
65
|
typing?: boolean;
|
|
66
66
|
/** Message header */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EACL,SAAS,EACT,MAAM,EACN,cAAc,EACd,UAAU,EACV,SAAS,EACT,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6KAA6K;IAC7K,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,aAAa,GAAG,wBAAwB,CAAC;AAEtF,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY;CAC3D,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IAC7D,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC7C,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,mCAAmC;IACnC,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAClC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IACpD,qBAAqB;IACrB,MAAM,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.types.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AA4JA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAA8B,EACG,EAAE;IACnC,OAAO,OAAO,CAAC,IAAI,KAAK,SAAS,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACS,EAAE;IACzC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACQ,EAAE;IACxC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC","sourcesContent":["import { ReactNode, Ref } from 'react';\nimport { DefaultTheme } from 'styled-components';\n\nimport {\n BaseProps,\n Action,\n NoChildrenProp,\n OmitStrict,\n LinkProps,\n AvatarProps\n} from '@pega/cosmos-react-core';\n\nexport interface AttachmentItemProps extends BaseProps {\n /** Unique Id for this attachment */\n id: string;\n /** Name of the attachment. */\n name: string;\n /**\n * A Cosmos icon name identifier to use for a attachment. Will serve as a fallback to a broken thumbnail.\n * @default 'document-doc'\n */\n icon?: string;\n /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n thumbnail?: string;\n /** Additional information about the attachment. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n meta?: string;\n /** When passed, previews the attachment on click */\n onPreview?: (id: string) => void;\n /** Actions list for the attachment */\n actions?: Action[];\n /** When passed, this will render a single icon button or within a MenuButton if onDelete is defined. */\n onDelete?: (id: string) => void;\n}\n\nexport type UserAvailability = 'available' | 'unavailable' | 'temporarilyUnavailable';\n\nexport interface ChatSettingsPanelProps extends NoChildrenProp {\n status?: UserAvailability;\n label: string;\n onClick: () => void;\n}\n\nexport type ColorTheme = [\n keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>,\n 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark'\n];\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 /** Message to be displayed */\n message?: string;\n /** Attachment list */\n attachments?: AttachmentItemProps[];\n /** Message page push links list */\n mediaPageLinks?: MediaPageLinks[];\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 /** Message status */\n status?: 'delivered' | 'opened' | 'undeliverable';\n /** Indicates if this message is being currently typed */\n typing?: boolean;\n /** Message header */\n messageHeader?: MessageHeaderProps;\n /** Sender type */\n senderType: 'customer' | 'agent' | 'bot';\n /** Sender ID, will be helpful in deciding the colour */\n senderId: string;\n /** Number used to determine the color of agent's message */\n agentVariant?: number;\n /** ref to the message wrapper */\n ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TypeIndicatorProps\n extends Pick<MessageProps, 'ref' | 'message' | 'senderId' | 'senderType' | 'agentVariant'> {\n /** Avatar information, can be image and name */\n avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\n\nexport interface SystemMessageProps extends Pick<MessageProps, 'ref' | 'timestamp'> {\n /** System message to be displayed */\n message: string;\n /** variant of this system message\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary';\n}\n\nexport interface ChatBodyHandleValue {\n isScrolledToLatest: () => boolean;\n scrollToLatestMessage: () => void;\n scrollToNewMessage: () => void;\n}\n\nexport interface ChatBodyProps {\n /** Transcripts */\n transcripts: {\n /** Unique id of a chat session */\n id: string;\n /** Messages in a chat session */\n messages: ChatBodyListItemProps[];\n }[];\n /** Live chat messages */\n liveChat: ChatBodyListItemProps[];\n /** Total unread messages */\n unreadMessageCount?: number;\n /** on scroll to button */\n onScrollToButtonClick?: () => void;\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 /** Imperative handle */\n handle?: Ref<ChatBodyHandleValue>;\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n}\n\ntype MessageListItemProps = OmitStrict<MessageProps, 'agentVariant' | 'typing'> & {\n type: 'message';\n id: string;\n};\n\ntype SystemMessageListItemProps = SystemMessageProps & { type: 'system'; id: string };\n\ntype TypeIndicatorListItemPops = OmitStrict<TypeIndicatorProps, 'agentVariant'> & {\n type: 'typing';\n id: string;\n};\n\nexport type ChatBodyListItemProps =\n | MessageListItemProps\n | SystemMessageListItemProps\n | TypeIndicatorListItemPops;\n\nexport const isMessageListItem = (\n message: ChatBodyListItemProps\n): message is MessageListItemProps => {\n return message.type === 'message';\n};\n\nexport const isSystemMessageListItem = (\n message: ChatBodyListItemProps\n): message is SystemMessageListItemProps => {\n return message.type === 'system';\n};\n\nexport const isTypeIndicatorListItem = (\n message: ChatBodyListItemProps\n): message is TypeIndicatorListItemPops => {\n return message.type === 'typing';\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Chat.types.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AA4JA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAA8B,EACG,EAAE;IACnC,OAAO,OAAO,CAAC,IAAI,KAAK,SAAS,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACS,EAAE;IACzC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACQ,EAAE;IACxC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC","sourcesContent":["import { ReactNode, Ref } from 'react';\nimport { DefaultTheme } from 'styled-components';\n\nimport {\n BaseProps,\n Action,\n NoChildrenProp,\n OmitStrict,\n LinkProps,\n AvatarProps\n} from '@pega/cosmos-react-core';\n\nexport interface AttachmentItemProps extends BaseProps {\n /** Unique Id for this attachment */\n id: string;\n /** Name of the attachment. */\n name: string;\n /**\n * A Cosmos icon name identifier to use for a attachment. Will serve as a fallback to a broken thumbnail.\n * @default 'document-doc'\n */\n icon?: string;\n /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n thumbnail?: string;\n /** Additional information about the attachment. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n meta?: string;\n /** When passed, previews the attachment on click */\n onPreview?: (id: string) => void;\n /** Actions list for the attachment */\n actions?: Action[];\n /** When passed, this will render a single icon button or within a MenuButton if onDelete is defined. */\n onDelete?: (id: string) => void;\n}\n\nexport type UserAvailability = 'available' | 'unavailable' | 'temporarilyUnavailable';\n\nexport interface ChatSettingsPanelProps extends NoChildrenProp {\n status?: UserAvailability;\n label: string;\n onClick: () => void;\n}\n\nexport type ColorTheme = [\n keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>,\n 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark'\n];\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 /** Message to be displayed */\n message?: string;\n /** Attachment list */\n attachments?: AttachmentItemProps[];\n /** Message page push links list */\n mediaPageLinks?: MediaPageLinks[];\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 /** Message status */\n status?: 'delivered' | 'opened' | 'undeliverable' | 'sent';\n /** Indicates if this message is being currently typed */\n typing?: boolean;\n /** Message header */\n messageHeader?: MessageHeaderProps;\n /** Sender type */\n senderType: 'customer' | 'agent' | 'bot';\n /** Sender ID, will be helpful in deciding the colour */\n senderId: string;\n /** Number used to determine the color of agent's message */\n agentVariant?: number;\n /** ref to the message wrapper */\n ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TypeIndicatorProps\n extends Pick<MessageProps, 'ref' | 'message' | 'senderId' | 'senderType' | 'agentVariant'> {\n /** Avatar information, can be image and name */\n avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\n\nexport interface SystemMessageProps extends Pick<MessageProps, 'ref' | 'timestamp'> {\n /** System message to be displayed */\n message: string;\n /** variant of this system message\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary';\n}\n\nexport interface ChatBodyHandleValue {\n isScrolledToLatest: () => boolean;\n scrollToLatestMessage: () => void;\n scrollToNewMessage: () => void;\n}\n\nexport interface ChatBodyProps {\n /** Transcripts */\n transcripts: {\n /** Unique id of a chat session */\n id: string;\n /** Messages in a chat session */\n messages: ChatBodyListItemProps[];\n }[];\n /** Live chat messages */\n liveChat: ChatBodyListItemProps[];\n /** Total unread messages */\n unreadMessageCount?: number;\n /** on scroll to button */\n onScrollToButtonClick?: () => void;\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 /** Imperative handle */\n handle?: Ref<ChatBodyHandleValue>;\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n}\n\ntype MessageListItemProps = OmitStrict<MessageProps, 'agentVariant' | 'typing'> & {\n type: 'message';\n id: string;\n};\n\ntype SystemMessageListItemProps = SystemMessageProps & { type: 'system'; id: string };\n\ntype TypeIndicatorListItemPops = OmitStrict<TypeIndicatorProps, 'agentVariant'> & {\n type: 'typing';\n id: string;\n};\n\nexport type ChatBodyListItemProps =\n | MessageListItemProps\n | SystemMessageListItemProps\n | TypeIndicatorListItemPops;\n\nexport const isMessageListItem = (\n message: ChatBodyListItemProps\n): message is MessageListItemProps => {\n return message.type === 'message';\n};\n\nexport const isSystemMessageListItem = (\n message: ChatBodyListItemProps\n): message is SystemMessageListItemProps => {\n return message.type === 'system';\n};\n\nexport const isTypeIndicatorListItem = (\n message: ChatBodyListItemProps\n): message is TypeIndicatorListItemPops => {\n return message.type === 'typing';\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAUL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AA4F5C,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAwN3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,11 +1,39 @@
|
|
|
1
|
+
import { createElement as _createElement } from "react";
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useMemo } from 'react';
|
|
3
|
+
import { forwardRef, useEffect, useMemo, useRef } from 'react';
|
|
3
4
|
import { Avatar, Flex, Icon, registerIcon, SummaryItem, Image, EmojiDisplay, useI18n, Actions, Tooltip, useTheme, useElement } from '@pega/cosmos-react-core';
|
|
4
5
|
import * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';
|
|
5
6
|
import * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';
|
|
6
7
|
import * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';
|
|
7
8
|
import { StyledMessageContainer, StyledMessageMain, StyledMessageBubble, StyledMessageBubbleContent, StyledMediaList, StyledMediaListItem, StyledMediaThumbNail, StyledSummaryItem, StyledMediaLink, StyledMetaInfoContainer, StyledMetaInfo, StyledBlinkingDot, StyledMediaButton, StyledMessageHeader, StyledMessageHeaderContent, StyledMessageHeaderMeta, StyledUndeliveredIcon, StyledStatusInfo, StyledHeadset, getMessageColors, StyledFlagIcon, StyledHeadsetIconBackground } from './Message.styles';
|
|
8
9
|
registerIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);
|
|
10
|
+
const Attachment = (props) => {
|
|
11
|
+
const { id, icon, name, meta, actions = [], onPreview, thumbnail } = props;
|
|
12
|
+
const actionRef = useRef(null);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
const listener = (e) => {
|
|
15
|
+
if (e.target?.getAttribute('aria-expanded') === 'true' &&
|
|
16
|
+
['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
|
|
17
|
+
e.stopPropagation();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
actionRef.current?.addEventListener('keydown', listener);
|
|
21
|
+
return () => {
|
|
22
|
+
actionRef.current?.removeEventListener('keydown', listener);
|
|
23
|
+
};
|
|
24
|
+
}, [actions]);
|
|
25
|
+
return (_jsxs(Flex, { as: StyledMediaListItem, container: {
|
|
26
|
+
direction: 'column'
|
|
27
|
+
}, children: [thumbnail && (_jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, onClick: (e) => {
|
|
28
|
+
e.preventDefault();
|
|
29
|
+
e.stopPropagation();
|
|
30
|
+
onPreview?.(id);
|
|
31
|
+
}, alt: name })), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaButton, { onClick: (e) => {
|
|
32
|
+
e.preventDefault();
|
|
33
|
+
e.stopPropagation();
|
|
34
|
+
onPreview?.(id);
|
|
35
|
+
}, children: name }), secondary: meta, visual: _jsx(Icon, { name: icon || 'document-doc' }), actions: _jsx(Actions, { ref: actionRef, items: actions, iconOnly: true }) })] }, id));
|
|
36
|
+
};
|
|
9
37
|
const Message = forwardRef((props, ref) => {
|
|
10
38
|
const { message, direction, avatarInfo, timestamp, attachments = [], mediaPageLinks = [], status, typing, messageHeader, senderType, senderId, agentVariant, ...restProps } = props;
|
|
11
39
|
const t = useI18n();
|
|
@@ -53,18 +81,7 @@ const Message = forwardRef((props, ref) => {
|
|
|
53
81
|
alignItems: 'center',
|
|
54
82
|
gap: 0.5
|
|
55
83
|
}, children: [_jsxs(StyledMessageBubble, { children: [messageHeader && (_jsxs(Flex, { container: { gap: 0.5, justify: 'between' }, as: StyledMessageHeader, children: [_jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(StyledFlagIcon, { name: 'flag-wave-solid' }), _jsx(StyledMessageHeaderContent, { children: messageHeader.content })] }), _jsx(StyledMessageHeaderMeta, { children: messageHeader.meta })] })), message && (_jsx(StyledMessageBubbleContent, { children: _jsx(EmojiDisplay, { content: message, size: 20 }) })), (attachments.length > 0 || mediaPageLinks.length > 0) && (_jsxs(StyledMediaList, { children: [attachments.map(attachment => {
|
|
56
|
-
|
|
57
|
-
return (_jsxs(Flex, { as: StyledMediaListItem, container: {
|
|
58
|
-
direction: 'column'
|
|
59
|
-
}, children: [thumbnail && (_jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, onClick: (e) => {
|
|
60
|
-
e.preventDefault();
|
|
61
|
-
e.stopPropagation();
|
|
62
|
-
onPreview?.(id);
|
|
63
|
-
}, alt: name })), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaButton, { onClick: (e) => {
|
|
64
|
-
e.preventDefault();
|
|
65
|
-
e.stopPropagation();
|
|
66
|
-
onPreview?.(id);
|
|
67
|
-
}, children: name }), secondary: meta, visual: _jsx(Icon, { name: icon || 'document-doc' }), actions: _jsx(Actions, { items: actions, iconOnly: true }) })] }, id));
|
|
84
|
+
return _createElement(Attachment, { ...attachment, key: attachment.id });
|
|
68
85
|
}), mediaPageLinks.map(pagePushLink => {
|
|
69
86
|
const { id, href, title, thumbnail } = pagePushLink;
|
|
70
87
|
return (_jsxs(Flex, { as: StyledMediaListItem, container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, MouseEvent, useMemo } from 'react';\n\nimport {\n Avatar,\n Flex,\n Icon,\n registerIcon,\n SummaryItem,\n Image,\n FlexContainerProps,\n EmojiDisplay,\n useI18n,\n ForwardProps,\n Actions,\n Tooltip,\n useTheme,\n useElement\n} from '@pega/cosmos-react-core';\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';\nimport * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';\n\nimport { MessageProps } from './Chat.types';\nimport {\n StyledMessageContainer,\n StyledMessageMain,\n StyledMessageBubble,\n StyledMessageBubbleContent,\n StyledMediaList,\n StyledMediaListItem,\n StyledMediaThumbNail,\n StyledSummaryItem,\n StyledMediaLink,\n StyledMetaInfoContainer,\n StyledMetaInfo,\n StyledBlinkingDot,\n StyledMediaButton,\n StyledMessageHeader,\n StyledMessageHeaderContent,\n StyledMessageHeaderMeta,\n StyledUndeliveredIcon,\n StyledStatusInfo,\n StyledHeadset,\n getMessageColors,\n StyledFlagIcon,\n StyledHeadsetIconBackground\n} from './Message.styles';\n\nregisterIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MessageProps>, ref: MessageProps['ref']) => {\n const {\n message,\n direction,\n avatarInfo,\n timestamp,\n attachments = [],\n mediaPageLinks = [],\n status,\n typing,\n messageHeader,\n senderType,\n senderId,\n agentVariant,\n ...restProps\n } = props;\n\n const t = useI18n();\n const theme = useTheme();\n const [avatarRef, setAvatarRef] = useElement();\n const { content: messageBubbleBackgroundColor } = useMemo(\n () => getMessageColors(theme, direction, senderType, agentVariant),\n [theme, direction, senderType, agentVariant]\n );\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 const renderAvatar = useMemo(() => {\n if (direction !== 'in' || (senderType !== 'bot' && !avatarInfo)) {\n return null;\n }\n\n if (senderType === 'agent') {\n return (\n <>\n <StyledHeadset>\n <Avatar\n name={avatarInfo!.name}\n size='m'\n shape='circle'\n imageSrc={avatarInfo!.imageSrc}\n ref={setAvatarRef}\n backgroundColor={messageBubbleBackgroundColor}\n />\n <StyledHeadsetIconBackground>\n <Icon name='headset' />\n </StyledHeadsetIconBackground>\n </StyledHeadset>\n <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n {avatarInfo!.name}\n </Tooltip>\n </>\n );\n }\n\n return (\n <>\n <Avatar\n name={avatarInfo ? avatarInfo.name : t('bot')}\n size='m'\n shape='circle'\n icon={!avatarInfo?.imageSrc && senderType === 'bot' ? 'robot-solid' : undefined}\n imageSrc={avatarInfo?.imageSrc}\n ref={setAvatarRef}\n backgroundColor={messageBubbleBackgroundColor}\n />\n <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n {avatarInfo ? avatarInfo.name : t('bot')}\n </Tooltip>\n </>\n );\n }, [avatarInfo, senderType, direction, avatarRef]);\n\n let ariaLabel: string | undefined;\n const sender = avatarInfo ? avatarInfo.name : senderType;\n\n ariaLabel = t('sender_replied_message', [sender, message || '']);\n if (attachments.length > 0) ariaLabel = t('chat_attachments', [ariaLabel, attachments.length]);\n if (mediaPageLinks.length > 0) ariaLabel = t('chat_links', [ariaLabel, mediaPageLinks.length]);\n if (timestamp) ariaLabel = t('chat_message_at_timestamp', [ariaLabel, timestamp]);\n if (status && direction === 'out') ariaLabel += ` ${t('chat_message_status', [status])}`;\n\n return (\n <Flex\n as={StyledMessageContainer}\n ref={ref}\n container={{\n gap: 1.5,\n direction: direction === 'in' ? 'row' : 'row-reverse'\n }}\n item={{\n shrink: 0\n }}\n hasMessage={!!message}\n direction={direction}\n senderType={senderType}\n typing={typing}\n messageHeader={messageHeader}\n status={status}\n agentVariant={agentVariant}\n aria-label={ariaLabel}\n {...restProps}\n >\n {renderAvatar}\n <Flex\n container={{\n direction: 'column',\n alignItems: direction === 'in' ? 'start' : 'end',\n justify: 'center'\n }}\n as={StyledMessageMain}\n >\n <Flex\n container={{\n direction: direction === 'in' ? 'row' : 'row-reverse',\n alignItems: 'center',\n gap: 0.5\n }}\n >\n <StyledMessageBubble>\n {messageHeader && (\n <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n <Flex container={{ gap: 0.5 }}>\n <StyledFlagIcon name='flag-wave-solid' />\n <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n </Flex>\n\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 || mediaPageLinks.length > 0) && (\n <StyledMediaList>\n {attachments.map(attachment => {\n const { id, icon, name, meta, actions = [], 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={<Actions items={actions} iconOnly />}\n />\n </Flex>\n );\n })}\n {mediaPageLinks.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 {status === 'undeliverable' && message && direction === 'out' && (\n <StyledUndeliveredIcon name='warn-solid' />\n )}\n </Flex>\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 && direction === 'out' && <StyledStatusInfo>{t(status)}</StyledStatusInfo>}\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"]}
|
|
1
|
+
{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n PropsWithoutRef,\n MouseEvent,\n useEffect,\n useMemo,\n useRef\n} from 'react';\n\nimport {\n Avatar,\n Flex,\n Icon,\n registerIcon,\n SummaryItem,\n Image,\n FlexContainerProps,\n EmojiDisplay,\n useI18n,\n ForwardProps,\n Actions,\n Tooltip,\n useTheme,\n useElement\n} from '@pega/cosmos-react-core';\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';\nimport * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';\n\nimport { MessageProps } from './Chat.types';\nimport {\n StyledMessageContainer,\n StyledMessageMain,\n StyledMessageBubble,\n StyledMessageBubbleContent,\n StyledMediaList,\n StyledMediaListItem,\n StyledMediaThumbNail,\n StyledSummaryItem,\n StyledMediaLink,\n StyledMetaInfoContainer,\n StyledMetaInfo,\n StyledBlinkingDot,\n StyledMediaButton,\n StyledMessageHeader,\n StyledMessageHeaderContent,\n StyledMessageHeaderMeta,\n StyledUndeliveredIcon,\n StyledStatusInfo,\n StyledHeadset,\n getMessageColors,\n StyledFlagIcon,\n StyledHeadsetIconBackground\n} from './Message.styles';\nimport type { AttachmentItemProps } from './Chat.types';\n\nregisterIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);\n\nconst Attachment = (props: AttachmentItemProps) => {\n const { id, icon, name, meta, actions = [], onPreview, thumbnail } = props;\n const actionRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n const listener = (e: KeyboardEvent) => {\n if (\n (e.target as HTMLButtonElement)?.getAttribute('aria-expanded') === 'true' &&\n ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(e.key)\n ) {\n e.stopPropagation();\n }\n };\n\n actionRef.current?.addEventListener('keydown', listener);\n\n return () => {\n actionRef.current?.removeEventListener('keydown', listener);\n };\n }, [actions]);\n\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\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={<Actions ref={actionRef} items={actions} iconOnly />}\n />\n </Flex>\n );\n};\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MessageProps>, ref: MessageProps['ref']) => {\n const {\n message,\n direction,\n avatarInfo,\n timestamp,\n attachments = [],\n mediaPageLinks = [],\n status,\n typing,\n messageHeader,\n senderType,\n senderId,\n agentVariant,\n ...restProps\n } = props;\n\n const t = useI18n();\n const theme = useTheme();\n const [avatarRef, setAvatarRef] = useElement();\n const { content: messageBubbleBackgroundColor } = useMemo(\n () => getMessageColors(theme, direction, senderType, agentVariant),\n [theme, direction, senderType, agentVariant]\n );\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 const renderAvatar = useMemo(() => {\n if (direction !== 'in' || (senderType !== 'bot' && !avatarInfo)) {\n return null;\n }\n\n if (senderType === 'agent') {\n return (\n <>\n <StyledHeadset>\n <Avatar\n name={avatarInfo!.name}\n size='m'\n shape='circle'\n imageSrc={avatarInfo!.imageSrc}\n ref={setAvatarRef}\n backgroundColor={messageBubbleBackgroundColor}\n />\n <StyledHeadsetIconBackground>\n <Icon name='headset' />\n </StyledHeadsetIconBackground>\n </StyledHeadset>\n <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n {avatarInfo!.name}\n </Tooltip>\n </>\n );\n }\n\n return (\n <>\n <Avatar\n name={avatarInfo ? avatarInfo.name : t('bot')}\n size='m'\n shape='circle'\n icon={!avatarInfo?.imageSrc && senderType === 'bot' ? 'robot-solid' : undefined}\n imageSrc={avatarInfo?.imageSrc}\n ref={setAvatarRef}\n backgroundColor={messageBubbleBackgroundColor}\n />\n <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n {avatarInfo ? avatarInfo.name : t('bot')}\n </Tooltip>\n </>\n );\n }, [avatarInfo, senderType, direction, avatarRef]);\n\n let ariaLabel: string | undefined;\n const sender = avatarInfo ? avatarInfo.name : senderType;\n\n ariaLabel = t('sender_replied_message', [sender, message || '']);\n if (attachments.length > 0) ariaLabel = t('chat_attachments', [ariaLabel, attachments.length]);\n if (mediaPageLinks.length > 0) ariaLabel = t('chat_links', [ariaLabel, mediaPageLinks.length]);\n if (timestamp) ariaLabel = t('chat_message_at_timestamp', [ariaLabel, timestamp]);\n if (status && direction === 'out') ariaLabel += ` ${t('chat_message_status', [status])}`;\n\n return (\n <Flex\n as={StyledMessageContainer}\n ref={ref}\n container={{\n gap: 1.5,\n direction: direction === 'in' ? 'row' : 'row-reverse'\n }}\n item={{\n shrink: 0\n }}\n hasMessage={!!message}\n direction={direction}\n senderType={senderType}\n typing={typing}\n messageHeader={messageHeader}\n status={status}\n agentVariant={agentVariant}\n aria-label={ariaLabel}\n {...restProps}\n >\n {renderAvatar}\n <Flex\n container={{\n direction: 'column',\n alignItems: direction === 'in' ? 'start' : 'end',\n justify: 'center'\n }}\n as={StyledMessageMain}\n >\n <Flex\n container={{\n direction: direction === 'in' ? 'row' : 'row-reverse',\n alignItems: 'center',\n gap: 0.5\n }}\n >\n <StyledMessageBubble>\n {messageHeader && (\n <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n <Flex container={{ gap: 0.5 }}>\n <StyledFlagIcon name='flag-wave-solid' />\n <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n </Flex>\n\n <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n </Flex>\n )}\n\n {message && (\n <StyledMessageBubbleContent>\n <EmojiDisplay content={message} size={20} />\n </StyledMessageBubbleContent>\n )}\n\n {(attachments.length > 0 || mediaPageLinks.length > 0) && (\n <StyledMediaList>\n {attachments.map(attachment => {\n return <Attachment {...attachment} key={attachment.id} />;\n })}\n\n {mediaPageLinks.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\n {status === 'undeliverable' && message && direction === 'out' && (\n <StyledUndeliveredIcon name='warn-solid' />\n )}\n </Flex>\n\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 && direction === 'out' && <StyledStatusInfo>{t(status)}</StyledStatusInfo>}\n </Flex>\n )}\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"]}
|
|
@@ -3,17 +3,25 @@ import { EmailEntityProps, EmailShellProps } from './Email.types';
|
|
|
3
3
|
export declare const StyledEmailMoreInfoButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
4
4
|
export declare const StyledEmailHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
5
|
export declare const StyledSuggestedRepliesButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
-
export declare const StyledSuggestedRepliesMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").MenuButtonProps
|
|
6
|
+
export declare const StyledSuggestedRepliesMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").MenuButtonProps> & {
|
|
7
|
+
getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
|
|
8
|
+
}, import("styled-components").DefaultTheme, {}, never>;
|
|
7
9
|
export declare const StyledEmailBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
10
|
export declare const StyledFromEmailDisplay: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").EmailDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
9
11
|
export declare const StyledEmailDisplay: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
-
export declare const StyledEmailPrimaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps
|
|
11
|
-
|
|
12
|
+
export declare const StyledEmailPrimaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
|
|
13
|
+
getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
|
|
14
|
+
}, import("styled-components").DefaultTheme, {}, never>;
|
|
15
|
+
export declare const StyledEmailSecondaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
|
|
16
|
+
getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
|
|
17
|
+
}, import("styled-components").DefaultTheme, {}, never>;
|
|
12
18
|
export declare const StyledEmailMoreInfoPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
19
|
export declare const StyledSecondarySeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
14
20
|
export declare const StyledEmail: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
15
21
|
export declare const StyledEmailEntity: import("styled-components").StyledComponent<"mark", import("styled-components").DefaultTheme, EmailEntityProps, never>;
|
|
16
|
-
export declare const StyledEntityList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps
|
|
22
|
+
export declare const StyledEntityList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
|
|
23
|
+
getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
|
|
24
|
+
}, import("styled-components").DefaultTheme, {}, never>;
|
|
17
25
|
export declare const StyledForwardedContentToggle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
18
26
|
export declare const StyledLoadMore: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
19
27
|
export declare const StyledContextMenuFieldSelector: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Email.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":";AAwBA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGlE,eAAO,MAAM,yBAAyB,4GAIrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAW5B,CAAC;AAIH,eAAO,MAAM,4BAA4B,qOAUvC,CAAC;AAIH,eAAO,MAAM,gCAAgC,
|
|
1
|
+
{"version":3,"file":"Email.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":";AAwBA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGlE,eAAO,MAAM,yBAAyB,4GAIrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAW5B,CAAC;AAIH,eAAO,MAAM,4BAA4B,qOAUvC,CAAC;AAIH,eAAO,MAAM,gCAAgC;;uDAU3C,CAAC;AAIH,eAAO,MAAM,eAAe,yGAAe,CAAC;AAE5C,eAAO,MAAM,sBAAsB,2OAMjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,0GAE9B,CAAC;AAEF,eAAO,MAAM,gCAAgC;;uDAE5C,CAAC;AAEF,eAAO,MAAM,kCAAkC;;uDAY7C,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAKrC,CAAC;AAIH,eAAO,MAAM,wBAAwB,yGAInC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,iBAAiB,wHAc5B,CAAC;AAIH,eAAO,MAAM,gBAAgB;;uDAU3B,CAAC;AAIH,eAAO,MAAM,4BAA4B,qOAExC,CAAC;AAEF,eAAO,MAAM,cAAc,yGAMzB,CAAC;AAIH,eAAO,MAAM,8BAA8B;;SAmBzC,CAAC;AAIH,eAAO,MAAM,sBAAsB,4GAAkB,CAAC;AACtD,eAAO,MAAM,2BAA2B,wGAAc,CAAC;AACvD,eAAO,MAAM,gBAAgB;;SA6B5B,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,yGAIrB,CAAC;AAIH,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAEH,eAAO,MAAM,yBAAyB,4GAMpC,CAAC;AAEH,eAAO,MAAM,wBAAwB;2BAAuC,OAAO;SAelF,CAAC;AAEF,eAAO,MAAM,mBAAmB;;eAEnB,OAAO;SAgClB,CAAC;AAIH,eAAO,MAAM,8BAA8B,4GAKzC,CAAC;AAIH,eAAO,MAAM,6BAA6B,4GAMxC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4GAMtC,CAAC;AAIH,eAAO,MAAM,uBAAuB;2BAAuC,OAAO;SAUjF,CAAC;AAEF,eAAO,MAAM,kBAAkB,yGAS7B,CAAC;AAEH,eAAO,MAAM,eAAe;2BAAuC,OAAO;SAUzE,CAAC;AAIF,eAAO,MAAM,0BAA0B;;SAerC,CAAC;AAEH,eAAO,MAAM,yBAAyB,yGAUpC,CAAC;AAIH,eAAO,MAAM,4BAA4B,yGAIvC,CAAC;AAIH,eAAO,MAAM,2BAA2B,yGAOtC,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAO/B,CAAC;AAIH,eAAO,MAAM,sBAAsB,wGAejC,CAAC;AAGH,eAAO,MAAM,2BAA2B,wGAiBtC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-social",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
4
|
-
"author": "Pegasystems",
|
|
5
|
-
"license": "SEE LICENSE IN LICENSE",
|
|
3
|
+
"version": "4.0.0-dev.17.0",
|
|
6
4
|
"repository": {
|
|
7
5
|
"type": "git",
|
|
8
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
9
7
|
"directory": "packages/cosmos-social"
|
|
10
8
|
},
|
|
9
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
10
|
+
"author": "Pegasystems",
|
|
11
|
+
"sideEffects": [
|
|
12
|
+
"./src/components/Email/EmailEntity.tsx",
|
|
13
|
+
"./lib/components/Email/EmailEntity.js"
|
|
14
|
+
],
|
|
11
15
|
"main": "lib/index.js",
|
|
12
16
|
"types": "lib/index.d.ts",
|
|
13
17
|
"files": [
|
|
@@ -15,17 +19,13 @@
|
|
|
15
19
|
"README.md",
|
|
16
20
|
"lib"
|
|
17
21
|
],
|
|
18
|
-
"sideEffects": [
|
|
19
|
-
"./src/components/Email/EmailEntity.tsx",
|
|
20
|
-
"./lib/components/Email/EmailEntity.js"
|
|
21
|
-
],
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "tsc -b"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@pega/cosmos-react-core": "4.0.0-dev.
|
|
27
|
-
"@pega/cosmos-react-rte": "4.0.0-dev.
|
|
28
|
-
"@pega/cosmos-react-work": "4.0.0-dev.
|
|
26
|
+
"@pega/cosmos-react-core": "4.0.0-dev.17.0",
|
|
27
|
+
"@pega/cosmos-react-rte": "4.0.0-dev.17.0",
|
|
28
|
+
"@pega/cosmos-react-work": "4.0.0-dev.17.0",
|
|
29
29
|
"@types/parse5": "^6.0.0",
|
|
30
30
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
31
31
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|