@pega/cosmos-react-demos 3.0.0-dev.4.1 → 3.0.0-dev.4.2

package/lib/social/Email/Email.stories.js

@@ -1,156 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useContext, createRef } from 'react';
+// cSpell:words calibri
+import { useState, useRef, useContext, useCallback } from 'react';
 import { action } from '@storybook/addon-actions';
-import { array, boolean } from '@storybook/addon-knobs';
-import styled, { css } from 'styled-components';
-import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, hasProp, Flex, Button, ModalManagerContext, Modal, menuHelpers, defaultThemeProp, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel } from '@pega/cosmos-react-core';
+import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, ModalManagerContext, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
-import { Email, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList } from '@pega/cosmos-react-social';
-import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, EmailMockData, viewAnalysisEmailHeaderMock, topicListMock } from './Email.mocks';
+import { Email as EmailComponent, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList } from '@pega/cosmos-react-social';
+import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, viewAnalysisEmailHeaderMock, topicListMock, emailActions, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, launchEmailComposer, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates } from './Email.mocks';
+import { StyledEmailCardContent, StyledViewAnalysis } from './Email.styles';
 registerIcon(filterIcon);
 export default {
     title: 'Social/Email',
-    component: Email
+    component: EmailComponent
 };
-const { emails: mockEmails, suggestedReplies: mockSuggestedReplies, emailBodyTemplates: mockEmailBodyTemplates } = EmailMockData;
-const handleExternalEntry = (filterValue) => {
-    const pattern = /^[\w.\-_]+@[a-zA-Z]+(\.[a-zA-Z]{2,3}){1,2}$/;
-    const matched = filterValue.match(pattern);
-    return !!matched?.input;
-};
-const templates = mockEmailBodyTemplates.map(({ id, title }) => {
-    return {
-        id,
-        title
-    };
-});
-const baseComposerProps = {
-    participants,
-    externalValidator: handleExternalEntry,
-    to: {
-        reply: toParticipants.slice(0, 1),
-        replyAll: toParticipants
-    },
-    cc: ccParticipants,
-    subject: '',
-    bodyContent: '',
-    onSend: action('On Send'),
-    onCancel: () => {
-        action('cancelled email composing');
-    },
-    templates
-};
-var LaunchAction;
-(function (LaunchAction) {
-    LaunchAction[LaunchAction["REPLY"] = 0] = "REPLY";
-    LaunchAction[LaunchAction["REPLYALL"] = 1] = "REPLYALL";
-    LaunchAction[LaunchAction["SUGGESTION"] = 2] = "SUGGESTION";
-    LaunchAction[LaunchAction["FORWARD"] = 3] = "FORWARD";
-})(LaunchAction || (LaunchAction = {}));
-const composerModals = {};
-const getCompositeId = (id, launchAction) => {
-    return `${id}-${launchAction}`;
-};
-const handleComposerCancel = (compositeID) => {
-    composerModals[compositeID]?.dismissModal();
-    composerModals[compositeID]?.unMountModal();
-    delete composerModals[compositeID];
-};
-const launchEmailComposer = (id, launchAction, composerProps, create) => {
-    const compositeId = getCompositeId(id, launchAction);
-    const composerRef = createRef();
-    const modalControls = create(() => {
-        return (_jsx(Modal, { heading: composerProps.subject, options: { id: { compositeId } }, children: _jsx(EmailComposer, { ...composerProps, ref: composerRef, onCancel: () => handleComposerCancel(compositeId) }, void 0) }, void 0));
-    }, { center: true }, { minimizable: true, maximizable: true, dockable: true });
-    composerModals[compositeId] = {
-        dismissModal: modalControls.dismiss,
-        unMountModal: modalControls.unmount,
-        composerRef
-    };
-};
-const emailActions = (_jsx(MenuButton, { text: 'Email actions', variant: 'simple', icon: 'more', iconOnly: true, menu: {
-        items: [
-            {
-                id: createUID(),
-                primary: 'Reply',
-                onClick: action('On reply')
-            },
-            {
-                id: createUID(),
-                primary: 'Reply all',
-                onClick: action('On reply all')
-            },
-            {
-                id: createUID(),
-                primary: 'Forward',
-                onClick: action('Forward')
-            }
-        ]
-    } }, void 0));
-const emailDemoActions = (create, subject, onTemplateChange) => {
-    const id = createUID();
-    return (_jsx(MenuButton, { text: 'Email actions', variant: 'simple', icon: 'more', iconOnly: true, menu: {
-            items: [
-                {
-                    id: createUID(),
-                    primary: 'Reply',
-                    onClick: () => launchEmailComposer(id, LaunchAction.REPLY, {
-                        ...baseComposerProps,
-                        onTemplateChange,
-                        responseType: 'reply',
-                        subject: `Re-${subject}` || ''
-                    }, create)
-                },
-                {
-                    id: createUID(),
-                    primary: 'Reply all',
-                    onClick: () => launchEmailComposer(id, LaunchAction.REPLYALL, {
-                        ...baseComposerProps,
-                        onTemplateChange,
-                        responseType: 'replyAll',
-                        cc: [],
-                        subject: `Re-${subject}` || ''
-                    }, create)
-                },
-                {
-                    id: createUID(),
-                    primary: 'Forward',
-                    onClick: () => launchEmailComposer(id, LaunchAction.FORWARD, {
-                        ...baseComposerProps,
-                        onTemplateChange,
-                        responseType: 'forward',
-                        subject: `Fw-${subject}` || ''
-                    }, create)
-                }
-            ]
-        } }, void 0));
-};
-const generateEmailConversationParticipants = (emails, fields) => {
-    let l;
-    if (fields) {
-        l = [...fields];
-    }
-    else {
-        l = ['from', 'to', 'cc', 'bcc'];
-    }
-    const emailUsers = emails.map(emailItem => {
-        return l.map(n => {
-            if (hasProp(emailItem, n)) {
-                return emailItem[n];
-            }
-            return [];
-        });
-    });
-    return [...new Set(Array.from(emailUsers).flat(2))];
-};
-const StyledEmailCardContent = styled(CardContent)(({ theme }) => {
-    return css `
-    &&&& {
-      padding: calc(2 * ${theme.base.spacing}) 0;
-    }
-  `;
-});
-StyledEmailCardContent.defaultProps = defaultThemeProp;
 /*
 
    _____                 _ _
@@ -161,17 +22,17 @@ StyledEmailCardContent.defaultProps = defaultThemeProp;
 
 
 */
