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

package/lib/tools/PreviewShell/PreviewShell.stories.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(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 (_jsx(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.js.map

package/lib/tools/PreviewShell/PreviewShell.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.stories.js","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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/work/AppAnnouncement/AppAnnouncement.stories.js

@@ -1,30 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-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 (_jsx(AppAnnouncement, { heading: args.heading, description: args.description, details: details, whatsNewLink: args.whatsNewLink, image: args.image, onDismiss: () => push({ content: 'Dismissed AppAnnouncement' }) }, void 0));
+    return (_jsx(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.js.map

package/lib/work/AppAnnouncement/AppAnnouncement.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.stories.js","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,KAAC,eAAe,IACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,WAC/D,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.js","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,KAAC,eAAe,IACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,GAC/D,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/lib/work/CaseView/Attachments.mocks.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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';
 // ---------------------------------------------------------------------------------------------------------------------
 // getSummaryListItemProps
@@ -9,7 +9,7 @@ const getSummaryListItemProps = ({ ref, file, editFile, cancelFile, deleteFile }
     let actions;
     let visual;
     if (hasProp(file, 'progress') && typeof file.progress === 'number' && file.progress < 100) {
-        visual = _jsx(Progress, { value: file.progress, placement: 'inline', variant: 'ring' }, void 0);
+        visual = _jsx(Progress, { value: file.progress, placement: 'inline', variant: 'ring' });
         actions = [
             {
                 id: 'Cancel',
@@ -22,7 +22,7 @@ const getSummaryListItemProps = ({ ref, file, editFile, cancelFile, deleteFile }
         ];
     }
     else {
-        visual = (_jsx(FileVisual, { type: getKindFromMimeType(getMimeTypeFromFile(file.name) ?? ''), thumbnail: file.thumbnail }, void 0));
+        visual = (_jsx(FileVisual, { type: getKindFromMimeType(getMimeTypeFromFile(file.name) ?? ''), thumbnail: file.thumbnail }));
         actions = [
             {
                 id: 'Edit',
@@ -55,8 +55,8 @@ const getSummaryListItemProps = ({ ref, file, editFile, cancelFile, deleteFile }
         primary: file.name,
         secondary: (_jsx(Text, { variant: 'secondary', children: hasProp(file, 'progress') && typeof file.progress === 'number' && file.progress < 100 ? (`Uploading…${Math.floor(file.progress)}%`) : (_jsx(MetaList, { items: [
                     file.category,
-                    _jsxs(_Fragment, { children: ["Uploaded", ' ', _jsx(DateTimeDisplay, { variant: 'relative', value: file.createDate }, void 0)] }, void 0)
-                ] }, void 0)) }, void 0)),
+                    _jsxs(_Fragment, { children: ["Uploaded", ' ', _jsx(DateTimeDisplay, { variant: 'relative', value: file.createDate })] })
+                ] })) })),
         actions
     };
 };
@@ -88,7 +88,7 @@ const EditPopover = forwardRef(({ file, target, onSubmit, onCancel }, ref) => {
     }, [categories]);
     return (
     // Set an inline style ONLY until Popover width presets are available.
-    _jsx(Popover, { ref: ref, target: target, style: { width: '40ch' }, placement: 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, children: [_jsx(Text, { variant: 'h3', children: "Details" }, void 0), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Input, { label: 'Name', placeholder: 'Enter name\u2026', value: name, info: error, status: error ? 'error' : undefined, autoFocus: true, required: true, onChange: (e) => {
+    _jsx(Popover, { ref: ref, target: target, style: { width: '40ch' }, placement: 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, children: [_jsx(Text, { variant: 'h3', children: "Details" }), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Input, { label: 'Name', placeholder: 'Enter name\u2026', value: name, info: error, status: error ? 'error' : undefined, autoFocus: true, required: true, onChange: (e) => {
                                 setName(e.target.value);
                                 if (error && e.target.value) {
                                     setError('');
@@ -97,7 +97,7 @@ const EditPopover = forwardRef(({ file, target, onSubmit, onCancel }, ref) => {
                                 if (!name) {
                                     setError('Name is required.');
                                 }
-                            } }, void 0), _jsx(ComboBox, { label: 'Category', placeholder: 'Choose\u2026', selected: selectedCategory, menu: {
+                            } }), _jsx(ComboBox, { label: 'Category', placeholder: 'Choose\u2026', selected: selectedCategory, menu: {
                                 mode: 'single-select',
                                 items: categories,
                                 onItemClick: id => {
@@ -110,7 +110,7 @@ const EditPopover = forwardRef(({ file, target, onSubmit, onCancel }, ref) => {
                                         });
                                     });
                                 }
-                            } }, void 0)] }, void 0), _jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: onCancel, children: "Cancel" }, void 0), _jsx(Button, { variant: 'primary', onClick: () => {
+                            } })] }), _jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { onClick: onCancel, children: "Cancel" }), _jsx(Button, { variant: 'primary', onClick: () => {
                                 if (error)
                                     return;
                                 onSubmit({
@@ -119,13 +119,12 @@ const EditPopover = forwardRef(({ file, target, onSubmit, onCancel }, ref) => {
                                         ? ''
                                         : selectedCategory.items.text
                                 });
-                            }, children: "Submit" }, void 0)] }, void 0)] }, void 0) }, void 0));
+                            }, children: "Submit" })] })] }) }));
 });
 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);
