@pega/cosmos-react-demos 3.0.0-dev.18.2 → 3.0.0-dev.19.0

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

@@ -2,25 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // cSpell:words calibri Trichy Nagercoil
 import { useState, useRef, useCallback, useEffect, createRef } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, Flex, Button, menuHelpers, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel } 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 } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import { Email as EmailComponent, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList, EmailManager } from '@pega/cosmos-react-social';
-import { TagsDemo } from '../../work/Tags/Tags.stories';
-import { StakeHoldersDemo } from '../../work/Stakeholders/Stakeholders.stories';
-import { MockSummaryList } from '../../work/CaseView/CaseView.mocks';
-import { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';
 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 } from './Email.mocks';
-import { StyledEmailCardContent, StyledViewAnalysis } from './Email.styles';
+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 } from './Email.mocks';
+import { StyledEmailCardContent } from './Email.styles';
 registerIcon(filterIcon);
 export default {
     title: 'Social/Email',
     component: EmailComponent
 };
 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: [
+    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);
+    };
+    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>', 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: 'attachment_0',
                         value: 'https://pega.com/media/document.doc',
@@ -40,246 +53,23 @@ export const Email = (args) => {
                 }) }) }) }));
 };
 Email.args = {
+    enableEntityHighlighting: false,
+    enableContextMenu: false,
     // 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>
-`
+    forwardedContent
 };
 Email.argTypes = {
-    forwardedContent: { control: { type: 'text' } }
-};
-export const ViewAnalysis = (args) => {
-    const itemCounter = useRef(3);
-    const imperativeHandle = useRef(null);
-    const headerProps = {
-        icon: 'list-number',
-        text: 'Entities'
-    };
-    const itemsToRender = topicListMock.map(items => {
-        return {
-            ...items,
-            primary: _jsx(StyledLabel, { children: items.primary }),
-            secondary: (_jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Text, { variant: 'primary', children: items.secondary.indicator }), _jsx(StyledLabel, { children: items.secondary.value })] }))
-        };
-    });
-    const handleRightClick = () => {
-        itemCounter.current += 1;
-        setTimeout(() => {
-            imperativeHandle.current?.setContextMenuItems(args.enableContextMenu
-                ? [
-                    {
-                        id: 'item_0',
-                        primary: 'Field 1',
-                        selected: itemCounter.current % 2 === 0
-                    },
-                    {
-                        id: 'item_1',
-                        primary: 'Field 2',
-                        selected: true
-                    },
-                    {
-                        id: 'item_2',
-                        primary: 'Field 3',
-                        selected: true
-                    },
-                    {
-                        id: `item_${itemCounter.current}`,
-                        primary: `Field ${itemCounter.current + 1}`,
-                        selected: true
-                    }
-                ]
-                : []);
-        }, 3000);
-    };
-    return (_jsx(StyledViewAnalysis, { children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(EntityList, { header: headerProps, content: EntityListMockData, contextMenu: {
-                        onItemClick: action('onItemClick'),
-                        onContextMenu: args.onContextMenu || handleRightClick,
-                        handle: imperativeHandle
-                    } }), _jsxs(Card, { children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'document-doc' }), _jsx(Text, { variant: 'h3', children: "Email header" })] }), _jsx(CardContent, { children: _jsx(FieldValueList, { fields: viewAnalysisEmailHeaderMock, variant: 'stacked' }) })] }), _jsx(SummaryList, { name: 'Topics', icon: 'headline', items: itemsToRender, noItemsText: 'No items' })] }) }));
-};
-ViewAnalysis.args = {
-    enableContextMenu: true
-};
-ViewAnalysis.argTypes = {
-    enableContextMenu: { control: { type: 'boolean' } }
-};
-export const EmailEntities = (args) => {
-    const nestedEntities = ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil'];
-    const emailImperativeHandle = useRef(null);
-    const itemCounter = useRef(3);
-    const handleRightClick = (id) => {
-        itemCounter.current += 1;
-        setTimeout(() => {
-            emailImperativeHandle.current?.setContextMenuItems(args.enableContextMenu
-                ? [
-                    {
-                        id: 'item_0',
-                        primary: 'Field 1',
-                        selected: itemCounter.current % 2 === 0
-                    },
-                    {
-                        id: 'item_1',
-                        primary: 'Field 2',
-                        selected: true
-                    },
-                    {
-                        id: `item_2 ${id}`,
-                        primary: 'Field 3',
-                        selected: true
-                    },
-                    {
-                        id: `item_${itemCounter.current}`,
-                        primary: `Field ${itemCounter.current + 1}`,
-                        selected: true
-                    }
-                ]
-                : []);
-        }, 3000);
-    };
-    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',
-                            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'
-                        },
-                        {
-                            value: '6785420965476',
-                            type: 'system',
-                            name: 'AccountNumber',
-                            variant: 3,
-                            description: 'Account Number'
-                        },
-                        {
-                            value: '1920 6746 8653 1256',
-                            type: 'system',
-                            name: 'CardNumber',
-                            variant: 4,
-                            description: 'Card Number'
-                        },
-                        {
-                            value: 'Debit Card',
-                            type: 'system',
-                            name: 'CardType',
-                            variant: 5,
-                            description: 'Card Type'
-                        },
-                        {
-                            value: 'Jan 04, 2021',
-                            type: 'system',
-                            name: 'Date',
-                            variant: 6,
-                            description: 'Date'
-                        }
-                    ]
-                    : 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: {
-                    onItemClick: action('onItemClick'),
-                    onContextMenu: handleRightClick,
-                    handle: emailImperativeHandle
-                } }) }) }));
-};
-EmailEntities.args = {
-    enableEntityHighlighting: true,
-    enableContextMenu: true
-};
-EmailEntities.argTypes = {
     enableEntityHighlighting: { control: { type: 'boolean' } },
-    enableContextMenu: { control: { type: 'boolean' } }
-};
-/*
-
-   _____                 _ _    ____                                    _   _
-  | ____|_ __ ___   __ _(_) |  / ___|___  _ ____   _____ _ __ ___  __ _| |_(_) ___  _ __
-  |  _| | '_ ` _ \ / _` | | | | |   / _ \| '_ \ \ / / _ \ '__/ __|/ _` | __| |/ _ \| '_ \
-  | |___| | | | | | (_| | | | | |__| (_) | | | \ V /  __/ |  \__ \ (_| | |_| | (_) | | | |
-  |_____|_| |_| |_|\__,_|_|_|  \____\___/|_| |_|\_/ \___|_|  |___/\__,_|\__|_|\___/|_| |_|
-
-
-*/
-export const EmailConversationDemo = () => {
-    const emailArr = [
-        {
-            id: 'item_0',
-            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 !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>',
-            unRead: true,
-            onReply: action('On reply'),
-            onForward: action('On forward'),
-            onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions,
-            suggestions: mockSuggestedReplies
-        },
-        {
-            id: 'item_1',
-            timeStamp: '2021-01-02T03:12',
-            from: mockEmails['Sara Davis'],
-            cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
-            bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
-            to: [mockEmails['Laura Stevens'], mockEmails['John Brown'], mockEmails['Joe Stevens']],
-            body: '<div> Hi, <br /> <br /> <div>I’m still at the airport, I need help now!! </div> <br /><br /> Regards, <br /> Sara Davis </div>',
-            onReply: action('On reply'),
-            onForward: action('On forward'),
-            onSuggestionClick: action('On Suggested reply clicked'),
-            actions: emailActions
-        }
-    ];
-    return (_jsx(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 }));
+    enableContextMenu: { control: { type: 'boolean' } },
+    forwardedContent: { control: { type: 'text' } }
 };