-export const email = () => {
-    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(Email, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div> Hi, <br /> <br /> <div>Sure.. Here is your E-Ticket(H-765437) !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>', subject: 'I have a quick question on travel', onReply: action('On reply'), onReplyAll: action('On reply all'), onForward: action('On forward'), onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
+export const Email = (args) => {
+    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(EmailComponent, { id: createUID(), timeStamp: '2022-02-24T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div> Hi Team, <br /> <br /> <div>Please find the below conversation & let us know the best fare (including taxes) per person.</div><br />Regards, <br /> Laura Stevens </div>', forwardedContent: args.forwardedContent, subject: 'Regarding flight booking', onReply: action('On reply'), onReplyAll: action('On reply all'), onForward: action('On forward'), onSuggestionClick: action('On Suggested reply clicked'), sentiment: {
                     variant: 'positive'
                 }, actions: emailActions, suggestions: mockSuggestedReplies, attachments: [
                     {
-                        id: createUID(),
+                        id: 'attachment_0',
                         value: 'https://pega.com/media/document.doc',
                         displayText: 'Policy document'
                     },
                     {
-                        id: createUID(),
+                        id: 'attachment_1',
                         value: 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg',
                         displayText: 'E-Ticket'
                     }
@@ -183,9 +44,30 @@ export const email = () => {
                     };
                 }) }, void 0) }, void 0) }, void 0));
 };
