@pega/cosmos-react-demos 3.0.0-dev.6.0 → 3.0.0-dev.9.0

package/jsx/build/AppHeader/AppHeader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAExE,wBAMU;AAEV,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,mBAAmB,CA+EhD,CAAC"}
+{"version":3,"file":"AppHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAExE,wBAMU;AAEV,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,mBAAmB,CAoFhD,CAAC"}

package/jsx/build/AppHeader/AppHeader.stories.jsx

@@ -9,6 +9,9 @@ export default {
 };
 export const appHeader = (args) => (<AppHeader brand={{
         name: 'AppStudioX',
+        visual: {
+            icon: 'pegasus'
+        },
         onClick: action('Clicked application')
     }} utils={{
         avatar: { name: 'Lee Ram' },
@@ -53,7 +56,9 @@ export const appHeader = (args) => (<AppHeader brand={{
                 }
             ]
         },
-        onPreviewClick: args.showPreview ? action('Clicked preview button') : undefined
+        action: args.showPreview
+            ? { id: 'preview', text: 'Preview', onClick: action('Clicked preview button') }
+            : undefined
     }} links={[
         {
             id: '1',

package/jsx/build/AppHeader/AppHeader.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { AppHeader, BranchButtonProps } from '@pega/cosmos-react-build';\n\nexport default {\n  title: 'Build/AppHeader',\n  component: AppHeader,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppHeaderStoryProps extends BranchButtonProps {\n  showPreview: boolean;\n}\n\nexport const appHeader: Story<AppHeaderStoryProps> = (args: AppHeaderStoryProps) => (\n  <AppHeader\n    brand={{\n      name: 'AppStudioX',\n      onClick: action('Clicked application')\n    }}\n    utils={{\n      avatar: { name: 'Lee Ram' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branch: {\n        text: args.text,\n        count: args.count,\n        variant: args.variant,\n        compact: args.compact,\n        items: [\n          {\n            primary: 'Commit to branch',\n            id: 'commitToBranch',\n            onClick: action('Clicked commitToBranch')\n          },\n          {\n            primary: 'Merge branch',\n            id: 'mergeBranch',\n            onClick: action('Clicked mergeBranch')\n          },\n          {\n            primary: 'View branch',\n            id: 'viewBranch',\n            onClick: action('Clicked viewBranch')\n          },\n          {\n            primary: 'Switch branch',\n            id: 'switchBranch',\n            onClick: action('Clicked switchBranch')\n          },\n          {\n            primary: 'Add branch',\n            id: 'addBranch',\n            onClick: action('Clicked addBranch')\n          },\n          {\n            primary: 'View all branches',\n            id: 'viewAllBranches',\n            onClick: action('Clicked viewAllBranches')\n          }\n        ]\n      },\n      onPreviewClick: args.showPreview ? action('Clicked preview button') : undefined\n    }}\n    links={[\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: action('Clicked Applications')\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: action('Clicked Shared resources')\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: action('Clicked Teams')\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: action('Clicked AI & Analytics')\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: action('Clicked Deploy')\n      }\n    ]}\n  />\n);\n\nappHeader.args = {\n  variant: undefined,\n  text: 'Alpha branch',\n  count: null,\n  compact: false,\n  showPreview: true\n};\n\nappHeader.argTypes = {\n  variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n  text: { control: { type: 'text' } },\n  count: { control: { type: 'number' } },\n  compact: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"AppHeader.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { AppHeader, BranchButtonProps } from '@pega/cosmos-react-build';\n\nexport default {\n  title: 'Build/AppHeader',\n  component: AppHeader,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppHeaderStoryProps extends BranchButtonProps {\n  showPreview: boolean;\n}\n\nexport const appHeader: Story<AppHeaderStoryProps> = (args: AppHeaderStoryProps) => (\n  <AppHeader\n    brand={{\n      name: 'AppStudioX',\n      visual: {\n        icon: 'pegasus'\n      },\n      onClick: action('Clicked application')\n    }}\n    utils={{\n      avatar: { name: 'Lee Ram' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branch: {\n        text: args.text,\n        count: args.count,\n        variant: args.variant,\n        compact: args.compact,\n        items: [\n          {\n            primary: 'Commit to branch',\n            id: 'commitToBranch',\n            onClick: action('Clicked commitToBranch')\n          },\n          {\n            primary: 'Merge branch',\n            id: 'mergeBranch',\n            onClick: action('Clicked mergeBranch')\n          },\n          {\n            primary: 'View branch',\n            id: 'viewBranch',\n            onClick: action('Clicked viewBranch')\n          },\n          {\n            primary: 'Switch branch',\n            id: 'switchBranch',\n            onClick: action('Clicked switchBranch')\n          },\n          {\n            primary: 'Add branch',\n            id: 'addBranch',\n            onClick: action('Clicked addBranch')\n          },\n          {\n            primary: 'View all branches',\n            id: 'viewAllBranches',\n            onClick: action('Clicked viewAllBranches')\n          }\n        ]\n      },\n      action: args.showPreview\n        ? { id: 'preview', text: 'Preview', onClick: action('Clicked preview button') }\n        : undefined\n    }}\n    links={[\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: action('Clicked Applications')\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: action('Clicked Shared resources')\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: action('Clicked Teams')\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: action('Clicked AI & Analytics')\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: action('Clicked Deploy')\n      }\n    ]}\n  />\n);\n\nappHeader.args = {\n  variant: undefined,\n  text: 'Alpha branch',\n  count: null,\n  compact: false,\n  showPreview: true\n};\n\nappHeader.argTypes = {\n  variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n  text: { control: { type: 'text' } },\n  count: { control: { type: 'number' } },\n  compact: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/build/AppShell/AppShell.mocks.d.ts

@@ -1,3 +1,4 @@
+import { FC } from 'react';
 export interface TabbedPageStoryProps {
     pageContent: PageContentProps;
     showBreadcrumbs: boolean;
@@ -64,4 +65,5 @@ export declare const treeList: ({
         label: string;
     }[];
 })[];
+export declare const TabbedPageComp: FC<TabbedPageStoryProps>;
 //# sourceMappingURL=AppShell.mocks.d.ts.map

package/jsx/build/AppShell/AppShell.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.mocks.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;QACxB,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;CACH;AAED,eAAO,MAAM,OAAO,SAAU,oBAAoB;;;;eAqBjD,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;GA2D/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;GAqB5B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;GAkSpB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;GAiC1B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;IA+FpB,CAAC"}
+{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;QACxB,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;CACH;AAED,eAAO,MAAM,OAAO,SAAU,oBAAoB;;;;eAqBjD,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;GA2D/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;GAqB5B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;GAkSpB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;GAiC1B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;IA+FpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,oBAAoB,CAwBnD,CAAC"}

package/jsx/build/AppShell/{AppShell.mocks.js → AppShell.mocks.jsx}

@@ -1,3 +1,4 @@
+import { TabbedPage, Text } from '@pega/cosmos-react-core';
 export const getPath = (args) => {
     const { showBreadcrumbs, pageContent: { data: { pageTitle, breadcrumbsPath } } } = args;
     if (showBreadcrumbs) {
@@ -515,4 +516,20 @@ export const treeList = [
         ]
     }
 ];
-//# sourceMappingURL=AppShell.mocks.js.map
+export const TabbedPageComp = (args) => {
+    const { pageContent, showBreadcrumbs } = args;
+    return (<TabbedPage path={getPath({ showBreadcrumbs, pageContent })} title={pageContent.data.pageTitle} tabs={{
+            tabs: pageContent.data.tabs.map((name, i) => {
+                const id = `${i + 1}`;
+                return {
+                    id,
+                    name,
+                    content: (<Text variant='h1' as='div'>
+                {`Tab ${id} content`}
+              </Text>)
+                };
+            }),
+            type: 'horizontal'
+        }}/>);
+};
+//# sourceMappingURL=AppShell.mocks.jsx.map

package/jsx/build/AppShell/AppShell.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.mocks.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\n\nimport { TabbedPage, Text } from '@pega/cosmos-react-core';\n\n// cSpell:words SSOT\nexport interface TabbedPageStoryProps {\n  pageContent: PageContentProps;\n  showBreadcrumbs: boolean;\n}\n\nexport interface PageContentProps {\n  id: string;\n  data: {\n    pageTitle: string;\n    breadcrumbsPath: string;\n    tabs: string[];\n  };\n}\n\nexport const getPath = (args: TabbedPageStoryProps) => {\n  const {\n    showBreadcrumbs,\n    pageContent: {\n      data: { pageTitle, breadcrumbsPath }\n    }\n  } = args;\n\n  if (showBreadcrumbs) {\n    const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;\n    return path\n      ? path.split(',').map((crumb: string, i) => {\n          // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n          return {\n            id: crumb,\n            primary: crumb,\n            href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n          };\n        })\n      : [];\n  }\n};\n\nexport const appExplorerMenuList = [\n  {\n    id: '50',\n    label: 'SysAdmin',\n    nodes: [\n      {\n        id: '54',\n        label: 'Class',\n        nodes: [\n          {\n            id: '55',\n            label: 'OJ4RFS-PegaTest-Work'\n          }\n        ]\n      }\n    ]\n  },\n  {\n    id: '51',\n    label: 'XCompass',\n    nodes: [\n      {\n        id: '56',\n        label: 'Data Model'\n      },\n      {\n        id: '57',\n        label: 'Process',\n        nodes: [\n          {\n            id: '60',\n            label: 'Case Type'\n          },\n          {\n            id: '61',\n            label: 'Flow'\n          },\n          {\n            id: '62',\n            label: 'Work Parties'\n          }\n        ]\n      },\n      {\n        id: '58',\n        label: 'Reports',\n        nodes: [\n          {\n            id: '63',\n            label: 'Report Definition'\n          }\n        ]\n      },\n      {\n        id: '59',\n        label: 'SysAdmin'\n      }\n    ]\n  }\n];\n\nexport const branchesMenuList = [\n  {\n    icon: 'nodes-right',\n    id: '40',\n    label: 'Theme-Cosmos'\n  },\n  {\n    icon: 'nodes-right',\n    id: '41',\n    label: 'PegaDevelopment'\n  },\n  {\n    icon: 'nodes-right',\n    id: '42',\n    label: 'PegaSSOT'\n  },\n  {\n    icon: 'nodes-right',\n    id: '43',\n    label: 'PegaRULES'\n  }\n];\n\nexport const contents = [\n  {\n    id: '1',\n    data: {\n      pageTitle: 'Application definition',\n      breadcrumbsPath: 'Home',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '100',\n    data: {\n      pageTitle: 'Decisions',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '101',\n    data: {\n      pageTitle: 'Validations',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '102',\n    data: {\n      pageTitle: 'When',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '103',\n    data: {\n      pageTitle: 'Configuration sets',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '104',\n    data: {\n      pageTitle: 'Data pages',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '105',\n    data: {\n      pageTitle: 'Data sources',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '106',\n    data: {\n      pageTitle: 'Data transforms',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '107',\n    data: {\n      pageTitle: 'Fields',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '108',\n    data: {\n      pageTitle: 'Queries',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '109',\n    data: {\n      pageTitle: 'Email account',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '110',\n    data: {\n      pageTitle: 'Integration systems',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '111',\n    data: {\n      pageTitle: 'Actions',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '112',\n    data: {\n      pageTitle: 'Automations',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '113',\n    data: {\n      pageTitle: 'Access groups',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '114',\n    data: {\n      pageTitle: 'Access roles',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '55',\n    data: {\n      pageTitle: 'OJ4RFS-PegaTest-Work',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '',\n    data: {\n      pageTitle: 'OJ4RFS-PegaTest-Work',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '56',\n    data: {\n      pageTitle: 'Data Model',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '60',\n    data: {\n      pageTitle: 'Case Type',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '61',\n    data: {\n      pageTitle: 'Flow',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '62',\n    data: {\n      pageTitle: 'Work Parties',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '63',\n    data: {\n      pageTitle: 'Report Definition',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '59',\n    data: {\n      pageTitle: 'SysAdmin',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n\n  {\n    id: '40',\n    data: {\n      pageTitle: 'Theme-Cosmos',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '41',\n    data: {\n      pageTitle: 'PegaDevelopment',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '42',\n    data: {\n      pageTitle: 'PegaSSOT',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '43',\n    data: {\n      pageTitle: 'PegaRULES',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '25',\n    data: {\n      pageTitle: 'Association',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '26',\n    data: {\n      pageTitle: 'Data Flow',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '27',\n    data: {\n      pageTitle: 'Adaptive Model',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '28',\n    data: {\n      pageTitle: 'Case Match',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '29',\n    data: {\n      pageTitle: 'Connect File',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '30',\n    data: {\n      pageTitle: 'Connect Cassandra',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  },\n  {\n    id: '31',\n    data: {\n      pageTitle: 'EForm File',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application']\n    }\n  },\n  {\n    id: '32',\n    data: {\n      pageTitle: 'Map eForm',\n      breadcrumbsPath: 'Home, U+ Desk',\n      tabs: ['Application', 'User Interface']\n    }\n  }\n];\n\nexport const recordMenuList = [\n  {\n    id: '21',\n    label: 'Data Model',\n    nodes: [\n      { id: '25', label: 'Association' },\n      { id: '26', label: 'Data Flow' }\n    ]\n  },\n  {\n    id: '22',\n    label: 'Decision',\n    nodes: [\n      { id: '27', label: 'Adaptive Model' },\n      { id: '28', label: 'Case Match' }\n    ]\n  },\n  {\n    id: '23',\n    label: 'Integration-Connectors',\n    nodes: [\n      { id: '29', label: 'Connect File' },\n      { id: '30', label: 'Connect Cassandra' }\n    ]\n  },\n  {\n    id: '24',\n    label: 'Integration-Mapping',\n    nodes: [\n      { id: '31', label: 'EForm File' },\n      { id: '32', label: 'Map eForm' }\n    ]\n  }\n];\n\nexport const treeList = [\n  {\n    id: '1',\n    label: 'Application definition'\n  },\n  {\n    id: '2',\n    label: 'App logic',\n    nodes: [\n      {\n        id: '100',\n        label: 'Decisions'\n      },\n      {\n        id: '101',\n        label: 'Validations'\n      },\n      {\n        id: '102',\n        label: 'When'\n      }\n    ]\n  },\n  {\n    id: '3',\n    label: 'Applications',\n    nodes: [\n      {\n        id: '103',\n        label: 'Configuration sets'\n      }\n    ]\n  },\n  {\n    id: '4',\n    label: 'Data',\n    nodes: [\n      {\n        id: '104',\n        label: 'Data pages'\n      },\n      {\n        id: '105',\n        label: 'Data sources'\n      },\n      {\n        id: '106',\n        label: 'Data transforms'\n      },\n      {\n        id: '107',\n        label: 'Fields'\n      },\n      {\n        id: '108',\n        label: 'Queries'\n      }\n    ]\n  },\n  {\n    id: '5',\n    label: 'Integration',\n    nodes: [\n      {\n        id: '109',\n        label: 'Email account'\n      },\n      {\n        id: '110',\n        label: 'Integration systems'\n      }\n    ]\n  },\n  {\n    id: '6',\n    label: 'Process',\n    nodes: [\n      {\n        id: '111',\n        label: 'Actions'\n      },\n      { id: '112', label: 'Automations' }\n    ]\n  },\n  {\n    id: '7',\n    label: 'Security',\n    nodes: [\n      {\n        id: '113',\n        label: 'Access groups'\n      },\n      { id: '114', label: 'Access roles' }\n    ]\n  }\n];\n\nexport const TabbedPageComp: FC<TabbedPageStoryProps> = (args: TabbedPageStoryProps) => {\n  const { pageContent, showBreadcrumbs } = args;\n\n  return (\n    <TabbedPage\n      path={getPath({ showBreadcrumbs, pageContent })}\n      title={pageContent.data.pageTitle}\n      tabs={{\n        tabs: pageContent.data.tabs.map((name, i) => {\n          const id = `${i + 1}`;\n          return {\n            id,\n            name,\n            content: (\n              <Text variant='h1' as='div'>\n                {`Tab ${id} content`}\n              </Text>\n            )\n          };\n        }),\n        type: 'horizontal'\n      }}\n    />\n  );\n};\n"]}

package/jsx/build/AppShell/AppShell.stories.d.ts

@@ -1,15 +1,13 @@
-import { MouseEvent } from 'react';
 import { Meta, Story } from '@storybook/react';
+import { Action } from '@pega/cosmos-react-core';
 import { BranchButtonProps } from '@pega/cosmos-react-build';
-import { TabbedPageStoryProps } from './AppShell.mocks';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export interface AppShellStoryProps extends BranchButtonProps {
     hideNavigation: boolean;
     showBreadcrumbs: boolean;
     showPreview: boolean;
-    onPreviewClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    onPreviewClick: Action['onClick'];
 }
-export declare const TabbedPage: Story<TabbedPageStoryProps>;
 export declare const AppShellDemo: Story<AppShellStoryProps>;
 //# sourceMappingURL=AppShell.stories.d.ts.map

package/jsx/build/AppShell/AppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAS/C,OAAO,EAAY,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,OAAO,EAOL,oBAAoB,EAErB,MAAM,kBAAkB,CAAC;;AAE1B,wBAMU;AAEV,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,oBAAoB,CA4BlD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAmLlD,CAAC"}
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,MAAM,EAAkC,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAY,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAYvE,wBAMU;AAEV,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CA4LlD,CAAC"}

package/jsx/build/AppShell/AppShell.stories.jsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Text, treeHelpers, TabbedPage as TabbedPageComp } from '@pega/cosmos-react-core';
+import { treeHelpers } from '@pega/cosmos-react-core';
 import { AppShell } from '@pega/cosmos-react-build';
-import { appExplorerMenuList, branchesMenuList, contents, getPath, recordMenuList, treeList } from './AppShell.mocks';
+import { appExplorerMenuList, branchesMenuList, contents, recordMenuList, treeList, TabbedPageComp } from './AppShell.mocks';
 export default {
     title: 'Build/AppShell',
     component: AppShell,
@@ -10,31 +10,12 @@ export default {
         layout: 'fullscreen'
     }
 };
-export const TabbedPage = (args) => {
-    const [currentTabId, setCurrentTabId] = useState('1');
-    const [content, setContent] = useState('Tab 1 content');
-    const { pageContent, showBreadcrumbs } = args;
-    return (<TabbedPageComp a={<Text variant='h1' as='div'>
-          {content}
-        </Text>} path={getPath({ showBreadcrumbs, pageContent })} title={pageContent.data.pageTitle} tabs={{
-            tabs: pageContent.data.tabs.map((name, i) => {
-                const id = `${i + 1}`;
-                return { id, name };
-            }),
-            type: 'horizontal',
-            currentTabId,
-            onTabClick: id => {
-                setCurrentTabId(id);
-                setContent(`Tab ${id} content`);
-            }
-        }}/>);
-};
 export const AppShellDemo = (args) => {
     const [currentNodeId, setCurrentNodeId] = useState('60');
     const [allNodes, setAllNodes] = useState(treeHelpers.expandTo(appExplorerMenuList, currentNodeId));
     const [currentDrawer, setCurrentDrawer] = useState('explorer');
     const [currentUtil, setCurrentUtil] = useState('explorer');
-    const [pageContent, setPageContent] = useState(contents[0]);
+    const [pageContent, setPageContent] = useState(contents[19]);
     const onNodeClick = (nodeId, activeDrawerId) => {
         const clickedNode = treeHelpers.getNode(allNodes, nodeId);
         if (!clickedNode?.nodes) {
@@ -52,7 +33,10 @@ export const AppShellDemo = (args) => {
     };
     const appHeader = {
         brand: {
-            name: 'AppStudioX'
+            name: 'AppStudioX',
+            visual: {
+                icon: 'pegasus'
+            }
         },
         utils: {
             avatar: { name: 'Alan' },
@@ -97,7 +81,13 @@ export const AppShellDemo = (args) => {
                     }
                 ]
             },
-            onPreviewClick: args.showPreview ? args.onPreviewClick : undefined
+            action: args.showPreview
+                ? {
+                    id: 'preview',
+                    text: 'Preview',
+                    onClick: args.onPreviewClick
+                }
+                : undefined
         },
         links: [
             {
@@ -128,14 +118,14 @@ export const AppShellDemo = (args) => {
         ]
     };
     return (<>
-      <AppShell main={<TabbedPage {...{ ...args, pageContent }}/>} appHeader={appHeader} hideNav={args.hideNavigation} appInfo={{
+      <AppShell main={<TabbedPageComp {...{ ...args, pageContent }}/>} appHeader={appHeader} hideNav={args.hideNavigation} appInfo={{
             text: 'U+ Desk',
             visual: {
-                icon: {
-                    name: 'phone-in-solid',
-                    bgColor: '#0ac7c8'
-                }
-            }
+                icon: 'phone-in-solid',
+                backgroundColor: '#0ac7c8',
+                color: '#fff'
+            },
+            meta: ['1.0.0']
         }} navigation={{
             nodes: allNodes,
             currentNodeId,

package/jsx/build/AppShell/AppShell.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Text,\n  StandardTreeProps,\n  treeHelpers,\n  TabbedPage as TabbedPageComp\n} from '@pega/cosmos-react-core';\nimport { AppShell, BranchButtonProps } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  getPath,\n  PageContentProps,\n  recordMenuList,\n  TabbedPageStoryProps,\n  treeList\n} from './AppShell.mocks';\n\nexport default {\n  title: 'Build/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface AppShellStoryProps extends BranchButtonProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const TabbedPage: Story<TabbedPageStoryProps> = (args: TabbedPageStoryProps) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n  const [content, setContent] = useState('Tab 1 content');\n  const { pageContent, showBreadcrumbs } = args;\n\n  return (\n    <TabbedPageComp\n      a={\n        <Text variant='h1' as='div'>\n          {content}\n        </Text>\n      }\n      path={getPath({ showBreadcrumbs, pageContent })}\n      title={pageContent.data.pageTitle}\n      tabs={{\n        tabs: pageContent.data.tabs.map((name, i) => {\n          const id = `${i + 1}`;\n          return { id, name };\n        }),\n        type: 'horizontal',\n        currentTabId,\n        onTabClick: id => {\n          setCurrentTabId(id);\n          setContent(`Tab ${id} content`);\n        }\n      }}\n    />\n  );\n};\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n    treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n  );\n  const [currentDrawer, setCurrentDrawer] = useState('explorer');\n  const [currentUtil, setCurrentUtil] = useState('explorer');\n  const [pageContent, setPageContent] = useState<PageContentProps>(contents[0]);\n\n  const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n    if (!clickedNode?.nodes) {\n      setCurrentUtil(activeDrawerId);\n      setCurrentNodeId(nodeId);\n      setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, nodeId, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branch: {\n        text: args.text,\n        variant: args.variant,\n        count: args.count,\n        compact: args.compact,\n        items: [\n          {\n            primary: 'Commit to branch',\n            id: 'commitToBranch',\n            onClick: action('Clicked commitToBranch')\n          },\n          {\n            primary: 'Merge branch',\n            id: 'mergeBranch',\n            onClick: action('Clicked mergeBranch')\n          },\n          {\n            primary: 'View branch',\n            id: 'viewBranch',\n            onClick: action('Clicked viewBranch')\n          },\n          {\n            primary: 'Switch branch',\n            id: 'switchBranch',\n            onClick: action('Clicked switchBranch')\n          },\n          {\n            primary: 'Add branch',\n            id: 'addBranch',\n            onClick: action('Clicked addBranch')\n          },\n          {\n            primary: 'View all branches',\n            id: 'viewAllBranches',\n            onClick: action('Clicked viewAllBranches')\n          }\n        ]\n      },\n      onPreviewClick: args.showPreview ? args.onPreviewClick : undefined\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => action('Clicked Applications')()\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => action('Clicked Shared resources')()\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => action('Clicked Teams')()\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => action('Clicked AI & Analytics')()\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => action('Clicked Deploy')()\n      }\n    ]\n  };\n\n  return (\n    <>\n      <AppShell\n        main={<TabbedPage {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick: id => {\n            onNodeClick(id, currentDrawer);\n          }\n        }}\n        utils={{\n          onItemClick: id => {\n            setCurrentDrawer(id);\n            if (id === 'explorer') {\n              const appExploreTree = currentNodeId\n                ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n                : appExplorerMenuList;\n              setAllNodes(appExploreTree);\n            }\n\n            if (id === 'branches') {\n              const branchTree = currentNodeId\n                ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n                : branchesMenuList;\n              setAllNodes(branchTree);\n            }\n\n            if (id === 'records') {\n              const recordTree = currentNodeId\n                ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n                : recordMenuList;\n              setAllNodes(recordTree);\n            }\n          },\n          currentItemId: currentUtil,\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => {\n              setCurrentDrawer('');\n              setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n            }\n          },\n          devMode: true\n        }}\n      />\n    </>\n  );\n};\n\nAppShellDemo.args = {\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  variant: undefined,\n  text: 'Alpha branch',\n  count: null,\n  compact: false,\n  showPreview: true,\n  // eslint-disable-next-line demo-patterns/literal-args\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n  text: { control: { type: 'text' } },\n  count: { control: { type: 'number' } },\n  compact: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Action, StandardTreeProps, treeHelpers } from '@pega/cosmos-react-core';\nimport { AppShell, BranchButtonProps } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  PageContentProps,\n  recordMenuList,\n  treeList,\n  TabbedPageComp\n} from './AppShell.mocks';\n\nexport default {\n  title: 'Build/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface AppShellStoryProps extends BranchButtonProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: Action['onClick'];\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n    treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n  );\n  const [currentDrawer, setCurrentDrawer] = useState('explorer');\n  const [currentUtil, setCurrentUtil] = useState('explorer');\n  const [pageContent, setPageContent] = useState<PageContentProps>(contents[19]);\n\n  const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n    if (!clickedNode?.nodes) {\n      setCurrentUtil(activeDrawerId);\n      setCurrentNodeId(nodeId);\n      setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, nodeId, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX',\n      visual: {\n        icon: 'pegasus'\n      }\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branch: {\n        text: args.text,\n        variant: args.variant,\n        count: args.count,\n        compact: args.compact,\n        items: [\n          {\n            primary: 'Commit to branch',\n            id: 'commitToBranch',\n            onClick: action('Clicked commitToBranch')\n          },\n          {\n            primary: 'Merge branch',\n            id: 'mergeBranch',\n            onClick: action('Clicked mergeBranch')\n          },\n          {\n            primary: 'View branch',\n            id: 'viewBranch',\n            onClick: action('Clicked viewBranch')\n          },\n          {\n            primary: 'Switch branch',\n            id: 'switchBranch',\n            onClick: action('Clicked switchBranch')\n          },\n          {\n            primary: 'Add branch',\n            id: 'addBranch',\n            onClick: action('Clicked addBranch')\n          },\n          {\n            primary: 'View all branches',\n            id: 'viewAllBranches',\n            onClick: action('Clicked viewAllBranches')\n          }\n        ]\n      },\n      action: args.showPreview\n        ? {\n            id: 'preview',\n            text: 'Preview',\n            onClick: args.onPreviewClick\n          }\n        : undefined\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => action('Clicked Applications')()\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => action('Clicked Shared resources')()\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => action('Clicked Teams')()\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => action('Clicked AI & Analytics')()\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => action('Clicked Deploy')()\n      }\n    ]\n  };\n\n  return (\n    <>\n      <AppShell\n        main={<TabbedPageComp {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: 'phone-in-solid',\n            backgroundColor: '#0ac7c8',\n            color: '#fff'\n          },\n          meta: ['1.0.0']\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick: id => {\n            onNodeClick(id, currentDrawer);\n          }\n        }}\n        utils={{\n          onItemClick: id => {\n            setCurrentDrawer(id);\n            if (id === 'explorer') {\n              const appExploreTree = currentNodeId\n                ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n                : appExplorerMenuList;\n              setAllNodes(appExploreTree);\n            }\n\n            if (id === 'branches') {\n              const branchTree = currentNodeId\n                ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n                : branchesMenuList;\n              setAllNodes(branchTree);\n            }\n\n            if (id === 'records') {\n              const recordTree = currentNodeId\n                ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n                : recordMenuList;\n              setAllNodes(recordTree);\n            }\n          },\n          currentItemId: currentUtil,\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => {\n              setCurrentDrawer('');\n              setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n            }\n          },\n          devMode: true\n        }}\n      />\n    </>\n  );\n};\n\nAppShellDemo.args = {\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  variant: undefined,\n  text: 'Alpha branch',\n  count: null,\n  compact: false,\n  showPreview: true,\n  // eslint-disable-next-line demo-patterns/literal-args\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n  text: { control: { type: 'text' } },\n  count: { control: { type: 'number' } },\n  compact: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { DynamicContentEditorProps } from '@pega/cosmos-react-build';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {
 }
-export declare const DynamicContentEditorDemo: (args: DynamicContentEditorStoryProps) => JSX.Element;
+export declare const DynamicContentEditorDemo: Story<DynamicContentEditorStoryProps>;
 //# sourceMappingURL=DynamicContentEditor.stories.d.ts.map

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAgBxC,OAAO,EAEL,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;;AAIlC,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,SAAU,8BAA8B,gBA2G5E,CAAC"}
+{"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAgB/C,OAAO,EAEL,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;;AAIlC,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,8BAA8B,CA6G1E,CAAC"}

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  TextArea,\n  useAutoResize,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { EditorState } from '@pega/cosmos-react-rte';\nimport {\n  DynamicContentEditor,\n  DynamicContentEditorProps,\n  ItemType\n} from '@pega/cosmos-react-build';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n  title: 'Build/DynamicContentEditor',\n  component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo = (args: DynamicContentEditorStoryProps) => {\n  const [html, setHtml] = useState(\n    '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n  );\n  const rteRef = useRef<EditorState>(null);\n\n  const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n    { id: 'CustomerName', primary: 'CustomerName' },\n    { id: 'Address', primary: 'Address' },\n    { id: 'Locality', primary: 'Locality' },\n    { id: 'Country', primary: 'Country' },\n    { id: 'Region', primary: 'Region' },\n    { id: 'Occupation', primary: 'Occupation' },\n    { id: 'City', primary: 'City' },\n    { id: 'Colony', primary: 'Colony' },\n    { id: 'Lastname', primary: 'Lastname' },\n    { id: 'Preference', primary: 'Preference' },\n    { id: 'Currency', primary: 'Currency' },\n    { id: 'Iconname', primary: 'Iconname' }\n  ];\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n  const ref = useRef(null);\n  const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n  const handleShowHtml = () => {\n    resizeTextArea();\n    setHtml(rteRef.current?.getHtml() || '');\n  };\n  const t = useI18n();\n  const [selectedField, setSelectedField] = useState<ItemType>({\n    id: '',\n    text: ''\n  });\n\n  const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n    setSelectedField(selectedItem);\n  };\n  const onSubmit = useCallback(\n    (insertField: (selectedField: ItemType) => void) => {\n      insertField(selectedField);\n    },\n    [selectedField]\n  );\n\n  const dynamicContentPicker = (\n    <Flex\n      container={{\n        gap: 2,\n        direction: 'column'\n      }}\n    >\n      <FieldSelector\n        itemList={[\n          { id: 'CustomerName', text: 'CustomerName' },\n          { id: 'Address', text: 'Address' },\n          { id: 'Locality', text: 'Locality' },\n          { id: 'Country', text: 'Country' },\n          { id: 'Region', text: 'Region' },\n          { id: 'Occupation', text: 'Occupation' }\n        ]}\n        key={selectedField?.id}\n        label='Field'\n        updateSelection={updateSelection}\n        placeholder={t('select')}\n        defaultSelection={selectedField}\n      />\n    </Flex>\n  );\n  const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea\n            value={html}\n            onChange={e => setHtml(e.target.value)}\n            autoResize\n            ref={consolidatedRef}\n          />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <DynamicContentEditor\n        defaultValue={args.defaultValue || html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label='Dynamic content editor'\n        toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n        form={args.form || { onSubmit, dynamicContentPicker }}\n        onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange}\n        fieldItems={args.fieldItems || fieldItems}\n        onBlur={action('Editor onBlur')}\n      />\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n      </Flex>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  TextArea,\n  useAutoResize,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { EditorState } from '@pega/cosmos-react-rte';\nimport {\n  DynamicContentEditor,\n  DynamicContentEditorProps,\n  ItemType\n} from '@pega/cosmos-react-build';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n  title: 'Build/DynamicContentEditor',\n  component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo: Story<DynamicContentEditorStoryProps> = (\n  args: DynamicContentEditorStoryProps\n) => {\n  const [html, setHtml] = useState(\n    '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n  );\n  const rteRef = useRef<EditorState>(null);\n\n  const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n    { id: 'CustomerName', primary: 'CustomerName' },\n    { id: 'Address', primary: 'Address' },\n    { id: 'Locality', primary: 'Locality' },\n    { id: 'Country', primary: 'Country' },\n    { id: 'Region', primary: 'Region' },\n    { id: 'Occupation', primary: 'Occupation' },\n    { id: 'City', primary: 'City' },\n    { id: 'Colony', primary: 'Colony' },\n    { id: 'Lastname', primary: 'Lastname' },\n    { id: 'Preference', primary: 'Preference' },\n    { id: 'Currency', primary: 'Currency' },\n    { id: 'Iconname', primary: 'Iconname' }\n  ];\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n  const ref = useRef(null);\n  const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n  const handleShowHtml = () => {\n    resizeTextArea();\n    setHtml(rteRef.current?.getHtml() || '');\n  };\n  const t = useI18n();\n  const [selectedField, setSelectedField] = useState<ItemType>({\n    id: '',\n    text: ''\n  });\n\n  const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n    setSelectedField(selectedItem);\n  };\n  const onSubmit = useCallback(\n    (insertField: (selectedField: ItemType) => void) => {\n      insertField(selectedField);\n    },\n    [selectedField]\n  );\n\n  const dynamicContentPicker = (\n    <Flex\n      container={{\n        gap: 2,\n        direction: 'column'\n      }}\n    >\n      <FieldSelector\n        itemList={[\n          { id: 'CustomerName', text: 'CustomerName' },\n          { id: 'Address', text: 'Address' },\n          { id: 'Locality', text: 'Locality' },\n          { id: 'Country', text: 'Country' },\n          { id: 'Region', text: 'Region' },\n          { id: 'Occupation', text: 'Occupation' }\n        ]}\n        key={selectedField?.id}\n        label='Field'\n        updateSelection={updateSelection}\n        placeholder={t('select')}\n        defaultSelection={selectedField}\n      />\n    </Flex>\n  );\n  const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea\n            value={html}\n            onChange={e => setHtml(e.target.value)}\n            autoResize\n            ref={consolidatedRef}\n          />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <DynamicContentEditor\n        defaultValue={args.defaultValue || html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label='Dynamic content editor'\n        toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n        form={args.form || { onSubmit, dynamicContentPicker }}\n        onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange}\n        fieldItems={args.fieldItems || fieldItems}\n        onBlur={action('Editor onBlur')}\n      />\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n      </Flex>\n    </Flex>\n  );\n};\n"]}

package/jsx/build/FlowModeller/FlowModeller.mocks.d.ts

@@ -1,21 +1,21 @@
-/// <reference types="react" />
-import { ModalMethods, Action } from '@pega/cosmos-react-core';
-import { NodeProps, ConnectorProps, NodeLibraryItem } from '@pega/cosmos-react-build';
-interface DecisionTableProps extends ModalProps {
-    onDeleteRow: (data: NodeDataType) => void;
-    onAddRow: (data: NodeDataType) => void;
-    update: ModalMethods['update'];
-}
-export interface NodeDataType {
-    nodes: NodeProps[];
-    connectors: ConnectorProps[];
-}
-export interface ModalProps {
-    updatedData: NodeDataType;
+import { FC } from 'react';
+import { Action, ForwardProps } from '@pega/cosmos-react-core';
+import { NodeProps, ConnectorProps, NodeLibraryItem, DeleteNodeOutcome, GraphData } from '@pega/cosmos-react-build';
+interface DecisionTableProps {
+    updatedData: GraphData<NodeProps, ConnectorProps>;
     connectors: ConnectorProps[];
     node: NodeProps;
+    onDeleteRow: (data: GraphData<NodeProps, ConnectorProps>, deleteItems?: DeleteNodeOutcome['deletes'], e?: MouseEvent) => void;
+    onAddRow: (data: GraphData<NodeProps, ConnectorProps>) => void;
+}
+interface DeletePopoverProps {
+    targetId: string | null;
+    showPopover: boolean;
+    onCancel: () => void;
+    onDelete: () => void;
 }
-export declare const DecisionTable: ({ updatedData, connectors, onDeleteRow, onAddRow, node, update }: DecisionTableProps) => JSX.Element;
+export declare const DecisionTable: FC<DecisionTableProps & ForwardProps>;
+export declare const DeletePopover: FC<DeletePopoverProps & ForwardProps>;
 export declare const exampleCRMNodesData: NodeProps[];
 export declare const exampleCRMConnectorsData: ConnectorProps[];
 export declare const emptyNodesData: NodeProps[];

package/jsx/build/FlowModeller/FlowModeller.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAGL,YAAY,EASZ,MAAM,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,SAAS,EAET,cAAc,EAGd,eAAe,EAGhB,MAAM,0BAA0B,CAAC;AAElC,UAAU,kBAAmB,SAAQ,UAAU;IAC7C,WAAW,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,UAAU,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,YAAY,CAAC;IAC1B,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,qEAOvB,kBAAkB,gBAsFpB,CAAC;AAuGF,eAAO,MAAM,mBAAmB,EAAE,SAAS,EAoH1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,EAyHpD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAAS,EAWrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,cAAc,EAO/C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,EAK/B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,eAAe,EAsCxC,CAAC"}
+{"version":3,"file":"FlowModeller.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,EAAE,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EASL,MAAM,EACN,YAAY,EAOb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,SAAS,EACT,cAAc,EAGd,eAAe,EACf,iBAAiB,EAGjB,SAAS,EACV,MAAM,0BAA0B,CAAC;AAElC,UAAU,kBAAkB;IAC1B,WAAW,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAClD,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,CACX,IAAI,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,EAC1C,WAAW,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,EAC1C,CAAC,CAAC,EAAE,UAAU,KACX,IAAI,CAAC;IACV,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;CAChE;AACD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CA4D/D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CAsC/D,CAAC;AAsGF,eAAO,MAAM,mBAAmB,EAAE,SAAS,EAoH1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,EAyHpD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAAS,EAWrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,cAAc,EAO/C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,EAK/B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,eAAe,EAsCxC,CAAC"}

package/jsx/build/FlowModeller/FlowModeller.mocks.jsx

@@ -1,41 +1,17 @@
-import { useContext, useState, useEffect } from 'react';
-import { Input, Modal, ModalManagerContext, Table, Text, Button, Icon, Flex, createUID } from '@pega/cosmos-react-core';
-import { DirectedGraph, FlowModellerHelper, START_NODETYPE, STOP_NODETYPE } from '@pega/cosmos-react-build';
-export const DecisionTable = ({ updatedData, connectors, onDeleteRow, onAddRow, node, update }) => {
+import { useState, useEffect, forwardRef } from 'react';
+import { Input, Table, Text, Button, Icon, Flex, createUID, Card, CardContent, CardHeader, useI18n, Popover, CardFooter } from '@pega/cosmos-react-core';
+import { FlowModellerHelper, START_NODETYPE, STOP_NODETYPE } from '@pega/cosmos-react-build';
+export const DecisionTable = forwardRef(({ updatedData, connectors, onDeleteRow, onAddRow, node }, ref) => {
     const [tableData, setTableData] = useState(connectors);
-    const message = 'Please delete the nodes in the connector manually and delete this connector again';
-    const { create } = useContext(ModalManagerContext);
+    const t = useI18n();
     const onAddCondition = () => {
         const label = 'otherwise';
-        const updatedGraphData = FlowModellerHelper.addBranch(updatedData, node.id, label);
-        const graph = new DirectedGraph(updatedGraphData);
-        const outConnectors = graph.getOutConnectors(node.id);
-        update({
-            node,
-            connectors: outConnectors,
-            updatedData: updatedGraphData
-        });
+        const updatedGraphData = FlowModellerHelper.addConnector(updatedData, node.id, label);
         onAddRow(updatedGraphData);
     };
-    const onDeleteCondition = (connector) => {
+    const onDeleteCondition = (connector, e) => {
         const updatedGraphData = FlowModellerHelper.deleteConnector(updatedData, connector);
-        if (updatedGraphData) {
-            const updatedGraph = new DirectedGraph(updatedGraphData);
-            const updatedOutConnectors = updatedGraph.getOutConnectors(node.id);
-            update({
-                node,
-                connectors: updatedOutConnectors,
-                updatedData: updatedGraphData
-            });
-            onDeleteRow(updatedGraphData);
-        }
-        else {
-            create(() => {
-                return (<Modal heading='Confirm'>
-              <Text>{message}</Text>
-            </Modal>);
-            }, { center: true });
-        }
+        onDeleteRow(updatedGraphData.graphData, updatedGraphData.deletes, e);
     };
     const columns = [
         {
@@ -45,13 +21,9 @@ export const DecisionTable = ({ updatedData, connectors, onDeleteRow, onAddRow,
         { renderer: () => <Text>No value</Text>, label: 'Decision output' },
         {
             renderer: connector => {
-                return (<>
-            <Button variant='simple' label='Delete' disabled={tableData.length < 3} icon onClick={() => {
-                        onDeleteCondition(connector);
-                    }}>
+                return (<Button variant='simple' ref={ref} disabled={connectors.length < 3} id={connector.id} icon onClick={(e) => onDeleteCondition(connector, e)} label={t('delete')}>
               <Icon name='trash'/>
-            </Button>
-          </>);
+            </Button>);
             },
             label: 'Action'
         }
@@ -60,14 +32,45 @@ export const DecisionTable = ({ updatedData, connectors, onDeleteRow, onAddRow,
         setTableData(connectors);
     }, [connectors]);
     return (<>
-      <Table title='Decision outcomes' hoverHighlight data={tableData} columns={columns}/>
-      <Flex container={{ pad: [1, 0] }}>
-        <Button variant='simple' onClick={onAddCondition}>
-          Add Condition
-        </Button>
-      </Flex>
-    </>);
-};
+        <Table title='Decision outcomes' hoverHighlight data={tableData} columns={columns}/>
+        <Flex container={{ pad: [1, 0] }}>
+          <Button variant='simple' onClick={onAddCondition}>
+            Add Condition
+          </Button>
+        </Flex>
+      </>);
+});
+export const DeletePopover = forwardRef(({ targetId, showPopover, onCancel, onDelete }, ref) => {
+    const [elementTarget, setElementTarget] = useState();
+    const t = useI18n();
+    useEffect(() => {
+        const element = document.querySelector(`button[id='${targetId}']`);
+        if (element) {
+            setElementTarget(element);
+        }
+    });
+    return (<>
+        {elementTarget && showPopover && (<Popover target={elementTarget} ref={ref} show={showPopover}>
+            <Card>
+              <CardHeader>
+                <Text variant='h4'>Delete Outcome</Text>
+                <Button variant='simple' icon label={t('close')} onClick={onCancel}>
+                  <Icon name='times'/>
+                </Button>
+              </CardHeader>
+              <CardContent>
+                Are you sure you want to delete this outcome and all its steps?
+              </CardContent>
+              <CardFooter container={{ justify: 'between' }}>
+                <Button onClick={onCancel}>Cancel</Button>
+                <Button variant='primary' onClick={onDelete}>
+                  Delete
+                </Button>
+              </CardFooter>
+            </Card>
+          </Popover>)}
+      </>);
+});
 const FlowShapeType = Object.freeze({
     START: START_NODETYPE,
     STOP: STOP_NODETYPE,