-/*
-
-   _____                 _ _    ____
-  | ____|_ __ ___   __ _(_) |  / ___|___  _ __ ___  _ __   ___  ___  ___ _ __
-  |  _| | '_ ` _ \ / _` | | | | |   / _ \| '_ ` _ \| '_ \ / _ \/ __|/ _ \ '__|
-  | |___| | | | | | (_| | | | | |__| (_) | | | | | | |_) | (_) \__ \  __/ |
-  |_____|_| |_| |_|\__,_|_|_|  \____\___/|_| |_| |_| .__/ \___/|___/\___|_|
-                                                   |_|
-
-*/
-export const EmailComposerDemo = () => {
+//   ______   ______   .___  ___. .______     ______        _______. _______ .______
+//  /      | /  __  \  |   \/   | |   _  \   /  __  \      /       ||   ____||   _  \
+// |  ,----'|  |  |  | |  \  /  | |  |_)  | |  |  |  |    |   (----`|  |__   |  |_)  |
+// |  |     |  |  |  | |  |\/|  | |   ___/  |  |  |  |     \   \    |   __|  |      /
+// |  `----.|  `--'  | |  |  |  | |  |      |  `--'  | .----)   |   |  |____ |  |\  \----.
+//  \______| \______/  |__|  |__| | _|       \______/  |_______/    |_______|| _| `._____|
+export const Composer = () => {
     const [composerProgress, setComposerProgress] = useState(false);
     const composerHandle = useRef(null);
     const [data, setData] = useState({
@@ -401,7 +191,46 @@ export const EmailComposerDemo = () => {
     };
     return (_jsx(EmailComposer, { handle: composerHandle, progress: composerProgress, onSend: handleOnSend, onCancel: action('On cancel'), externalValidator: handleExternalEntry, participants: participants, onChange: handleOnChange, data: data, templates: templates, onImageAdded: action('On Image added') }));
 };
-export const EmailDemo = (args) => {
+//   ______   ______   .__   __. ____    ____  _______ .______          _______.     ___   .___________. __    ______   .__   __.
+//  /      | /  __  \  |  \ |  | \   \  /   / |   ____||   _  \        /       |    /   \  |           ||  |  /  __  \  |  \ |  |
+// |  ,----'|  |  |  | |   \|  |  \   \/   /  |  |__   |  |_)  |      |   (----`   /  ^  \ `---|  |----`|  | |  |  |  | |   \|  |
+// |  |     |  |  |  | |  . `  |   \      /   |   __|  |      /        \   \      /  /_\  \    |  |     |  | |  |  |  | |  . `  |
+// |  `----.|  `--'  | |  |\   |    \    /    |  |____ |  |\  \----.----)   |    /  _____  \   |  |     |  | |  `--'  | |  |\   |
+//  \______| \______/  |__| \__|     \__/     |_______|| _| `._____|_______/    /__/     \__\  |__|     |__|  \______/  |__| \__|
+export const Conversation = () => {
+    const emailArr = [
+        {
+            id: 'item_0',
+            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 !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>',
+            unRead: true,
+            onReply: action('On reply'),
+            onForward: action('On forward'),
+            onSuggestionClick: action('On Suggested reply clicked'),
+            actions: emailActions,
+            suggestions: mockSuggestedReplies
+        },
+        {
+            id: 'item_1',
+            timeStamp: '2021-01-02T03:12',
+            from: mockEmails['Sara Davis'],
+            cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
+            bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
+            to: [mockEmails['Laura Stevens'], mockEmails['John Brown'], mockEmails['Joe Stevens']],
+            body: '<div> Hi, <br /> <br /> <div>I’m still at the airport, I need help now!! </div> <br /><br /> Regards, <br /> Sara Davis </div>',
+            onReply: action('On reply'),
+            onForward: action('On forward'),
+            onSuggestionClick: action('On Suggested reply clicked'),
+            actions: emailActions
+        }
+    ];
+    return (_jsx(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 EmailShellDemo = (args) => {
     const actions = ['Transfer', 'End conversation'].map(name => ({
         primary: name,
         id: name,
@@ -751,11 +580,7 @@ export const EmailDemo = (args) => {
             emails: emailsData
         }
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(EmailShell, { style: {
-                    height: args.height,
-                    width: args.width,
-                    margin: args.margin
-                }, headerProps: {
+    return (_jsxs(_Fragment, { children: [_jsx(EmailShell, { headerProps: {
                     actions: (_jsxs(Flex, { container: {
                             alignItems: 'center',
                             gap: 0
@@ -765,50 +590,49 @@ export const EmailDemo = (args) => {
                     return _jsx(EmailComposer, { ...composersData[guid] }, guid);
                 }) })] }));
 };
-EmailDemo.args = {
+EmailShellDemo.args = {
     autoCollapse: true,
     hideSuggestions: false,
-    singleConversation: true,
-    height: '100vh',
-    width: '30rem',
-    margin: 'auto'
+    singleConversation: true
 };
-EmailDemo.argTypes = {
+EmailShellDemo.argTypes = {
     autoCollapse: { control: { type: 'boolean' } },
     hideSuggestions: { control: { type: 'boolean' } },
-    singleConversation: { control: { type: 'boolean' } },
-    width: {
-        table: {
-            disable: true
-        }
-    },
-    height: {
-        table: {
-            disable: true
-        }
-    },
-    margin: {
-        table: {
-            disable: true
+    singleConversation: { control: { type: 'boolean' } }
+};
+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 (_jsx(EntityList, { header: headerProps, content: EntityListMockData, contextMenu: args.enableContextMenu
+            ? {
+                onItemClick: action('onItemClick'),
+                onContextMenu: args.onContextMenu || handleRightClick,
+                handle: imperativeHandle
+            }
+            : undefined }));
 };
-EmailDemo.parameters = {
-    layout: 'fullscreen'
+EntityListDemo.args = {
+    enableContextMenu: true
+};
+EntityListDemo.argTypes = {
+    enableContextMenu: { control: { type: 'boolean' } }
 };
-/*
-  ______                 _ _    _____                                              _____ _
- |  ____|               (_) |  / ____|                                            |_   _| |
- | |__   _ __ ___   __ _ _| | | (___  _   _ _ __ ___  _ __ ___   __ _ _ __ _   _    | | | |_ ___ _ __ ___
- |  __| | '_ ` _ \ / _` | | |  \___ \| | | | '_ ` _ \| '_ ` _ \ / _` | '__| | | |   | | | __/ _ \ '_ ` _ \
- | |____| | | | | | (_| | | |  ____) | |_| | | | | | | | | | | | (_| | |  | |_| |  _| |_| ||  __/ | | | | |
- |______|_| |_| |_|\__,_|_|_| |_____/ \__,_|_| |_| |_|_| |_| |_|\__,_|_|   \__, | |_____|\__\___|_| |_| |_|
-                                                                            __/ |
-                                                                           |___/
-*/
-export const EmailSummaryItemDemo = () => {
-    const [active, setActive] = useState(false);
-    return (_jsx(EmailSummaryItem, { style: { width: '25rem' }, id: createUID(), activeParticipants: [
+export const EmailSummaryItemDemo = (args) => {
+    return (_jsx(EmailSummaryItem, { id: createUID(), activeParticipants: [
             {
                 shortName: 'Robert',
                 fullName: 'Robert Downer',
@@ -819,43 +643,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, onSelect: (id) => {
-            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);
         } }));
 };
+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.slice(0, INITIAL_CHUNK_SIZE));
-    const [categories, setCategories] = useState([
-        {
-            id: 'item_0',
-            primary: 'Default worklist',
-            selected: false
-        },
-        {
-            id: 'item_1',
-            primary: 'Authors',
-            selected: false
-        },
-        {
-            id: 'item_2',
-            primary: 'Administrators',
-            selected: false
-        },
-        {
-            id: 'item_3',
-            primary: 'Managers',
-            selected: false
-        },
-        {
-            id: 'item_4',
-            primary: 'Users',
-            selected: false
-        }
-    ]);
+    const [categories, setCategories] = useState(emailWorklistItemsMock);
     const handleItemClick = (id) => {
         const index = allEmailItems.findIndex(emailItem => {
             return emailItem.id === id;
@@ -885,59 +690,23 @@ export const EmailSummaryListDemo = (args) => {
             }, 1500);
         }
     }, [loading]);
-    return (_jsx(EmailSummaryList, { style: { width: args.width, margin: args.margin, height: args.height }, 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.' }));
-};
-EmailSummaryListDemo.argTypes = {
-    width: {
-        table: {
-            disable: true
-        }
-    },
-    height: {
-        table: {
-            disable: true
-        }
-    },
-    margin: {
-        table: {
-            disable: true
-        }
-    }
-};
-EmailSummaryListDemo.args = {
-    height: '100vh',
-    width: '30rem',
-    margin: 'auto'
+    return (_jsx(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.' }));
 };
-EmailSummaryListDemo.parameters = {
-    layout: 'fullscreen'
-};
-export const EmailManagerDemo = () => {
+export const EmailManagerAppShell = (args) => {
     const INITIAL_CHUNK_SIZE = 9;
     const APPEND_CHUNK_SIZE = 1;
-    const initialEmailContent = (_jsxs(_Fragment, { children: [_jsx(Email, { forwardedContent: forwardedContent }), _jsx(Email, { forwardedContent: forwardedContent }), _jsx(Email, { forwardedContent: forwardedContent }), _jsx(Email, { forwardedContent: forwardedContent }), _jsx(Email, { forwardedContent: forwardedContent })] }));
-    const demoUtilities = (_jsxs(_Fragment, { children: [_jsx(AttachmentsMock, {}), _jsx(StakeHoldersDemo, {}), _jsx(MockSummaryList, { icon: 'user-star', name: 'Followers' }), _jsx(TagsDemo, {})] }));
-    const [content, setContent] = useState(initialEmailContent);
-    const [utilities, setUtilities] = useState(demoUtilities);
+    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);
-        /** Show email content and utilities based on the selected email item */
-        if (index % 2 === 0) {
-            setContent(_jsx(EmailDemo, {}));
-            setUtilities(_jsxs(_Fragment, { children: [_jsx(AttachmentsMock, {}), _jsx(MockSummaryList, { icon: 'user-star', name: 'Followers' })] }));
-        }
-        else {
-            setContent(_jsx(EmailDemo, { singleConversation: true }));
-            setUtilities(demoUtilities);
-        }
     };
     const onLoadMore = useCallback(() => {
         if (!loading) {
@@ -955,17 +724,33 @@ export const EmailManagerDemo = () => {
             }, 1500);
         }
     }, [loading]);
+    const activeItemIndex = useMemo(() => emailList.findIndex(emailItem => emailItem.id === activeItemId), [activeItemId, emailList]);
+    const content = activeItemId === undefined ? (_jsx(EmptyState, { message: 'No item selected!' })) : (_jsx(EmailShellDemo, { singleConversation: activeItemIndex % 2 === 0 }));
+    const utilities = activeItemId === undefined ? null : (
+    // View analysis utility
+    _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(EntityListDemo, { onContextMenu: args.onContextMenu, enableContextMenu: args.enableContextMenu }), _jsxs(Card, { children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'document-doc' }), _jsx(Text, { variant: 'h3', children: "Email header" })] }), _jsx(CardContent, { children: _jsx(FieldValueList, { fields: viewAnalysisEmailHeaderMock, variant: 'stacked' }) })] }), _jsx(SummaryList, { name: 'Topics', icon: 'headline', items: topicListMock.map(items => ({
+                    ...items,
+                    primary: _jsx(StyledLabel, { children: items.primary }),
+                    secondary: (_jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Text, { variant: 'primary', children: items.secondary.indicator }), _jsx(StyledLabel, { children: items.secondary.value })] }))
+                })), noItemsText: 'No items' })] }));
     return (_jsx(AppShellDemo, { appHeader: true, main: _jsx(EmailManager, { header: {
                 icon: 'mail',
                 title: 'Inbox'
-            }, list: _jsx(EmailSummaryListDemo, { width: 'unset', margin: 'unset', onItemClick: handleEmailItemClick, items: emailList, onLoadMore: hasMore ? onLoadMore : undefined, loading: loading }), content: content, utilities: utilities, utilitiesSummaryItems: [
-                { iconName: 'paper-clip', count: 4 },
-                { iconName: 'user-search-solid', count: 10 },
-                { iconName: 'user-star-solid', count: 5 },
-                { iconName: 'tag', count: 10 }
-            ], defaultCollapsedUtilities: false }) }));
+            }, list: _jsx(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' } }
 };
-EmailManagerDemo.parameters = {
+EmailManagerAppShell.parameters = {
     layout: 'fullscreen'
 };
 //# sourceMappingURL=Email.stories.js.map