-const StyledViewAnalysis = styled.div `
-  width: 18rem;
-`;
+Email.args = {
+    // eslint-disable-next-line demo-patterns/literal-args
+    forwardedContent: `
+  <div id="pega-email-message-forward" style="font-family:OpenSans,sans-serif; border-left: 1px solid #c4c4c4; padding-left: 8px;">
+     <div>
+        <p class="pega-email-forward-header" style="font-size:smaller;color:#90909D;">--------------------Forwarded message--------------------<br />From: Person, Example &lt;example.person@pega.com&gt; &nbsp;<br />Date: Feb 23, 2022 9:29:59 PM&nbsp;<br />Subject: Regarding flight booking &nbsp;<br />To: Laura, Stevens &lt;laurastevens@example.com&gt;<br />&nbsp;</p>
+     </div>
+     <div class="pega-email-forward-content">
+        <div class="WordSection1">
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Hi,&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">&nbsp;&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">I need to book a flight from Hyderabad to Chennai.&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Please let me know the fare including taxes per each person. </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">&nbsp;&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Thanks,&nbsp; </span></p>
+           <p class="MsoNormal" style="margin:0cm;font-size:11pt;font-family:'calibri' , sans-serif"><span style="color:black">Goutham </span></p>
+        </div>
+     </div>
+  </div>
+`
+};
+Email.argTypes = {
+    forwardedContent: { control: { type: 'text' } }
+};
 export const ViewAnalysis = () => {
     const headerProps = {
         icon: 'list-number',
@@ -200,18 +82,9 @@ export const ViewAnalysis = () => {
     });
     return (_jsx(StyledViewAnalysis, { children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(EntityList, { header: headerProps, content: EntityListMockData }, void 0), _jsxs(Card, { children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'document-doc' }, void 0), _jsx(Text, { variant: 'h3', children: "Email header" }, void 0)] }, void 0), _jsx(CardContent, { children: _jsx(FieldValueList, { fields: viewAnalysisEmailHeaderMock, variant: 'stacked' }, void 0) }, void 0)] }, void 0), _jsx(SummaryList, { name: 'Topics', icon: 'headline', items: itemsToRender, noItemsText: 'No items' }, void 0)] }, void 0) }, void 0));
 };
