@pega/cosmos-react-social 3.0.0-dev.15.0 → 3.0.0-dev.16.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/Email/Email.types.d.ts +3 -3
- package/lib/components/Email/Email.types.d.ts.map +1 -1
- package/lib/components/Email/Email.types.js.map +1 -1
- package/lib/components/Email/EmailSummaryItem.js +2 -2
- package/lib/components/Email/EmailSummaryItem.js.map +1 -1
- package/lib/components/Email/EmailSummaryList.d.ts.map +1 -1
- package/lib/components/Email/EmailSummaryList.js +19 -67
- package/lib/components/Email/EmailSummaryList.js.map +1 -1
- package/lib/components/Feed/Feed.context.d.ts +1 -4
- package/lib/components/Feed/Feed.context.d.ts.map +1 -1
- package/lib/components/Feed/Feed.context.js.map +1 -1
- package/lib/components/Feed/FeedRichText.d.ts.map +1 -1
- package/lib/components/Feed/FeedRichText.js +19 -17
- package/lib/components/Feed/FeedRichText.js.map +1 -1
- package/lib/components/MentionButton/MentionButton.d.ts +2 -2
- package/lib/components/MentionButton/MentionButton.d.ts.map +1 -1
- package/lib/components/MentionButton/MentionButton.js +7 -7
- package/lib/components/MentionButton/MentionButton.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
2
|
import { BaseProps, AvatarProps, SentimentProps, FileDisplayProps, FileUploadItemProps, OmitStrict, MenuProps, MenuItemProps, TooltipProps, NoChildrenProp, EmptyStateProps, ProgressProps, PageTemplateProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import { RichTextEditorProps } from '@pega/cosmos-react-rte';
|
|
4
4
|
import { UtilitiesSummaryProps } from '@pega/cosmos-react-work/lib/components/CaseView/UtilitiesSummary';
|
|
@@ -218,7 +218,7 @@ export interface EmailSummaryItemProps extends BaseProps {
|
|
|
218
218
|
/** Is the email currently active */
|
|
219
219
|
active?: boolean;
|
|
220
220
|
/** On click of email item */
|
|
221
|
-
|
|
221
|
+
onSelect: (id: EmailSummaryItemProps['id']) => void;
|
|
222
222
|
/** ref to the element */
|
|
223
223
|
ref?: Ref<HTMLButtonElement>;
|
|
224
224
|
}
|
|
@@ -244,7 +244,7 @@ export interface EmailSummaryListProps extends BaseProps {
|
|
|
244
244
|
/** Handles category change */
|
|
245
245
|
onCategoryClick?: MenuItemProps['onClick'];
|
|
246
246
|
/** List of EmailItems items */
|
|
247
|
-
items: OmitStrict<EmailSummaryItemProps, '
|
|
247
|
+
items: OmitStrict<EmailSummaryItemProps, 'onSelect' | 'active'>[];
|
|
248
248
|
/** Total number of unread email count */
|
|
249
249
|
unreadEmailCount?: number;
|
|
250
250
|
/** A set of filters to apply to the email inbox. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Email.types.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Email.types.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Email.types.js","sourceRoot":"","sources":["../../../src/components/Email/Email.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport {\n BaseProps,\n AvatarProps,\n SentimentProps,\n FileDisplayProps,\n FileUploadItemProps,\n OmitStrict,\n MenuProps,\n MenuItemProps,\n TooltipProps,\n NoChildrenProp,\n EmptyStateProps,\n ProgressProps,\n PageTemplateProps\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorProps } from '@pega/cosmos-react-rte';\nimport { UtilitiesSummaryProps } from '@pega/cosmos-react-work/lib/components/CaseView/UtilitiesSummary';\n\nexport interface EmailTemplate {\n /** Template title */\n title: string;\n /** Template id */\n id: string;\n}\n\nexport interface EmailUser {\n /** Short name of the User */\n shortName: string;\n /** Full name of the User */\n fullName: string;\n /** Email of the User */\n emailAddress: string;\n /** Avatar props of the User */\n avatarProps?: Partial<AvatarProps>;\n}\n\nexport interface EntityHighlightMapping {\n value: string;\n type: string;\n name: string;\n variant: number;\n description?: TooltipProps['children'];\n icon?: string;\n}\n\nexport interface ContextMenuProps\n extends OmitStrict<MenuProps, 'onItemClick' | 'header' | 'items'> {\n onItemClick: (selectedValue: { fieldName: string; fieldValue: string }) => void;\n heading: string;\n items: MenuItemProps[];\n}\nexport interface EmailProps extends BaseProps, NoChildrenProp {\n /** Ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Unique ID for this email record */\n id: string;\n /** Timestamp of this email as ISO8601 string, timestamp or native Date object. */\n timeStamp: Date | number | string;\n /** From email */\n from: EmailUser;\n /** To email */\n to: EmailUser[];\n /** Carbon copy of email users list */\n cc?: EmailUser[];\n /** Blind carbon copy of email users list */\n bcc?: EmailUser[];\n /** Sentiment */\n sentiment?: SentimentProps;\n /** Subject of the email */\n subject?: string;\n /** Body */\n body?: string;\n /** Forwarded content */\n forwardedContent?: string;\n /**\n * Entity highlight mapping\n * This requires body to be passed as a string with html tags\n */\n entityHighlightMapping?: EntityHighlightMapping[];\n /** onReply callback */\n onReply: (id: EmailProps['id']) => void;\n /** onForward Callback */\n onForward: (id: EmailProps['id']) => void;\n /** onReply callback */\n onReplyAll?: (id: EmailProps['id']) => void;\n /** List of suggestions */\n suggestions?: EmailTemplate[];\n /** Callback that triggers on click of tag */\n onSuggestionClick?: (id: EmailProps['id'], suggestionId: EmailTemplate['id']) => void;\n /** Actions region */\n actions?: ReactNode;\n /** Flag that indicates if email is unread\n * @default false\n */\n unRead?: boolean;\n /** Attachments list */\n attachments?: FileDisplayProps[];\n /** Items list in Popover */\n contextMenu?: ContextMenuProps;\n}\n\nexport interface EmailConversationProps extends BaseProps {\n /** ref to the element */\n ref?: Ref<HTMLLIElement>;\n /** Unique ID for this email conversation record */\n id: string;\n /** List of mails */\n emails: EmailProps[];\n /** Sender(s) of this email conversation */\n from: EmailUser;\n /** Recipient(s) of this email conversation */\n to: EmailUser[];\n /** Count of unread emails */\n unReadEmailCount?: number;\n /** Timestamp of this conversation as ISO8601 string, timestamp or native Date object. */\n timeStamp: Date | string | number;\n /** Flag that indicates if email conversation is expanded */\n isCollapsed?: boolean;\n /** Flag to set if conversation is spun off from forwarded email */\n isForwarded?: boolean;\n /** Callback when email conversation is collapsed */\n onCollapse?: () => void;\n /** Callback when email conversation is expanded */\n onExpand?: () => void;\n}\n\nexport type EmailResponseType = 'reply' | 'replyAll' | 'forward';\nexport type EmailComposerFieldType =\n | 'to'\n | 'cc'\n | 'bcc'\n | 'subject'\n | 'bodyContent'\n | 'attachments'\n | 'responseType'\n | 'selectedTemplateId';\n\nexport type EmailComposerValueType<T> = T extends 'to' | 'cc' | 'bcc'\n ? EmailUser['emailAddress'][]\n : T extends 'subject' | 'bodyContent'\n ? string\n : T extends 'selectedTemplateId'\n ? EmailTemplate['id']\n : T extends 'attachments'\n ? FileUploadItemProps[]\n : T extends 'responseType'\n ? EmailResponseType\n : never;\n\nexport interface EmailDirectRecipients {\n /** To address/addresses in case of reply response type on email. */\n reply: EmailUser['emailAddress'][];\n /** To address/addresses in case of replyAll response type on email. */\n replyAll: EmailUser['emailAddress'][];\n /** To address/addresses in case of forward response type on email. */\n forward?: EmailUser['emailAddress'][];\n}\n\nexport interface EmailComposerHandleValue {\n replaceBodyContent: (content: string) => void;\n activate: () => void;\n}\n\nexport interface EmailComposerProps\n extends Pick<EmailProps, 'suggestions' | 'onSuggestionClick'>,\n BaseProps,\n NoChildrenProp {\n /** Show loader until the background process completes */\n progress?: boolean | Pick<ProgressProps, 'message'>;\n /** Object containing full list of email participants. */\n participants: EmailUser[];\n /** Data for all fields of the composer */\n data: {\n /** Object to hold to address/addresses and field error */\n to?: {\n value: EmailUser['emailAddress'][];\n error?: string;\n };\n /** Object to hold Cc address/addresses and field error */\n cc?: {\n value: EmailUser['emailAddress'][];\n error?: string;\n };\n /** Object to hold Bcc address/addresses and field error */\n bcc?: {\n value: EmailUser['emailAddress'][];\n error?: string;\n };\n /** Object to hold the subject value and error */\n subject: {\n value: string;\n error?: string;\n };\n /** Object containing the default body content and error */\n bodyContent: {\n defaultValue: string;\n error?: string;\n };\n /** Selected template id */\n selectedTemplateId?: EmailTemplate['id'];\n /** List of attachments */\n attachments?: FileUploadItemProps[];\n /** Email response types */\n responseType?: EmailResponseType;\n };\n /** Callback when user clicks on the send button */\n onSend: () => void;\n /** Callback when image is added */\n onImageAdded?: RichTextEditorProps['onImageAdded'];\n /** Region to show more actions in footer */\n footerMoreActions?: ReactNode;\n /** Templates for drafting email */\n templates?: Pick<EmailTemplate, 'id' | 'title'>[];\n /** Callback when user clicks on cancel */\n onCancel: () => void;\n /**\n * Callback to handle external entry validation for to, cc and bcc fields while adding a new email to the list\n * If returned true considers the entry to be a valid entry\n */\n externalValidator?: (value: string) => boolean;\n /** Ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Imperative handle for composer */\n handle?: Ref<EmailComposerHandleValue>;\n /** Change handler to all fields */\n onChange: <T extends EmailComposerFieldType>(field: T, value: EmailComposerValueType<T>) => void;\n}\nexport interface EmailShellProps extends BaseProps {\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Region for header */\n headerProps?: {\n /** Region for actions */\n actions?: ReactNode;\n /** Subject of the email conversations list */\n subject?: string;\n };\n /** Email conversations */\n conversations?: EmailConversationProps[];\n /** Shows only one conversation at a time */\n autoCollapse?: boolean;\n}\n\nexport interface EmailSummaryItemProps extends BaseProps {\n /** Id of each summary item */\n id: string;\n /** List of from participant names of the conversations */\n activeParticipants: EmailUser[];\n /** Email body of last email in the email */\n message: string;\n /** Timestamp of the latest email */\n timeStamp: Date | string | number;\n /** Top topic of an email */\n topic?: string;\n /** Sentiment */\n sentiment?: SentimentProps;\n /** Urgency of an email */\n urgency?: number;\n /** Total number of unread emails in the email */\n unreadEmailCount?: number;\n /** Is the email currently active */\n active?: boolean;\n /** On click of email item */\n onClick: MouseEventHandler;\n /** ref to the element */\n ref?: Ref<HTMLButtonElement>;\n}\n\nexport interface Filter {\n /** Sets DOM id for the control and associates label element via 'for' attribute. */\n id: string;\n /** Pass a string or a fragment with an Icon and string for the filter label. */\n label: ReactNode;\n /**\n * Disables the filter.\n * @default false\n */\n disabled?: boolean;\n /**\n * Sets on prop via onFilterChange.\n * @default false\n */\n on?: boolean;\n}\n\nexport interface EmailSummaryListProps extends BaseProps {\n /** List of email categories */\n categories: MenuProps['items'];\n /** Handles category change */\n onCategoryClick?: MenuItemProps['onClick'];\n /** List of EmailItems items */\n items: OmitStrict<EmailSummaryItemProps, 'onClick' | 'active'>[];\n /** Total number of unread email count */\n unreadEmailCount?: number;\n /** A set of filters to apply to the email inbox. */\n filters?: Filter[];\n /** A callback that runs when a filter is clicked. */\n onFilterChange?: (filterId: Filter['id'], on: boolean) => void;\n /** onClick of list item */\n onItemClick: (id: EmailSummaryItemProps['id']) => void;\n /** Indicates if the data is being currently loading */\n loading?: boolean;\n /** Callback to fetch more rows */\n onLoadMore?: () => void;\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Empty message when there are no email summary items */\n emptyMessage?: EmptyStateProps['message'];\n}\n\nexport interface EmailEntityProps extends BaseProps {\n entity: EntityHighlightMapping;\n ref?: Ref<HTMLElement>;\n}\n\nexport interface TargetProps {\n cursorPosition: { x: number; y: number };\n targetNode: Node | null;\n}\n\nexport interface ContextMenuPopoverProps extends BaseProps, TargetProps {\n contextMenu: ContextMenuProps;\n}\n\nexport interface EntityListProps extends BaseProps {\n content: {\n name: string;\n value?: {\n id: string;\n entity: EntityHighlightMapping;\n }[];\n }[];\n\n header: {\n icon: string;\n text: string;\n };\n ref?: Ref<HTMLDivElement>;\n contextMenu?: ContextMenuProps;\n}\n\nexport interface EmailManagerProps extends BaseProps {\n /** Ref placed on the root */\n ref?: Ref<HTMLDivElement>;\n /** Header of the component */\n header?: { icon: PageTemplateProps['icon']; title: PageTemplateProps['title'] };\n /** A region to hold an EmailSummaryList component */\n list?: ReactNode;\n /** A region to hold an Emails component */\n content?: ReactNode;\n /** A region that is used to hold Utility components. */\n utilities?: ReactNode;\n /** The utilities summary array will be used to render the minimized utilities card. */\n utilitiesSummaryItems?: UtilitiesSummaryProps['items'];\n /** Collapses the utilities by default on load */\n defaultCollapsedUtilities?: boolean;\n}\n\nexport interface StyledContextMenuFieldSelectorProps extends BaseProps {\n selected?: boolean;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Email.types.js","sourceRoot":"","sources":["../../../src/components/Email/Email.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport {\n BaseProps,\n AvatarProps,\n SentimentProps,\n FileDisplayProps,\n FileUploadItemProps,\n OmitStrict,\n MenuProps,\n MenuItemProps,\n TooltipProps,\n NoChildrenProp,\n EmptyStateProps,\n ProgressProps,\n PageTemplateProps\n} from '@pega/cosmos-react-core';\nimport { RichTextEditorProps } from '@pega/cosmos-react-rte';\nimport { UtilitiesSummaryProps } from '@pega/cosmos-react-work/lib/components/CaseView/UtilitiesSummary';\n\nexport interface EmailTemplate {\n /** Template title */\n title: string;\n /** Template id */\n id: string;\n}\n\nexport interface EmailUser {\n /** Short name of the User */\n shortName: string;\n /** Full name of the User */\n fullName: string;\n /** Email of the User */\n emailAddress: string;\n /** Avatar props of the User */\n avatarProps?: Partial<AvatarProps>;\n}\n\nexport interface EntityHighlightMapping {\n value: string;\n type: string;\n name: string;\n variant: number;\n description?: TooltipProps['children'];\n icon?: string;\n}\n\nexport interface ContextMenuProps\n extends OmitStrict<MenuProps, 'onItemClick' | 'header' | 'items'> {\n onItemClick: (selectedValue: { fieldName: string; fieldValue: string }) => void;\n heading: string;\n items: MenuItemProps[];\n}\nexport interface EmailProps extends BaseProps, NoChildrenProp {\n /** Ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Unique ID for this email record */\n id: string;\n /** Timestamp of this email as ISO8601 string, timestamp or native Date object. */\n timeStamp: Date | number | string;\n /** From email */\n from: EmailUser;\n /** To email */\n to: EmailUser[];\n /** Carbon copy of email users list */\n cc?: EmailUser[];\n /** Blind carbon copy of email users list */\n bcc?: EmailUser[];\n /** Sentiment */\n sentiment?: SentimentProps;\n /** Subject of the email */\n subject?: string;\n /** Body */\n body?: string;\n /** Forwarded content */\n forwardedContent?: string;\n /**\n * Entity highlight mapping\n * This requires body to be passed as a string with html tags\n */\n entityHighlightMapping?: EntityHighlightMapping[];\n /** onReply callback */\n onReply: (id: EmailProps['id']) => void;\n /** onForward Callback */\n onForward: (id: EmailProps['id']) => void;\n /** onReply callback */\n onReplyAll?: (id: EmailProps['id']) => void;\n /** List of suggestions */\n suggestions?: EmailTemplate[];\n /** Callback that triggers on click of tag */\n onSuggestionClick?: (id: EmailProps['id'], suggestionId: EmailTemplate['id']) => void;\n /** Actions region */\n actions?: ReactNode;\n /** Flag that indicates if email is unread\n * @default false\n */\n unRead?: boolean;\n /** Attachments list */\n attachments?: FileDisplayProps[];\n /** Items list in Popover */\n contextMenu?: ContextMenuProps;\n}\n\nexport interface EmailConversationProps extends BaseProps {\n /** ref to the element */\n ref?: Ref<HTMLLIElement>;\n /** Unique ID for this email conversation record */\n id: string;\n /** List of mails */\n emails: EmailProps[];\n /** Sender(s) of this email conversation */\n from: EmailUser;\n /** Recipient(s) of this email conversation */\n to: EmailUser[];\n /** Count of unread emails */\n unReadEmailCount?: number;\n /** Timestamp of this conversation as ISO8601 string, timestamp or native Date object. */\n timeStamp: Date | string | number;\n /** Flag that indicates if email conversation is expanded */\n isCollapsed?: boolean;\n /** Flag to set if conversation is spun off from forwarded email */\n isForwarded?: boolean;\n /** Callback when email conversation is collapsed */\n onCollapse?: () => void;\n /** Callback when email conversation is expanded */\n onExpand?: () => void;\n}\n\nexport type EmailResponseType = 'reply' | 'replyAll' | 'forward';\nexport type EmailComposerFieldType =\n | 'to'\n | 'cc'\n | 'bcc'\n | 'subject'\n | 'bodyContent'\n | 'attachments'\n | 'responseType'\n | 'selectedTemplateId';\n\nexport type EmailComposerValueType<T> = T extends 'to' | 'cc' | 'bcc'\n ? EmailUser['emailAddress'][]\n : T extends 'subject' | 'bodyContent'\n ? string\n : T extends 'selectedTemplateId'\n ? EmailTemplate['id']\n : T extends 'attachments'\n ? FileUploadItemProps[]\n : T extends 'responseType'\n ? EmailResponseType\n : never;\n\nexport interface EmailDirectRecipients {\n /** To address/addresses in case of reply response type on email. */\n reply: EmailUser['emailAddress'][];\n /** To address/addresses in case of replyAll response type on email. */\n replyAll: EmailUser['emailAddress'][];\n /** To address/addresses in case of forward response type on email. */\n forward?: EmailUser['emailAddress'][];\n}\n\nexport interface EmailComposerHandleValue {\n replaceBodyContent: (content: string) => void;\n activate: () => void;\n}\n\nexport interface EmailComposerProps\n extends Pick<EmailProps, 'suggestions' | 'onSuggestionClick'>,\n BaseProps,\n NoChildrenProp {\n /** Show loader until the background process completes */\n progress?: boolean | Pick<ProgressProps, 'message'>;\n /** Object containing full list of email participants. */\n participants: EmailUser[];\n /** Data for all fields of the composer */\n data: {\n /** Object to hold to address/addresses and field error */\n to?: {\n value: EmailUser['emailAddress'][];\n error?: string;\n };\n /** Object to hold Cc address/addresses and field error */\n cc?: {\n value: EmailUser['emailAddress'][];\n error?: string;\n };\n /** Object to hold Bcc address/addresses and field error */\n bcc?: {\n value: EmailUser['emailAddress'][];\n error?: string;\n };\n /** Object to hold the subject value and error */\n subject: {\n value: string;\n error?: string;\n };\n /** Object containing the default body content and error */\n bodyContent: {\n defaultValue: string;\n error?: string;\n };\n /** Selected template id */\n selectedTemplateId?: EmailTemplate['id'];\n /** List of attachments */\n attachments?: FileUploadItemProps[];\n /** Email response types */\n responseType?: EmailResponseType;\n };\n /** Callback when user clicks on the send button */\n onSend: () => void;\n /** Callback when image is added */\n onImageAdded?: RichTextEditorProps['onImageAdded'];\n /** Region to show more actions in footer */\n footerMoreActions?: ReactNode;\n /** Templates for drafting email */\n templates?: Pick<EmailTemplate, 'id' | 'title'>[];\n /** Callback when user clicks on cancel */\n onCancel: () => void;\n /**\n * Callback to handle external entry validation for to, cc and bcc fields while adding a new email to the list\n * If returned true considers the entry to be a valid entry\n */\n externalValidator?: (value: string) => boolean;\n /** Ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Imperative handle for composer */\n handle?: Ref<EmailComposerHandleValue>;\n /** Change handler to all fields */\n onChange: <T extends EmailComposerFieldType>(field: T, value: EmailComposerValueType<T>) => void;\n}\nexport interface EmailShellProps extends BaseProps {\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Region for header */\n headerProps?: {\n /** Region for actions */\n actions?: ReactNode;\n /** Subject of the email conversations list */\n subject?: string;\n };\n /** Email conversations */\n conversations?: EmailConversationProps[];\n /** Shows only one conversation at a time */\n autoCollapse?: boolean;\n}\n\nexport interface EmailSummaryItemProps extends BaseProps {\n /** Id of each summary item */\n id: string;\n /** List of from participant names of the conversations */\n activeParticipants: EmailUser[];\n /** Email body of last email in the email */\n message: string;\n /** Timestamp of the latest email */\n timeStamp: Date | string | number;\n /** Top topic of an email */\n topic?: string;\n /** Sentiment */\n sentiment?: SentimentProps;\n /** Urgency of an email */\n urgency?: number;\n /** Total number of unread emails in the email */\n unreadEmailCount?: number;\n /** Is the email currently active */\n active?: boolean;\n /** On click of email item */\n onSelect: (id: EmailSummaryItemProps['id']) => void;\n /** ref to the element */\n ref?: Ref<HTMLButtonElement>;\n}\n\nexport interface Filter {\n /** Sets DOM id for the control and associates label element via 'for' attribute. */\n id: string;\n /** Pass a string or a fragment with an Icon and string for the filter label. */\n label: ReactNode;\n /**\n * Disables the filter.\n * @default false\n */\n disabled?: boolean;\n /**\n * Sets on prop via onFilterChange.\n * @default false\n */\n on?: boolean;\n}\n\nexport interface EmailSummaryListProps extends BaseProps {\n /** List of email categories */\n categories: MenuProps['items'];\n /** Handles category change */\n onCategoryClick?: MenuItemProps['onClick'];\n /** List of EmailItems items */\n items: OmitStrict<EmailSummaryItemProps, 'onSelect' | 'active'>[];\n /** Total number of unread email count */\n unreadEmailCount?: number;\n /** A set of filters to apply to the email inbox. */\n filters?: Filter[];\n /** A callback that runs when a filter is clicked. */\n onFilterChange?: (filterId: Filter['id'], on: boolean) => void;\n /** onClick of list item */\n onItemClick: (id: EmailSummaryItemProps['id']) => void;\n /** Indicates if the data is being currently loading */\n loading?: boolean;\n /** Callback to fetch more rows */\n onLoadMore?: () => void;\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Empty message when there are no email summary items */\n emptyMessage?: EmptyStateProps['message'];\n}\n\nexport interface EmailEntityProps extends BaseProps {\n entity: EntityHighlightMapping;\n ref?: Ref<HTMLElement>;\n}\n\nexport interface TargetProps {\n cursorPosition: { x: number; y: number };\n targetNode: Node | null;\n}\n\nexport interface ContextMenuPopoverProps extends BaseProps, TargetProps {\n contextMenu: ContextMenuProps;\n}\n\nexport interface EntityListProps extends BaseProps {\n content: {\n name: string;\n value?: {\n id: string;\n entity: EntityHighlightMapping;\n }[];\n }[];\n\n header: {\n icon: string;\n text: string;\n };\n ref?: Ref<HTMLDivElement>;\n contextMenu?: ContextMenuProps;\n}\n\nexport interface EmailManagerProps extends BaseProps {\n /** Ref placed on the root */\n ref?: Ref<HTMLDivElement>;\n /** Header of the component */\n header?: { icon: PageTemplateProps['icon']; title: PageTemplateProps['title'] };\n /** A region to hold an EmailSummaryList component */\n list?: ReactNode;\n /** A region to hold an Emails component */\n content?: ReactNode;\n /** A region that is used to hold Utility components. */\n utilities?: ReactNode;\n /** The utilities summary array will be used to render the minimized utilities card. */\n utilitiesSummaryItems?: UtilitiesSummaryProps['items'];\n /** Collapses the utilities by default on load */\n defaultCollapsedUtilities?: boolean;\n}\n\nexport interface StyledContextMenuFieldSelectorProps extends BaseProps {\n selected?: boolean;\n}\n"]}
|
|
@@ -68,7 +68,7 @@ export const StyledEmailSummaryItem = styled.button(({ theme }) => {
|
|
|
68
68
|
StyledEmailSummaryItem.defaultProps = defaultThemeProp;
|
|
69
69
|
StyledParticipants.defaultProps = defaultThemeProp;
|
|
70
70
|
StyledMessage.defaultProps = defaultThemeProp;
|
|
71
|
-
const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, message, timeStamp, topic, urgency, active = false,
|
|
71
|
+
const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, message, timeStamp, topic, urgency, active = false, onSelect, unreadEmailCount, ...restProps }, ref) => {
|
|
72
72
|
const t = useI18n();
|
|
73
73
|
const items = useMemo(() => {
|
|
74
74
|
const itemList = [];
|
|
@@ -93,7 +93,7 @@ const EmailSummaryItem = forwardRef(({ id, activeParticipants, sentiment, messag
|
|
|
93
93
|
}
|
|
94
94
|
return participants;
|
|
95
95
|
}, [activeParticipants]);
|
|
96
|
-
return (_jsxs(BareButton, { as: StyledEmailSummaryItem, ref: ref, ...restProps, id: id, onClick:
|
|
96
|
+
return (_jsxs(BareButton, { as: StyledEmailSummaryItem, ref: ref, ...restProps, id: id, onClick: () => onSelect(id), active: active, "aria-selected": active, "aria-label": `${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: -1, children: [_jsxs(StyledParticipants, { unreadEmailCount: unreadEmailCount, container: { justify: 'between' }, children: [_jsx(Text, { variant: 'h4', children: emailParticipants }), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { variant: 'default', children: unreadEmailCount }))] }), _jsxs(Flex, { container: {
|
|
97
97
|
justify: 'between'
|
|
98
98
|
}, as: StyledMessageAndDate, children: [_jsx(StyledMessage, { unreadEmailCount: unreadEmailCount, children: message }), _jsx(DateTimeDisplay, { value: timeStamp, variant: 'date', format: 'short' })] }), _jsx(MetaList, { items: items })] }));
|
|
99
99
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailSummaryItem.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgC,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EACL,gBAAgB,EAEhB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,EACf,MAAM,EACN,QAAQ,EACR,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAI1F,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwB,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;;;yBAGa,KAAK,CAAC,IAAI,CAAC,OAAO;MACrC,gBAAgB,KAAK,SAAS;QAChC,gBAAgB,GAAG,CAAC;QACpB,GAAG,CAAA;eACQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;KACxC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwB,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,SAAS;QAChC,gBAAgB,GAAG,CAAC;QACpB,GAAG,CAAA;;;;;oCAK6B,KAAK,CAAC,IAAI,CAAC,OAAO;wCACd,KAAK,CAAC,IAAI,CAAC,OAAO;;;;4BAI9B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;KAErD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAA8B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACpF,CAAC;IACF,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;wBAC3B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;wCACxB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;eAC1D,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;MAC1D,cAAc,KAAK,oBAAoB;4BACjB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;0BAQpB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;;;;0BAK1C,UAAU;;GAEjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACvD,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACnD,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,EAAE,EACF,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,GAAG,KAAK,EACd,
|
|
1
|
+
{"version":3,"file":"EmailSummaryItem.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Text,\n Flex,\n Count,\n Sentiment,\n MetaList,\n DateTimeDisplay,\n Status,\n tryCatch,\n useI18n\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledMetaList } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';\n\nimport { EmailSummaryItemProps } from './Email.types';\n\nconst StyledMessage = styled(Flex)<EmailSummaryItemProps>(({ unreadEmailCount, theme }) => {\n return css`\n text-overflow: ellipsis;\n overflow: hidden;\n margin-inline-end: ${theme.base.spacing};\n ${unreadEmailCount !== undefined &&\n unreadEmailCount > 0 &&\n css`\n color: ${theme.base.palette.interactive};\n `}\n `;\n});\n\nconst StyledMessageAndDate = styled.div`\n white-space: nowrap;\n`;\n\nconst StyledParticipants = styled(Flex)<EmailSummaryItemProps>(({ unreadEmailCount, theme }) => {\n return css`\n ${unreadEmailCount !== undefined &&\n unreadEmailCount > 0 &&\n css`\n position: relative;\n &::before {\n content: '';\n position: absolute;\n inset-inline: calc(-1.5 * ${theme.base.spacing});\n inset-block-start: calc(0.8 * ${theme.base.spacing});\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: ${theme.base.palette.interactive};\n }\n `}\n `;\n});\ninterface StyledEmailSummaryItemProps extends EmailSummaryItemProps {\n isEmailItemActive: boolean;\n}\nexport const StyledEmailSummaryItem = styled.button<StyledEmailSummaryItemProps>(({ theme }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n return css`\n width: 100%;\n color: ${theme.base.palette['foreground-color']};\n background-color: ${theme.base.palette['primary-background']};\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n ${StyledMetaList}, ${StyledMessageAndDate} {\n margin-block-start: ${theme.base.spacing};\n }\n & + & {\n margin-inline-start: 0;\n }\n\n &[aria-selected='true'],\n &[data-current='true'] {\n background-color: ${theme.base.palette['secondary-background']};\n }\n\n &:hover,\n &:focus-within {\n background-color: ${hoverColor};\n }\n `;\n});\n\nStyledEmailSummaryItem.defaultProps = defaultThemeProp;\nStyledParticipants.defaultProps = defaultThemeProp;\nStyledMessage.defaultProps = defaultThemeProp;\n\nconst EmailSummaryItem: FunctionComponent<EmailSummaryItemProps & ForwardProps> = forwardRef(\n (\n {\n id,\n activeParticipants,\n sentiment,\n message,\n timeStamp,\n topic,\n urgency,\n active = false,\n onSelect,\n unreadEmailCount,\n ...restProps\n },\n ref: EmailSummaryItemProps['ref']\n ) => {\n const t = useI18n();\n const items = useMemo(() => {\n const itemList: ReactNode[] = [];\n\n if (typeof topic === 'string' && topic.length > 0) {\n itemList.push(\n <Status variant='info' key='info'>\n {topic}\n </Status>\n );\n }\n\n if (sentiment) {\n itemList.push(<Sentiment variant={sentiment.variant} labelHidden />);\n }\n\n if (typeof urgency === 'number') {\n itemList.push(<Text variant='secondary'>{`${t('priority')} ${urgency}`}</Text>);\n }\n\n return itemList;\n }, [sentiment, topic, urgency]);\n\n const emailParticipants = useMemo(() => {\n let participants = '';\n if (activeParticipants.length > 0) {\n participants =\n activeParticipants.length === 1\n ? activeParticipants[0].fullName\n : activeParticipants.map(participant => `${participant.shortName}`).join(', ');\n }\n return participants;\n }, [activeParticipants]);\n\n return (\n <BareButton\n as={StyledEmailSummaryItem}\n ref={ref}\n {...restProps}\n id={id}\n onClick={() => onSelect(id)}\n active={active}\n aria-selected={active}\n aria-label={`${emailParticipants}, ${message} ${timeStamp} ${topic} ${\n sentiment?.variant\n } ${t('priority')} ${urgency}`}\n tabIndex={-1}\n >\n <StyledParticipants unreadEmailCount={unreadEmailCount} container={{ justify: 'between' }}>\n <Text variant='h4'>{emailParticipants}</Text>\n {typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (\n <Count variant='default'>{unreadEmailCount}</Count>\n )}\n </StyledParticipants>\n <Flex\n container={{\n justify: 'between'\n }}\n as={StyledMessageAndDate}\n >\n <StyledMessage unreadEmailCount={unreadEmailCount}>{message}</StyledMessage>\n <DateTimeDisplay value={timeStamp} variant='date' format='short' />\n </Flex>\n <MetaList items={items} />\n </BareButton>\n );\n }\n);\n\nexport default EmailSummaryItem;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailSummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,
|
|
1
|
+
{"version":3,"file":"EmailSummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAgBb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAyB,qBAAqB,EAAE,MAAM,eAAe,CAAC;AA+D7E,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAkI7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createRef, useMemo, useState, useEffect, forwardRef } from 'react';
|
|
2
|
+
import { createRef, useMemo, useState, useEffect, forwardRef, useCallback } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton,
|
|
4
|
+
import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton, useConsolidatedRef, useI18n, menuHelpers, Progress, useItemIntersection, usePrevious, VisuallyHiddenText, EmptyState, calculateFontSize, StyledText, useArrows, debounce } from '@pega/cosmos-react-core';
|
|
5
5
|
import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
|
|
6
6
|
import EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';
|
|
7
7
|
import { StyledLoadMore } from './Email.styles';
|
|
@@ -60,52 +60,25 @@ const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories,
|
|
|
60
60
|
const t = useI18n();
|
|
61
61
|
const tablistRef = useConsolidatedRef(ref);
|
|
62
62
|
const tabRefs = items.map(() => createRef());
|
|
63
|
-
const [focusReturnEl, setFocusReturnEl] = useState();
|
|
64
|
-
const [focusDescendant, setFocusDescendant] = useState(null);
|
|
65
|
-
const [listHasBeenViewed, setListHasBeenViewed] = useState(false);
|
|
66
|
-
const [clickOnInitialView, setClickOnInitialView] = useState(false);
|
|
67
63
|
const prevEmail = usePrevious(items);
|
|
68
64
|
const [announcement, setAnnouncement] = useState('');
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
|
|
65
|
+
const [activeItemId, setActiveItemId] = useState(null);
|
|
66
|
+
useArrows(tablistRef, {
|
|
67
|
+
cycle: true,
|
|
72
68
|
selector: 'button[role="tab"]',
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
},
|
|
77
|
-
focusDescendantEl: focusDescendant,
|
|
78
|
-
clearFocusDescendant: () => {
|
|
79
|
-
setFocusDescendant(null);
|
|
80
|
-
tablistRef.current?.focus();
|
|
81
|
-
},
|
|
82
|
-
pauseDescendantEvaluation: !listHasBeenViewed
|
|
83
|
-
}), [tablistRef.current, focusDescendant, focusReturnEl, listHasBeenViewed]);
|
|
84
|
-
const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [items.length]);
|
|
85
|
-
const previousActiveDescendant = usePrevious(activeDescendant);
|
|
86
|
-
useLazyDescendant({
|
|
87
|
-
loading,
|
|
88
|
-
descendants,
|
|
89
|
-
previousActiveDescendant,
|
|
90
|
-
activeDescendant,
|
|
91
|
-
focusReturnEl,
|
|
92
|
-
setFocusReturnEl,
|
|
93
|
-
scrollEl: tablistRef.current
|
|
94
|
-
});
|
|
95
|
-
// Trigger click of new active descendant
|
|
96
|
-
useEffect(() => {
|
|
97
|
-
const hasPreviousOrClickInitial = previousActiveDescendant || clickOnInitialView;
|
|
98
|
-
if (hasPreviousOrClickInitial && activeDescendant) {
|
|
99
|
-
activeDescendant.click();
|
|
100
|
-
}
|
|
101
|
-
}, [activeDescendant]);
|
|
69
|
+
dir: 'up-down',
|
|
70
|
+
allowTabFocus: true
|
|
71
|
+
}, [items]);
|
|
102
72
|
const buttonText = useMemo(() => {
|
|
103
73
|
return (menuHelpers.getSelected(categories)[0]?.primary ??
|
|
104
74
|
menuHelpers.flatten(categories)[0].primary);
|
|
105
75
|
}, [categories]);
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
76
|
+
const handleLoadMore = useCallback(debounce(() => {
|
|
77
|
+
if (!loading) {
|
|
78
|
+
onLoadMore?.();
|
|
79
|
+
}
|
|
80
|
+
}, 200), [loading]);
|
|
81
|
+
useItemIntersection(tablistRef, items.length - 1, handleLoadMore, ':scope > button[role="tab"]');
|
|
109
82
|
useEffect(() => {
|
|
110
83
|
if (loading)
|
|
111
84
|
setAnnouncement(t('loading_email'));
|
|
@@ -123,33 +96,12 @@ const EmailSummaryList = forwardRef(({ loading = false, onLoadMore, categories,
|
|
|
123
96
|
onItemClick: onCategoryClick
|
|
124
97
|
} }), typeof unreadEmailCount === 'number' && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
|
|
125
98
|
count: unreadEmailCount
|
|
126
|
-
}), variant: 'default', children: unreadEmailCount })), _jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }) })] }) }), items.length > 0 ? (_jsxs(StyledEmailSummaryList, { role: 'tablist', tabIndex:
|
|
127
|
-
if (!listHasBeenViewed && e.target.getAttribute('role') === 'tablist') {
|
|
128
|
-
setClickOnInitialView(true);
|
|
129
|
-
setListHasBeenViewed(true);
|
|
130
|
-
}
|
|
131
|
-
}, children: [_jsx(VisuallyHiddenText, { "aria-live": 'polite', children: announcement }), items.map((emailItem, i) => {
|
|
99
|
+
}), variant: 'default', children: unreadEmailCount })), _jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }) })] }) }), items.length > 0 ? (_jsxs(StyledEmailSummaryList, { role: 'tablist', tabIndex: -1, ref: tablistRef, children: [_jsx(VisuallyHiddenText, { "aria-live": 'polite', children: announcement }), items.map((emailItem, i) => {
|
|
132
100
|
const { id, ...emailItemProps } = emailItem;
|
|
133
|
-
return (_jsx(EmailSummaryItem, { ref: tabRefs[i], id: id, role: 'tab', ...emailItemProps,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
const focusAtEl = target.getAttribute('role') === 'tab'
|
|
138
|
-
? target
|
|
139
|
-
: target.closest('button[role="tab"]');
|
|
140
|
-
if (focusAtEl)
|
|
141
|
-
setFocusDescendant(focusAtEl);
|
|
142
|
-
if (!listHasBeenViewed) {
|
|
143
|
-
if (i === 0)
|
|
144
|
-
setClickOnInitialView(true);
|
|
145
|
-
setListHasBeenViewed(true);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
// Click is triggered by active descendant change, 'enter', & duplicate click
|
|
149
|
-
if (!mouseClick || activeDescendant?.id === id) {
|
|
150
|
-
onItemClick(id);
|
|
151
|
-
}
|
|
152
|
-
}, active: activeDescendant && activeDescendant.id === id }, id));
|
|
101
|
+
return (_jsx(EmailSummaryItem, { ref: tabRefs[i], id: id, role: 'tab', ...emailItemProps, onSelect: (selectedItemId) => {
|
|
102
|
+
setActiveItemId(selectedItemId);
|
|
103
|
+
onItemClick(selectedItemId);
|
|
104
|
+
}, active: activeItemId === id }, id));
|
|
153
105
|
}), loading && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] })) : (_jsx(EmptyState, { message: emptyMessage }))] }));
|
|
154
106
|
});
|
|
155
107
|
export default EmailSummaryList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailSummaryList.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createRef,\n useMemo,\n useState,\n useEffect,\n forwardRef,\n FunctionComponent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n registerIcon,\n MenuButton,\n useActiveDescendant,\n UseActiveDescendantConfig,\n useLazyDescendant,\n useConsolidatedRef,\n useI18n,\n menuHelpers,\n Progress,\n useItemIntersection,\n usePrevious,\n VisuallyHiddenText,\n EmptyState,\n calculateFontSize,\n StyledText\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\n\nimport { EmailSummaryListProps } from './Email.types';\nimport EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';\nimport { StyledLoadMore } from './Email.styles';\n\nregisterIcon(filterIcon);\n\nconst StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {\n return css`\n height: 100%;\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\nStyledEmailSummaryListContainer.defaultProps = defaultThemeProp;\n\nconst StyledEmailSummaryListHeader = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing}) ${theme.base.spacing};\n `;\n});\nStyledEmailSummaryListHeader.defaultProps = defaultThemeProp;\n\nconst StyledActionWrapper = styled(Flex)(({ theme }) => {\n return css`\n padding-block-start: ${theme.base.spacing};\n `;\n});\nStyledActionWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFilterButton = styled(Button)`\n margin-inline-start: auto;\n`;\n\nconst StyledEmailSummaryList = styled.div(({ theme }) => {\n return css`\n height: 100%;\n overflow-y: auto;\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus {\n ${StyledEmailSummaryItem}[data-current='true'] {\n box-shadow: inset ${theme.base.shadow.focus};\n }\n }\n `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nconst StyledWorklist = styled(MenuButton)(({ theme }) => {\n const { 'font-size': fontSize, 'font-scale': fontScale } = theme.base;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n return css`\n ${StyledText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: ${fontSizes.m};\n }\n `;\n});\n\nStyledWorklist.defaultProps = defaultThemeProp;\n\nconst EmailSummaryList: FunctionComponent<EmailSummaryListProps & ForwardProps> = forwardRef(\n (\n {\n loading = false,\n onLoadMore,\n categories,\n onCategoryClick,\n items,\n unreadEmailCount,\n filters,\n onFilterChange,\n onItemClick,\n emptyMessage,\n ...restProps\n },\n ref: EmailSummaryListProps['ref']\n ) => {\n const t = useI18n();\n const tablistRef = useConsolidatedRef(ref);\n const tabRefs = items.map(() => createRef<HTMLButtonElement>());\n const [focusReturnEl, setFocusReturnEl] = useState<HTMLElement | null>();\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [listHasBeenViewed, setListHasBeenViewed] = useState(false);\n const [clickOnInitialView, setClickOnInitialView] = useState(false);\n const prevEmail = usePrevious(items);\n const [announcement, setAnnouncement] = useState('');\n\n const uadConfig = useMemo<UseActiveDescendantConfig>(\n () => ({\n focusEl: tablistRef.current,\n scope: tablistRef.current,\n selector: 'button[role=\"tab\"]',\n focusReturnEl,\n clearFocusReturn: () => {\n setFocusReturnEl(null);\n },\n focusDescendantEl: focusDescendant,\n clearFocusDescendant: () => {\n setFocusDescendant(null);\n tablistRef.current?.focus();\n },\n pauseDescendantEvaluation: !listHasBeenViewed\n }),\n [tablistRef.current, focusDescendant, focusReturnEl, listHasBeenViewed]\n );\n\n const { activeDescendant, descendants } = useActiveDescendant(uadConfig, [items.length]);\n\n const previousActiveDescendant = usePrevious(activeDescendant);\n\n useLazyDescendant({\n loading,\n descendants,\n previousActiveDescendant,\n activeDescendant,\n focusReturnEl,\n setFocusReturnEl,\n scrollEl: tablistRef.current\n });\n\n // Trigger click of new active descendant\n useEffect(() => {\n const hasPreviousOrClickInitial = previousActiveDescendant || clickOnInitialView;\n\n if (hasPreviousOrClickInitial && activeDescendant) {\n activeDescendant.click();\n }\n }, [activeDescendant]);\n\n const buttonText = useMemo(() => {\n return (\n menuHelpers.getSelected(categories)[0]?.primary ??\n menuHelpers.flatten(categories)[0].primary\n );\n }, [categories]);\n\n useItemIntersection(\n tablistRef,\n items.length - 1,\n () => {\n onLoadMore?.();\n },\n ':scope > button[role=\"tab\"]'\n );\n\n useEffect(() => {\n if (loading) setAnnouncement(t('loading_email'));\n }, [loading]);\n\n useEffect(() => {\n if (prevEmail) {\n const difference = items.length - prevEmail.length;\n if (difference) setAnnouncement(t('new_emails_count', [difference], { count: difference }));\n }\n }, [items]);\n\n return (\n <StyledEmailSummaryListContainer container={{ direction: 'column' }} {...restProps}>\n <StyledEmailSummaryListHeader>\n <StyledActionWrapper container={{ alignItems: 'center', gap: 0.5 }}>\n <StyledWorklist\n text={buttonText}\n variant='text'\n menu={{\n mode: 'single-select',\n items: categories,\n onItemClick: onCategoryClick\n }}\n />\n {typeof unreadEmailCount === 'number' && (\n <Count\n aria-label={t('unread_email_count', [unreadEmailCount], {\n count: unreadEmailCount\n })}\n variant='default'\n >\n {unreadEmailCount}\n </Count>\n )}\n <StyledFilterButton variant='simple' label={t('email_filters')} icon>\n <Icon name='filter' />\n </StyledFilterButton>\n </StyledActionWrapper>\n </StyledEmailSummaryListHeader>\n\n {items.length > 0 ? (\n <StyledEmailSummaryList\n role='tablist'\n tabIndex={0}\n ref={tablistRef}\n onFocus={e => {\n if (!listHasBeenViewed && e.target.getAttribute('role') === 'tablist') {\n setClickOnInitialView(true);\n setListHasBeenViewed(true);\n }\n }}\n >\n <VisuallyHiddenText aria-live='polite'>{announcement}</VisuallyHiddenText>\n {items.map((emailItem, i) => {\n const { id, ...emailItemProps } = emailItem;\n return (\n <EmailSummaryItem\n ref={tabRefs[i]}\n id={id}\n key={id}\n role='tab'\n {...emailItemProps}\n onClick={(e: MouseEvent) => {\n const mouseClick = e.detail !== 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === 'tab'\n ? target\n : target.closest('button[role=\"tab\"]');\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n\n if (!listHasBeenViewed) {\n if (i === 0) setClickOnInitialView(true);\n setListHasBeenViewed(true);\n }\n }\n // Click is triggered by active descendant change, 'enter', & duplicate click\n if (!mouseClick || activeDescendant?.id === id) {\n onItemClick(id);\n }\n }}\n active={activeDescendant && activeDescendant.id === id}\n />\n );\n })}\n {loading && (\n <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n <Progress placement='inline' />\n </Flex>\n )}\n </StyledEmailSummaryList>\n ) : (\n <EmptyState message={emptyMessage} />\n )}\n </StyledEmailSummaryListContainer>\n );\n }\n);\n\nexport default EmailSummaryList;\n"]}
|
|
1
|
+
{"version":3,"file":"EmailSummaryList.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createRef,\n useMemo,\n useState,\n useEffect,\n forwardRef,\n FunctionComponent,\n useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Icon,\n registerIcon,\n MenuButton,\n useConsolidatedRef,\n useI18n,\n menuHelpers,\n Progress,\n useItemIntersection,\n usePrevious,\n VisuallyHiddenText,\n EmptyState,\n calculateFontSize,\n StyledText,\n useArrows,\n debounce\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\n\nimport { EmailSummaryItemProps, EmailSummaryListProps } from './Email.types';\nimport EmailSummaryItem, { StyledEmailSummaryItem } from './EmailSummaryItem';\nimport { StyledLoadMore } from './Email.styles';\n\nregisterIcon(filterIcon);\n\nconst StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {\n return css`\n height: 100%;\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\nStyledEmailSummaryListContainer.defaultProps = defaultThemeProp;\n\nconst StyledEmailSummaryListHeader = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing}) ${theme.base.spacing};\n `;\n});\nStyledEmailSummaryListHeader.defaultProps = defaultThemeProp;\n\nconst StyledActionWrapper = styled(Flex)(({ theme }) => {\n return css`\n padding-block-start: ${theme.base.spacing};\n `;\n});\nStyledActionWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFilterButton = styled(Button)`\n margin-inline-start: auto;\n`;\n\nconst StyledEmailSummaryList = styled.div(({ theme }) => {\n return css`\n height: 100%;\n overflow-y: auto;\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus {\n ${StyledEmailSummaryItem}[data-current='true'] {\n box-shadow: inset ${theme.base.shadow.focus};\n }\n }\n `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nconst StyledWorklist = styled(MenuButton)(({ theme }) => {\n const { 'font-size': fontSize, 'font-scale': fontScale } = theme.base;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n return css`\n ${StyledText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n font-size: ${fontSizes.m};\n }\n `;\n});\n\nStyledWorklist.defaultProps = defaultThemeProp;\n\nconst EmailSummaryList: FunctionComponent<EmailSummaryListProps & ForwardProps> = forwardRef(\n (\n {\n loading = false,\n onLoadMore,\n categories,\n onCategoryClick,\n items,\n unreadEmailCount,\n filters,\n onFilterChange,\n onItemClick,\n emptyMessage,\n ...restProps\n },\n ref: EmailSummaryListProps['ref']\n ) => {\n const t = useI18n();\n const tablistRef = useConsolidatedRef(ref);\n const tabRefs = items.map(() => createRef<HTMLButtonElement>());\n const prevEmail = usePrevious(items);\n const [announcement, setAnnouncement] = useState('');\n const [activeItemId, setActiveItemId] = useState<string | null>(null);\n\n useArrows(\n tablistRef,\n {\n cycle: true,\n selector: 'button[role=\"tab\"]',\n dir: 'up-down',\n allowTabFocus: true\n },\n [items]\n );\n\n const buttonText = useMemo(() => {\n return (\n menuHelpers.getSelected(categories)[0]?.primary ??\n menuHelpers.flatten(categories)[0].primary\n );\n }, [categories]);\n\n const handleLoadMore = useCallback(\n debounce(() => {\n if (!loading) {\n onLoadMore?.();\n }\n }, 200),\n [loading]\n );\n\n useItemIntersection(\n tablistRef,\n items.length - 1,\n handleLoadMore,\n ':scope > button[role=\"tab\"]'\n );\n\n useEffect(() => {\n if (loading) setAnnouncement(t('loading_email'));\n }, [loading]);\n\n useEffect(() => {\n if (prevEmail) {\n const difference = items.length - prevEmail.length;\n if (difference) setAnnouncement(t('new_emails_count', [difference], { count: difference }));\n }\n }, [items]);\n\n return (\n <StyledEmailSummaryListContainer container={{ direction: 'column' }} {...restProps}>\n <StyledEmailSummaryListHeader>\n <StyledActionWrapper container={{ alignItems: 'center', gap: 0.5 }}>\n <StyledWorklist\n text={buttonText}\n variant='text'\n menu={{\n mode: 'single-select',\n items: categories,\n onItemClick: onCategoryClick\n }}\n />\n {typeof unreadEmailCount === 'number' && (\n <Count\n aria-label={t('unread_email_count', [unreadEmailCount], {\n count: unreadEmailCount\n })}\n variant='default'\n >\n {unreadEmailCount}\n </Count>\n )}\n <StyledFilterButton variant='simple' label={t('email_filters')} icon>\n <Icon name='filter' />\n </StyledFilterButton>\n </StyledActionWrapper>\n </StyledEmailSummaryListHeader>\n\n {items.length > 0 ? (\n <StyledEmailSummaryList role='tablist' tabIndex={-1} ref={tablistRef}>\n <VisuallyHiddenText aria-live='polite'>{announcement}</VisuallyHiddenText>\n {items.map((emailItem, i) => {\n const { id, ...emailItemProps } = emailItem;\n return (\n <EmailSummaryItem\n ref={tabRefs[i]}\n id={id}\n key={id}\n role='tab'\n {...emailItemProps}\n onSelect={(selectedItemId: EmailSummaryItemProps['id']) => {\n setActiveItemId(selectedItemId);\n onItemClick(selectedItemId);\n }}\n active={activeItemId === id}\n />\n );\n })}\n {loading && (\n <Flex container={{ justify: 'center' }} as={StyledLoadMore}>\n <Progress placement='inline' />\n </Flex>\n )}\n </StyledEmailSummaryList>\n ) : (\n <EmptyState message={emptyMessage} />\n )}\n </StyledEmailSummaryListContainer>\n );\n }\n);\n\nexport default EmailSummaryList;\n"]}
|
|
@@ -2,10 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
|
|
|
2
2
|
import { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';
|
|
3
3
|
import { MenuItemProps } from '@pega/cosmos-react-core';
|
|
4
4
|
export interface FeedContextValue {
|
|
5
|
-
searchTypes?:
|
|
6
|
-
type: string;
|
|
7
|
-
component?: 'button' | 'link';
|
|
8
|
-
}[];
|
|
5
|
+
searchTypes?: string[];
|
|
9
6
|
onSearch?: (e: {
|
|
10
7
|
type: 'mention' | 'tag';
|
|
11
8
|
search: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Feed.context.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE
|
|
1
|
+
{"version":3,"file":"Feed.context.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACzF,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;IAC5F,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;KACjB,CAAC;IACF,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,WAAW,2CAItB,CAAC;AAEH,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,gDAA2C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Feed.context.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAyBhE,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext, Dispatch, SetStateAction } from 'react';\n\nimport { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';\nimport { MenuItemProps } from '@pega/cosmos-react-core';\n\nexport interface FeedContextValue {\n searchTypes?:
|
|
1
|
+
{"version":3,"file":"Feed.context.js","sourceRoot":"","sources":["../../../src/components/Feed/Feed.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAyBhE,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext, Dispatch, SetStateAction } from 'react';\n\nimport { InteractionRenderers, MDMap } from '@pega/cosmos-react-rte';\nimport { MenuItemProps } from '@pega/cosmos-react-core';\n\nexport interface FeedContextValue {\n searchTypes?: string[];\n onSearch?: (e: { type: 'mention' | 'tag'; search: string; mentionType: string }) => void;\n searchResults?: MenuItemProps[];\n showSearchResults?: boolean;\n setShowSearchResults?: Dispatch<SetStateAction<boolean>>;\n onMentionClick?: (e: { id: string; text: string; type: string }) => JSX.Element | undefined;\n onMentionPreview?: (e: { id: string; text: string; type: string }) => void;\n onTagClick?: (tag: string) => void;\n interactionRenderers?: InteractionRenderers[];\n markdownMap?: MDMap;\n userInfo: {\n username: string;\n fullname: string;\n avatarSrc?: string;\n meta?: string[];\n };\n announce: (announcement: string) => void;\n}\n\nexport const FeedContext = createContext<FeedContextValue>({\n searchTypes: [],\n userInfo: { username: '', fullname: '' },\n announce: () => {}\n});\n\nexport interface FeedReplyContextValue {\n onShowReplyInput?: () => void;\n}\n\nexport const FeedReplyContext = createContext<FeedReplyContextValue>({});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeedRichText.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAO,YAAY,EAAW,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;AAOlG,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,CAAC;IAC/F,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"FeedRichText.d.ts","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAO,YAAY,EAAW,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;AAOlG,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,CAAC;IAC/F,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAmItD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -10,7 +10,7 @@ const FeedRichText = forwardRef((props, ref) => {
|
|
|
10
10
|
const { searchTypes = [], onSearch, searchResults = [], showSearchResults, setShowSearchResults } = useContext(FeedContext);
|
|
11
11
|
const [triggerType, setTriggerType] = useState('mention');
|
|
12
12
|
const [showMentionType, setShowMentionType] = useState(false);
|
|
13
|
-
const searchType = useRef(
|
|
13
|
+
const searchType = useRef('');
|
|
14
14
|
const t = useI18n();
|
|
15
15
|
const onDecoSearch = (event) => {
|
|
16
16
|
const trigger = event.trigger === '@' ? 'mention' : 'tag';
|
|
@@ -20,7 +20,7 @@ const FeedRichText = forwardRef((props, ref) => {
|
|
|
20
20
|
}
|
|
21
21
|
else {
|
|
22
22
|
setShowMentionType(false);
|
|
23
|
-
onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current
|
|
23
|
+
onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current });
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
const onKeyDown = (event) => {
|
|
@@ -30,27 +30,23 @@ const FeedRichText = forwardRef((props, ref) => {
|
|
|
30
30
|
};
|
|
31
31
|
const typesMenu = {
|
|
32
32
|
onItemActive: (id) => {
|
|
33
|
-
searchType.current =
|
|
34
|
-
type: id,
|
|
35
|
-
component: searchTypes.find(x => x.type === id)?.component || 'button'
|
|
36
|
-
};
|
|
33
|
+
searchType.current = id;
|
|
37
34
|
},
|
|
38
35
|
onItemClick: (id) => {
|
|
39
|
-
searchType.current =
|
|
40
|
-
type: id,
|
|
41
|
-
component: searchTypes.find(x => x.type === id)?.component || 'button'
|
|
42
|
-
};
|
|
36
|
+
searchType.current = id;
|
|
43
37
|
setShowMentionType(false);
|
|
44
38
|
onSearch?.({ type: 'mention', search: '', mentionType: id });
|
|
45
39
|
},
|
|
46
|
-
items: searchTypes.map(
|
|
40
|
+
items: searchTypes.map(type => {
|
|
47
41
|
return { id: type, primary: cap(type) };
|
|
48
42
|
})
|
|
49
43
|
};
|
|
50
44
|
const searchMenu = searchResults.length && showSearchResults
|
|
51
45
|
? {
|
|
52
|
-
header: triggerType === 'mention' ? t('mention_type', [searchType.current
|
|
53
|
-
items: searchResults
|
|
46
|
+
header: triggerType === 'mention' ? t('mention_type', [searchType.current]) : '',
|
|
47
|
+
items: searchResults.map(res => {
|
|
48
|
+
return { ...res, href: undefined };
|
|
49
|
+
})
|
|
54
50
|
}
|
|
55
51
|
: undefined;
|
|
56
52
|
const getSearchAttributes = (searchResult) => {
|
|
@@ -67,11 +63,11 @@ const FeedRichText = forwardRef((props, ref) => {
|
|
|
67
63
|
const id = searchResult.groups.id;
|
|
68
64
|
const text = searchResult.groups.text;
|
|
69
65
|
const type = searchResult.groups.type;
|
|
70
|
-
const
|
|
66
|
+
const href = searchResult.groups.href || '';
|
|
71
67
|
return {
|
|
72
68
|
markdown: searchResult.groups.match,
|
|
73
69
|
component: MentionButtonConfig.component,
|
|
74
|
-
props: { id, text, type,
|
|
70
|
+
props: { id, text, type, href },
|
|
75
71
|
text
|
|
76
72
|
};
|
|
77
73
|
}
|
|
@@ -85,13 +81,19 @@ const FeedRichText = forwardRef((props, ref) => {
|
|
|
85
81
|
return undefined;
|
|
86
82
|
return {
|
|
87
83
|
markdown: triggerType === 'mention'
|
|
88
|
-
?
|
|
84
|
+
? `@[${item.id}]:[${item.primary}]:[${searchType.current}]:${item.href ? `[${item.href}]:` : ''}`
|
|
89
85
|
: `#${item.id}:`,
|
|
90
86
|
component: triggerType === 'mention'
|
|
91
87
|
? MentionButtonConfig.component
|
|
92
88
|
: HashtagButtonConfig.component,
|
|
93
89
|
props: triggerType === 'mention'
|
|
94
|
-
? {
|
|
90
|
+
? {
|
|
91
|
+
id: item.id,
|
|
92
|
+
text: item.primary,
|
|
93
|
+
type: searchType.current,
|
|
94
|
+
href: item.href,
|
|
95
|
+
tabIndex: -1
|
|
96
|
+
}
|
|
95
97
|
: { tag: item.primary, tabIndex: -1 },
|
|
96
98
|
text: item.primary
|
|
97
99
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeedRichText.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAE,UAAU,EAAO,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,GAAG,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,cAAc,EAA4C,MAAM,wBAAwB,CAAC;AAElG,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,KAAwB,EAAE,GAA6B,EAAE,EAAE;IAC1D,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,EACJ,WAAW,GAAG,EAAE,EAChB,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,iBAAiB,EACjB,oBAAoB,EACrB,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAoB,SAAS,CAAC,CAAC;IAC7E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"FeedRichText.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, forwardRef, Ref, useState, useRef } from 'react';\n\nimport { cap, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { MentionButtonConfig } from '../MentionButton';\nimport { HashtagButtonConfig } from '../HashtagButton';\n\nimport { FeedContext } from './Feed.context';\n\nexport interface FeedRichTextProps\n extends Pick<RichTextEditorProps, 'onChange' | 'onFocus' | 'onBlur' | 'placeholder' | 'height'> {\n onSubmit: () => void;\n}\n\nconst FeedRichText: FC<FeedRichTextProps & ForwardProps> = forwardRef(\n (props: FeedRichTextProps, ref: Ref<RichTextEditorState>) => {\n const { onSubmit, height = { min: 'auto' }, ...restProps } = props;\n const {\n searchTypes = [],\n onSearch,\n searchResults = [],\n showSearchResults,\n setShowSearchResults\n } = useContext(FeedContext);\n const [triggerType, setTriggerType] = useState<'mention' | 'tag'>('mention');\n const [showMentionType, setShowMentionType] = useState(false);\n const searchType = useRef('');\n const t = useI18n();\n\n const onDecoSearch = (event: { search: string; trigger: string }) => {\n const trigger = event.trigger === '@' ? 'mention' : 'tag';\n setTriggerType(trigger);\n if (trigger === 'mention' && event.search === '') {\n setShowMentionType(true);\n } else {\n setShowMentionType(false);\n onSearch?.({ type: trigger, search: event.search, mentionType: searchType.current });\n }\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n setShowSearchResults?.(true);\n if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') onSubmit();\n };\n\n const typesMenu = {\n onItemActive: (id: string) => {\n searchType.current = id;\n },\n onItemClick: (id: string) => {\n searchType.current = id;\n setShowMentionType(false);\n onSearch?.({ type: 'mention', search: '', mentionType: id });\n },\n items: searchTypes.map(type => {\n return { id: type, primary: cap(type) };\n })\n };\n\n const searchMenu =\n searchResults.length && showSearchResults\n ? {\n header: triggerType === 'mention' ? t('mention_type', [searchType.current]) : '',\n items: searchResults.map(res => {\n return { ...res, href: undefined };\n })\n }\n : undefined;\n\n const getSearchAttributes = (searchResult: RegExpExecArray) => {\n if (searchResult.groups) {\n if (searchResult.groups.tag) {\n const tag = searchResult.groups.tag;\n\n return {\n markdown: searchResult.groups.match,\n component: HashtagButtonConfig.component,\n props: { tag },\n text: tag\n };\n }\n\n const id = searchResult.groups.id;\n const text = searchResult.groups.text;\n const type = searchResult.groups.type;\n const href = searchResult.groups.href || '';\n\n return {\n markdown: searchResult.groups.match,\n component: MentionButtonConfig.component,\n props: { id, text, type, href },\n text\n };\n }\n };\n\n return (\n <RichTextEditor\n {...restProps}\n markdownOnly\n onKeyDown={onKeyDown}\n ref={ref}\n height={height}\n searchTriggers={[\n { trigger: '@', regex: String.raw`(?:\\S+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\S]?|)` },\n { trigger: '#', regex: String.raw`[^\\s,]*` }\n ]}\n getSearchItemReplacement={(id: string) => {\n const item = searchResults?.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown:\n triggerType === 'mention'\n ? `@[${item.id}]:[${item.primary}]:[${searchType.current}]:${\n item.href ? `[${item.href}]:` : ''\n }`\n : `#${item.id}:`,\n component:\n triggerType === 'mention'\n ? MentionButtonConfig.component\n : HashtagButtonConfig.component,\n props:\n triggerType === 'mention'\n ? {\n id: item.id,\n text: item.primary,\n type: searchType.current,\n href: item.href,\n tabIndex: -1\n }\n : { tag: item.primary, tabIndex: -1 },\n text: item.primary\n };\n }}\n searchRenderers={[\n { regexPattern: MentionButtonConfig.regexPattern, getSearchAttributes },\n { regexPattern: HashtagButtonConfig.regexPattern, getSearchAttributes }\n ]}\n onSearch={onDecoSearch}\n menu={showMentionType ? typesMenu : searchMenu}\n />\n );\n }\n);\n\nexport default FeedRichText;\n"]}
|
|
@@ -9,8 +9,8 @@ interface MentionButtonProps {
|
|
|
9
9
|
text?: string;
|
|
10
10
|
/** Designates the type of the mention for proper handling on click. */
|
|
11
11
|
type?: string;
|
|
12
|
-
/**
|
|
13
|
-
|
|
12
|
+
/** If an href is provided, render a link. Otherwise, render a button. */
|
|
13
|
+
href?: string;
|
|
14
14
|
}
|
|
15
15
|
declare const MentionButton: FunctionComponent<MentionButtonProps & ForwardProps>;
|
|
16
16
|
export declare const MentionButtonConfig: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionButton.d.ts","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAIjC,UAAU,kBAAkB;IAC1B,4EAA4E;IAC5E,QAAQ,EAAE,eAAe,GAAG,YAAY,CAAC;IACzC,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,
|
|
1
|
+
{"version":3,"file":"MentionButton.d.ts","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,YAAY,EAKb,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAIjC,UAAU,kBAAkB;IAC1B,4EAA4E;IAC5E,QAAQ,EAAE,eAAe,GAAG,YAAY,CAAC;IACzC,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAkBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqGvE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;CAK/B,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -17,7 +17,7 @@ const StyledLink = styled(Link) `
|
|
|
17
17
|
text-decoration: underline;
|
|
18
18
|
}
|
|
19
19
|
`;
|
|
20
|
-
const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp = '', type: typeProp = '',
|
|
20
|
+
const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp = '', type: typeProp = '', href: hrefProp = '', ...restProps }, ref) => {
|
|
21
21
|
const { onMentionClick, onMentionPreview } = useContext(FeedContext);
|
|
22
22
|
const [showPopover, setShowPopover] = useState(false);
|
|
23
23
|
const [mentionContent, setMentionContent] = useState();
|
|
@@ -31,7 +31,7 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
|
|
|
31
31
|
let id = '';
|
|
32
32
|
let text = '';
|
|
33
33
|
let type = '';
|
|
34
|
-
let
|
|
34
|
+
let href = '';
|
|
35
35
|
if (!isValidElement(children)) {
|
|
36
36
|
if (!children.groups)
|
|
37
37
|
return _jsx("span", { children: children[0] });
|
|
@@ -39,13 +39,13 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
|
|
|
39
39
|
id = children.groups.id;
|
|
40
40
|
text = children.groups.text;
|
|
41
41
|
type = children.groups.type;
|
|
42
|
-
|
|
42
|
+
href = children.groups.href || '';
|
|
43
43
|
}
|
|
44
44
|
else {
|
|
45
45
|
id = idProp;
|
|
46
46
|
text = textProp;
|
|
47
47
|
type = typeProp;
|
|
48
|
-
|
|
48
|
+
href = hrefProp;
|
|
49
49
|
}
|
|
50
50
|
const handleClick = () => {
|
|
51
51
|
const comp = onMentionClick?.({
|
|
@@ -57,17 +57,17 @@ const MentionButton = forwardRef(({ children, id: idProp = '', text: textProp =
|
|
|
57
57
|
setShowPopover(true);
|
|
58
58
|
setMentionContent(comp);
|
|
59
59
|
};
|
|
60
|
-
return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }),
|
|
60
|
+
return (_jsxs(_Fragment, { children: [leadingChar && _jsx("span", { children: leadingChar }), href ? (_jsx(StyledLink, { ...restProps, ref: mentionRef, href: href, previewable: !!onMentionPreview, onPreview: onMentionPreview
|
|
61
61
|
? () => onMentionPreview({
|
|
62
62
|
id,
|
|
63
63
|
text,
|
|
64
64
|
type
|
|
65
65
|
})
|
|
66
|
-
: undefined, spellCheck: false, children: isValidElement(children) ? children : text })), trailingChar && _jsx("span", { children: trailingChar }), _jsx(Popover, { ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', arrow: true, children: mentionContent })] }));
|
|
66
|
+
: undefined, spellCheck: false, children: isValidElement(children) ? children : text })) : (_jsx(StyledButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: isValidElement(children) ? children : text })), trailingChar && _jsx("span", { children: trailingChar }), _jsx(Popover, { ref: popoverRef, show: showPopover, target: mentionRef.current, placement: 'bottom-start', arrow: true, children: mentionContent })] }));
|
|
67
67
|
});
|
|
68
68
|
export const MentionButtonConfig = {
|
|
69
69
|
type: 'mention',
|
|
70
|
-
regexPattern: /(?:^|)(?<match
|
|
70
|
+
regexPattern: /(?:^|)(?<match>@\[(?<id>[^ [\]]+)\]:\[(?<text>[^[\]]+)\]:\[(?<type>[^[\]]+)\]:(?:\[(?<href>[^ [\]]+)\]:)?)/g,
|
|
71
71
|
component: MentionButton
|
|
72
72
|
};
|
|
73
73
|
export default MentionButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EAId,UAAU,EACV,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EAEN,IAAI,EACJ,OAAO,EACP,kBAAkB,EAClB,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAenD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;CAMlC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAM9B,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,QAAQ,EACR,EAAE,EAAE,MAAM,GAAG,EAAE,EACf,IAAI,EAAE,QAAQ,GAAG,EAAE,EACnB,IAAI,EAAE,QAAQ,GAAG,EAAE,EACnB,
|
|
1
|
+
{"version":3,"file":"MentionButton.js","sourceRoot":"","sources":["../../../src/components/MentionButton/MentionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n isValidElement,\n PropsWithoutRef,\n ReactElement,\n Ref,\n useContext,\n useRef,\n useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n ForwardProps,\n Link,\n Popover,\n useConsolidatedRef,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface MentionButtonProps {\n /** Text for the button, or a regex match containing all necessary props. */\n children: RegExpExecArray | ReactElement;\n /** The id of the mention. */\n id?: string;\n /** The text of the mention button. */\n text?: string;\n /** Designates the type of the mention for proper handling on click. */\n type?: string;\n /** If an href is provided, render a link. Otherwise, render a button. */\n href?: string;\n}\n\nconst StyledButton = styled(Button)`\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n`;\n\nconst StyledLink = styled(Link)`\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n`;\n\nconst MentionButton: FunctionComponent<MentionButtonProps & ForwardProps> = forwardRef(\n (\n {\n children,\n id: idProp = '',\n text: textProp = '',\n type: typeProp = '',\n href: hrefProp = '',\n ...restProps\n }: PropsWithoutRef<MentionButtonProps>,\n ref: Ref<HTMLButtonElement>\n ) => {\n const { onMentionClick, onMentionPreview } = useContext(FeedContext);\n const [showPopover, setShowPopover] = useState(false);\n const [mentionContent, setMentionContent] = useState<JSX.Element | undefined>();\n const mentionRef = useConsolidatedRef(ref);\n const popoverRef = useRef(null);\n\n useOuterEvent(['click', 'focusin'], [mentionRef, popoverRef], () => {\n setShowPopover(false);\n });\n\n let leadingChar = '';\n let trailingChar = '';\n let id = '';\n let text = '';\n let type = '';\n let href = '';\n\n if (!isValidElement(children)) {\n if (!children.groups) return <span>{children[0]}</span>;\n\n [leadingChar, trailingChar] = children[0].split(children.groups.match);\n id = children.groups.id;\n text = children.groups.text;\n type = children.groups.type;\n href = children.groups.href || '';\n } else {\n id = idProp;\n text = textProp;\n type = typeProp;\n href = hrefProp;\n }\n\n const handleClick = () => {\n const comp = onMentionClick?.({\n id,\n text,\n type\n });\n if (comp) setShowPopover(true);\n setMentionContent(comp);\n };\n\n return (\n <>\n {leadingChar && <span>{leadingChar}</span>}\n {href ? (\n <StyledLink\n {...restProps}\n ref={mentionRef}\n href={href}\n previewable={!!onMentionPreview}\n onPreview={\n onMentionPreview\n ? () =>\n onMentionPreview({\n id,\n text,\n type\n })\n : undefined\n }\n spellCheck={false}\n >\n {isValidElement(children) ? children : text}\n </StyledLink>\n ) : (\n <StyledButton\n {...restProps}\n ref={mentionRef}\n variant='link'\n onClick={handleClick}\n spellCheck={false}\n >\n {isValidElement(children) ? children : text}\n </StyledButton>\n )}\n {trailingChar && <span>{trailingChar}</span>}\n <Popover\n ref={popoverRef}\n show={showPopover}\n target={mentionRef.current}\n placement='bottom-start'\n arrow\n >\n {mentionContent}\n </Popover>\n </>\n );\n }\n);\n\nexport const MentionButtonConfig = {\n type: 'mention',\n regexPattern:\n /(?:^|)(?<match>@\\[(?<id>[^ [\\]]+)\\]:\\[(?<text>[^[\\]]+)\\]:\\[(?<type>[^[\\]]+)\\]:(?:\\[(?<href>[^ [\\]]+)\\]:)?)/g,\n component: MentionButton\n};\n\nexport default MentionButton;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-social",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.16.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-rte": "3.0.0-dev.
|
|
25
|
-
"@pega/cosmos-react-work": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.16.0",
|
|
24
|
+
"@pega/cosmos-react-rte": "3.0.0-dev.16.0",
|
|
25
|
+
"@pega/cosmos-react-work": "3.0.0-dev.16.0",
|
|
26
26
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
27
27
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
28
28
|
"@types/styled-components": "^5.1.7",
|