@@ -202,11 +201,11 @@ const AttachmentsModal = ({ defaultMode }) => {
         ]);
     }, [files]);
     // Actions for the modal
-    const actions = mode === 'addNew' ? (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Cancel" }, void 0), _jsx(Button, { type: 'submit', variant: 'primary', 
+    const actions = mode === 'addNew' ? (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Cancel" }), _jsx(Button, { type: 'submit', variant: 'primary', 
                 // Normally this would trigger a submit event but we are preventing that in the Modal's onSubmit.
-                onClick: attachSelected, disabled: newFiles.length === 0, children: "Attach Files" }, void 0)] }, void 0)) : null;
+                onClick: attachSelected, disabled: newFiles.length === 0, children: "Attach Files" })] })) : null;
     // Content for the modal
-    const content = mode === 'addNew' ? (_jsx(FileInput, { multiple: true, label: 'Select files to attach', onFilesAdded: onFilesAdded, files: newFiles.map(f => ({ ...f, meta: f.category || undefined })) }, void 0)) : (_jsx(ViewAll, { loading: loading, items: (search ? files.filter(f => f.name.includes(search)) : files).map((file, i) => {
+    const content = mode === 'addNew' ? (_jsx(FileInput, { multiple: true, label: 'Select files to attach', onFilesAdded: onFilesAdded, files: newFiles.map(f => ({ ...f, meta: f.category || undefined })) })) : (_jsx(ViewAll, { loading: loading, items: (search ? files.filter(f => f.name.includes(search)) : files).map((file, i) => {
             return getSummaryListItemProps({
                 ref: (el) => {
                     listItemEls.current[i] = el;
@@ -241,7 +240,7 @@ const AttachmentsModal = ({ defaultMode }) => {
                     setMode('addNew');
                 }
             }
-        ], searchInputProps: { onSearchChange: value => setSearch(value) } }, void 0));
+        ], searchInputProps: { onSearchChange: value => setSearch(value) } }));
     return (_jsx(Modal, { as: mode === 'addNew' ? 'form' : undefined, heading: mode === 'addNew' ? 'Add attachments' : 'Attachments', actions: actions, onRequestDismiss: () => {
             return !editPopoverTargetLi;
         }, onSubmit: mode === 'addNew'
@@ -279,14 +278,14 @@ const AttachmentsModal = ({ defaultMode }) => {
                                 return file;
                             }));
                         }
-                    } }, void 0))] }, void 0) }, void 0));
+                    } }))] }) }));
 };
 // ---------------------------------------------------------------------------------------------------------------------
 // Attachments mock
 // ---------------------------------------------------------------------------------------------------------------------
 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([]);
@@ -356,7 +355,7 @@ export const AttachmentsMock = () => {
                     });
                 }), onViewAll: () => {
                     createModal(AttachmentsModal, { defaultMode: 'viewAll' });
-                } }, void 0), editPopoverTargetLi && (_jsx(EditPopover, { ref: editPopoverRef, target: menuButton, file: files[editFileIndex], onCancel: handlePopoverClose, onSubmit: ({ name, category }) => {
+                } }), editPopoverTargetLi && (_jsx(EditPopover, { ref: editPopoverRef, target: menuButton, file: files[editFileIndex], onCancel: handlePopoverClose, onSubmit: ({ name, category }) => {
                     handlePopoverClose();
                     setFiles(cur => cur.map((file, i) => {
                         if (i === editFileIndex) {
@@ -368,6 +367,6 @@ export const AttachmentsMock = () => {
                         }
                         return file;
                     }));
-                } }, void 0))] }, void 0));
+                } }))] }));
 };
 //# sourceMappingURL=Attachments.mocks.js.map