-/*
-  ______                 _ _   ______       _   _ _   _
- |  ____|               (_) | |  ____|     | | (_) | (_)
- | |__   _ __ ___   __ _ _| | | |__   _ __ | |_ _| |_ _  ___  ___
- |  __| | '_ ` _ \ / _` | | | |  __| | '_ \| __| | __| |/ _ \/ __|
- | |____| | | | | | (_| | | | | |____| | | | |_| | |_| |  __/\__ \
- |______|_| |_| |_|\__,_|_|_| |______|_| |_|\__|_|\__|_|\___||___/
-
-*/
-export const emailEntities = () => {
+export const EmailEntities = (args) => {
     const nestedEntities = ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil'];
-    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(Email, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, <b><i>Nagercoil</i></b> branch, with code <b><a href="www.google.com"><i>3967</i></a></b>. I have a saving bank account here. My account number is <i>6785420965476</i>.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>', entityHighlightMapping: boolean('Entity Highlighting', true)
+    return (_jsx(Card, { children: _jsx(StyledEmailCardContent, { children: _jsx(EmailComponent, { id: createUID(), timeStamp: '2021-01-05T09:12', from: mockEmails['Laura Stevens'], cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']], bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']], to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']], body: '<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, <b><i>Nagercoil</i></b> branch, with code <b><a href="www.google.com"><i>3967</i></a></b>. I have a saving bank account here. My account number is <i>6785420965476</i>.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>', entityHighlightMapping: args.enableEntityHighlighting
                     ? [
                         {
                             value: '3967',
@@ -270,22 +143,22 @@ export const emailEntities = () => {
                             description: 'Date'
                         }
                     ]
-                    : undefined, contextMenu: boolean('Copy to context menu fields', true)
+                    : undefined, contextMenu: args.enableContextMenu
                     ? {
                         heading: 'Copy to',
                         items: [
                             {
-                                id: createUID(),
+                                id: 'item_0',
                                 primary: 'Field 1',
                                 selected: false
                             },
                             {
-                                id: createUID(),
+                                id: 'item_1',
                                 primary: 'Field 2',
                                 selected: true
                             },
                             {
-                                id: createUID(),
+                                id: 'item_2',
                                 primary: 'Field 3',
                                 selected: true
                             }
@@ -296,6 +169,14 @@ export const emailEntities = () => {
                     variant: 'neutral'
                 }, actions: emailActions, suggestions: mockSuggestedReplies }, void 0) }, void 0) }, void 0));
 };
+EmailEntities.args = {
+    enableEntityHighlighting: true,
+    enableContextMenu: true
+};
+EmailEntities.argTypes = {
+    enableEntityHighlighting: { control: { type: 'boolean' } },
+    enableContextMenu: { control: { type: 'boolean' } }
+};
 /*
 
    _____                 _ _    ____                                    _   _
@@ -309,7 +190,7 @@ export const emailEntities = () => {
 export const emailConversation = () => {
     const emailArr = [
         {
-            id: createUID(),
+            id: 'item_0',
             timeStamp: '2021-01-05T09:12',
             from: mockEmails['Laura Stevens'],
             cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
@@ -324,7 +205,7 @@ export const emailConversation = () => {
             suggestions: mockSuggestedReplies
         },
         {
-            id: createUID(),
+            id: 'item_1',
             timeStamp: '2021-01-02T03:12',
             from: mockEmails['Sara Davis'],
             cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
@@ -393,21 +274,12 @@ export const EmailComposerDemo = () => {
                         }
                     } }, void 0)] }, void 0) }, void 0));
 };
-/*
-
-   _____                 _ _       _          _ _
-  | ____|_ __ ___   __ _(_) |  ___| |__   ___| | |
-  |  _| | '_ ` _ \ / _` | | | / __| '_ \ / _ \ | |
-  | |___| | | | | | (_| | | | \__ \ | | |  __/ | |
-  |_____|_| |_| |_|\__,_|_|_| |___/_| |_|\___|_|_|
-
-*/
-export const EmailDemo = ({ hideSuggestions }) => {
+export const EmailDemo = (args) => {
     const onTemplateChange = id => {
         const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === id);
         return selectedTemplate?.content;
     };
-    const actions = array('Actions', ['Transfer', 'End conversation']).map(name => ({
+    const actions = ['Transfer', 'End conversation'].map(name => ({
         primary: name,
         id: name,
         onClick: action(`Clicked ${name}`)
@@ -415,22 +287,22 @@ export const EmailDemo = ({ hideSuggestions }) => {
     const { create } = useContext(ModalManagerContext);
     const emailsData = [
         {
-            id: createUID(),
+            id: 'item_0',
             timeStamp: '2021-01-05T09:12',
             from: participants[0],
             to: participants.slice(0, 2),
             body: '<div>Hi, <br /> <br /><div>Your address change request is approved.</div> <br /> <br />Regards, <br />Laura Stevens </div>',
             unRead: true,
             subject: 'Pause service',
-            suggestions: hideSuggestions ? undefined : mockSuggestedReplies,
+            suggestions: args.hideSuggestions ? undefined : mockSuggestedReplies,
             attachments: [
                 {
-                    id: createUID(),
+                    id: 'item_1_0',
                     value: 'https://pega.com/media/document.doc',
                     displayText: 'Policy document'
                 },
                 {
-                    id: createUID(),
+                    id: 'item_1_1',
                     value: 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg',
                     displayText: 'E-Ticket'
                 }
@@ -443,7 +315,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
             })
         },
         {
-            id: createUID(),
+            id: 'item_1',
             timeStamp: '2021-01-02T03:12',
             from: participants[3],
             to: participants.slice(2, 4),
@@ -486,7 +358,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
                 }, create);
             },
             actions: emailActionItems,
-            tags: hideSuggestions
+            tags: args.hideSuggestions
                 ? undefined
                 : {
                     items: ['Pause service', 'Lost or stolen'],
@@ -542,7 +414,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
         return {
             from: generateEmailConversationParticipants(emails, ['from'])[0],
             to: emails[0].to,
-            id: createUID(),
+            id: `item_${i}`,
             timeStamp: emails[0].timeStamp,
             unReadEmailCount: emails.filter(item => item.unRead).length,
             emails,
@@ -555,7 +427,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
         {
             from: generateEmailConversationParticipants(emailsData, ['from'])[0],
             to: generateEmailConversationParticipants(emailsData, ['to']),
-            id: createUID(),
+            id: 'item_0',
             timeStamp: new Date(emailsData[0].timeStamp),
             unReadEmailCount: emailsData.filter(item => item.unRead).length,
             emails: emailsData
@@ -571,15 +443,21 @@ export const EmailDemo = ({ hideSuggestions }) => {
                     gap: 0
                 }, children: [_jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'filter' }, void 0) }, void 0), _jsx(MenuButton, { variant: 'simple', text: 'More actions', icon: 'more', iconOnly: true, portal: true, menu: { items: actions } }, void 0)] }, void 0)),
             subject: 'Pause service'
-        }, autoCollapse: boolean('Auto collapse', true), conversations: boolean('Single conversation', true) ? singleEmailConversation : emailConversations }, void 0));
+        }, autoCollapse: args.autoCollapse, conversations: args.singleConversation ? singleEmailConversation : emailConversations }, void 0));
+};
+EmailDemo.args = {
+    autoCollapse: true,
+    hideSuggestions: false,
+    singleConversation: true
+};
+EmailDemo.argTypes = {
+    autoCollapse: { control: { type: 'boolean' } },
+    hideSuggestions: { control: { type: 'boolean' } },
+    singleConversation: { control: { type: 'boolean' } }
 };
 EmailDemo.parameters = {
     layout: 'fullscreen'
 };
