@pega/cosmos-react-demos 3.0.0-dev.2.0 → 3.0.0-dev.21.0

package/jsx/social/Email/Email.stories.jsx

@@ -1,161 +1,46 @@
-import { useState, useRef, useContext, createRef } from 'react';
+import { useState, useRef, useCallback, useEffect, createRef, useContext } 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 } from '@pega/cosmos-react-core';
+import { useMemo } from '@storybook/addons';
+import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel, EmptyState, Modal, ModalManagerContext, ToasterContext } 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, ViewAnalysis } from '@pega/cosmos-react-social';
-import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, ViewAnalysisMockData, EmailMockData } from './Email.mocks';
+import { Email as EmailComponent, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList, EmailManager } from '@pega/cosmos-react-social';
+import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
+import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, viewAnalysisEmailHeaderMock, topicListMock, emailActions, generateEmailConversationParticipants, templates, handleExternalEntry, emailDemoActions, LaunchAction, baseComposerProps, sentiment, emailSummaryItems, mockEmails, mockSuggestedReplies, mockEmailBodyTemplates, forwardedContent, getCompositeId, emptyFieldErrorMessage, fieldValidation, emailWorklistItemsMock, contextMenuItemsMock, highlightedEntitiesMock, mockUploadImage } from './Email.mocks';
+import { StyledEmailCardContent } 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 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: mockEmailBodyTemplates
-};
-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 (<Modal heading={composerProps.subject} options={{ id: { compositeId } }}>
-          <EmailComposer {...composerProps} ref={composerRef} onCancel={() => handleComposerCancel(compositeId)}/>
-        </Modal>);
-    }, { center: true }, { minimizable: true, maximizable: true, dockable: true });
-    composerModals[compositeId] = {
-        dismissModal: modalControls.dismiss,
-        unMountModal: modalControls.unmount,
-        composerRef
+export const Email = (args) => {
+    const emailImperativeHandle = useRef(null);
+    const timeout = useRef(null);
+    const handleRightClick = () => {
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = window.setTimeout(() => {
+            emailImperativeHandle.current?.setContextMenuItems(contextMenuItemsMock);
+        }, 1000);
     };
-};
-const emailActions = (<MenuButton text='Email actions' variant='simple' icon='more' iconOnly 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')
-            }
-        ]
-    }}/>);
-const emailDemoActions = (create, subject) => {
-    const id = createUID();
-    return (<MenuButton text='Email actions' variant='simple' icon='more' iconOnly menu={{
-            items: [
-                {
-                    id,
-                    primary: 'Reply',
-                    onClick: () => launchEmailComposer(id, LaunchAction.REPLY, {
-                        ...baseComposerProps,
-                        responseType: 'reply',
-                        subject: `Re-${subject}` || ''
-                    }, create)
-                },
-                {
-                    id,
-                    primary: 'Reply all',
-                    onClick: () => launchEmailComposer(id, LaunchAction.REPLYALL, {
-                        ...baseComposerProps,
-                        responseType: 'replyAll',
-                        cc: [],
-                        subject: `Re-${subject}` || ''
-                    }, create)
-                },
-                {
-                    id,
-                    primary: 'Forward',
-                    onClick: () => launchEmailComposer(id, LaunchAction.FORWARD, {
-                        ...baseComposerProps,
-                        responseType: 'forward',
-                        subject: `Fw-${subject}` || ''
-                    }, create)
-                }
-            ]
-        }}/>);
-};
-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;
-export const email = () => {
     return (<Card>
       <StyledEmailCardContent>
-        <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={{
-            variant: 'positive'
-        }} actions={emailActions} suggestions={mockSuggestedReplies} attachments={[
+        <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>' forwardedContent={args.forwardedContent} entityHighlightMapping={args.enableEntityHighlighting ? highlightedEntitiesMock : undefined} subject='I lost my debit card' onReply={action('On reply')} onReplyAll={action('On reply all')} onForward={action('On forward')} onSuggestionClick={action('On Suggested reply clicked')} sentiment={{
+            variant: 'neutral'
+        }} actions={emailActions} suggestions={mockSuggestedReplies} contextMenu={args.enableContextMenu
+            ? {
+                onItemClick: action('onItemClick'),
+                onContextMenu: handleRightClick,
+                handle: emailImperativeHandle
+            }
+            : undefined} 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'
             }
@@ -169,92 +54,152 @@ export const email = () => {
       </StyledEmailCardContent>
     </Card>);
 };
