@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/jsx/tools/DevTools/DevTools.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.mocks.js","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,cAAc,EACf,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import {\n  footerMenuMock,\n  footerTabsMockContent,\n  footerTabsMock\n} from '../PreviewShell/PreviewShell.mocks';\n\nexport { footerMenuMock, footerTabsMockContent, footerTabsMock };\n"]}

package/jsx/tools/DevTools/DevTools.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import { DevToolsProps } from '@pega/cosmos-react-tools';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface DevToolsStoryProps extends DevToolsProps {
+    showUtils?: boolean;
+    showActiveDebuggingState?: boolean;
+}
+export declare const DevToolsDemo: Story<DevToolsStoryProps>;
+//# sourceMappingURL=DevTools.stories.d.ts.map

package/jsx/tools/DevTools/DevTools.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAY,aAAa,EAAE,MAAM,0BAA0B,CAAC;;AAKnE,wBAMU;AAEV,UAAU,kBAAmB,SAAQ,aAAa;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqClD,CAAC"}

package/jsx/tools/DevTools/DevTools.stories.jsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { DevTools } from '@pega/cosmos-react-tools';
+import { Flex, MenuButton, Button, Icon } from '@pega/cosmos-react-core';
+import { footerTabsMockContent, footerTabsMock, footerMenuMock } from './DevTools.mocks';
+export default {
+    title: 'Tools/DevTools',
+    component: DevTools,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const DevToolsDemo = (args) => {
+    const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);
+    const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);
+    const utils = (<Flex container={{ alignItems: 'center', pad: [0, 2] }}>
+      <MenuButton text='More options' variant='simple' icon='more' iconOnly menu={{ items: footerMenuMock }}/>
+      <Button variant='simple' icon label='Open in new window' onClick={action('Clicked open in new window')}>
+        <Icon name='open'/>
+      </Button>
+    </Flex>);
+    return (<DevTools tabs={footerTabsMock} currentTabId={currentTabId} tabContent={tabContent} onTabClick={(id) => {
+            setCurrentTabId(id);
+            setTabContent(footerTabsMockContent[Number(id)]);
+        }} utils={args.showUtils && utils} onContinueDebug={args.showActiveDebuggingState ? () => { } : undefined}/>);
+};
+DevToolsDemo.args = {
+    showUtils: false,
+    showActiveDebuggingState: false
+};
+DevToolsDemo.argTypes = {
+    showUtils: { control: { type: 'boolean' } },
+    showActiveDebuggingState: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=DevTools.stories.jsx.map

package/jsx/tools/DevTools/DevTools.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTools.stories.jsx","sourceRoot":"","sources":["../../../src/tools/DevTools/DevTools.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAiB,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,CACZ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CACrD;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,cAAc,CACnB,OAAO,CAAC,QAAQ,CAChB,IAAI,CAAC,MAAM,CACX,QAAQ,CACR,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAElC;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,QAAQ,CAChB,IAAI,CACJ,KAAK,CAAC,oBAAoB,CAC1B,OAAO,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAE9C;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,cAAc,CAAC,CACrB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,UAAU,CAAC,CAAC,CAAC,EAAU,EAAE,EAAE;YACzB,eAAe,CAAC,EAAE,CAAC,CAAC;YACpB,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACnD,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,CAC/B,eAAe,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACtE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,wBAAwB,EAAE,KAAK;CAChC,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3D,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { DevTools, DevToolsProps } from '@pega/cosmos-react-tools';\nimport { Flex, MenuButton, Button, Icon } from '@pega/cosmos-react-core';\n\nimport { footerTabsMockContent, footerTabsMock, footerMenuMock } from './DevTools.mocks';\n\nexport default {\n  title: 'Tools/DevTools',\n  component: DevTools,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface DevToolsStoryProps extends DevToolsProps {\n  showUtils?: boolean;\n  showActiveDebuggingState?: boolean;\n}\n\nexport const DevToolsDemo: Story<DevToolsStoryProps> = (args: DevToolsStoryProps) => {\n  const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n\n  const utils = (\n    <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n      <MenuButton\n        text='More options'\n        variant='simple'\n        icon='more'\n        iconOnly\n        menu={{ items: footerMenuMock }}\n      />\n      <Button\n        variant='simple'\n        icon\n        label='Open in new window'\n        onClick={action('Clicked open in new window')}\n      >\n        <Icon name='open' />\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <DevTools\n      tabs={footerTabsMock}\n      currentTabId={currentTabId}\n      tabContent={tabContent}\n      onTabClick={(id: string) => {\n        setCurrentTabId(id);\n        setTabContent(footerTabsMockContent[Number(id)]);\n      }}\n      utils={args.showUtils && utils}\n      onContinueDebug={args.showActiveDebuggingState ? () => {} : undefined}\n    />\n  );\n};\n\nDevToolsDemo.args = {\n  showUtils: false,\n  showActiveDebuggingState: false\n};\n\nDevToolsDemo.argTypes = {\n  showUtils: { control: { type: 'boolean' } },\n  showActiveDebuggingState: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/tools/PreviewShell/PreviewShell.mocks.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MenuProps } from '@pega/cosmos-react-core';
+export declare const footerTabsMockContent: JSX.Element[];
+export declare const footerTabsMock: {
+    name: string;
+    id: string;
+}[];
+export declare const footerMenuMock: MenuProps['items'];
+//# sourceMappingURL=PreviewShell.mocks.d.ts.map

package/jsx/tools/PreviewShell/PreviewShell.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOpD,eAAO,MAAM,qBAAqB,eAKjC,CAAC;AAEF,eAAO,MAAM,cAAc;;;GAG1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,OAAO,CA2C7C,CAAC"}

package/jsx/tools/PreviewShell/PreviewShell.mocks.jsx

@@ -0,0 +1,58 @@
+import { ClipboardViewerDemo } from '../Clipboard/Clipboard.stories';
+import { EmptyStateDemo } from '../../core/EmptyState/EmptyState.stories';
+import { StyledContainer } from './PreviewShell.styles';
+export const footerTabsMockContent = [
+    <StyledContainer>
+    <EmptyStateDemo />
+  </StyledContainer>,
+    <ClipboardViewerDemo navigation={{ nodes: [] }}/>
+];
+export const footerTabsMock = [
+    { name: 'Tracer', id: '0' },
+    { name: 'Clipboard', id: '1' }
+];
+export const footerMenuMock = [
+    {
+        id: '1',
+        primary: 'Dock to bottom'
+    },
+    {
+        id: '2',
+        primary: 'Separate window'
+    },
+    {
+        id: '3',
+        primary: 'More tools',
+        items: [
+            {
+                id: '3-1',
+                primary: 'Network'
+            },
+            {
+                id: '3-2',
+                primary: 'Performance'
+            },
+            {
+                id: '3-3',
+                primary: 'Memory'
+            },
+            {
+                id: '3-4',
+                primary: 'Application'
+            }
+        ]
+    },
+    {
+        id: '4',
+        primary: 'Settings'
+    },
+    {
+        id: '5',
+        primary: 'Shortcuts'
+    },
+    {
+        id: '6',
+        primary: 'Help'
+    }
+];
+//# sourceMappingURL=PreviewShell.mocks.jsx.map

package/jsx/tools/PreviewShell/PreviewShell.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.mocks.jsx","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.mocks.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE1E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CACd;IAAA,CAAC,cAAc,CAAC,AAAD,EACjB;EAAA,EAAE,eAAe,CAAC;IAClB,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAG;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE;IAC3B,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,EAAE;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,gBAAgB;KAC1B;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,iBAAiB;KAC3B;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,SAAS;aACnB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,aAAa;aACvB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,QAAQ;aAClB;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,aAAa;aACvB;SACF;KACF;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,UAAU;KACpB;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,WAAW;KACrB;IACD;QACE,EAAE,EAAE,GAAG;QACP,OAAO,EAAE,MAAM;KAChB;CACF,CAAC","sourcesContent":["import { MenuProps } from '@pega/cosmos-react-core';\n\nimport { ClipboardViewerDemo } from '../Clipboard/Clipboard.stories';\nimport { EmptyStateDemo } from '../../core/EmptyState/EmptyState.stories';\n\nimport { StyledContainer } from './PreviewShell.styles';\n\nexport const footerTabsMockContent = [\n  <StyledContainer>\n    <EmptyStateDemo />\n  </StyledContainer>,\n  <ClipboardViewerDemo navigation={{ nodes: [] }} />\n];\n\nexport const footerTabsMock = [\n  { name: 'Tracer', id: '0' },\n  { name: 'Clipboard', id: '1' }\n];\n\nexport const footerMenuMock: MenuProps['items'] = [\n  {\n    id: '1',\n    primary: 'Dock to bottom'\n  },\n  {\n    id: '2',\n    primary: 'Separate window'\n  },\n  {\n    id: '3',\n    primary: 'More tools',\n    items: [\n      {\n        id: '3-1',\n        primary: 'Network'\n      },\n      {\n        id: '3-2',\n        primary: 'Performance'\n      },\n      {\n        id: '3-3',\n        primary: 'Memory'\n      },\n      {\n        id: '3-4',\n        primary: 'Application'\n      }\n    ]\n  },\n  {\n    id: '4',\n    primary: 'Settings'\n  },\n  {\n    id: '5',\n    primary: 'Shortcuts'\n  },\n  {\n    id: '6',\n    primary: 'Help'\n  }\n];\n"]}

package/jsx/tools/PreviewShell/PreviewShell.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react';
+import { PreviewShellProps } from '@pega/cosmos-react-tools';
+import { StatusProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface PreviewShellStoryProps extends PreviewShellProps {
+    appName: PreviewShellProps['header']['appName'];
+    statusVariant: StatusProps['variant'];
+    statusText: string;
+    operatorName: PreviewShellProps['header']['operator']['avatar']['name'];
+    expandFooter: PreviewShellProps['footer']['expanded'];
+    onNewWindowClick: PreviewShellProps['footer']['onNewWindowClick'];
+}
+export declare const PreviewShellSkeleton: Story<PreviewShellStoryProps>;
+export declare const PreviewShellDemo: Story<PreviewShellStoryProps>;
+//# sourceMappingURL=PreviewShell.stories.d.ts.map

package/jsx/tools/PreviewShell/PreviewShell.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAItD,wBAMU;AAEV,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IAChD,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACxE,YAAY,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IACtD,gBAAgB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,CAAC;CACnE;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,sBAAsB,CAgE9D,CAAC;AAuBF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAyE1D,CAAC"}

package/jsx/tools/PreviewShell/PreviewShell.stories.jsx

@@ -0,0 +1,153 @@
+import { action } from '@storybook/addon-actions';
+import { useEffect, useState } from 'react';
+import { PreviewShell } from '@pega/cosmos-react-tools';
+import { footerMenuMock, footerTabsMockContent, footerTabsMock } from './PreviewShell.mocks';
+export default {
+    title: 'Tools/PreviewShell',
+    component: PreviewShell,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const PreviewShellSkeleton = (args) => {
+    const [tabContent, setTabContent] = useState('Tab 1 content');
+    const [currentTabId, setCurrentTabId] = useState(footerTabsMock[0].id);
+    const [newWindow, setNewWindow] = useState(null);
+    return (<PreviewShell frameurl='' header={{
+            appName: args.appName,
+            status: {
+                variant: args.statusVariant,
+                children: args.statusText
+            },
+            operator: {
+                avatar: { name: args.operatorName || '' },
+                actions: [
+                    { primary: 'Profile', id: 'profile' },
+                    { primary: 'Settings', id: 'settings' },
+                    { primary: 'My applications', id: 'apps' },
+                    { primary: 'Help center', id: 'help' },
+                    { primary: 'Log out', id: 'logout' }
+                ],
+                name: args.operatorName
+            }
+        }} footer={{
+            tabs: footerTabsMock,
+            tabContent,
+            currentTabId,
+            onTabClick: (id) => {
+                setTabContent(`Tab ${+id + 1} content`);
+                setCurrentTabId(id);
+            },
+            expanded: args.expandFooter,
+            onContinueDebug: newWindow
+                ? () => {
+                    newWindow?.focus();
+                }
+                : undefined,
+            onNewWindowClick: args.onNewWindowClick ??
+                (() => {
+                    const newWindowObj = window.open(`${window.location.origin}/iframe.html?id=tools-devtools--dev-tools-demo&args=&viewMode=story`);
+                    setNewWindow(newWindowObj);
+                    newWindowObj?.addEventListener('load', () => {
+                        newWindowObj?.addEventListener('beforeunload', () => {
+                            setNewWindow(null);
+                        });
+                        newWindowObj?.addEventListener('unload', () => {
+                            document.querySelector('button[aria-label="Open in new window"]')?.focus();
+                        });
+                    });
+                }),
+            menu: { items: footerMenuMock }
+        }}/>);
+};
+PreviewShellSkeleton.args = {
+    appName: 'Title',
+    statusVariant: 'pending',
+    statusText: 'status',
+    operatorName: 'Cindy Turner',
+    expandFooter: true,
+    onNewWindowClick: undefined
+};
+PreviewShellSkeleton.argTypes = {
+    appName: { control: { type: 'text' } },
+    statusVariant: {
+        options: ['success', 'urgent', 'warn', 'pending', 'info'],
+        control: { type: 'select' }
+    },
+    statusText: { control: { type: 'text' } },
+    operatorName: { control: { type: 'text' } },
+    expandFooter: { control: { type: 'boolean' } },
+    onNewWindowClick: { table: { disable: true } }
+};
+export const PreviewShellDemo = (args) => {
+    const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);
+    const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);
+    const [newWindow, setNewWindow] = useState(null);
+    useEffect(() => {
+        if (newWindow?.self) {
+            newWindow.onload = () => {
+                newWindow.onbeforeunload = () => {
+                    setNewWindow(null);
+                };
+                newWindow.onunload = () => {
+                    document.querySelector('button[aria-label="Open in new window"]')?.focus();
+                };
+            };
+        }
+    }, [newWindow]);
+    return (<PreviewShell frameurl={`${window.location.href.split('?')[0]}?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`} header={{
+            appName: args.appName,
+            onClick: action('Clicked application name'),
+            status: {
+                variant: args.statusVariant,
+                children: args.statusText
+            },
+            operator: {
+                avatar: { name: args.operatorName },
+                actions: [
+                    { primary: 'Profile', id: 'profile' },
+                    { primary: 'Settings', id: 'settings' },
+                    { primary: 'My applications', id: 'apps' },
+                    { primary: 'Help center', id: 'help' },
+                    { primary: 'Log out', id: 'logout' }
+                ],
+                name: args.operatorName
+            }
+        }} footer={{
+            tabs: footerTabsMock,
+            currentTabId,
+            tabContent,
+            onTabClick: (id) => {
+                setTabContent(footerTabsMockContent[Number(id)]);
+                setCurrentTabId(id);
+            },
+            expanded: args.expandFooter,
+            onContinueDebug: newWindow
+                ? () => {
+                    newWindow?.focus();
+                }
+                : undefined,
+            onNewWindowClick: () => {
+                setNewWindow(window.open(`${window.location.href.split('?')[0]}?id=tools-devtools--dev-tools-demo&args=&viewMode=story`, 'Dev Tools', 'popup=true,width=800,height=500'));
+            },
+            menu: { items: footerMenuMock }
+        }}/>);
+};
+PreviewShellDemo.args = {
+    appName: 'U+ Desk',
+    statusVariant: 'pending',
+    statusText: 'development',
+    operatorName: 'Cindy Turner',
+    expandFooter: false
+};
+PreviewShellDemo.argTypes = {
+    appName: { control: { type: 'text' } },
+    statusVariant: {
+        options: ['success', 'urgent', 'warn', 'pending', 'info'],
+        control: { type: 'select' }
+    },
+    statusText: { control: { type: 'text' } },
+    operatorName: { control: { type: 'text' } },
+    expandFooter: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=PreviewShell.stories.jsx.map

package/jsx/tools/PreviewShell/PreviewShell.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.stories.jsx","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { useEffect, useState } from 'react';\n\nimport { PreviewShell, PreviewShellProps } from '@pega/cosmos-react-tools';\nimport { StatusProps } from '@pega/cosmos-react-core';\n\nimport { footerMenuMock, footerTabsMockContent, footerTabsMock } from './PreviewShell.mocks';\n\nexport default {\n  title: 'Tools/PreviewShell',\n  component: PreviewShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PreviewShellStoryProps extends PreviewShellProps {\n  appName: PreviewShellProps['header']['appName'];\n  statusVariant: StatusProps['variant'];\n  statusText: string;\n  operatorName: PreviewShellProps['header']['operator']['avatar']['name'];\n  expandFooter: PreviewShellProps['footer']['expanded'];\n  onNewWindowClick: PreviewShellProps['footer']['onNewWindowClick'];\n}\n\nexport const PreviewShellSkeleton: Story<PreviewShellStoryProps> = (\n  args: PreviewShellStoryProps\n) => {\n  const [tabContent, setTabContent] = useState('Tab 1 content');\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[0].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n\n  return (\n    <PreviewShell\n      frameurl=''\n      header={{\n        appName: args.appName,\n        status: {\n          variant: args.statusVariant,\n          children: args.statusText\n        },\n        operator: {\n          avatar: { name: args.operatorName || '' },\n          actions: [\n            { primary: 'Profile', id: 'profile' },\n            { primary: 'Settings', id: 'settings' },\n            { primary: 'My applications', id: 'apps' },\n            { primary: 'Help center', id: 'help' },\n            { primary: 'Log out', id: 'logout' }\n          ],\n          name: args.operatorName\n        }\n      }}\n      footer={{\n        tabs: footerTabsMock,\n        tabContent,\n        currentTabId,\n        onTabClick: (id: string) => {\n          setTabContent(`Tab ${+id + 1} content`);\n          setCurrentTabId(id);\n        },\n        expanded: args.expandFooter,\n        onContinueDebug: newWindow\n          ? () => {\n              newWindow?.focus();\n            }\n          : undefined,\n        onNewWindowClick:\n          args.onNewWindowClick ??\n          (() => {\n            const newWindowObj = window.open(\n              `${window.location.origin}/iframe.html?id=tools-devtools--dev-tools-demo&args=&viewMode=story`\n            );\n            setNewWindow(newWindowObj);\n            newWindowObj?.addEventListener('load', () => {\n              newWindowObj?.addEventListener('beforeunload', () => {\n                setNewWindow(null);\n              });\n              newWindowObj?.addEventListener('unload', () => {\n                (\n                  document.querySelector('button[aria-label=\"Open in new window\"]') as HTMLElement\n                )?.focus();\n              });\n            });\n          }),\n        menu: { items: footerMenuMock }\n      }}\n    />\n  );\n};\n\nPreviewShellSkeleton.args = {\n  appName: 'Title',\n  statusVariant: 'pending',\n  statusText: 'status',\n  operatorName: 'Cindy Turner',\n  expandFooter: true,\n  onNewWindowClick: undefined\n};\n\nPreviewShellSkeleton.argTypes = {\n  appName: { control: { type: 'text' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusText: { control: { type: 'text' } },\n  operatorName: { control: { type: 'text' } },\n  expandFooter: { control: { type: 'boolean' } },\n  onNewWindowClick: { table: { disable: true } }\n};\n\nexport const PreviewShellDemo: Story<PreviewShellStoryProps> = (args: PreviewShellStoryProps) => {\n  const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n\n  useEffect(() => {\n    if (newWindow?.self) {\n      newWindow.onload = () => {\n        newWindow.onbeforeunload = () => {\n          setNewWindow(null);\n        };\n        newWindow.onunload = () => {\n          (\n            document.querySelector('button[aria-label=\"Open in new window\"]') as HTMLElement\n          )?.focus();\n        };\n      };\n    }\n  }, [newWindow]);\n\n  return (\n    <PreviewShell\n      frameurl={`${\n        window.location.href.split('?')[0]\n      }?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`}\n      header={{\n        appName: args.appName,\n        onClick: action('Clicked application name'),\n        status: {\n          variant: args.statusVariant,\n          children: args.statusText\n        },\n        operator: {\n          avatar: { name: args.operatorName },\n          actions: [\n            { primary: 'Profile', id: 'profile' },\n            { primary: 'Settings', id: 'settings' },\n            { primary: 'My applications', id: 'apps' },\n            { primary: 'Help center', id: 'help' },\n            { primary: 'Log out', id: 'logout' }\n          ],\n          name: args.operatorName\n        }\n      }}\n      footer={{\n        tabs: footerTabsMock,\n        currentTabId,\n        tabContent,\n        onTabClick: (id: string) => {\n          setTabContent(footerTabsMockContent[Number(id)]);\n          setCurrentTabId(id);\n        },\n        expanded: args.expandFooter,\n        onContinueDebug: newWindow\n          ? () => {\n              newWindow?.focus();\n            }\n          : undefined,\n        onNewWindowClick: () => {\n          setNewWindow(\n            window.open(\n              `${\n                window.location.href.split('?')[0]\n              }?id=tools-devtools--dev-tools-demo&args=&viewMode=story`,\n              'Dev Tools',\n              'popup=true,width=800,height=500'\n            )\n          );\n        },\n        menu: { items: footerMenuMock }\n      }}\n    />\n  );\n};\n\nPreviewShellDemo.args = {\n  appName: 'U+ Desk',\n  statusVariant: 'pending',\n  statusText: 'development',\n  operatorName: 'Cindy Turner',\n  expandFooter: false\n};\n\nPreviewShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusText: { control: { type: 'text' } },\n  operatorName: { control: { type: 'text' } },\n  expandFooter: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/tools/PreviewShell/PreviewShell.styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledContainer: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FlexProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=PreviewShell.styles.d.ts.map

package/jsx/tools/PreviewShell/PreviewShell.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,eAAe,mOAG3B,CAAC"}

package/jsx/tools/PreviewShell/PreviewShell.styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Flex } from '@pega/cosmos-react-core';
+export const StyledContainer = styled(Flex) `
+  height: 100%;
+  width: 100vw;
+`;
+//# sourceMappingURL=PreviewShell.styles.js.map

package/jsx/tools/PreviewShell/PreviewShell.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAG1C,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nexport const StyledContainer = styled(Flex)`\n  height: 100%;\n  width: 100vw;\n`;\n"]}

package/jsx/work/AppAnnouncement/AppAnnouncement.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.stories.d.ts","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAEhF,wBAGU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAmB3D,CAAC"}
+{"version":3,"file":"AppAnnouncement.stories.d.ts","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAEhF,wBAGU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAoB3D,CAAC"}

package/jsx/work/AppAnnouncement/AppAnnouncement.stories.jsx

@@ -1,29 +1,30 @@
-import { useContext } from 'react';
-import { ToasterContext } from '@pega/cosmos-react-core';
+import { useToaster } from '@pega/cosmos-react-core';
 import { AppAnnouncement } from '@pega/cosmos-react-work';
 export default {
     title: 'Work/AppAnnouncement',
     component: AppAnnouncement
 };
 export const AppAnnouncementDemo = (args) => {
-    const { push } = useContext(ToasterContext);
+    const { push } = useToaster();
     const details = [
         'New React based UI rendering',
         'Streamlined components for all business needs',
         'Other improvements'
     ];
-    return (<AppAnnouncement heading={args.heading} description={args.description} details={details} whatsNewLink={args.whatsNewLink} image={args.image} onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}/>);
+    return (<AppAnnouncement heading={args.heading} description={args.description} details={details} whatsNewLink={args.whatsNewLink} whatsNewText={args.whatsNewText} image={args.image} onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}/>);
 };
 AppAnnouncementDemo.args = {
     heading: 'Pega Cosmos Design System',
     description: 'We have launched a brand new experience to accelerate your workflow!',
     whatsNewLink: 'https://www.pega.com',
+    whatsNewText: "See what's new",
     image: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'
 };
 AppAnnouncementDemo.argTypes = {
     heading: { control: { type: 'text' } },
     description: { control: { type: 'text' } },
     whatsNewLink: { control: { type: 'text' } },
+    whatsNewText: { control: { type: 'text' } },
     image: { control: { type: 'text' } }
 };
 //# sourceMappingURL=AppAnnouncement.stories.jsx.map

package/jsx/work/AppAnnouncement/AppAnnouncement.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.stories.jsx","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAEhF,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CACnB,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG;QACd,8BAA8B;QAC9B,+CAA+C;QAC/C,oBAAoB;KACrB,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CACd,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAChC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,CAAC,EAChE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,OAAO,EAAE,2BAA2B;IACpC,WAAW,EAAE,sEAAsE;IACnF,YAAY,EAAE,sBAAsB;IACpC,KAAK,EACH,kGAAkG;CACrG,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext } from 'react';\n\nimport { ToasterContext } from '@pega/cosmos-react-core';\nimport { AppAnnouncement, AppAnnouncementProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/AppAnnouncement',\n  component: AppAnnouncement\n} as Meta;\n\nexport const AppAnnouncementDemo: Story<AppAnnouncementProps> = (args: AppAnnouncementProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const details = [\n    'New React based UI rendering',\n    'Streamlined components for all business needs',\n    'Other improvements'\n  ];\n\n  return (\n    <AppAnnouncement\n      heading={args.heading}\n      description={args.description}\n      details={details}\n      whatsNewLink={args.whatsNewLink}\n      image={args.image}\n      onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}\n    />\n  );\n};\n\nAppAnnouncementDemo.args = {\n  heading: 'Pega Cosmos Design System',\n  description: 'We have launched a brand new experience to accelerate your workflow!',\n  whatsNewLink: 'https://www.pega.com',\n  image:\n    'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'\n};\n\nAppAnnouncementDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  whatsNewLink: { control: { type: 'text' } },\n  image: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"AppAnnouncement.stories.jsx","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAEhF,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CACnB,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,MAAM,OAAO,GAAG;QACd,8BAA8B;QAC9B,+CAA+C;QAC/C,oBAAoB;KACrB,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CACd,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAChC,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAChC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,CAAC,EAChE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,OAAO,EAAE,2BAA2B;IACpC,WAAW,EAAE,sEAAsE;IACnF,YAAY,EAAE,sBAAsB;IACpC,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EACH,kGAAkG;CACrG,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { useToaster } from '@pega/cosmos-react-core';\nimport { AppAnnouncement, AppAnnouncementProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/AppAnnouncement',\n  component: AppAnnouncement\n} as Meta;\n\nexport const AppAnnouncementDemo: Story<AppAnnouncementProps> = (args: AppAnnouncementProps) => {\n  const { push } = useToaster();\n\n  const details = [\n    'New React based UI rendering',\n    'Streamlined components for all business needs',\n    'Other improvements'\n  ];\n\n  return (\n    <AppAnnouncement\n      heading={args.heading}\n      description={args.description}\n      details={details}\n      whatsNewLink={args.whatsNewLink}\n      whatsNewText={args.whatsNewText}\n      image={args.image}\n      onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}\n    />\n  );\n};\n\nAppAnnouncementDemo.args = {\n  heading: 'Pega Cosmos Design System',\n  description: 'We have launched a brand new experience to accelerate your workflow!',\n  whatsNewLink: 'https://www.pega.com',\n  whatsNewText: \"See what's new\",\n  image:\n    'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'\n};\n\nAppAnnouncementDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  whatsNewLink: { control: { type: 'text' } },\n  whatsNewText: { control: { type: 'text' } },\n  image: { control: { type: 'text' } }\n};\n"]}

package/jsx/work/CaseView/Attachments.mocks.jsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useContext, useEffect, useRef, useMemo, forwardRef } from 'react';
-import { Button, FileInput, FileVisual, Progress, Modal, ModalManagerContext, Text, ToasterContext, SummaryList, ViewAll, getKindFromMimeType, getMimeTypeFromFile, Popover, Flex, Input, ComboBox, createUID, useOuterEvent, hasProp, DateTimeDisplay, MetaList } from '@pega/cosmos-react-core';
+import { Button, FileInput, FileVisual, Progress, Modal, Text, SummaryList, ViewAll, getKindFromMimeType, getMimeTypeFromFile, Popover, Flex, Input, ComboBox, createUID, useModalManager, useModalContext, useOuterEvent, useToaster, hasProp, DateTimeDisplay, MetaList } from '@pega/cosmos-react-core';
 import { FileServiceContext, mockAttachmentListRequest, mockCategories } from './FileService.mock';
 const getSummaryListItemProps = ({ ref, file, editFile, cancelFile, deleteFile }) => {
     let actions;
@@ -138,9 +138,8 @@ const EditPopover = forwardRef(({ file, target, onSubmit, onCancel }, ref) => {
 });
 const AttachmentsModal = ({ defaultMode }) => {
     const [mode, setMode] = useState(defaultMode);
-    const { push: pushToaster } = useContext(ToasterContext);
-    const { ModalContext } = useContext(ModalManagerContext);
-    const { dismiss } = useContext(ModalContext);
+    const { push: pushToaster } = useToaster();
+    const { dismiss } = useModalContext();
     const { files, setFiles, cancelFile, attachFile, deleteFile } = useContext(FileServiceContext);
     const [search, setSearch] = useState('');
     const [loading, setLoading] = useState(true);
@@ -298,8 +297,8 @@ const AttachmentsModal = ({ defaultMode }) => {
     </Modal>);
 };
 export const AttachmentsMock = () => {
-    const { push: pushToaster } = useContext(ToasterContext);
-    const { create: createModal } = useContext(ModalManagerContext);
+    const { push: pushToaster } = useToaster();
+    const { create: createModal } = useModalManager();
     const [loading, setLoading] = useState(true);
     const { files, setFiles, cancelFile, deleteFile } = useContext(FileServiceContext);
     const listItemEls = useRef([]);