-const sentiment = {
-    variant: 'negative',
-    labelHidden: true
-};
 /*
   ______                 _ _    _____                                              _____ _
  |  ____|               (_) |  / ____|                                            |_   _| |
@@ -617,258 +495,34 @@ export const EmailSummaryItemDemo = () => {
                                                                             __/ |
                                                                            |___/
 */
-const emailSummaryItems = [
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
-            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' }
-        ],
-        message: 'I have a quick question on travel',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        active: true,
-        urgency: 85,
-        unreadEmailCount: 4
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            {
-                shortName: 'Nathan',
-                fullName: 'Nathan Swanson',
-                emailAddress: 'nathan.swanson@example.com'
-            }
-        ],
-        message: 'My luggage did not drive!',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Missing Luggage',
-        sentiment,
-        urgency: 10,
-        unreadEmailCount: 2
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
-        ],
-        message: 'Re: How much is a flight to Florida. Is there a discount going on?',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 65,
-        unreadEmailCount: 1
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
-        ],
-        message: 'Re: Should I purchase travel insurance? How often do we need it?',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85,
-        unreadEmailCount: 6
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
-        ],
-        message: 'My next vacation',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 45
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
-            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
-            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
-        ],
-        message: 'Airport questions',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 35
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
-            { shortName: 'Robert', fullName: 'Robert ', emailAddress: 'robert.downey@example.com' }
-        ],
-        message: 'I have a quick question on travel',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            {
-                shortName: 'Nathan',
-                fullName: 'Nathan Swanson',
-                emailAddress: 'nathan.swanson@example.com'
-            }
-        ],
-        message: 'My luggage did not drive!',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Missing Luggage',
-        sentiment,
-        urgency: 10
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
-        ],
-        message: 'Re: How much is a flight to Florida',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 65
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
-        ],
-        message: 'Re: Should I purchase travel insurance',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
-        ],
-        message: 'My next vacation',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 45
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
-            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
-            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
-        ],
-        message: 'Airport questions',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 35
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Robert', fullName: 'Robert Downer', emailAddress: 'robert.downey@example.com' },
-            { shortName: 'Robert', fullName: 'Robert ', emailAddress: 'robert.downey@example.com' }
-        ],
-        message: 'I have a quick question on travel',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            {
-                shortName: 'Nathan',
-                fullName: 'Nathan Swanson',
-                emailAddress: 'nathan.swanson@example.com'
-            }
-        ],
-        message: 'My luggage did not drive!',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Missing Luggage',
-        sentiment,
-        urgency: 10
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Simpson', fullName: 'Glenn Simpson', emailAddress: 'glenn.simpson@example.com' }
-        ],
-        message: 'Re: How much is a flight to Florida',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 65
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Green', fullName: 'Ralph Green', emailAddress: 'ralph.green@example.com' }
-        ],
-        message: 'Re: Should I purchase travel insurance',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 85
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Greene', fullName: 'Fred Greene', emailAddress: 'Fred.greene@example.com' }
-        ],
-        message: 'My next vacation',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 45
-    },
-    {
-        id: createUID(),
-        activeParticipants: [
-            { shortName: 'Smith', fullName: 'Aya Smith', emailAddress: 'aya.smith@example.com' },
-            { shortName: 'Support', fullName: 'Support', emailAddress: 'support@example.com' },
-            { shortName: 'Downer', fullName: 'Robert Downer', emailAddress: 'robert.downer@example.com' }
-        ],
-        message: 'Airport questions',
-        timeStamp: new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24)),
-        topic: 'Travel request',
-        sentiment,
-        urgency: 35
-    }
-];
 export const EmailSummaryListDemo = () => {
+    const INITIAL_CHUNK_SIZE = 9;
+    const APPEND_CHUNK_SIZE = 1;
     const emailSummaryListRef = useRef(null);
-    const [allEmailItems, setAllEmailItems] = useState(emailSummaryItems);
+    const [allEmailItems, setAllEmailItems] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
     const [categories, setCategories] = useState([
         {
-            id: createUID(),
+            id: 'item_0',
             primary: 'Default worklist',
             selected: false
         },
         {
-            id: createUID(),
+            id: 'item_1',
             primary: 'Authors',
             selected: false
         },
         {
-            id: createUID(),
+            id: 'item_2',
             primary: 'Administrators',
             selected: false
         },
         {
-            id: createUID(),
+            id: 'item_3',
             primary: 'Managers',
             selected: false
         },
         {
-            id: createUID(),
+            id: 'item_4',
             primary: 'Users',
             selected: false
         }
@@ -884,7 +538,25 @@ export const EmailSummaryListDemo = () => {
     const onCategoryClick = (id) => {
         setCategories(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
     };
-    return (_jsx(EmailSummaryList, { style: { height: 'calc(100vh)', width: '25rem', margin: 'auto' }, ref: emailSummaryListRef, unreadEmailCount: 99, categories: categories, items: allEmailItems, onItemClick: handleItemClick, onCategoryClick: onCategoryClick }, void 0));
+    const [loading, setLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const loadMore = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+                setAllEmailItems(prevItems => {
+                    const previousItemsLength = prevItems.length;
+                    const newItems = emailSummaryItems.slice(previousItemsLength, previousItemsLength + APPEND_CHUNK_SIZE);
+                    if (newItems.length === 0) {
+                        setHasMore(false);
+                    }
+                    return [...prevItems, ...newItems];
+                });
+            }, 1500);
+        }
+    }, [loading]);
+    return (_jsx(EmailSummaryList, { style: { height: '100vh', width: '25rem', margin: 'auto' }, ref: emailSummaryListRef, unreadEmailCount: 99, categories: categories, items: allEmailItems, onItemClick: handleItemClick, onCategoryClick: onCategoryClick, onLoadMore: hasMore ? loadMore : undefined, loading: loading, emptyMessage: 'No emails.' }, void 0));
 };
 EmailSummaryListDemo.parameters = {
     layout: 'fullscreen'