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

package/lib/core/AppShell/AppShell.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n  AppShell,\n  AppShellProps,\n  AppShellList,\n  DrawerItemProps,\n  Button,\n  DateInput,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Select,\n  Option,\n  Modal,\n  ModalManagerContext,\n  TextArea,\n  ToasterContext,\n  ForwardProps,\n  useAfterInitialEffect,\n  windowIsAvailable,\n  Configuration,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\n\nimport {\n  defaultLinks,\n  defaultMainContent,\n  defaultNotifications,\n  defaultRecents,\n  operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n  title: 'Core/App Shell',\n  component: AppShell,\n  id: 'App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\n  searchPage?: AppShellProps['searchPage'];\n  banners?: AppShellProps['banners'];\n  cases?: AppShellProps['cases'];\n  caseLinks?: AppShellProps['links'];\n  createLinks?: any[];\n  recentItems?: any[];\n  utils?: AppShellProps['utils'];\n  onLinkClick?: (name: string) => void;\n\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\n  portalName?: AppShellProps['appInfo']['portalName'];\n  href?: AppShellProps['appInfo']['href'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n  withSearch?: boolean;\n  appHeader?: AppShellProps['appHeader'];\n  environmentName?: string;\n  environmentColor?: string;\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  casesTypesEmpty?: boolean;\n  recentsEmpty?: boolean;\n  recentsLoading?: boolean;\n  pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { dismiss } = useContext(ModalContext);\n    const { push: pushToaster } = useContext(ToasterContext);\n\n    return (\n      <Modal\n        as='form'\n        heading={`New ${caseType}`}\n        actions={\n          <>\n            <Button onClick={dismiss}>Cancel</Button>\n            <Button\n              variant='primary'\n              type='submit'\n              onClick={(e: FormEvent) => {\n                e.preventDefault();\n                dismiss();\n                pushToaster({ content: `${caseType} requested` });\n              }}\n            >\n              Request\n            </Button>\n          </>\n        }\n      >\n        <Grid container={{ rowGap: 2 }}>\n          <DateInput label='Date Requested' info={null} />\n          <Select label='Department'>\n            <Option value=''>Select…</Option>\n            <Option value='Fire'>Fire</Option>\n            <Option value='Facilities'>Facilities</Option>\n            <Option value='Parks'>Parks</Option>\n            <Option value='Sanitation'>Sanitation</Option>\n            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>\n            <Option value='Police'>Police</Option>\n            <Option value='Courts'>Courts</Option>\n            <Option value='Healthcare'>Healthcare</Option>\n            <Option value='Energy'>Energy</Option>\n            <Option value='Justice department'>Justice department</Option>\n            <Option value='Environmental'>Environmental</Option>\n          </Select>\n          <TextArea label='Purpose of Purchase' />\n          <Select label='Desired Make'>\n            <Option value=''>Select...</Option>\n            <Option value='Ford'>Ford</Option>\n            <Option value='Dodge'>Dodge</Option>\n            <Option value='Toyota'>Toyota</Option>\n            <Option value='Tesla'>Tesla</Option>\n          </Select>\n          <Input label='Desired Make' />\n          <Input\n            type='number'\n            min='2016'\n            max='2021'\n            label='Year'\n            info='Must be within last 5 years'\n          />\n          <Input\n            type='number'\n            min='0.01'\n            step='0.01'\n            max='50000'\n            label='Estimated Cost'\n            info='May not exceed $50,000.00'\n          />\n        </Grid>\n      </Modal>\n    );\n  };\n\n  const caseLinks = args.caseLinks || defaultLinks;\n  const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n  const [notifications, setNotifications] =\n    useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n  const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n    args.recentItems || defaultRecents\n  );\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n  const [searchVal, setSearchVal] = useState('');\n  const [searchLoading, setSearchLoading] = useState(false);\n  const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n  const [searchTimeout, setSearchTimeout] = useState<number | null>();\n\n  useAfterInitialEffect(() => {\n    setLinks(caseLinks);\n  }, [caseLinks]);\n\n  const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n    return (links || []).map(link => ({\n      ...link,\n      onClick(e: MouseEvent<HTMLAnchorElement>) {\n        e.preventDefault();\n        setLinks((prevLinks = []) => {\n          return prevLinks.map(prevLink => {\n            return { ...link, active: prevLink.name === link.name };\n          });\n        });\n        args.onLinkClick?.(link.name);\n      }\n    }));\n  }, [links]);\n\n  const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n    name,\n    onClick: () => {\n      createModal(CreateCaseModal, { caseType: name });\n    }\n  }));\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const handlePinToggle = (passedId: string) => {\n    setRecents(cur =>\n      cur.map(({ id, pinned, ...item }) => ({\n        id,\n        pinned: passedId === id ? !pinned : pinned,\n        ...item\n      }))\n    );\n  };\n\n  const onSearch = (val: string) => {\n    setSearchVal(val);\n    if (searchTimeout) {\n      clearTimeout(searchTimeout);\n      setSearchTimeout(null);\n    }\n    setResults([]);\n    if (val) {\n      setSearchLoading(true);\n      const timeout = setTimeout(() => {\n        setSearchLoading(false);\n        setResults(searchResults.filter(res => res.primary.includes(val)));\n      }, 1000);\n      setSearchTimeout(timeout as unknown as number);\n    }\n  };\n\n  const notificationViewItems = [\n    {\n      id: '234',\n      items: args.notificationsEmpty ? [] : notifications,\n      loading: args.notificationsLoading,\n      onItemClick: handleNotificationClick,\n      viewAll: {\n        href: '#'\n      },\n      emptyText: 'No notifications'\n    }\n  ];\n\n  const recentViewItems = [\n    {\n      id: '456',\n      items: recents.filter(x => x.pinned),\n      loading: args.pinsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Pinned items',\n      emptyText: 'No pinned items'\n    },\n    {\n      id: '789',\n      items: args.recentsEmpty ? [] : recents,\n      loading: args.recentsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Recently viewed',\n      emptyText: 'No recents'\n    }\n  ];\n\n  const newNotificationCountTimerRef = useRef(NaN);\n\n  const defaultUtils = [\n    {\n      name: 'Notifications',\n      visual: <Icon name='bell-solid' />,\n      count: args.notificationsEmpty ? 0 : numNewNotifications,\n      drawerView: <AppShellList listView={notificationViewItems} />,\n      onDrawerOpen: () => {\n        clearInterval(newNotificationCountTimerRef.current);\n        setNumNewNotifications(0);\n      },\n      onDrawerClose: () => {\n        if (windowIsAvailable) {\n          // Mock new notifications arriving on a minute interval after the drawer closes.\n          // Let's face it, you're popular.\n          newNotificationCountTimerRef.current = window.setInterval(() => {\n            setNumNewNotifications(cur => cur + 2);\n          }, 60000);\n        }\n      }\n    },\n    {\n      name: 'Recents',\n      visual: <Icon name='clock-solid' />,\n      drawerView: <AppShellList listView={recentViewItems} />\n    }\n  ];\n\n  return (\n    <AppShell\n      appInfo={\n        args.appInfo || {\n          href: args.href || 'https://www.pega.com/',\n          imageSrc:\n            args.imageSrc ||\n            'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n          fullImageSrc:\n            args.fullImageSrc ||\n            'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n          appName: args.appName || 'Cosmos AppShell',\n          portalName: args.portalName || 'Demo'\n        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                onSearch(value);\n              },\n              value: searchVal,\n              searchResults: results,\n              recentSearches,\n              loading: searchLoading,\n              filters: ['Story', 'Bug'],\n              advancedSearchLink: { href: '/' }\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      searchPage={args.searchPage}\n      caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n      links={linksWithHandlers}\n      main={args.main || defaultMainContent}\n      cases={args.cases}\n      banners={args.banners}\n      operator={operatorData}\n      utils={args.utils || defaultUtils}\n      environment={\n        args.environmentName\n          ? {\n              name: args.environmentName,\n              color: args.environmentColor\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\n  portalName: 'Demo',\n  href: 'https://www.pega.com/',\n  imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n  fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  withSearch: true,\n  appHeader: true,\n  environmentName: 'dev',\n  environmentColor: '#FFDBDE',\n  notificationsEmpty: false,\n  notificationsLoading: false,\n  casesTypesEmpty: false,\n  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  portalName: { control: { type: 'text' } },\n  href: { control: { type: 'text' } },\n  imageSrc: { control: { type: 'text' } },\n  fullImageSrc: { control: { type: 'text' } },\n  withSearch: { control: { type: 'boolean' } },\n  appHeader: { control: { type: 'boolean' } },\n  environmentName: { control: { type: 'text' } },\n  environmentColor: { control: { type: 'color' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } },\n  casesTypesEmpty: { control: { type: 'boolean' } },\n  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n  navColor?: string;\n  headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n  args: ConfigurableAppShellProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'app-shell': {\n            nav: {\n              'background-color': args.navColor\n            },\n            header: {\n              'background-color': args.headerColor\n            }\n          }\n        }\n      }}\n    >\n      <AppShellDemo appHeader />\n    </Configuration>\n  );\n};\n\nConfigurableAppShell.args = {\n  navColor: '#252c32',\n  headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n  navColor: { control: { type: 'color' } },\n  headerColor: { control: { type: 'color' } }\n};\n"]}
+{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n  AppShell,\n  AppShellProps,\n  AppShellList,\n  DrawerItemProps,\n  Button,\n  DateInput,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Select,\n  Option,\n  Modal,\n  ModalManagerContext,\n  TextArea,\n  ToasterContext,\n  ForwardProps,\n  useAfterInitialEffect,\n  windowIsAvailable,\n  Configuration,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\n\nimport {\n  defaultLinks,\n  defaultMainContent,\n  defaultNotifications,\n  defaultRecents,\n  operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n  title: 'Core/App Shell',\n  component: AppShell,\n  id: 'App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\n  searchPage?: AppShellProps['searchPage'];\n  banners?: AppShellProps['banners'];\n  cases?: AppShellProps['cases'];\n  caseLinks?: AppShellProps['links'];\n  createLinks?: any[];\n  recentItems?: any[];\n  utils?: AppShellProps['utils'];\n  onLinkClick?: (name: string) => void;\n\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\n  portalName?: AppShellProps['appInfo']['portalName'];\n  href?: AppShellProps['appInfo']['href'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n  withSearch?: boolean;\n  appHeader?: AppShellProps['appHeader'];\n  environmentName?: string;\n  environmentColor?: string;\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  casesTypesEmpty?: boolean;\n  recentsEmpty?: boolean;\n  recentsLoading?: boolean;\n  pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { dismiss } = useContext(ModalContext);\n    const { push: pushToaster } = useContext(ToasterContext);\n\n    return (\n      <Modal\n        as='form'\n        heading={`New ${caseType}`}\n        actions={\n          <>\n            <Button onClick={dismiss}>Cancel</Button>\n            <Button\n              variant='primary'\n              type='submit'\n              onClick={(e: FormEvent) => {\n                e.preventDefault();\n                dismiss();\n                pushToaster({ content: `${caseType} requested` });\n              }}\n            >\n              Request\n            </Button>\n          </>\n        }\n      >\n        <Grid container={{ rowGap: 2 }}>\n          <DateInput label='Date Requested' info={null} />\n          <Select label='Department'>\n            <Option value=''>Select…</Option>\n            <Option value='Fire'>Fire</Option>\n            <Option value='Facilities'>Facilities</Option>\n            <Option value='Parks'>Parks</Option>\n            <Option value='Sanitation'>Sanitation</Option>\n            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>\n            <Option value='Police'>Police</Option>\n            <Option value='Courts'>Courts</Option>\n            <Option value='Healthcare'>Healthcare</Option>\n            <Option value='Energy'>Energy</Option>\n            <Option value='Justice department'>Justice department</Option>\n            <Option value='Environmental'>Environmental</Option>\n          </Select>\n          <TextArea label='Purpose of Purchase' />\n          <Select label='Desired Make'>\n            <Option value=''>Select...</Option>\n            <Option value='Ford'>Ford</Option>\n            <Option value='Dodge'>Dodge</Option>\n            <Option value='Toyota'>Toyota</Option>\n            <Option value='Tesla'>Tesla</Option>\n          </Select>\n          <Input label='Desired Make' />\n          <Input\n            type='number'\n            min='2016'\n            max='2021'\n            label='Year'\n            info='Must be within last 5 years'\n          />\n          <Input\n            type='number'\n            min='0.01'\n            step='0.01'\n            max='50000'\n            label='Estimated Cost'\n            info='May not exceed $50,000.00'\n          />\n        </Grid>\n      </Modal>\n    );\n  };\n\n  const caseLinks = args.caseLinks || defaultLinks;\n  const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n  const [notifications, setNotifications] =\n    useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n  const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n    args.recentItems || defaultRecents\n  );\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n  const [searchVal, setSearchVal] = useState('');\n  const [searchLoading, setSearchLoading] = useState(false);\n  const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n  const [searchTimeout, setSearchTimeout] = useState<number | null>();\n\n  useAfterInitialEffect(() => {\n    setLinks(caseLinks);\n  }, [caseLinks]);\n\n  const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n    return (links || []).map(link => ({\n      ...link,\n      onClick(e: MouseEvent<HTMLAnchorElement>) {\n        e.preventDefault();\n        setLinks((prevLinks = []) => {\n          return prevLinks.map(prevLink => {\n            return { ...prevLink, active: prevLink.name === link.name };\n          });\n        });\n        args.onLinkClick?.(link.name);\n      }\n    }));\n  }, [links]);\n\n  const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n    name,\n    onClick: () => {\n      createModal(CreateCaseModal, { caseType: name });\n    }\n  }));\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const handlePinToggle = (passedId: string) => {\n    setRecents(cur =>\n      cur.map(({ id, pinned, ...item }) => ({\n        id,\n        pinned: passedId === id ? !pinned : pinned,\n        ...item\n      }))\n    );\n  };\n\n  const onSearch = (val: string) => {\n    setSearchVal(val);\n    if (searchTimeout) {\n      clearTimeout(searchTimeout);\n      setSearchTimeout(null);\n    }\n    setResults([]);\n    if (val) {\n      setSearchLoading(true);\n      const timeout = setTimeout(() => {\n        setSearchLoading(false);\n        setResults(searchResults.filter(res => res.primary.includes(val)));\n      }, 1000);\n      setSearchTimeout(timeout as unknown as number);\n    }\n  };\n\n  const notificationViewItems = [\n    {\n      id: '234',\n      items: args.notificationsEmpty ? [] : notifications,\n      loading: args.notificationsLoading,\n      onItemClick: handleNotificationClick,\n      viewAll: {\n        href: '#'\n      },\n      emptyText: 'No notifications'\n    }\n  ];\n\n  const recentViewItems = [\n    {\n      id: '456',\n      items: recents.filter(x => x.pinned),\n      loading: args.pinsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Pinned items',\n      emptyText: 'No pinned items'\n    },\n    {\n      id: '789',\n      items: args.recentsEmpty ? [] : recents,\n      loading: args.recentsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Recently viewed',\n      emptyText: 'No recents'\n    }\n  ];\n\n  const newNotificationCountTimerRef = useRef(NaN);\n\n  const defaultUtils = [\n    {\n      name: 'Notifications',\n      visual: <Icon name='bell-solid' />,\n      count: args.notificationsEmpty ? 0 : numNewNotifications,\n      drawerView: <AppShellList listView={notificationViewItems} />,\n      onDrawerOpen: () => {\n        clearInterval(newNotificationCountTimerRef.current);\n        setNumNewNotifications(0);\n      },\n      onDrawerClose: () => {\n        if (windowIsAvailable) {\n          // Mock new notifications arriving on a minute interval after the drawer closes.\n          // Let's face it, you're popular.\n          newNotificationCountTimerRef.current = window.setInterval(() => {\n            setNumNewNotifications(cur => cur + 2);\n          }, 60000);\n        }\n      }\n    },\n    {\n      name: 'Recents',\n      visual: <Icon name='clock-solid' />,\n      drawerView: <AppShellList listView={recentViewItems} />\n    }\n  ];\n\n  return (\n    <AppShell\n      appInfo={\n        args.appInfo || {\n          href: args.href || 'https://www.pega.com/',\n          imageSrc:\n            args.imageSrc ||\n            'https://pbs.twimg.com/profile_images/1531984159698198531/bEniqFN1_bigger.jpg',\n          fullImageSrc:\n            args.fullImageSrc ||\n            'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n          appName: args.appName || 'Cosmos AppShell',\n          portalName: args.portalName || 'Demo'\n        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                onSearch(value);\n              },\n              value: searchVal,\n              searchResults: results,\n              recentSearches,\n              loading: searchLoading,\n              filters: ['Story', 'Bug'],\n              advancedSearchLink: { href: '/' }\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      searchPage={args.searchPage}\n      caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n      links={linksWithHandlers}\n      main={args.main || defaultMainContent}\n      cases={args.cases}\n      banners={args.banners}\n      operator={operatorData}\n      utils={args.utils || defaultUtils}\n      environment={\n        args.environmentName\n          ? {\n              name: args.environmentName,\n              color: args.environmentColor\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\n  portalName: 'Demo',\n  href: 'https://www.pega.com/',\n  imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n  fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  withSearch: true,\n  appHeader: true,\n  environmentName: 'dev',\n  environmentColor: '#FFDBDE',\n  notificationsEmpty: false,\n  notificationsLoading: false,\n  casesTypesEmpty: false,\n  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  portalName: { control: { type: 'text' } },\n  href: { control: { type: 'text' } },\n  imageSrc: { control: { type: 'text' } },\n  fullImageSrc: { control: { type: 'text' } },\n  withSearch: { control: { type: 'boolean' } },\n  appHeader: { control: { type: 'boolean' } },\n  environmentName: { control: { type: 'text' } },\n  environmentColor: { control: { type: 'color' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } },\n  casesTypesEmpty: { control: { type: 'boolean' } },\n  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n  navColor?: string;\n  headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n  args: ConfigurableAppShellProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'app-shell': {\n            nav: {\n              'background-color': args.navColor\n            },\n            header: {\n              'background-color': args.headerColor\n            }\n          }\n        }\n      }}\n    >\n      <AppShellDemo appHeader />\n    </Configuration>\n  );\n};\n\nConfigurableAppShell.args = {\n  navColor: '#252c32',\n  headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n  navColor: { control: { type: 'color' } },\n  headerColor: { control: { type: 'color' } }\n};\n"]}

package/lib/core/PageTemplates/PageTemplates.mocks.d.ts

@@ -1,3 +1,3 @@
 import { PageTemplateProps } from '@pega/cosmos-react-core';
-export declare const getPath: (showBreadcrumbs?: boolean | undefined, pathData?: string | undefined) => PageTemplateProps['path'];
+export declare const getPath: (showBreadcrumbs?: boolean, pathData?: string) => PageTemplateProps['path'];
 //# sourceMappingURL=PageTemplates.mocks.d.ts.map

package/lib/core/PageTemplates/PageTemplates.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,eAAO,MAAM,OAAO,4EAGjB,iBAAiB,CAAC,MAAM,CAQ1B,CAAC"}
+{"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,eAAO,MAAM,OAAO,qBACA,OAAO,aACd,MAAM,KAChB,iBAAiB,CAAC,MAAM,CAQ1B,CAAC"}

package/lib/core/Tree/Tree.mocks.d.ts

@@ -1,2 +1,2 @@
-export declare const themeToTree: (themeNode: object, parentPath?: string | undefined) => import("@pega/cosmos-react-core").TreeNode[];
+export declare const themeToTree: (themeNode: object, parentPath?: string) => import("@pega/cosmos-react-core").TreeNode[];
 //# sourceMappingURL=Tree.mocks.d.ts.map

package/lib/core/Tree/Tree.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.mocks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,cAAe,MAAM,kFAsB5C,CAAC"}
+{"version":3,"file":"Tree.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.mocks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,cAAe,MAAM,eAAe,MAAM,iDAsBjE,CAAC"}

package/lib/cs/CSCaseView/{CSCaseView.mocks.d.ts → CSAppShell.mocks.d.ts}

@@ -5,8 +5,15 @@ export interface LoginFormProps {
         [key: string]: string;
     };
     onLogin: (ctiLinkId: keyof LoginFormProps['ctiLinkOptions'], agentId: string, password: string) => Promise<LoginError | undefined>;
+    onCancel: () => void;
 }
 export declare const CallLoginForm: FunctionComponent<LoginFormProps>;
+export declare const CTIControlPanelContext: import("react").Context<{
+    type: 'internal' | 'external';
+    draggable?: boolean | undefined;
+    applyAppStyling: boolean;
+}>;
+export declare const CTIControlPanel: FunctionComponent;
 export declare const AppShellMockData: {
     notifications: {
         id: string;
@@ -63,4 +70,4 @@ export declare const AppShellMockData: {
         }[];
     };
 };
-//# sourceMappingURL=CSCaseView.mocks.d.ts.map
+//# sourceMappingURL=CSAppShell.mocks.d.ts.map

package/lib/cs/CSCaseView/CSAppShell.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAoB5F,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAmE3D,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAC3B,UAAU,GAAG,UAAU;;qBAEZ,OAAO;EAKxB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,iBAiE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC"}

package/lib/cs/CSCaseView/{CSCaseView.mocks.js → CSAppShell.mocks.js}

@@ -1,19 +1,59 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Banner, Button, Form, Input, Option, Select } from '@pega/cosmos-react-core';
-export const CallLoginForm = ({ ctiLinkOptions, onLogin }) => {
+import { createContext, useContext, useState } from 'react';
+import { AppShellDrawerContext, Banner, Button, Flex, Form, Input, Option, Select } from '@pega/cosmos-react-core';
+import { CTIPanel } from '@pega/cosmos-react-cs';
+import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
+import { CallControlPanelDemo, ExternalCTIDemo } from '../CallControlPanel/CallControlPanel.stories';
+export const CallLoginForm = ({ ctiLinkOptions, onLogin, onCancel }) => {
     const [agentId, setAgentId] = useState('');
     const [password, setPassword] = useState('');
     const [extension, setExtension] = useState('');
     const [ctiLinkId, setCTILinkId] = useState(Object.keys(ctiLinkOptions)[0]);
     const [errorMessage, setErrorMessage] = useState();
     const canSubmit = agentId && password && ctiLinkId && extension;
-    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'cancel', variant: 'secondary', children: "Cancel" }), _jsx(Button, { name: 'submit', type: 'submit', variant: 'primary', disabled: !canSubmit, onClick: (e) => {
+    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'cancel', variant: 'secondary', onClick: onCancel, children: "Cancel" }, 'cancel'), _jsx(Button, { name: 'submit', type: 'submit', variant: 'primary', disabled: !canSubmit, onClick: (e) => {
                     e.preventDefault();
                     onLogin(ctiLinkId, agentId, password).then(setErrorMessage);
-                }, children: "Login" })] }));
+                }, children: "Login" }, 'submit')] }));
     return (_jsxs(Form, { actions: actions, banners: errorMessage ? _jsx(Banner, { id: 'error', variant: 'urgent', messages: [errorMessage] }) : undefined, children: [_jsx(Select, { required: true, label: 'CTI link', onChange: e => setCTILinkId(e.target.value), children: Object.entries(ctiLinkOptions).map(([id, label]) => (_jsx(Option, { value: id, children: label }))) }), _jsx(Input, { required: true, label: 'Agent ID', value: agentId, onChange: (e) => setAgentId(e.target.value) }), _jsx(Input, { type: 'password', required: true, label: 'Password', value: password, onChange: (e) => setPassword(e.target.value) }), _jsx(Input, { required: true, label: 'Extension', value: extension, onChange: (e) => setExtension(e.target.value) })] }));
 };