package/lib/work/CaseView/Attachments.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attachments.mocks.js","sourceRoot":"","sources":["../../../src/work/CaseView/Attachments.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  useCallback,\n  useContext,\n  useEffect,\n  FormEvent,\n  useRef,\n  Ref,\n  useMemo,\n  ChangeEvent,\n  forwardRef,\n  FC,\n  PropsWithoutRef\n} from 'react';\n\nimport {\n  Button,\n  FileInput,\n  FileVisual,\n  Progress,\n  Modal,\n  ModalManagerContext,\n  Text,\n  ToasterContext,\n  SummaryList,\n  ViewAll,\n  getKindFromMimeType,\n  getMimeTypeFromFile,\n  Action,\n  Popover,\n  Flex,\n  Input,\n  ComboBox,\n  createUID,\n  PopoverProps,\n  useOuterEvent,\n  hasProp,\n  DateTimeDisplay,\n  SummaryListItem,\n  MetaList\n} from '@pega/cosmos-react-core';\n\nimport {\n  FileServiceContext,\n  FileServiceContextValue,\n  mockAttachmentListRequest,\n  mockCategories,\n  MockFileAttachmentResource,\n  MockFileUploadItem\n} from './FileService.mock';\n\n// ---------------------------------------------------------------------------------------------------------------------\n// getSummaryListItemProps\n// ---------------------------------------------------------------------------------------------------------------------\nconst getSummaryListItemProps = ({\n  ref,\n  file,\n  editFile,\n  cancelFile,\n  deleteFile\n}: {\n  ref: Ref<HTMLLIElement>;\n  file: MockFileAttachmentResource | MockFileUploadItem;\n  editFile?: (file: MockFileAttachmentResource) => void;\n  cancelFile: FileServiceContextValue['cancelFile'];\n  deleteFile: FileServiceContextValue['deleteFile'];\n}): SummaryListItem => {\n  let actions: Action[];\n  let visual: JSX.Element;\n\n  if (hasProp(file, 'progress') && typeof file.progress === 'number' && file.progress < 100) {\n    visual = <Progress value={file.progress} placement='inline' variant='ring' />;\n    actions = [\n      {\n        id: 'Cancel',\n        text: 'Cancel',\n        icon: 'times',\n        onClick: () => {\n          cancelFile(file.id);\n        }\n      }\n    ];\n  } else {\n    visual = (\n      <FileVisual\n        type={getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '')}\n        thumbnail={(file as MockFileAttachmentResource).thumbnail}\n      />\n    );\n    actions = [\n      {\n        id: 'Edit',\n        text: 'Edit',\n        icon: 'pencil',\n        onClick: () => {\n          editFile?.(file);\n        }\n      },\n      {\n        id: 'Download',\n        text: 'Download',\n        icon: 'download',\n        onClick: () => {}\n      },\n      {\n        id: 'Delete',\n        text: 'Delete',\n        icon: 'trash',\n        onClick: () => {\n          deleteFile(file.id);\n        }\n      }\n    ];\n  }\n\n  return {\n    ref,\n    id: file.id,\n    visual,\n    primary: file.name,\n    secondary: (\n      <Text variant='secondary'>\n        {hasProp(file, 'progress') && typeof file.progress === 'number' && file.progress < 100 ? (\n          `Uploading…${Math.floor(file.progress)}%`\n        ) : (\n          <MetaList\n            items={[\n              file.category,\n              <>\n                Uploaded{' '}\n                <DateTimeDisplay\n                  variant='relative'\n                  value={(file as MockFileAttachmentResource).createDate}\n                />\n              </>\n            ]}\n          />\n        )}\n      </Text>\n    ),\n    actions\n  };\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n// Attachment edit Popover\n// ---------------------------------------------------------------------------------------------------------------------\ninterface EditPopoverProps {\n  file: MockFileAttachmentResource;\n  target: PopoverProps['target'];\n  onSubmit: (fields: { name: string; category: string }) => void;\n  onCancel: () => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst EditPopover: FC<EditPopoverProps> = forwardRef(\n  (\n    { file, target, onSubmit, onCancel }: PropsWithoutRef<EditPopoverProps>,\n    ref: EditPopoverProps['ref']\n  ) => {\n    const [name, setName] = useState(file.name);\n    const [error, setError] = useState('');\n\n    const [categories, setCategories] = useState(() => {\n      return [\n        { id: createUID(), primary: 'No category', selected: false },\n        ...mockCategories.map(category => {\n          return {\n            id: createUID(),\n            primary: category,\n            selected: file.category === category\n          };\n        })\n      ];\n    });\n\n    const selectedCategory = useMemo(() => {\n      const sc = categories.find(c => c.selected);\n      return sc\n        ? {\n            items: {\n              id: sc.id,\n              text: sc.primary\n            }\n          }\n        : undefined;\n    }, [categories]);\n\n    return (\n      // Set an inline style ONLY until Popover width presets are available.\n      <Popover ref={ref} target={target} style={{ width: '40ch' }} placement='bottom-start'>\n        <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n          <Text variant='h3'>Details</Text>\n\n          <Flex container={{ direction: 'column', gap: 2 }}>\n            <Input\n              label='Name'\n              placeholder='Enter name…'\n              value={name}\n              info={error}\n              status={error ? 'error' : undefined}\n              autoFocus\n              required\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                setName(e.target.value);\n                if (error && e.target.value) {\n                  setError('');\n                }\n              }}\n              onBlur={() => {\n                if (!name) {\n                  setError('Name is required.');\n                }\n              }}\n            />\n            <ComboBox\n              label='Category'\n              placeholder='Choose…'\n              selected={selectedCategory}\n              menu={{\n                mode: 'single-select',\n                items: categories,\n                onItemClick: id => {\n                  setCategories(cur => {\n                    return cur.map(category => {\n                      return {\n                        ...category,\n                        selected: category.id === id\n                      };\n                    });\n                  });\n                }\n              }}\n            />\n          </Flex>\n\n          <Flex container={{ justify: 'between' }}>\n            <Button onClick={onCancel}>Cancel</Button>\n            <Button\n              variant='primary'\n              onClick={() => {\n                if (error) return;\n                onSubmit({\n                  name,\n                  category:\n                    !selectedCategory || selectedCategory.items.text === 'No category'\n                      ? ''\n                      : selectedCategory.items.text\n                });\n              }}\n            >\n              Submit\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover>\n    );\n  }\n);\n\n// ---------------------------------------------------------------------------------------------------------------------\n// AttachmentsModal\n// ---------------------------------------------------------------------------------------------------------------------\ninterface AttachmentsModalProps {\n  defaultMode: 'viewAll' | 'addNew';\n}\n\nconst AttachmentsModal = ({ defaultMode }: AttachmentsModalProps) => {\n  const [mode, setMode] = useState(defaultMode);\n\n  const { push: pushToaster } = useContext(ToasterContext);\n  const { ModalContext } = useContext(ModalManagerContext);\n  const { dismiss } = useContext(ModalContext);\n  const { files, setFiles, cancelFile, attachFile, deleteFile } = useContext(FileServiceContext);\n\n  const [search, setSearch] = useState('');\n  const [loading, setLoading] = useState(true);\n  const [newFiles, setNewFiles] = useState<MockFileUploadItem[]>([]);\n\n  const attachSelected = useCallback(() => {\n    newFiles.forEach(attachFile);\n    dismiss();\n  }, [newFiles, attachFile]);\n\n  const listItemEls = useRef<HTMLLIElement[]>([]);\n  const [editFileIndex, setEditFileIndex] = useState<number>(-1);\n\n  const editPopoverTargetLi = useMemo(() => {\n    return editFileIndex !== undefined ? listItemEls.current[editFileIndex] : undefined;\n  }, [editFileIndex, listItemEls]);\n\n  const menuButton = useMemo(\n    () =>\n      editPopoverTargetLi\n        ? editPopoverTargetLi.querySelector<HTMLButtonElement>('button[aria-haspopup=\"menu\"]')\n        : null,\n    [editPopoverTargetLi]\n  );\n\n  const handlePopoverClose = useCallback(() => {\n    if (!editPopoverTargetLi) return;\n    setEditFileIndex(-1);\n    menuButton?.focus();\n  }, [menuButton, editPopoverTargetLi]);\n\n  const handleKeydown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      setEditFileIndex(-1);\n    }\n  }, []);\n\n  const editPopoverRef = useRef<HTMLDivElement>(null);\n\n  // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n  useOuterEvent('mousedown', [editPopoverRef], handlePopoverClose);\n\n  useEffect(() => {\n    if (mode === 'viewAll') {\n      const timeout = setTimeout(() => {\n        setLoading(false);\n      }, 1000);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }\n  }, [mode]);\n\n  useEffect(() => {\n    if (!editPopoverTargetLi) return;\n    document.addEventListener('keydown', handleKeydown);\n    return () => {\n      document.removeEventListener('keydown', handleKeydown);\n    };\n  }, [editPopoverTargetLi]);\n\n  useEffect(() => {\n    // Since the component is performing double duty we need to empty out ref elements from a prior render mode.\n    listItemEls.current = [];\n  }, [mode]);\n\n  const onFilesAdded = useCallback(\n    (newlyAddedFiles: File[]) => {\n      setNewFiles(current => [\n        ...newlyAddedFiles.map((file, i) => {\n          const id = createUID();\n          return {\n            id,\n            name: file.name,\n            category: '',\n            File: file,\n            ref: (el: HTMLLIElement) => {\n              listItemEls.current[i] = el;\n            },\n            onEdit: () => {\n              setEditFileIndex(i);\n            },\n            onCancel: () => {\n              setNewFiles(c => c.filter(f => f.id !== id));\n            }\n          };\n        }),\n        ...current\n      ]);\n    },\n    [files]\n  );\n\n  // Actions for the modal\n  const actions =\n    mode === 'addNew' ? (\n      <>\n        <Button onClick={dismiss}>Cancel</Button>\n        <Button\n          type='submit'\n          variant='primary'\n          // Normally this would trigger a submit event but we are preventing that in the Modal's onSubmit.\n          onClick={attachSelected}\n          disabled={newFiles.length === 0}\n        >\n          Attach Files\n        </Button>\n      </>\n    ) : null;\n\n  // Content for the modal\n  const content =\n    mode === 'addNew' ? (\n      <FileInput\n        multiple\n        label='Select files to attach'\n        onFilesAdded={onFilesAdded}\n        files={newFiles.map(f => ({ ...f, meta: f.category || undefined }))}\n      />\n    ) : (\n      <ViewAll\n        loading={loading}\n        items={(search ? files.filter(f => f.name.includes(search)) : files).map((file, i) => {\n          return getSummaryListItemProps({\n            ref: (el: HTMLLIElement) => {\n              listItemEls.current[i] = el;\n            },\n            file,\n            editFile: () => {\n              setEditFileIndex(i);\n            },\n            cancelFile: id => {\n              const canceledFile = files.find(f => f.id === id) as MockFileUploadItem;\n              cancelFile(id);\n              pushToaster({ content: `Cancelled attaching ${canceledFile.name}` });\n            },\n            deleteFile: async id => {\n              const deletedFile = files.find(f => f.id === id) as MockFileAttachmentResource;\n              await deleteFile(id);\n              pushToaster({ content: `${deletedFile.name} deleted` });\n            }\n          });\n        })}\n        actions={[\n          {\n            id: 'addNewFile',\n            text: 'Add files',\n            onClick: () => {\n              setMode('addNew');\n            }\n          },\n          {\n            id: 'addNewLink',\n            text: 'Add links',\n            onClick: () => {\n              setMode('addNew');\n            }\n          }\n        ]}\n        searchInputProps={{ onSearchChange: value => setSearch(value) }}\n      />\n    );\n\n  return (\n    <Modal\n      as={mode === 'addNew' ? 'form' : undefined}\n      heading={mode === 'addNew' ? 'Add attachments' : 'Attachments'}\n      actions={actions}\n      onRequestDismiss={() => {\n        return !editPopoverTargetLi;\n      }}\n      onSubmit={\n        mode === 'addNew'\n          ? (e: FormEvent) => {\n              e.preventDefault();\n            }\n          : undefined\n      }\n    >\n      <>\n        {content}\n        {editPopoverTargetLi && (\n          <EditPopover\n            ref={editPopoverRef}\n            target={menuButton}\n            file={mode === 'addNew' ? newFiles[editFileIndex] : files[editFileIndex]}\n            onCancel={handlePopoverClose}\n            onSubmit={({ name, category }) => {\n              handlePopoverClose();\n\n              // TS kept from easily consolidating like:\n              // const setter = mode === 'addNew' ? setNewFiles : setFiles;\n              // Could not avoid map's file param as \"any\".\n              if (mode === 'addNew') {\n                setNewFiles(cur => {\n                  return cur.map((file, i) => {\n                    if (i === editFileIndex) {\n                      return {\n                        ...file,\n                        name,\n                        category\n                      };\n                    }\n\n                    return file;\n                  });\n                });\n              } else {\n                setFiles(cur =>\n                  cur.map((file, i) => {\n                    if (i === editFileIndex) {\n                      return {\n                        ...file,\n                        name,\n                        category\n                      };\n                    }\n\n                    return file;\n                  })\n                );\n              }\n            }}\n          />\n        )}\n      </>\n    </Modal>\n  );\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n// Attachments mock\n// ---------------------------------------------------------------------------------------------------------------------\nexport const AttachmentsMock = () => {\n  const { push: pushToaster } = useContext(ToasterContext);\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [loading, setLoading] = useState(true);\n  const { files, setFiles, cancelFile, deleteFile } = useContext(FileServiceContext);\n\n  const listItemEls = useRef<HTMLLIElement[]>([]);\n  const [editFileIndex, setEditFileIndex] = useState<number>(-1);\n\n  const editPopoverTargetLi = useMemo(() => {\n    return editFileIndex !== undefined ? listItemEls.current[editFileIndex] : undefined;\n  }, [editFileIndex, listItemEls]);\n\n  const menuButton = useMemo(\n    () =>\n      editPopoverTargetLi\n        ? editPopoverTargetLi.querySelector<HTMLButtonElement>('button[aria-haspopup=\"menu\"]')\n        : null,\n    [editPopoverTargetLi]\n  );\n\n  const handlePopoverClose = useCallback(() => {\n    if (!editPopoverTargetLi) return;\n    setEditFileIndex(-1);\n    menuButton?.focus();\n  }, [menuButton, editPopoverTargetLi]);\n\n  const handleKeydown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      setEditFileIndex(-1);\n    }\n  }, []);\n\n  const editPopoverRef = useRef<HTMLDivElement>(null);\n\n  // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n  useOuterEvent('mousedown', [editPopoverRef], handlePopoverClose);\n\n  useEffect(() => {\n    mockAttachmentListRequest().then(attachments => {\n      setLoading(false);\n      setFiles(attachments);\n    });\n  }, []);\n\n  useEffect(() => {\n    if (!editPopoverTargetLi) return;\n    document.addEventListener('keydown', handleKeydown);\n    return () => {\n      document.removeEventListener('keydown', handleKeydown);\n    };\n  }, [editPopoverTargetLi]);\n\n  return (\n    <>\n      <SummaryList\n        icon='paper-clip'\n        name='Attachments'\n        loading={loading}\n        count={!loading && Array.isArray(files) ? files.length : undefined}\n        actions={[\n          {\n            text: 'Add attachments',\n            id: 'addNew',\n            icon: 'plus',\n            onClick() {\n              createModal(AttachmentsModal, { defaultMode: 'addNew' as const });\n            }\n          }\n        ]}\n        items={files.slice(0, 3).map((file, i) => {\n          return getSummaryListItemProps({\n            ref: (el: HTMLLIElement) => {\n              listItemEls.current[i] = el;\n            },\n            file,\n            editFile: () => {\n              setEditFileIndex(i);\n            },\n            cancelFile: id => {\n              const canceledFile = files.find(f => f.id === id) as MockFileUploadItem;\n              cancelFile(id);\n              pushToaster({ content: `Cancelled attaching ${canceledFile.name}` });\n            },\n            deleteFile: async id => {\n              const deletedFile = files.find(f => f.id === id) as MockFileAttachmentResource;\n              await deleteFile(id);\n              pushToaster({ content: `${deletedFile.name} deleted` });\n            }\n          });\n        })}\n        onViewAll={() => {\n          createModal(AttachmentsModal, { defaultMode: 'viewAll' as const });\n        }}\n      />\n      {editPopoverTargetLi && (\n        <EditPopover\n          ref={editPopoverRef}\n          target={menuButton}\n          file={files[editFileIndex]}\n          onCancel={handlePopoverClose}\n          onSubmit={({ name, category }) => {\n            handlePopoverClose();\n            setFiles(cur =>\n              cur.map((file, i) => {\n                if (i === editFileIndex) {\n                  return {\n                    ...file,\n                    name,\n                    category\n                  };\n                }\n\n                return file;\n              })\n            );\n          }}\n        />\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Attachments.mocks.js","sourceRoot":"","sources":["../../../src/work/CaseView/Attachments.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  useCallback,\n  useContext,\n  useEffect,\n  FormEvent,\n  useRef,\n  Ref,\n  useMemo,\n  ChangeEvent,\n  forwardRef,\n  FC,\n  PropsWithoutRef\n} from 'react';\n\nimport {\n  Button,\n  FileInput,\n  FileVisual,\n  Progress,\n  Modal,\n  Text,\n  SummaryList,\n  ViewAll,\n  getKindFromMimeType,\n  getMimeTypeFromFile,\n  Action,\n  Popover,\n  Flex,\n  Input,\n  ComboBox,\n  createUID,\n  PopoverProps,\n  useModalManager,\n  useModalContext,\n  useOuterEvent,\n  useToaster,\n  hasProp,\n  DateTimeDisplay,\n  SummaryListItem,\n  MetaList\n} from '@pega/cosmos-react-core';\n\nimport {\n  FileServiceContext,\n  FileServiceContextValue,\n  mockAttachmentListRequest,\n  mockCategories,\n  MockFileAttachmentResource,\n  MockFileUploadItem\n} from './FileService.mock';\n\n// ---------------------------------------------------------------------------------------------------------------------\n// getSummaryListItemProps\n// ---------------------------------------------------------------------------------------------------------------------\nconst getSummaryListItemProps = ({\n  ref,\n  file,\n  editFile,\n  cancelFile,\n  deleteFile\n}: {\n  ref: Ref<HTMLLIElement>;\n  file: MockFileAttachmentResource | MockFileUploadItem;\n  editFile?: (file: MockFileAttachmentResource) => void;\n  cancelFile: FileServiceContextValue['cancelFile'];\n  deleteFile: FileServiceContextValue['deleteFile'];\n}): SummaryListItem => {\n  let actions: Action[];\n  let visual: JSX.Element;\n\n  if (hasProp(file, 'progress') && typeof file.progress === 'number' && file.progress < 100) {\n    visual = <Progress value={file.progress} placement='inline' variant='ring' />;\n    actions = [\n      {\n        id: 'Cancel',\n        text: 'Cancel',\n        icon: 'times',\n        onClick: () => {\n          cancelFile(file.id);\n        }\n      }\n    ];\n  } else {\n    visual = (\n      <FileVisual\n        type={getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '')}\n        thumbnail={(file as MockFileAttachmentResource).thumbnail}\n      />\n    );\n    actions = [\n      {\n        id: 'Edit',\n        text: 'Edit',\n        icon: 'pencil',\n        onClick: () => {\n          editFile?.(file);\n        }\n      },\n      {\n        id: 'Download',\n        text: 'Download',\n        icon: 'download',\n        onClick: () => {}\n      },\n      {\n        id: 'Delete',\n        text: 'Delete',\n        icon: 'trash',\n        onClick: () => {\n          deleteFile(file.id);\n        }\n      }\n    ];\n  }\n\n  return {\n    ref,\n    id: file.id,\n    visual,\n    primary: file.name,\n    secondary: (\n      <Text variant='secondary'>\n        {hasProp(file, 'progress') && typeof file.progress === 'number' && file.progress < 100 ? (\n          `Uploading…${Math.floor(file.progress)}%`\n        ) : (\n          <MetaList\n            items={[\n              file.category,\n              <>\n                Uploaded{' '}\n                <DateTimeDisplay\n                  variant='relative'\n                  value={(file as MockFileAttachmentResource).createDate}\n                />\n              </>\n            ]}\n          />\n        )}\n      </Text>\n    ),\n    actions\n  };\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n// Attachment edit Popover\n// ---------------------------------------------------------------------------------------------------------------------\ninterface EditPopoverProps {\n  file: MockFileAttachmentResource;\n  target: PopoverProps['target'];\n  onSubmit: (fields: { name: string; category: string }) => void;\n  onCancel: () => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst EditPopover: FC<EditPopoverProps> = forwardRef(\n  (\n    { file, target, onSubmit, onCancel }: PropsWithoutRef<EditPopoverProps>,\n    ref: EditPopoverProps['ref']\n  ) => {\n    const [name, setName] = useState(file.name);\n    const [error, setError] = useState('');\n\n    const [categories, setCategories] = useState(() => {\n      return [\n        { id: createUID(), primary: 'No category', selected: false },\n        ...mockCategories.map(category => {\n          return {\n            id: createUID(),\n            primary: category,\n            selected: file.category === category\n          };\n        })\n      ];\n    });\n\n    const selectedCategory = useMemo(() => {\n      const sc = categories.find(c => c.selected);\n      return sc\n        ? {\n            items: {\n              id: sc.id,\n              text: sc.primary\n            }\n          }\n        : undefined;\n    }, [categories]);\n\n    return (\n      // Set an inline style ONLY until Popover width presets are available.\n      <Popover ref={ref} target={target} style={{ width: '40ch' }} placement='bottom-start'>\n        <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n          <Text variant='h3'>Details</Text>\n\n          <Flex container={{ direction: 'column', gap: 2 }}>\n            <Input\n              label='Name'\n              placeholder='Enter name…'\n              value={name}\n              info={error}\n              status={error ? 'error' : undefined}\n              autoFocus\n              required\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                setName(e.target.value);\n                if (error && e.target.value) {\n                  setError('');\n                }\n              }}\n              onBlur={() => {\n                if (!name) {\n                  setError('Name is required.');\n                }\n              }}\n            />\n            <ComboBox\n              label='Category'\n              placeholder='Choose…'\n              selected={selectedCategory}\n              menu={{\n                mode: 'single-select',\n                items: categories,\n                onItemClick: id => {\n                  setCategories(cur => {\n                    return cur.map(category => {\n                      return {\n                        ...category,\n                        selected: category.id === id\n                      };\n                    });\n                  });\n                }\n              }}\n            />\n          </Flex>\n\n          <Flex container={{ justify: 'between' }}>\n            <Button onClick={onCancel}>Cancel</Button>\n            <Button\n              variant='primary'\n              onClick={() => {\n                if (error) return;\n                onSubmit({\n                  name,\n                  category:\n                    !selectedCategory || selectedCategory.items.text === 'No category'\n                      ? ''\n                      : selectedCategory.items.text\n                });\n              }}\n            >\n              Submit\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover>\n    );\n  }\n);\n\n// ---------------------------------------------------------------------------------------------------------------------\n// AttachmentsModal\n// ---------------------------------------------------------------------------------------------------------------------\ninterface AttachmentsModalProps {\n  defaultMode: 'viewAll' | 'addNew';\n}\n\nconst AttachmentsModal = ({ defaultMode }: AttachmentsModalProps) => {\n  const [mode, setMode] = useState(defaultMode);\n\n  const { push: pushToaster } = useToaster();\n  const { dismiss } = useModalContext();\n  const { files, setFiles, cancelFile, attachFile, deleteFile } = useContext(FileServiceContext);\n\n  const [search, setSearch] = useState('');\n  const [loading, setLoading] = useState(true);\n  const [newFiles, setNewFiles] = useState<MockFileUploadItem[]>([]);\n\n  const attachSelected = useCallback(() => {\n    newFiles.forEach(attachFile);\n    dismiss();\n  }, [newFiles, attachFile]);\n\n  const listItemEls = useRef<HTMLLIElement[]>([]);\n  const [editFileIndex, setEditFileIndex] = useState<number>(-1);\n\n  const editPopoverTargetLi = useMemo(() => {\n    return editFileIndex !== undefined ? listItemEls.current[editFileIndex] : undefined;\n  }, [editFileIndex, listItemEls]);\n\n  const menuButton = useMemo(\n    () =>\n      editPopoverTargetLi\n        ? editPopoverTargetLi.querySelector<HTMLButtonElement>('button[aria-haspopup=\"menu\"]')\n        : null,\n    [editPopoverTargetLi]\n  );\n\n  const handlePopoverClose = useCallback(() => {\n    if (!editPopoverTargetLi) return;\n    setEditFileIndex(-1);\n    menuButton?.focus();\n  }, [menuButton, editPopoverTargetLi]);\n\n  const handleKeydown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      setEditFileIndex(-1);\n    }\n  }, []);\n\n  const editPopoverRef = useRef<HTMLDivElement>(null);\n\n  // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n  useOuterEvent('mousedown', [editPopoverRef], handlePopoverClose);\n\n  useEffect(() => {\n    if (mode === 'viewAll') {\n      const timeout = setTimeout(() => {\n        setLoading(false);\n      }, 1000);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }\n  }, [mode]);\n\n  useEffect(() => {\n    if (!editPopoverTargetLi) return;\n    document.addEventListener('keydown', handleKeydown);\n    return () => {\n      document.removeEventListener('keydown', handleKeydown);\n    };\n  }, [editPopoverTargetLi]);\n\n  useEffect(() => {\n    // Since the component is performing double duty we need to empty out ref elements from a prior render mode.\n    listItemEls.current = [];\n  }, [mode]);\n\n  const onFilesAdded = useCallback(\n    (newlyAddedFiles: File[]) => {\n      setNewFiles(current => [\n        ...newlyAddedFiles.map((file, i) => {\n          const id = createUID();\n          return {\n            id,\n            name: file.name,\n            category: '',\n            File: file,\n            ref: (el: HTMLLIElement) => {\n              listItemEls.current[i] = el;\n            },\n            onEdit: () => {\n              setEditFileIndex(i);\n            },\n            onCancel: () => {\n              setNewFiles(c => c.filter(f => f.id !== id));\n            }\n          };\n        }),\n        ...current\n      ]);\n    },\n    [files]\n  );\n\n  // Actions for the modal\n  const actions =\n    mode === 'addNew' ? (\n      <>\n        <Button onClick={dismiss}>Cancel</Button>\n        <Button\n          type='submit'\n          variant='primary'\n          // Normally this would trigger a submit event but we are preventing that in the Modal's onSubmit.\n          onClick={attachSelected}\n          disabled={newFiles.length === 0}\n        >\n          Attach Files\n        </Button>\n      </>\n    ) : null;\n\n  // Content for the modal\n  const content =\n    mode === 'addNew' ? (\n      <FileInput\n        multiple\n        label='Select files to attach'\n        onFilesAdded={onFilesAdded}\n        files={newFiles.map(f => ({ ...f, meta: f.category || undefined }))}\n      />\n    ) : (\n      <ViewAll\n        loading={loading}\n        items={(search ? files.filter(f => f.name.includes(search)) : files).map((file, i) => {\n          return getSummaryListItemProps({\n            ref: (el: HTMLLIElement) => {\n              listItemEls.current[i] = el;\n            },\n            file,\n            editFile: () => {\n              setEditFileIndex(i);\n            },\n            cancelFile: id => {\n              const canceledFile = files.find(f => f.id === id) as MockFileUploadItem;\n              cancelFile(id);\n              pushToaster({ content: `Cancelled attaching ${canceledFile.name}` });\n            },\n            deleteFile: async id => {\n              const deletedFile = files.find(f => f.id === id) as MockFileAttachmentResource;\n              await deleteFile(id);\n              pushToaster({ content: `${deletedFile.name} deleted` });\n            }\n          });\n        })}\n        actions={[\n          {\n            id: 'addNewFile',\n            text: 'Add files',\n            onClick: () => {\n              setMode('addNew');\n            }\n          },\n          {\n            id: 'addNewLink',\n            text: 'Add links',\n            onClick: () => {\n              setMode('addNew');\n            }\n          }\n        ]}\n        searchInputProps={{ onSearchChange: value => setSearch(value) }}\n      />\n    );\n\n  return (\n    <Modal\n      as={mode === 'addNew' ? 'form' : undefined}\n      heading={mode === 'addNew' ? 'Add attachments' : 'Attachments'}\n      actions={actions}\n      onRequestDismiss={() => {\n        return !editPopoverTargetLi;\n      }}\n      onSubmit={\n        mode === 'addNew'\n          ? (e: FormEvent) => {\n              e.preventDefault();\n            }\n          : undefined\n      }\n    >\n      <>\n        {content}\n        {editPopoverTargetLi && (\n          <EditPopover\n            ref={editPopoverRef}\n            target={menuButton}\n            file={mode === 'addNew' ? newFiles[editFileIndex] : files[editFileIndex]}\n            onCancel={handlePopoverClose}\n            onSubmit={({ name, category }) => {\n              handlePopoverClose();\n\n              // TS kept from easily consolidating like:\n              // const setter = mode === 'addNew' ? setNewFiles : setFiles;\n              // Could not avoid map's file param as \"any\".\n              if (mode === 'addNew') {\n                setNewFiles(cur => {\n                  return cur.map((file, i) => {\n                    if (i === editFileIndex) {\n                      return {\n                        ...file,\n                        name,\n                        category\n                      };\n                    }\n\n                    return file;\n                  });\n                });\n              } else {\n                setFiles(cur =>\n                  cur.map((file, i) => {\n                    if (i === editFileIndex) {\n                      return {\n                        ...file,\n                        name,\n                        category\n                      };\n                    }\n\n                    return file;\n                  })\n                );\n              }\n            }}\n          />\n        )}\n      </>\n    </Modal>\n  );\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n// Attachments mock\n// ---------------------------------------------------------------------------------------------------------------------\nexport const AttachmentsMock = () => {\n  const { push: pushToaster } = useToaster();\n  const { create: createModal } = useModalManager();\n  const [loading, setLoading] = useState(true);\n  const { files, setFiles, cancelFile, deleteFile } = useContext(FileServiceContext);\n\n  const listItemEls = useRef<HTMLLIElement[]>([]);\n  const [editFileIndex, setEditFileIndex] = useState<number>(-1);\n\n  const editPopoverTargetLi = useMemo(() => {\n    return editFileIndex !== undefined ? listItemEls.current[editFileIndex] : undefined;\n  }, [editFileIndex, listItemEls]);\n\n  const menuButton = useMemo(\n    () =>\n      editPopoverTargetLi\n        ? editPopoverTargetLi.querySelector<HTMLButtonElement>('button[aria-haspopup=\"menu\"]')\n        : null,\n    [editPopoverTargetLi]\n  );\n\n  const handlePopoverClose = useCallback(() => {\n    if (!editPopoverTargetLi) return;\n    setEditFileIndex(-1);\n    menuButton?.focus();\n  }, [menuButton, editPopoverTargetLi]);\n\n  const handleKeydown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      setEditFileIndex(-1);\n    }\n  }, []);\n\n  const editPopoverRef = useRef<HTMLDivElement>(null);\n\n  // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n  useOuterEvent('mousedown', [editPopoverRef], handlePopoverClose);\n\n  useEffect(() => {\n    mockAttachmentListRequest().then(attachments => {\n      setLoading(false);\n      setFiles(attachments);\n    });\n  }, []);\n\n  useEffect(() => {\n    if (!editPopoverTargetLi) return;\n    document.addEventListener('keydown', handleKeydown);\n    return () => {\n      document.removeEventListener('keydown', handleKeydown);\n    };\n  }, [editPopoverTargetLi]);\n\n  return (\n    <>\n      <SummaryList\n        icon='paper-clip'\n        name='Attachments'\n        loading={loading}\n        count={!loading && Array.isArray(files) ? files.length : undefined}\n        actions={[\n          {\n            text: 'Add attachments',\n            id: 'addNew',\n            icon: 'plus',\n            onClick() {\n              createModal(AttachmentsModal, { defaultMode: 'addNew' as const });\n            }\n          }\n        ]}\n        items={files.slice(0, 3).map((file, i) => {\n          return getSummaryListItemProps({\n            ref: (el: HTMLLIElement) => {\n              listItemEls.current[i] = el;\n            },\n            file,\n            editFile: () => {\n              setEditFileIndex(i);\n            },\n            cancelFile: id => {\n              const canceledFile = files.find(f => f.id === id) as MockFileUploadItem;\n              cancelFile(id);\n              pushToaster({ content: `Cancelled attaching ${canceledFile.name}` });\n            },\n            deleteFile: async id => {\n              const deletedFile = files.find(f => f.id === id) as MockFileAttachmentResource;\n              await deleteFile(id);\n              pushToaster({ content: `${deletedFile.name} deleted` });\n            }\n          });\n        })}\n        onViewAll={() => {\n          createModal(AttachmentsModal, { defaultMode: 'viewAll' as const });\n        }}\n      />\n      {editPopoverTargetLi && (\n        <EditPopover\n          ref={editPopoverRef}\n          target={menuButton}\n          file={files[editFileIndex]}\n          onCancel={handlePopoverClose}\n          onSubmit={({ name, category }) => {\n            handlePopoverClose();\n            setFiles(cur =>\n              cur.map((file, i) => {\n                if (i === editFileIndex) {\n                  return {\n                    ...file,\n                    name,\n                    category\n                  };\n                }\n\n                return file;\n              })\n            );\n          }}\n        />\n      )}\n    </>\n  );\n};\n"]}