-const StyledViewAnalysis = styled.div `
-  width: 18rem;
-`;
-export const viewAnalysis = () => {
-    const content = ViewAnalysisMockData;
-    const headerProps = {
-        icon: 'list-number',
-        text: 'Entities'
-    };
-    return (<StyledViewAnalysis>
-      <ViewAnalysis header={headerProps} content={content}/>
-    </StyledViewAnalysis>);
+Email.args = {
+    enableEntityHighlighting: false,
+    enableContextMenu: false,
+    forwardedContent
 };
-export const emailEntities = () => {
-    const nestedEntities = ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil'];
-    return (<Card>
-      <StyledEmailCardContent>
-        <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, Nagercoil branch, with code 3967. I have a saving bank account here. My account number is 6785420965476.</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)
-            ? [
-                {
-                    value: '3967',
-                    type: 'system',
-                    name: 'BranchCode',
-                    variant: 0,
-                    description: 'Branch Code'
-                },
-                {
-                    value: 'Laura Stevens',
-                    type: 'system',
-                    name: 'Name',
-                    variant: 1,
-                    description: 'Name'
-                },
-                {
-                    value: 'Nagercoil',
-                    type: 'system',
-                    name: 'Location',
-                    variant: 2,
-                    description: nestedEntities
-                },
-                {
-                    value: 'Trichy',
-                    type: 'system',
-                    name: 'Location',
-                    variant: 2,
-                    description: 'Location'
+Email.argTypes = {
+    enableEntityHighlighting: { control: { type: 'boolean' } },
+    enableContextMenu: { control: { type: 'boolean' } },
+    forwardedContent: { control: { type: 'text' } }
+};
+export const Composer = () => {
+    const [composerProgress, setComposerProgress] = useState(false);
+    const composerHandle = useRef(null);
+    const [data, setData] = useState({
+        to: { value: toParticipants },
+        cc: { value: [] },
+        bcc: { value: [] },
+        subject: { value: 'Request: Pause service' },
+        bodyContent: {
+            defaultValue: 'Hi, Hope you are doing well'
+        },
+        responseType: 'reply',
+        selectedTemplateId: '',
+        attachments: emailAttachments,
+        bodyContentCurrentValue: ''
+    });
+    const handleOnChange = (field, value) => {
+        if (field === 'bodyContent') {
+            setData(prev => ({
+                ...prev,
+                bodyContentCurrentValue: value
+            }));
+        }
+        else if (['responseType', 'attachments', 'selectedTemplateId'].includes(field)) {
+            setData(prev => ({
+                ...prev,
+                [field]: value
+            }));
+        }
+        else {
+            setData(prev => {
+                return {
+                    ...prev,
+                    [field]: { error: undefined, value }
+                };
+            });
+        }
+        action('onChange')(field, value);
+    };
+    useEffect(() => {
+        if (data.responseType === 'reply') {
+            setData(prev => {
+                return {
+                    ...prev,
+                    to: {
+                        ...prev.to,
+                        value: [toParticipants[0]]
+                    },
+                    cc: {
+                        ...prev.cc,
+                        value: []
+                    },
+                    bcc: {
+                        ...prev.bcc,
+                        value: []
+                    }
+                };
+            });
+        }
+        else if (data.responseType === 'replyAll') {
+            setData(prev => {
+                return {
+                    ...prev,
+                    to: {
+                        ...prev.to,
+                        value: toParticipants
+                    },
+                    cc: {
+                        ...prev.cc,
+                        value: ccParticipants
+                    },
+                    bcc: {
+                        ...prev.bcc,
+                        value: bccParticipants
+                    }
+                };
+            });
+        }
+    }, [data.responseType]);
+    const onTemplateChange = (id) => {
+        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === id);
+        setComposerProgress({ message: 'Loading template...' });
+        setTimeout(() => {
+            setComposerProgress(false);
+            composerHandle.current?.replaceBodyContent(selectedTemplate?.content || '');
+        }, 1000);
+    };
+    useEffect(() => {
+        if (data.selectedTemplateId)
+            onTemplateChange(data.selectedTemplateId);
+    }, [data.selectedTemplateId]);
+    const handleOnSend = () => {
+        setData(prev => {
+            return {
+                ...prev,
+                to: {
+                    value: prev.to?.value || [],
+                    error: data?.to?.value.length === 0 ? emptyFieldErrorMessage : fieldValidation(data?.to?.value)
                 },
-                {
-                    value: '6785420965476',
-                    type: 'system',
-                    name: 'AccountNumber',
-                    variant: 3,
-                    description: 'Account Number'
+                cc: {
+                    value: prev.cc?.value || [],
+                    error: data.cc === undefined ? undefined : fieldValidation(data.cc.value)
                 },
-                {
-                    value: '1920 6746 8653 1256',
-                    type: 'system',
-                    name: 'CardNumber',
-                    variant: 4,
-                    description: 'Card Number'
+                bcc: {
+                    value: prev.bcc?.value || [],
+                    error: data.bcc === undefined ? undefined : fieldValidation(data.bcc.value)
                 },
-                {
-                    value: 'Debit Card',
-                    type: 'system',
-                    name: 'CardType',
-                    variant: 5,
-                    description: 'Card Type'
+                subject: {
+                    ...prev.subject,
+                    error: data.subject?.value === '' ? emptyFieldErrorMessage : undefined
                 },
-                {
-                    value: 'Jan 04, 2021',
-                    type: 'system',
-                    name: 'Date',
-                    variant: 6,
-                    description: 'Date'
+                bodyContent: {
+                    ...prev.bodyContent,
+                    error: data.bodyContentCurrentValue === '' ? emptyFieldErrorMessage : undefined
                 }
-            ]
-            : undefined} subject='I lost my debit card' onReply={action('On reply')} onReplyAll={action('On reply all')} onForward={action('On forward')} onSuggestionClick={action('On Suggested reply clicked')} sentiment={{
-            variant: 'neutral'
-        }} actions={emailActions} suggestions={mockSuggestedReplies}/>
-      </StyledEmailCardContent>
-    </Card>);
+            };
+        });
+    };
+    const onImageAdded = (image, id) => {
+        action('On Image added');
+        setComposerProgress({ message: 'Uploading image' });
+        mockUploadImage(image)
+            .then(({ src, alt }) => {
+            composerHandle.current?.updateImage({ src, alt }, id);
+            setComposerProgress(false);
+        })
+            .catch(() => {
+            setComposerProgress(false);
+        });
+    };
+    return (<EmailComposer handle={composerHandle} progress={composerProgress} onSave={action('On save')} onSend={handleOnSend} onCancel={action('On cancel')} externalValidator={handleExternalEntry} participants={participants} onChange={handleOnChange} data={data} templates={templates} onImageAdded={onImageAdded}/>);
 };
-export const emailConversation = () => {
+export const Conversation = () => {
     const emailArr = [
         {
-            id: createUID(),
+            id: 'item_0',
             timeStamp: '2021-01-05T09:12',
             from: mockEmails['Laura Stevens'],
             cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
@@ -269,7 +214,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']],
@@ -284,76 +229,267 @@ export const emailConversation = () => {
     ];
     return (<EmailConversation participants={generateEmailConversationParticipants(emailArr)} from={generateEmailConversationParticipants(emailArr, ['from'])[0]} to={generateEmailConversationParticipants(emailArr, ['to'])} id={createUID()} timeStamp={emailArr[0].timeStamp} unReadEmailCount={emailArr.filter(item => item.unRead).length} emails={emailArr}/>);
 };
-export const EmailComposerDemo = () => {
-    const fileUploadInputRef = useRef(null);
-    const [attachments, setAttachments] = useState(emailAttachments);
-    return (<Card style={{ width: '30rem' }}>
-      <CardContent>
-        <EmailComposer onSend={action('On Send')} onCancel={action('On cancel')} externalValidator={handleExternalEntry} participants={participants} to={{
-            reply: [participants[7].emailAddress],
-            replyAll: toParticipants,
-            forward: []
-        }} cc={ccParticipants} bcc={bccParticipants} responseType='reply' subject='Request: Pause service' templates={mockEmailBodyTemplates} bodyContent='Hi, Hope you are doing well' onImageAdded={action('On Image added')} attachments={attachments.map(attachment => {
+export const EmailShellDemo = (args) => {
+    const { create } = useContext(ModalManagerContext);
+    const { push } = useContext(ToasterContext);
+    const actions = ['Transfer', 'End conversation'].map(name => ({
+        primary: name,
+        id: name,
+        onClick: action(`Clicked ${name}`)
+    }));
+    const [composersData, setComposersData] = useState({});
+    const [conversationEmails, setConversationEmails] = useState([]);
+    const handleResponseTypeChange = (uid, responseType) => {
+        if (responseType === 'reply') {
+            setComposersData(prev => {
+                return {
+                    ...prev,
+                    [uid]: {
+                        ...prev[uid],
+                        data: {
+                            ...prev[uid].data,
+                            to: {
+                                ...prev[uid].data.to,
+                                value: [toParticipants[0]]
+                            },
+                            cc: {
+                                ...prev[uid].data.cc,
+                                value: []
+                            },
+                            bcc: {
+                                ...prev[uid].data.bcc,
+                                value: []
+                            }
+                        }
+                    }
+                };
+            });
+        }
+        else if (responseType === 'replyAll') {
+            setComposersData(prev => {
+                return {
+                    ...prev,
+                    [uid]: {
+                        ...prev[uid],
+                        data: {
+                            ...prev[uid].data,
+                            to: {
+                                ...prev[uid].data.to,
+                                value: toParticipants
+                            },
+                            cc: {
+                                ...prev[uid].data.cc,
+                                value: ccParticipants
+                            },
+                            bcc: {
+                                ...prev[uid].data.bcc,
+                                value: bccParticipants
+                            }
+                        }
+                    }
+                };
+            });
+        }
+    };
+    const handleTemplateIdChange = (uid, templateId) => {
+        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === templateId);
+        setComposersData(prev => {
             return {
-                ...attachment,
-                onDelete: name => {
-                    setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
+                ...prev,
+                [uid]: {
+                    ...prev[uid],
+                    progress: { message: 'Loading template...' }
                 }
             };
-        })} footerMoreActions={<MenuButton text='Phrases' placement='top' menu={{
-                items: [
-                    {
-                        primary: 'Thanks',
-                        id: 'Thanks',
-                        onClick: action('Thanks!')
-                    },
-                    {
-                        primary: 'Sorry, please give us some time',
-                        id: 'Sorry',
-                        onClick: action('Sorry, please give us some time!')
+        });
+        setTimeout(() => {
+            setComposersData(prev => {
+                return {
+                    ...prev,
+                    [uid]: {
+                        ...prev[uid],
+                        progress: false
                     }
-                ]
-            }}/>}/>
-        <input ref={fileUploadInputRef} type='file' style={{ display: 'none' }} onChange={(e) => {
-            if (e.target.files) {
-                setAttachments(prevAttachments => [
-                    ...prevAttachments,
-                    ...Array.from(e.target.files).map(file => {
+                };
+            });
+            let currentData = {};
+            setComposersData(prev => {
+                currentData = prev;
+                return prev;
+            });
+            if (currentData) {
+                currentData[uid]?.handle?.current?.replaceBodyContent(selectedTemplate?.content || '');
+            }
+        }, 1000);
+    };
+    const handleChange = (uid, field, value) => {
+        setComposersData(prevData => {
+            if (field === 'bodyContent') {
+                return {
+                    ...prevData,
+                    [uid]: {
+                        ...prevData[uid],
+                        bodyContentCurrentValue: value
+                    }
+                };
+            }
+            return {
+                ...prevData,
+                [uid]: {
+                    ...prevData[uid],
+                    data: {
+                        ...prevData[uid].data,
+                        [field]: ['responseType', 'attachments', 'selectedTemplateId'].includes(field)
+                            ? value
+                            : {
+                                error: undefined,
+                                value
+                            }
+                    }
+                }
+            };
+        });
+        if (field === 'responseType') {
+            handleResponseTypeChange(uid, value);
+        }
+        else if (field === 'selectedTemplateId') {
+            handleTemplateIdChange(uid, value);
+        }
+    };
+    const MyModal = ({ currentID }) => {
+        const { ModalContext } = useContext(ModalManagerContext);
+        const { dismiss } = useContext(ModalContext);
+        return (<Modal heading='Discard unsaved changes?' actions={<>
+            <Flex>
+              <Button onClick={() => {
+                    dismiss();
+                    setComposersData(prev => {
                         return {
-                            name: file.name
+                            ...prev,
+                            [currentID]: {
+                                ...prev[currentID],
+                                progress: true
+                            }
                         };
-                    })
-                ]);
-            }
-        }}/>
-      </CardContent>
-    </Card>);
-};
-export const EmailDemo = ({ hideSuggestions }) => {
-    const actions = array('Actions', ['Transfer', 'End conversation']).map(name => ({
-        primary: name,
-        id: name,
-        onClick: action(`Clicked ${name}`)
-    }));
-    const { create } = useContext(ModalManagerContext);
+                    });
+                    setTimeout(() => {
+                        setComposersData(prev => {
+                            const newComposersData = { ...prev };
+                            delete newComposersData[currentID];
+                            return newComposersData;
+                        });
+                        push({ content: 'Draft Saved' });
+                    }, 1000);
+                }}>
+                Save as draft
+              </Button>
+
+              <Button onClick={() => {
+                    dismiss();
+                    setComposersData(prev => {
+                        const newComposersData = { ...prev };
+                        delete newComposersData[currentID];
+                        return newComposersData;
+                    });
+                }}>
+                Discard
+              </Button>
+            </Flex>
+            <Button variant='primary' onClick={() => {
+                    dismiss();
+                }}>
+              Cancel
+            </Button>
+          </>} center>
+        <Text variant='primary'>
+          You have unsaved changes. You can discard them or go back to keep working.
+        </Text>
+      </Modal>);
+    };
+    const handleCancel = (uid) => {
+        create(MyModal, { currentID: uid }, { alert: true });
+    };
+    const handleSend = (uid) => {
+        action('Send')();
+        setComposersData(prev => {
+            return {
+                ...prev,
+                [uid]: {
+                    ...prev[uid],
+                    progress: true
+                }
+            };
+        });
+        setTimeout(() => {
+            setComposersData(prev => {
+                const newComposersData = { ...prev };
+                delete newComposersData[uid];
+                return newComposersData;
+            });
+            push({ content: 'Email Send' });
+        }, 1000);
+    };
+    const handleSave = (uid) => {
+        action('Save')();
+        setComposersData(prev => {
+            return {
+                ...prev,
+                [uid]: {
+                    ...prev[uid],
+                    progress: true
+                }
+            };
+        });
+        setTimeout(() => {
+            setComposersData(prev => {
+                const newComposersData = { ...prev };
+                delete newComposersData[uid];
+                return newComposersData;
+            });
+            push({ content: 'Draft Saved' });
+        }, 1000);
+    };
+    const createOrActivateComposer = (id, launchAction, composerProps) => {
+        const uid = getCompositeId(id, launchAction);
+        if (composersData[uid]) {
+            composersData[uid].handle?.current?.activate();
+        }
+        else {
+            setComposersData(prev => {
+                const composerHandle = createRef();
+                return {
+                    ...prev,
+                    [uid]: {
+                        ...composerProps,
+                        bodyContentCurrentValue: composerProps.data.bodyContent.defaultValue,
+                        handle: composerHandle,
+                        onChange: (field, value) => handleChange(uid, field, value),
+                        onCancel: () => handleCancel(uid),
+                        onSend: () => handleSend(uid),
+                        onSave: () => handleSave(uid)
+                    }
+                };
+            });
+        }
+    };
     const emailsData = [
         {
-            id: createUID(),
+            id: 'item0',
             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'
                 }
@@ -366,7 +502,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
             })
         },
         {
-            id: createUID(),
+            id: 'item1',
             timeStamp: '2021-01-02T03:12',
             from: participants[3],
             to: participants.slice(2, 4),
@@ -375,38 +511,47 @@ export const EmailDemo = ({ hideSuggestions }) => {
             subject: 'Pause service'
         }
     ].map(emailData => {
-        const emailActionItems = emailDemoActions(create, emailData.subject);
+        const emailActionItems = emailDemoActions(emailData.id, emailData.subject, createOrActivateComposer, false, emailData.body);
         return {
             ...emailData,
-            onReply: id => {
-                launchEmailComposer(id, LaunchAction.REPLY, {
+            onReply: (id) => {
+                createOrActivateComposer(id, LaunchAction.REPLY, {
                     ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'reply',
-                    subject: `Re-${emailData.subject}` || ''
-                }, create);
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'reply',
+                        subject: { value: `Re-${emailData.subject}` || '' }
+                    },
+                    externalValidator: handleExternalEntry
+                });
             },
             onForward: id => {
-                launchEmailComposer(id, LaunchAction.FORWARD, {
+                createOrActivateComposer(id, LaunchAction.FORWARD, {
                     ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'forward',
-                    subject: `Fw-${emailData.subject}` || ''
-                }, create);
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'forward',
+                        subject: { value: `Fw-${emailData.subject}` || '' }
+                    },
+                    externalValidator: handleExternalEntry
+                });
             },
             onSuggestionClick: (id, suggestionId) => {
                 const suggestion = emailData.suggestions?.find(item => item.id === suggestionId);
-                launchEmailComposer(id, LaunchAction.SUGGESTION, {
+                createOrActivateComposer(id, LaunchAction.SUGGESTION, {
                     ...baseComposerProps,
-                    externalValidator: handleExternalEntry,
-                    responseType: 'reply',
-                    subject: suggestion?.title || '',
-                    bodyContent: suggestion ? suggestion.content : '',
-                    defaultTemplate: suggestion?.title
-                }, create);
+                    data: {
+                        ...baseComposerProps.data,
+                        responseType: 'reply',
+                        subject: { value: suggestion?.title || '' },
+                        bodyContent: { defaultValue: suggestion ? suggestion.content : '' },
+                        selectedTemplateId: suggestion?.id
+                    },
+                    externalValidator: handleExternalEntry
+                });
             },
             actions: emailActionItems,
-            tags: hideSuggestions
+            tags: args.hideSuggestions
                 ? undefined
                 : {
                     items: ['Pause service', 'Lost or stolen'],
@@ -416,98 +561,159 @@ export const EmailDemo = ({ hideSuggestions }) => {
                 }
         };
     });
-    const emailConversations = [
-        [...emailsData],
-        [
-            {
-                ...emailsData[0],
-                timeStamp: '2021-01-03T17:15',
-                from: mockEmails['Hugh Phillips'],
-                to: [mockEmails['Mystery Rey'], ...emailsData[0].to],
-                cc: [mockEmails['Adam Gillchrist']],
-                bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
-                body: '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>'
-            },
-            {
-                ...emailsData[1],
-                unRead: false,
-                timeStamp: '2021-01-02T14:16',
-                from: mockEmails['Mystery Rey'],
-                to: [mockEmails['Hugh Phillips']],
-                body: '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>'
-            }
-        ],
-        [
-            {
-                ...emailsData[0],
-                unRead: false,
-                timeStamp: '2020-12-05T18:18',
-                from: mockEmails['Laura Stevens'],
-                to: [mockEmails['Sara Davis']],
-                body: '<div>Hi, <br /> <br /><div>Sure, Our executive will call you shortly. </div> <br /> <br />Regards, <br />Laura Stevens </div>',
-                sentiment: {
-                    variant: 'positive'
+    const deleteEmail = (id) => {
+        setConversationEmails(prev => {
+            const newEmailConversation = [];
+            prev.forEach(arr => {
+                const newArr = arr.filter(index => index.id !== id);
+                if (newArr.length !== 0)
+                    newEmailConversation.push(newArr);
+            });
+            return newEmailConversation;
+        });
+    };
+    useEffect(() => {
+        setConversationEmails([
+            [{ ...emailsData[0] }, { ...emailsData[1], status: 'undelivered' }],
+            [
+                {
+                    ...emailsData[0],
+                    id: 'item2',
+                    status: 'draft',
+                    unRead: false,
+                    actions: emailDemoActions('item2', emailsData[0].subject, createOrActivateComposer, true, '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>', deleteEmail),
+                    timeStamp: '2021-01-03T17:15',
+                    from: mockEmails['Hugh Phillips'],
+                    to: [mockEmails['Mystery Rey'], ...emailsData[0].to],
+                    cc: [mockEmails['Adam Gillchrist']],
+                    bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
+                    body: '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>'
+                },
+                {
+                    ...emailsData[1],
+                    id: 'item3',
+                    status: 'draft',
+                    actions: emailDemoActions('item3', emailsData[0].subject, createOrActivateComposer, true, '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>', deleteEmail),
+                    unRead: false,
+                    timeStamp: '2021-01-02T14:16',
+                    from: mockEmails['Mystery Rey'],
+                    to: [mockEmails['Hugh Phillips']],
+                    body: '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>'
                 }
-            },
-            {
-                ...emailsData[1],
-                unRead: false,
-                timeStamp: '2021-01-04T08:30',
-                from: mockEmails['Sara Davis'],
-                to: [mockEmails['Laura Stevens']],
-                body: '<div>Hi, <br /> <br /><div>Can you show please explain your new mobile plans. </div> <br /> <br />Regards, <br />Sara Davis </div>'
-            }
-        ]
-    ].map((emails, i) => {
+            ],
+            [
+                {
+                    ...emailsData[0],
+                    id: 'item4',
+                    unRead: true,
+                    timeStamp: '2020-12-05T18:18',
+                    from: mockEmails['Laura Stevens'],
+                    to: [mockEmails['Sara Davis']],
+                    body: '<div>Hi, <br /> <br /><div>Sure, Our executive will call you shortly. </div> <br /> <br />Regards, <br />Laura Stevens </div>',
+                    sentiment: {
+                        variant: 'positive'
+                    }
+                },
+                {
+                    ...emailsData[1],
+                    id: 'item5',
+                    unRead: true,
+                    timeStamp: '2021-01-04T08:30',
+                    from: mockEmails['Sara Davis'],
+                    to: [mockEmails['Laura Stevens']],
+                    body: '<div>Hi, <br /> <br /><div>Can you show please explain your new mobile plans. </div> <br /> <br />Regards, <br />Sara Davis </div>'
+                }
+            ]
+        ]);
+    }, []);
+    const emailConversations = conversationEmails.map((emails, i) => {
         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,
             sentiment: emails[0].sentiment,
             isForwarded: i !== 2,
-            isCollapsed: i !== 0
+            isCollapsed: i !== 0,
+            drafts: i === 1,
+            undelivered: i === 0
         };
     });
     const singleEmailConversation = [
         {
             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
+            emails: [{ ...emailsData[0], status: 'undelivered' }, { ...emailsData[1] }]
         }
     ];
-    return (<EmailShell style={{
-            height: 'calc(100vh)',
-            width: '30rem',
-            margin: 'auto'
-        }} headerProps={{
+    return (<>
+      <EmailShell headerProps={{
             actions: (<Flex container={{
                     alignItems: 'center',
                     gap: 0
                 }}>
-            <Button variant='simple' icon>
-              <Icon name='filter'/>
-            </Button>
-            <MenuButton variant='simple' text='More actions' icon='more' iconOnly portal menu={{ items: actions }}/>
-          </Flex>),
+              <Button variant='simple' icon>
+                <Icon name='filter'/>
+              </Button>
+              <MenuButton variant='simple' text='More actions' icon='more' iconOnly portal menu={{ items: actions }}/>
+            </Flex>),
             subject: 'Pause service'
-        }} autoCollapse={boolean('Auto collapse', true)} conversations={boolean('Single conversation', true) ? singleEmailConversation : emailConversations}/>);
+        }} autoCollapse={args.autoCollapse} conversations={args.singleConversation ? singleEmailConversation : emailConversations}/>
+      <>
+        {Object.keys(composersData).map(guid => {
+            return <EmailComposer key={guid} {...composersData[guid]}/>;
+        })}
+      </>
+    </>);
 };
-EmailDemo.parameters = {
-    layout: 'fullscreen'
+EmailShellDemo.args = {
+    autoCollapse: true,
+    hideSuggestions: false,
+    singleConversation: true
+};
+EmailShellDemo.argTypes = {
+    autoCollapse: { control: { type: 'boolean' } },
+    hideSuggestions: { control: { type: 'boolean' } },
+    singleConversation: { control: { type: 'boolean' } }
 };
-const sentiment = {
-    variant: 'negative',
-    labelHidden: true
+export const EntityListDemo = (args) => {
+    const itemCounter = useRef(3);
+    const timeout = useRef(null);
+    const imperativeHandle = useRef(null);
+    const headerProps = {
+        icon: 'list-number',
+        text: 'Entities'
+    };
+    const handleRightClick = () => {
+        itemCounter.current += 1;
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = window.setTimeout(() => {
+            imperativeHandle.current?.setContextMenuItems(contextMenuItemsMock);
+        }, 1000);
+    };
+    return (<EntityList header={headerProps} content={EntityListMockData} contextMenu={args.enableContextMenu
+            ? {
+                onItemClick: action('onItemClick'),
+                onContextMenu: args.onContextMenu || handleRightClick,
+                handle: imperativeHandle
+            }
+            : undefined}/>);
 };
-export const EmailSummaryItemDemo = () => {
-    const [active, setActive] = useState(false);
-    return (<EmailSummaryItem style={{ width: '25rem' }} id={createUID()} activeParticipants={[
+EntityListDemo.args = {
+    enableContextMenu: true
+};
+EntityListDemo.argTypes = {
+    enableContextMenu: { control: { type: 'boolean' } }
+};
+export const EmailSummaryItemDemo = (args) => {
+    return (<EmailSummaryItem id={createUID()} activeParticipants={[
             {
                 shortName: 'Robert',
                 fullName: 'Robert Downer',
@@ -518,266 +724,24 @@ export const EmailSummaryItemDemo = () => {
                 fullName: 'Nathan Swanson',
                 emailAddress: 'nathan.swanson@example.com'
             }
-        ]} message='I have a quick question on traveling to India. How do I reach Hyderabad?' timeStamp={new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24))} topic='Missing Luggage' sentiment={sentiment} urgency={10} unreadEmailCount={active ? 0 : 8} active={active} onClick={() => {
-            setActive(true);
+        ]} message='I have a quick question on traveling to India. How do I reach Hyderabad?' timeStamp={new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), 24))} topic='Missing Luggage' sentiment={sentiment} urgency={10} unreadEmailCount={args.unreadEmailCount} active={args.isActive} onSelect={(id) => {
+            action('onSelect')(id);
         }}/>);
 };
-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 = () => {
+EmailSummaryItemDemo.args = {
+    unreadEmailCount: 0,
+    isActive: false
+};
+EmailSummaryItemDemo.argTypes = {
+    unreadEmailCount: { control: { type: 'number' } },
+    isActive: { control: { type: 'boolean' } }
+};
+export const EmailSummaryListDemo = (args) => {
+    const INITIAL_CHUNK_SIZE = 9;
+    const APPEND_CHUNK_SIZE = 1;
     const emailSummaryListRef = useRef(null);
-    const [allEmailItems, setAllEmailItems] = useState(emailSummaryItems);
-    const [categories, setCategories] = useState([
-        {
-            id: createUID(),
-            primary: 'Default worklist',
-            selected: false
-        },
-        {
-            id: createUID(),
-            primary: 'Authors',
-            selected: false
-        },
-        {
-            id: createUID(),
-            primary: 'Administrators',
-            selected: false
-        },
-        {
-            id: createUID(),
-            primary: 'Managers',
-            selected: false
-        },
-        {
-            id: createUID(),
-            primary: 'Users',
-            selected: false
-        }
-    ]);
+    const [allEmailItems, setAllEmailItems] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
+    const [categories, setCategories] = useState(emailWorklistItemsMock);
     const handleItemClick = (id) => {
         const index = allEmailItems.findIndex(emailItem => {
             return emailItem.id === id;
@@ -789,9 +753,98 @@ export const EmailSummaryListDemo = () => {
     const onCategoryClick = (id) => {
         setCategories(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
     };
-    return (<EmailSummaryList style={{ height: 'calc(100vh)', width: '25rem', margin: 'auto' }} ref={emailSummaryListRef} unreadEmailCount={99} categories={categories} items={allEmailItems} onItemClick={handleItemClick} onCategoryClick={onCategoryClick}/>);
+    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 (<EmailSummaryList ref={emailSummaryListRef} unreadEmailCount={99} categories={categories} items={args.items || allEmailItems} onItemClick={args.onItemClick || handleItemClick} onCategoryClick={onCategoryClick} onLoadMore={args.onLoadMore || (hasMore ? loadMore : undefined)} loading={args.loading || loading} emptyMessage='No emails.'/>);
+};
+export const EmailManagerAppShell = (args) => {
+    const INITIAL_CHUNK_SIZE = 9;
+    const APPEND_CHUNK_SIZE = 1;
+    const [activeItemId, setActiveItemId] = useState();
+    const [emailList, setEmailList] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
+    const [loading, setLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const handleEmailItemClick = (id) => {
+        setActiveItemId(id);
+        const index = emailList.findIndex(emailItem => {
+            return emailItem.id === id;
+        });
+        const newEmailList = [...emailList];
+        newEmailList.splice(index, 1, { ...emailList[index], unreadEmailCount: 0 });
+        setEmailList(newEmailList);
+    };
+    const onLoadMore = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+                setEmailList(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]);
+    const activeItemIndex = useMemo(() => emailList.findIndex(emailItem => emailItem.id === activeItemId), [activeItemId, emailList]);
+    const content = activeItemId === undefined ? (<EmptyState message='No item selected!'/>) : (<EmailShellDemo singleConversation={activeItemIndex % 2 !== 0}/>);
+    const utilities = activeItemId === undefined ? null : (<Grid container={{ rowGap: 2 }}>
+        <EntityListDemo onContextMenu={args.onContextMenu} enableContextMenu={args.enableContextMenu}/>
+        <Card>
+          <CardHeader container={{ alignItems: 'center', gap: 1 }}>
+            <Icon name='document-doc'/>
+            <Text variant='h3'>Email header</Text>
+          </CardHeader>
+          <CardContent>
+            <FieldValueList fields={viewAnalysisEmailHeaderMock} variant='stacked'/>
+          </CardContent>
+        </Card>
+        <SummaryList name='Topics' icon='headline' items={topicListMock.map(items => ({
+            ...items,
+            primary: <StyledLabel>{items.primary}</StyledLabel>,
+            secondary: (<Flex container={{ direction: 'row', justify: 'between' }}>
+                <Text variant='primary'>{items.secondary.indicator}</Text>
+                <StyledLabel>{items.secondary.value}</StyledLabel>
+              </Flex>)
+        }))} noItemsText='No items'/>
+      </Grid>);
+    return (<AppShellDemo appHeader main={<EmailManager header={{
+                icon: 'mail',
+                title: 'Inbox'
+            }} list={<EmailSummaryListDemo onItemClick={handleEmailItemClick} items={emailList} onLoadMore={hasMore ? onLoadMore : undefined} loading={loading}/>} content={content} utilities={utilities} utilitiesSummaryItems={utilities
+                ? [
+                    { iconName: 'list-number', count: 7 },
+                    { iconName: 'document-doc', count: 1 },
+                    { iconName: 'headline', count: 4 }
+                ]
+                : undefined} defaultCollapsedUtilities={!!utilities}/>}/>);
+};
+EmailManagerAppShell.args = {
+    enableContextMenu: true
+};
+EmailManagerAppShell.argTypes = {
+    enableContextMenu: { control: { type: 'boolean' } }
 };
-EmailSummaryListDemo.parameters = {
+EmailManagerAppShell.parameters = {
     layout: 'fullscreen'
 };
 //# sourceMappingURL=Email.stories.jsx.map