+export const CTIControlPanelContext = createContext({
+    type: 'internal',
+    draggable: true,
+    applyAppStyling: false
+});
+export const CTIControlPanel = () => {
+    const [agentStatus, setAgentStatus] = useState(userStatusOptions[0]);
+    const [callPanelVisible, setCallPanelVisible] = useState(false);
+    const { type, draggable, applyAppStyling } = useContext(CTIControlPanelContext);
+    const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);
+    const drawerView = (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsx(CallLoginForm, { ctiLinkOptions: {
+                valid: 'It will be accepted',
+                invalid: 'This will raise an error'
+            }, onLogin: ctiLink => {
+                if (ctiLink === 'invalid')
+                    return Promise.resolve('Login incorrect');
+                setAgentStatus(userStatusOptions[0]);
+                setCallPanelVisible(true);
+                closeDrawer();
+                return Promise.resolve(undefined);
+            }, onCancel: closeDrawer }) }));
+    const drawerHeader = 'Pega Call Log In';
+    return (_jsx(_Fragment, { children: _jsx(CTIPanel, { visible: callPanelVisible, status: agentStatus, onClick: () => {
+                if (agentStatus.status === 'logout')
+                    openDrawer({
+                        drawerHeader,
+                        drawerView,
+                        name: drawerHeader
+                    });
+                else
+                    setCallPanelVisible(prev => !prev);
+            }, children: type === 'internal' ? (_jsx(CallControlPanelDemo, { heading: 'Agent', status: agentStatus.id, onStatusChange: status => {
+                    setAgentStatus(status);
+                    if (status.status === 'logout')
+                        setCallPanelVisible(false);
+                }, isDraggable: draggable, visible: callPanelVisible })) : (_jsx(ExternalCTIDemo, { heading: 'External CTI', isDraggable: draggable, visible: callPanelVisible, applyAppStyling: applyAppStyling })) }) }));
+};
 export const AppShellMockData = {
     notifications: [
         {
@@ -237,4 +277,4 @@ export const AppShellMockData = {
         ]
     }
 };
-//# sourceMappingURL=CSCaseView.mocks.js.map
+//# sourceMappingURL=CSAppShell.mocks.js.map

package/lib/cs/CSCaseView/CSAppShell.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSAppShell.mocks.js","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, createContext, FunctionComponent, useContext, useState } from 'react';\n\nimport {\n  AppShellDrawerContext,\n  Banner,\n  Button,\n  Flex,\n  Form,\n  Input,\n  Option,\n  Select\n} from '@pega/cosmos-react-core';\nimport { type UserAvailabilityStatusOption, CTIPanel } from '@pega/cosmos-react-cs';\n\nimport { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';\nimport {\n  CallControlPanelDemo,\n  ExternalCTIDemo\n} from '../CallControlPanel/CallControlPanel.stories';\n\nexport type LoginError = string;\n\nexport interface LoginFormProps {\n  ctiLinkOptions: { [key: string]: string };\n  onLogin: (\n    ctiLinkId: keyof LoginFormProps['ctiLinkOptions'],\n    agentId: string,\n    password: string\n  ) => Promise<LoginError | undefined>;\n  onCancel: () => void;\n}\n\nexport const CallLoginForm: FunctionComponent<LoginFormProps> = ({\n  ctiLinkOptions,\n  onLogin,\n  onCancel\n}: LoginFormProps) => {\n  const [agentId, setAgentId] = useState<string>('');\n  const [password, setPassword] = useState<string>('');\n  const [extension, setExtension] = useState<string>('');\n  const [ctiLinkId, setCTILinkId] = useState<string>(Object.keys(ctiLinkOptions)[0]);\n  const [errorMessage, setErrorMessage] = useState<string>();\n\n  const canSubmit = agentId && password && ctiLinkId && extension;\n\n  const actions = (\n    <>\n      <Button key='cancel' name='cancel' variant='secondary' onClick={onCancel}>\n        Cancel\n      </Button>\n      <Button\n        key='submit'\n        name='submit'\n        type='submit'\n        variant='primary'\n        disabled={!canSubmit}\n        onClick={(e: MouseEvent) => {\n          e.preventDefault();\n          onLogin(ctiLinkId!, agentId, password).then(setErrorMessage);\n        }}\n      >\n        Login\n      </Button>\n    </>\n  );\n\n  return (\n    <Form\n      actions={actions}\n      banners={\n        errorMessage ? <Banner id='error' variant='urgent' messages={[errorMessage]} /> : undefined\n      }\n    >\n      <Select required label='CTI link' onChange={e => setCTILinkId(e.target.value)}>\n        {Object.entries(ctiLinkOptions).map(([id, label]) => (\n          <Option value={id}>{label}</Option>\n        ))}\n      </Select>\n      <Input\n        required\n        label='Agent ID'\n        value={agentId}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setAgentId(e.target.value)}\n      />\n      <Input\n        type='password'\n        required\n        label='Password'\n        value={password}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}\n      />\n      <Input\n        required\n        label='Extension'\n        value={extension}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setExtension(e.target.value)}\n      />\n    </Form>\n  );\n};\n\nexport const CTIControlPanelContext = createContext<{\n  type: 'internal' | 'external';\n  draggable?: boolean;\n  applyAppStyling: boolean;\n}>({\n  type: 'internal',\n  draggable: true,\n  applyAppStyling: false\n});\n\nexport const CTIControlPanel: FunctionComponent = () => {\n  const [agentStatus, setAgentStatus] = useState<UserAvailabilityStatusOption>(\n    userStatusOptions[0] as UserAvailabilityStatusOption\n  );\n  const [callPanelVisible, setCallPanelVisible] = useState(false);\n  const { type, draggable, applyAppStyling } = useContext(CTIControlPanelContext);\n  const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);\n\n  const drawerView = (\n    <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n      <CallLoginForm\n        ctiLinkOptions={{\n          valid: 'It will be accepted',\n          invalid: 'This will raise an error'\n        }}\n        onLogin={ctiLink => {\n          if (ctiLink === 'invalid') return Promise.resolve('Login incorrect');\n          setAgentStatus(userStatusOptions[0]);\n          setCallPanelVisible(true);\n          closeDrawer();\n          return Promise.resolve(undefined);\n        }}\n        onCancel={closeDrawer}\n      />\n    </Flex>\n  );\n  const drawerHeader = 'Pega Call Log In';\n\n  return (\n    <>\n      <CTIPanel\n        visible={callPanelVisible}\n        status={agentStatus}\n        onClick={() => {\n          if (agentStatus.status === 'logout')\n            openDrawer({\n              drawerHeader,\n              drawerView,\n              name: drawerHeader\n            });\n          else setCallPanelVisible(prev => !prev);\n        }}\n      >\n        {type === 'internal' ? (\n          <CallControlPanelDemo\n            heading='Agent'\n            status={agentStatus.id}\n            onStatusChange={status => {\n              setAgentStatus(status);\n              if (status.status === 'logout') setCallPanelVisible(false);\n            }}\n            isDraggable={draggable}\n            visible={callPanelVisible}\n          />\n        ) : (\n          <ExternalCTIDemo\n            heading='External CTI'\n            isDraggable={draggable}\n            visible={callPanelVisible}\n            applyAppStyling={applyAppStyling}\n          />\n        )}\n      </CTIPanel>\n    </>\n  );\n};\n\nexport const AppShellMockData = {\n  notifications: [\n    {\n      id: '123',\n      primary:\n        \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345',\n      visual: 'Dean Thomas',\n      unread: true\n    },\n    {\n      id: '456',\n      primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n      visual: 'Seth DeAngelo',\n      secondary: 'BUG-12345',\n      unread: true\n    },\n    {\n      id: '789',\n      primary:\n        \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-12345',\n      visual: 'Janet Moore',\n      unread: true\n    },\n    {\n      id: '000',\n      primary: 'You have been awarded Employee of the Month! Congratulations!',\n      secondary: '',\n      visual: 'Cindy Turner',\n      unread: true\n    }\n  ],\n  recents: [\n    {\n      id: '123',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '456',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '789',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '111',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '222',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '333',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '444',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '555',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '666',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    }\n  ],\n  'Phone Interaction': {\n    caseId: 'Customer',\n    heading: 'Ginger Ventura',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Gold'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Phone'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'Low'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'July 2018'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '2213b Gormand street'\n      }\n    ]\n  },\n  'Chat Interaction': {\n    caseId: 'Customer',\n    heading: 'Sara Davis',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Silver'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Chat'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'High'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'March 2005'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '340 River'\n      }\n    ]\n  },\n  'Mail Interaction': {\n    caseId: 'Customer',\n    heading: 'John Brown',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Bronze'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Mail'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'Medium'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'March 1995'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '340 River'\n      }\n    ]\n  }\n};\n"]}

package/lib/cs/CSCaseView/CSAppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0B/C,OAAO,EAEL,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;;AAWtD,wBAmBU;AAEV,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACpD,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC;IAClC,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CA6S7C,CAAC"}
+{"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAyB/C,OAAO,EAEL,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;;AAMtD,wBAmBU;AAEV,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACpD,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC;IAClC,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAmQ7C,CAAC"}

package/lib/cs/CSCaseView/CSAppShell.stories.js

@@ -1,20 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { action } from '@storybook/addon-actions';
 import { createUID, Status, TwoColumnPage, Icon, registerIcon, Button, Form, Flex, Input, Select, Option } from '@pega/cosmos-react-core';
 import * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';
-import { CallControlPanelIcon } from '@pega/cosmos-react-cs';
 import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
 import { CaseViewDemo } from '../../work/CaseView/CaseView.stories';
 import { TasksDemo } from '../../work/Tasks/Tasks.stories';
 import { FeedDemo } from '../../social/Feed/Feed.stories';
-import { EmailDemo } from '../../social/Email/Email.stories';
+import { EmailShellDemo } from '../../social/Email/Email.stories';
 import { StandardChat } from '../../social/Chat/Chat.stories';
 import { TaskManagerDemo } from '../TaskManager/TaskManager.stories';
 import { InteractionTimerDemo as InteractionTimerStory } from '../InteractionTimer/InteractionTimer.stories';
-import { CallControlPanelDemo, ExternalCTIDemo } from '../CallControlPanel/CallControlPanel.stories';
-import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
-import { AppShellMockData, CallLoginForm } from './CSCaseView.mocks';
+import { AppShellMockData, CTIControlPanel, CTIControlPanelContext } from './CSAppShell.mocks';
 registerIcon(chatSolidIcon);
 export default {
     title: 'Customer Service/CS App Shell',
@@ -41,8 +38,6 @@ export const CSAppShell = (args) => {
     const home = _jsx(TwoColumnPage, { a: _jsx(FeedDemo, {}), b: _jsx(TasksDemo, {}), title: 'Welcome, Sara Davis' });
     const [mainContent, setMainContent] = useState(home);
     const [caseID, setCaseID] = useState(1001);
-    const [agentStatus, setAgentStatus] = useState(userStatusOptions[0]);
-    const [callPanelVisible, setCallPanelVisible] = useState(false);
     const [cases, setCases] = useState([]);
     const [links, setLinks] = useState([
         {
@@ -85,7 +80,7 @@ export const CSAppShell = (args) => {
             let persistentUtility;
             if (name === 'Mail Interaction') {
                 persistentUtility = {
-                    content: _jsx(EmailDemo, { hideSuggestions: true }),
+                    content: _jsx(EmailShellDemo, { hideSuggestions: true }),
                     title: 'Email'
                 };
             }
@@ -193,27 +188,7 @@ export const CSAppShell = (args) => {
             drawerView: chatSettings,
             drawerHeader: 'Pega Chat Log In'
         },
-        {
-            name: 'Call panel',
-            visual: (_jsx(CallControlPanelIcon, { status: agentStatus.status, label: agentStatus.label, variant: 'icon', panelVisible: callPanelVisible })),
-            ...(agentStatus.status === 'logout'
-                ? {
-                    drawerView: (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsx(CallLoginForm, { ctiLinkOptions: {
-                                valid: 'It will be accepted',
-                                invalid: 'This will raise an error'
-                            }, onLogin: ctiLink => {
-                                if (ctiLink === 'invalid')
-                                    return Promise.resolve('Login incorrect');
-                                setAgentStatus(userStatusOptions[1]);
-                                setCallPanelVisible(true);
-                                return Promise.resolve(undefined);
-                            } }) })),
-                    drawerHeader: 'Pega Call Log In'
-                }
-                : {
-                    onClick: () => setCallPanelVisible(isVisible => !isVisible)
-                })
-        }
+        _jsx(CTIControlPanel, {})
     ];
     const appInfo = {
         href: 'https://www.pega.com/',
@@ -221,11 +196,15 @@ export const CSAppShell = (args) => {
         fullImageSrc: 'Full Image Source',
         appName: 'CS AppShell'
     };
-    return (_jsxs(_Fragment, { children: [_jsx(AppShellDemo, { main: mainContent, appInfo: appInfo, cases: cases, createLinks: createLinks, caseLinks: links, utils: utils, onLinkClick: (name) => {
-                    if (name === 'Home') {
-                        setMainContent(home);
-                    }
-                    setActiveItem(name);
-                } }), args.ctiPanel === 'internal' ? (_jsx(CallControlPanelDemo, { heading: 'Agent', status: agentStatus.id, onStatusChange: setAgentStatus, isDraggable: args.isDraggable, visible: callPanelVisible })) : (_jsx(ExternalCTIDemo, { heading: 'External CTI', isDraggable: args.isDraggable, visible: callPanelVisible, applyAppStyling: args.applyThemeToExternalCTI }))] }));
+    return (_jsx(CTIControlPanelContext.Provider, { value: useMemo(() => ({
+            type: args.ctiPanel,
+            draggable: args.isDraggable,
+            applyAppStyling: args.applyThemeToExternalCTI
+        }), [args.isDraggable, args.applyThemeToExternalCTI, args.ctiPanel]), children: _jsx(AppShellDemo, { main: mainContent, appInfo: appInfo, cases: cases, createLinks: createLinks, caseLinks: links, utils: utils, onLinkClick: (name) => {
+                if (name === 'Home') {
+                    setMainContent(home);
+                }
+                setActiveItem(name);
+            } }) }));
 };
 //# sourceMappingURL=CSAppShell.stories.js.map

package/lib/cs/CSCaseView/CSAppShell.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CSAppShell.stories.js","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  AppShellProps,\n  createUID,\n  Status,\n  TwoColumnPage,\n  Icon,\n  registerIcon,\n  Button,\n  Form,\n  Flex,\n  Input,\n  Select,\n  Option\n} from '@pega/cosmos-react-core';\nimport * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';\nimport { CallControlPanelIcon, UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '../../work/CaseView/CaseView.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { EmailDemo } from '../../social/Email/Email.stories';\nimport { StandardChat } from '../../social/Chat/Chat.stories';\nimport { TaskManagerDemo } from '../TaskManager/TaskManager.stories';\nimport {\n  InteractionTimerDemo as InteractionTimerStory,\n  InteractionTimerStoryProps\n} from '../InteractionTimer/InteractionTimer.stories';\nimport {\n  CallControlPanelDemo,\n  ExternalCTIDemo\n} from '../CallControlPanel/CallControlPanel.stories';\nimport { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';\n\nimport { AppShellMockData, CallLoginForm } from './CSCaseView.mocks';\n\nregisterIcon(chatSolidIcon);\n\nexport default {\n  title: 'Customer Service/CS App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  },\n  args: {\n    isDraggable: true,\n    hasInteractionNotifications: true,\n    enableSla: true,\n    ctiPanel: 'internal',\n    applyThemeToExternalCTI: false\n  },\n  argTypes: {\n    isDraggable: { control: { type: 'boolean' } },\n    hasInteractionNotifications: { control: { type: 'boolean' } },\n    enableSla: { control: { type: 'boolean' } },\n    ctiPanel: { options: ['internal', 'external'], control: { type: 'inline-radio' } },\n    applyThemeToExternalCTI: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface CSAppShellProps {\n  isDraggable?: boolean;\n  hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];\n  enableSla?: InteractionTimerStoryProps['showTimer'];\n  ctiPanel: 'internal' | 'external';\n  applyThemeToExternalCTI: boolean;\n}\n\nexport const CSAppShell: Story<CSAppShellProps> = (args: CSAppShellProps) => {\n  const CaseData = AppShellMockData as any;\n\n  const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis' />;\n\n  const [mainContent, setMainContent] = useState(home);\n  const [caseID, setCaseID] = useState(1001);\n  const [agentStatus, setAgentStatus] = useState<UserAvailabilityStatusOption>(\n    userStatusOptions[0] as UserAvailabilityStatusOption\n  );\n  const [callPanelVisible, setCallPanelVisible] = useState(false);\n  const [cases, setCases] = useState<AppShellProps['cases']>([]);\n  const [links, setLinks] = useState<AppShellProps['links']>([\n    {\n      id: '01',\n      name: 'Home',\n      href: '#home',\n      icon: 'home-solid'\n    }\n  ]);\n\n  const tabs = [\n    { name: 'Customer  notes', id: 'Pulse' },\n    { name: 'Accounts', id: 'Accounts' }\n  ];\n\n  const demoActions = [\n    {\n      text: 'Change stage',\n      id: createUID(),\n      onClick: action('Clicked on change stage')\n    },\n    {\n      text: 'Wrap up',\n      id: createUID(),\n      onClick: action('Clicked on Wrap up')\n    },\n    {\n      text: 'Exit interaction',\n      id: createUID(),\n      onClick: action('Clicked on exit interaction')\n    }\n  ];\n\n  const RenderCaseView = (name: string) => {\n    if (name) {\n      const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];\n      const secondaryFields = secondaryField.map((field: any) => {\n        if (field.name === 'Status') {\n          return { ...field, value: <Status variant='success'>{field.value}</Status> };\n        }\n        return field;\n      });\n      let persistentUtility;\n      if (name === 'Mail Interaction') {\n        persistentUtility = {\n          content: <EmailDemo hideSuggestions />,\n          title: 'Email'\n        };\n      } else if (name === 'Chat Interaction') {\n        persistentUtility = {\n          content: <StandardChat chatWidth='100%' />,\n          title: 'Chat'\n        };\n      }\n      setMainContent(\n        <CaseViewDemo\n          caseId={caseId}\n          heading={heading}\n          parentCases={[]}\n          actions={demoActions}\n          primaryFields={primaryFields}\n          secondaryFields={secondaryFields}\n          tabs={tabs}\n          stages={false}\n          tasksWidget={<TaskManagerDemo />}\n          persistentUtility={persistentUtility}\n          showUtilities={false}\n          showFollowedIcon={false}\n          defaultCollapsedUtilities\n        />\n      );\n    }\n  };\n\n  const setActiveItem = (key: string) => {\n    setCases((prevCases = []) => {\n      return prevCases.map(caseItem => {\n        return { ...caseItem, active: caseItem.id === key };\n      });\n    });\n    setLinks((prevLinks = []) => {\n      return prevLinks.map(link => {\n        return {\n          ...link,\n          active: link.name === key\n        };\n      });\n    });\n  };\n\n  const createInteraction = (createLink: {\n    primary: string;\n    secondary?: string;\n    icon: string;\n    meta: string;\n    customerName?: string;\n  }) => {\n    const { primary, secondary, icon, customerName } = createLink;\n    const key: string = createUID();\n    const createdAt = new Date().getTime();\n    const newCase = {\n      visual: (\n        <InteractionTimerStory\n          icon={icon}\n          showTimer={args.enableSla}\n          hasNotifications={args.hasInteractionNotifications}\n          meta={args.enableSla ? '0:00' : createLink.meta}\n          interactionType={primary}\n        />\n      ),\n      primary: customerName || 'Unknown customer',\n      secondary,\n      createdAt,\n      id: key,\n      active: true,\n      onClick: () => {\n        setActiveItem(key);\n        RenderCaseView(primary);\n      },\n      onDismiss: (e: any) => {\n        setActiveItem('Home');\n        e.stopPropagation();\n        setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));\n        setMainContent(home);\n      }\n    };\n    setCases((prevCases = []) => [...prevCases, newCase]);\n    setActiveItem(key);\n    setCaseID(caseID + 1);\n    RenderCaseView(primary);\n  };\n\n  const createLinks = [\n    {\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'FH',\n      customerName: 'Ginger Ventura'\n    },\n    {\n      primary: 'Chat Interaction',\n      secondary: 'Sent 2h ago',\n      icon: 'chat-solid',\n      meta: 'SC',\n      customerName: 'Sara Davis'\n    },\n    {\n      primary: 'Mail Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'mail-solid',\n      meta: 'JB',\n      customerName: 'John Brown'\n    }\n  ].map(item => {\n    const { primary, icon } = item;\n    return {\n      name: primary,\n      icon,\n      href: '',\n      onClick: () => {\n        createInteraction(item);\n      }\n    };\n  });\n\n  useEffect(() => {\n    createInteraction({\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'GV',\n      customerName: 'Ginger Ventura'\n    });\n  }, []);\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          action('Click')(`${e.currentTarget.name}:${e.type}`);\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Log in\n      </Button>\n    </>\n  );\n  const chatSettings = (\n    <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n      <Form actions={actions}>\n        <Input name='agentId' label='Agent Id' autoComplete='off' />\n\n        <Input name='password' type='password' label='Password' autoComplete='off' />\n        <Select label='Make me'>\n          <Option>Available</Option>\n          <Option>Unavailable</Option>\n        </Select>\n      </Form>\n    </Flex>\n  );\n\n  const utils = [\n    {\n      name: 'Chat settings',\n      visual: <Icon name='chat-solid' />,\n      drawerView: chatSettings,\n      drawerHeader: 'Pega Chat Log In'\n    },\n    {\n      name: 'Call panel',\n      visual: (\n        <CallControlPanelIcon\n          status={agentStatus.status}\n          label={agentStatus.label}\n          variant='icon'\n          panelVisible={callPanelVisible}\n        />\n      ),\n      ...(agentStatus.status === 'logout'\n        ? {\n            drawerView: (\n              <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n                <CallLoginForm\n                  ctiLinkOptions={{\n                    valid: 'It will be accepted',\n                    invalid: 'This will raise an error'\n                  }}\n                  onLogin={ctiLink => {\n                    if (ctiLink === 'invalid') return Promise.resolve('Login incorrect');\n                    setAgentStatus(userStatusOptions[1] as UserAvailabilityStatusOption);\n                    setCallPanelVisible(true);\n                    return Promise.resolve(undefined);\n                  }}\n                />\n              </Flex>\n            ),\n            drawerHeader: 'Pega Call Log In'\n          }\n        : {\n            onClick: () => setCallPanelVisible(isVisible => !isVisible)\n          })\n    }\n  ];\n\n  const appInfo = {\n    href: 'https://www.pega.com/',\n    imageSrc:\n      'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',\n    fullImageSrc: 'Full Image Source',\n    appName: 'CS AppShell'\n  };\n\n  return (\n    <>\n      <AppShellDemo\n        main={mainContent}\n        appInfo={appInfo}\n        cases={cases}\n        createLinks={createLinks}\n        caseLinks={links}\n        utils={utils}\n        onLinkClick={(name: string) => {\n          if (name === 'Home') {\n            setMainContent(home);\n          }\n          setActiveItem(name);\n        }}\n      />\n      {args.ctiPanel === 'internal' ? (\n        <CallControlPanelDemo\n          heading='Agent'\n          status={agentStatus.id}\n          onStatusChange={setAgentStatus}\n          isDraggable={args.isDraggable}\n          visible={callPanelVisible}\n        />\n      ) : (\n        <ExternalCTIDemo\n          heading='External CTI'\n          isDraggable={args.isDraggable}\n          visible={callPanelVisible}\n          applyAppStyling={args.applyThemeToExternalCTI}\n        />\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CSAppShell.stories.js","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, MouseEvent, useMemo } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  AppShellProps,\n  createUID,\n  Status,\n  TwoColumnPage,\n  Icon,\n  registerIcon,\n  Button,\n  Form,\n  Flex,\n  Input,\n  Select,\n  Option\n} from '@pega/cosmos-react-core';\nimport * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '../../work/CaseView/CaseView.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { EmailShellDemo } from '../../social/Email/Email.stories';\nimport { StandardChat } from '../../social/Chat/Chat.stories';\nimport { TaskManagerDemo } from '../TaskManager/TaskManager.stories';\nimport {\n  InteractionTimerDemo as InteractionTimerStory,\n  InteractionTimerStoryProps\n} from '../InteractionTimer/InteractionTimer.stories';\n\nimport { AppShellMockData, CTIControlPanel, CTIControlPanelContext } from './CSAppShell.mocks';\n\nregisterIcon(chatSolidIcon);\n\nexport default {\n  title: 'Customer Service/CS App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  },\n  args: {\n    isDraggable: true,\n    hasInteractionNotifications: true,\n    enableSla: true,\n    ctiPanel: 'internal',\n    applyThemeToExternalCTI: false\n  },\n  argTypes: {\n    isDraggable: { control: { type: 'boolean' } },\n    hasInteractionNotifications: { control: { type: 'boolean' } },\n    enableSla: { control: { type: 'boolean' } },\n    ctiPanel: { options: ['internal', 'external'], control: { type: 'inline-radio' } },\n    applyThemeToExternalCTI: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface CSAppShellProps {\n  isDraggable?: boolean;\n  hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];\n  enableSla?: InteractionTimerStoryProps['showTimer'];\n  ctiPanel: 'internal' | 'external';\n  applyThemeToExternalCTI: boolean;\n}\n\nexport const CSAppShell: Story<CSAppShellProps> = (args: CSAppShellProps) => {\n  const CaseData = AppShellMockData as any;\n\n  const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis' />;\n\n  const [mainContent, setMainContent] = useState(home);\n  const [caseID, setCaseID] = useState(1001);\n  const [cases, setCases] = useState<AppShellProps['cases']>([]);\n  const [links, setLinks] = useState<AppShellProps['links']>([\n    {\n      id: '01',\n      name: 'Home',\n      href: '#home',\n      icon: 'home-solid'\n    }\n  ]);\n\n  const tabs = [\n    { name: 'Customer  notes', id: 'Pulse' },\n    { name: 'Accounts', id: 'Accounts' }\n  ];\n\n  const demoActions = [\n    {\n      text: 'Change stage',\n      id: createUID(),\n      onClick: action('Clicked on change stage')\n    },\n    {\n      text: 'Wrap up',\n      id: createUID(),\n      onClick: action('Clicked on Wrap up')\n    },\n    {\n      text: 'Exit interaction',\n      id: createUID(),\n      onClick: action('Clicked on exit interaction')\n    }\n  ];\n\n  const RenderCaseView = (name: string) => {\n    if (name) {\n      const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];\n      const secondaryFields = secondaryField.map((field: any) => {\n        if (field.name === 'Status') {\n          return { ...field, value: <Status variant='success'>{field.value}</Status> };\n        }\n        return field;\n      });\n      let persistentUtility;\n      if (name === 'Mail Interaction') {\n        persistentUtility = {\n          content: <EmailShellDemo hideSuggestions />,\n          title: 'Email'\n        };\n      } else if (name === 'Chat Interaction') {\n        persistentUtility = {\n          content: <StandardChat chatWidth='100%' />,\n          title: 'Chat'\n        };\n      }\n      setMainContent(\n        <CaseViewDemo\n          caseId={caseId}\n          heading={heading}\n          parentCases={[]}\n          actions={demoActions}\n          primaryFields={primaryFields}\n          secondaryFields={secondaryFields}\n          tabs={tabs}\n          stages={false}\n          tasksWidget={<TaskManagerDemo />}\n          persistentUtility={persistentUtility}\n          showUtilities={false}\n          showFollowedIcon={false}\n          defaultCollapsedUtilities\n        />\n      );\n    }\n  };\n\n  const setActiveItem = (key: string) => {\n    setCases((prevCases = []) => {\n      return prevCases.map(caseItem => {\n        return { ...caseItem, active: caseItem.id === key };\n      });\n    });\n    setLinks((prevLinks = []) => {\n      return prevLinks.map(link => {\n        return {\n          ...link,\n          active: link.name === key\n        };\n      });\n    });\n  };\n\n  const createInteraction = (createLink: {\n    primary: string;\n    secondary?: string;\n    icon: string;\n    meta: string;\n    customerName?: string;\n  }) => {\n    const { primary, secondary, icon, customerName } = createLink;\n    const key: string = createUID();\n    const createdAt = new Date().getTime();\n    const newCase = {\n      visual: (\n        <InteractionTimerStory\n          icon={icon}\n          showTimer={args.enableSla}\n          hasNotifications={args.hasInteractionNotifications}\n          meta={args.enableSla ? '0:00' : createLink.meta}\n          interactionType={primary}\n        />\n      ),\n      primary: customerName || 'Unknown customer',\n      secondary,\n      createdAt,\n      id: key,\n      active: true,\n      onClick: () => {\n        setActiveItem(key);\n        RenderCaseView(primary);\n      },\n      onDismiss: (e: any) => {\n        setActiveItem('Home');\n        e.stopPropagation();\n        setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));\n        setMainContent(home);\n      }\n    };\n    setCases((prevCases = []) => [...prevCases, newCase]);\n    setActiveItem(key);\n    setCaseID(caseID + 1);\n    RenderCaseView(primary);\n  };\n\n  const createLinks = [\n    {\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'FH',\n      customerName: 'Ginger Ventura'\n    },\n    {\n      primary: 'Chat Interaction',\n      secondary: 'Sent 2h ago',\n      icon: 'chat-solid',\n      meta: 'SC',\n      customerName: 'Sara Davis'\n    },\n    {\n      primary: 'Mail Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'mail-solid',\n      meta: 'JB',\n      customerName: 'John Brown'\n    }\n  ].map(item => {\n    const { primary, icon } = item;\n    return {\n      name: primary,\n      icon,\n      href: '',\n      onClick: () => {\n        createInteraction(item);\n      }\n    };\n  });\n\n  useEffect(() => {\n    createInteraction({\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'GV',\n      customerName: 'Ginger Ventura'\n    });\n  }, []);\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          action('Click')(`${e.currentTarget.name}:${e.type}`);\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Log in\n      </Button>\n    </>\n  );\n\n  const chatSettings = (\n    <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n      <Form actions={actions}>\n        <Input name='agentId' label='Agent Id' autoComplete='off' />\n\n        <Input name='password' type='password' label='Password' autoComplete='off' />\n        <Select label='Make me'>\n          <Option>Available</Option>\n          <Option>Unavailable</Option>\n        </Select>\n      </Form>\n    </Flex>\n  );\n\n  const utils = [\n    {\n      name: 'Chat settings',\n      visual: <Icon name='chat-solid' />,\n      drawerView: chatSettings,\n      drawerHeader: 'Pega Chat Log In'\n    },\n    <CTIControlPanel />\n  ];\n\n  const appInfo = {\n    href: 'https://www.pega.com/',\n    imageSrc:\n      'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',\n    fullImageSrc: 'Full Image Source',\n    appName: 'CS AppShell'\n  };\n\n  return (\n    <CTIControlPanelContext.Provider\n      value={useMemo(\n        () => ({\n          type: args.ctiPanel,\n          draggable: args.isDraggable,\n          applyAppStyling: args.applyThemeToExternalCTI\n        }),\n        [args.isDraggable, args.applyThemeToExternalCTI, args.ctiPanel]\n      )}\n    >\n      <AppShellDemo\n        main={mainContent}\n        appInfo={appInfo}\n        cases={cases}\n        createLinks={createLinks}\n        caseLinks={links}\n        utils={utils}\n        onLinkClick={(name: string) => {\n          if (name === 'Home') {\n            setMainContent(home);\n          }\n          setActiveItem(name);\n        }}\n      />\n    </CTIControlPanelContext.Provider>\n  );\n};\n"]}

package/lib/cs/TaskManager/TaskManager.mocks.d.ts

@@ -15,4 +15,16 @@ export declare const TaskPickerMockData: {
         }[];
     }[];
 };
+export declare const EntityListMock: {
+    name: string;
+    value: {
+        id: string;
+        entity: {
+            value: string;
+            type: string;
+            name: string;
+            variant: number;
+        };
+    }[];
+}[];
 //# sourceMappingURL=TaskManager.mocks.d.ts.map

package/lib/cs/TaskManager/TaskManager.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;CAqI9B,CAAC"}
+{"version":3,"file":"TaskManager.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;CAqI9B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;GAqF1B,CAAC"}

package/lib/cs/TaskManager/TaskManager.mocks.js

@@ -139,4 +139,90 @@ export const TaskPickerMockData = {
         }
     ]
 };
+export const EntityListMock = [
+    {
+        name: 'Ticket number',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: '7546383',
+                    type: 'system',
+                    name: 'Ticket number',
+                    variant: 3
+                }
+            }
+        ]
+    },
+    {
+        name: 'Date',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'Dec 5,2021 9.05 AM',
+                    type: 'system',
+                    name: 'Date',
+                    variant: 4
+                }
+            }
+        ]
+    },
+    {
+        name: 'Flight Number',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'FL-JK-403',
+                    type: 'system',
+                    name: 'Flight Number',
+                    variant: 5
+                }
+            }
+        ]
+    },
+    {
+        name: 'Email',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'robert.stanton@example.com',
+                    type: 'system',
+                    name: 'Email',
+                    variant: 2
+                }
+            }
+        ]
+    },
+    {
+        name: 'Address',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'Hyderabad',
+                    type: 'system',
+                    name: 'Address',
+                    variant: 15
+                }
+            }
+        ]
+    },
+    {
+        name: 'Location',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'Hyderabad',
+                    type: 'system',
+                    name: 'Location',
+                    variant: 8
+                }
+            }
+        ]
+    }
+];
 //# sourceMappingURL=TaskManager.mocks.js.map