@learningpool/ui 1.6.0-beta.7 → 1.6.0-beta.9

package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IApplication } from '../../stream/AppSwitcher/AppSwitcher';
 import { IVerticalNavigationItemProps } from './VerticalNavigationItem/VerticalNavigationItem';
 import { IAvatarMenuItemProps } from './VerticalNavigationAvatar';
 interface VerticalNavigationProps {
@@ -11,6 +12,7 @@ interface VerticalNavigationProps {
     streamHomeAccessToken?: string;
     streamHomeBaseUrl?: string;
     streamHomeApiKey?: string;
+    streamHomeApplications?: IApplication[];
     avatarName?: string;
     isDrawerOpen?: boolean;
     isPersistent?: boolean;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -26,11 +26,11 @@ import { useTheme } from '@mui/material/styles';
 import { Avatar, List, Tooltip } from '../../../index';
 import { Box } from '@mui/material';
 import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
-import { AppSwitcher } from '@learningpool/app-switcher';
-import { ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
+import AppSwitcher from '../../stream/AppSwitcher/AppSwitcher';
+import { Apps, ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
 import VerticalNavigationItem from './VerticalNavigationItem/VerticalNavigationItem';
 import { DRAWER_WIDTH, DrawerHeader, DrawerToggle, DrawerToggleHitboxContent, StyledDivider, StyledNav, StyledNavSecondary, DrawerShadow, StyledAside, NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask, StyledDrawer } from './VerticalNavigationStyles';
-import { ListItem, ListItemButton, ListItemIcon, ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles';
+import { ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles';
 import AvatarPanel from './VerticalNavigationAvatar';
 import { motion } from '../../../utils/theme';
 import { handleAvatarInitials } from '../../../utils/helpers';
@@ -38,12 +38,20 @@ import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
 var VerticalNavigation = function (props) {
     var _a, _b;
     var theme = useTheme();
-    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "streamHomeApiKey", "streamHomeBaseUrl", "streamHomeAccessToken"]);
+    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "streamHomeApiKey", "streamHomeBaseUrl", "streamHomeAccessToken", "streamHomeApplications"]);
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
     var propIsPersistent = typeof (props === null || props === void 0 ? void 0 : props.isPersistent) === 'boolean' ? props.isPersistent : undefined;
     var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
     var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
     var _d = React.useState(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false), isPersistent = _d[0], setIsPersistent = _d[1];
+    // Controls whether the application panel is open or not.
+    var _e = React.useState(false), isAppSwitcherOpen = _e[0], setIsAppSwitcherOpen = _e[1];
+    /**
+     * Toggles display of the Stream suite application dialog.
+     */
+    var handleToggleAppsClick = function () {
+        setIsAppSwitcherOpen(!isAppSwitcherOpen);
+    };
     var logoHeight = 38;
     var logoWidth = 38;
     useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
@@ -70,7 +78,7 @@ var VerticalNavigation = function (props) {
         }
         setIsPersistent(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false);
     };
-    var _e = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _e[0], setAvatarInitials = _e[1];
+    var _f = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
     var toggleDrawer = function (open) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -78,6 +86,7 @@ var VerticalNavigation = function (props) {
                 return;
             }
         }
+        setIsAppSwitcherOpen(false);
         setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
     }; };
     var listContent = function () { return (_jsxs(Box, __assign({ sx: {
@@ -190,14 +199,7 @@ var VerticalNavigation = function (props) {
                                     ? theme.palette.primary.main
                                     : theme.palette.background.paper
                             } }, { children: [hasStreamHome
-                                    ? (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen || isPersistent }, { children: _jsxs(ListItemButton, __assign({ sx: {
-                                                minHeight: 48,
-                                                justifyContent: isDrawerOpen || isPersistent ? 'initial' : 'center'
-                                            } }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: 'App switcher', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ sx: {
-                                                            minWidth: 0,
-                                                            mr: isDrawerOpen || isPersistent ? 2.5 : 'auto',
-                                                            justifyContent: 'center'
-                                                        } }, { children: _jsx(AppSwitcher, { apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '' }) })) })), _jsx(ListItemText, { primary: 'App switcher', isDrawerOpen: isDrawerOpen || isPersistent })] })) })))
+                                    ? (_jsx(VerticalNavigationItem, { label: 'App Switcher', icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications !== null && streamHomeApplications !== void 0 ? streamHomeApplications : [], apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true }))
                                     : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true }))); }), avatarName
                                     ? (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
                                                 // backgroundColor: mainTheme.colorButtonText,

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.d.ts

@@ -13,6 +13,7 @@ export interface IVerticalNavigationItemProps {
     content?: React.ReactElement;
     style?: any;
     open?: boolean;
+    hasCustomContent?: boolean;
 }
 declare const VerticalNavigationItem: (props: IVerticalNavigationItemProps) => React.ReactElement;
 export default VerticalNavigationItem;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js

@@ -31,7 +31,7 @@ import VerticalNavigationItemFlyoutMenu from './VerticalNavigationItemFlyoutMenu
 var VerticalNavigationItem = function (props) {
     var _a, _b, _c;
     var theme = useTheme();
-    var label = props.label, icon = props.icon, onClick = props.onClick, isActive = props.isActive, children = props.children, isDrawerOpen = props.isDrawerOpen, index = props.index, hasFlyout = props.hasFlyout, fullHeightFlyout = props.fullHeightFlyout, isSecondary = props.isSecondary, content = props.content, style = props.style, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style"]);
+    var label = props.label, icon = props.icon, onClick = props.onClick, isActive = props.isActive, children = props.children, isDrawerOpen = props.isDrawerOpen, index = props.index, hasFlyout = props.hasFlyout, fullHeightFlyout = props.fullHeightFlyout, isSecondary = props.isSecondary, content = props.content, style = props.style, hasCustomContent = props.hasCustomContent, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style", "hasCustomContent"]);
     var _d = React.useState(false), isExpanded = _d[0], setIsExpanded = _d[1];
     var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
     var open = Boolean(anchorEl);
@@ -86,6 +86,6 @@ var VerticalNavigationItem = function (props) {
                                                         ? theme.palette.primary.contrastText
                                                         : theme.palette.getContrastText(theme.palette.background.paper)
                                                 }
-                                            } })] }), label) }))); }) })) })))] }), label), !fullHeightFlyout && children && children.length > 0 && (!isExpanded || !isDrawerOpen) && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
+                                            } })] }), label) }))); }) })) })))] }), label), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && (!isExpanded || !isDrawerOpen) && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
 };
 export default VerticalNavigationItem;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -81,7 +81,7 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
     : props.theme.palette.background.paper; });
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);

package/components/stream/AppSwitcher/AppSwitcher.d.ts

@@ -0,0 +1,44 @@
+import { ReactElement } from 'react';
+import PropTypes from 'prop-types';
+export interface IApplication {
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    customName?: string;
+    url: string;
+    children?: object[];
+}
+interface IProps {
+    userId?: string;
+    layout?: string;
+    token?: string;
+    apiKey?: string;
+    baseUrl?: string;
+    applications?: IApplication[] | null;
+    currentApplicationId?: number;
+    localization?: any;
+    isAppSwitcherOpen?: boolean;
+    setIsAppSwitcherOpen?: any;
+    isDrawerOpen?: boolean;
+}
+declare const AppSwitcher: {
+    (props: IProps): ReactElement | null;
+    propTypes: {
+        accessToken: PropTypes.Requireable<string>;
+        apiKey: PropTypes.Requireable<string>;
+        layout: PropTypes.Requireable<string>;
+        userId: PropTypes.Requireable<number>;
+        baseUrl: PropTypes.Requireable<string>;
+        localization: PropTypes.Requireable<object>;
+        currentApplicationId: PropTypes.Requireable<number>;
+        applications: PropTypes.Requireable<any[]>;
+    };
+    defaultProps: {
+        layout: string;
+        baseUrl: string;
+        localization: {};
+        applications: never[];
+    };
+};
+export default AppSwitcher;

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -0,0 +1,307 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import jwtDecode from 'jwt-decode';
+import queryString from 'query-string';
+import { defaultMessages } from '../../../lang/en-us';
+import AppSwitcherItem, { LogoVariants } from './AppSwitcherItem';
+import { AppListHeader, AppListItem, AppOrganisationCount, StyledSVG, BackButton, MenuContent, OrganisationLink, OrganisationList, SearchBox, SearchContent, SelectedOrganisation, AppSwitcherPanel } from './AppSwitcherStyles';
+import { Constants } from './constants';
+import { DRAWER_WIDTH } from '../../navigation/VerticalNavigation/VerticalNavigationStyles';
+var AppSwitcher = function (props) {
+    var _a;
+    var isAppSwitcherOpen = props.isAppSwitcherOpen, setIsAppSwitcherOpen = props.setIsAppSwitcherOpen, isDrawerOpen = props.isDrawerOpen, localization = props.localization, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
+    var token = props.token;
+    // Controls whether the application panel is open or not.
+    // const [isOpen, setIsOpen] = useState(isAppSwitcherOpen)
+    // Holds the applications which are displayed.
+    var _c = useState([]), applications = _c[0], setApplications = _c[1];
+    // Controls which tab is active.
+    var _d = useState(Constants.Tabs.ListApplications), activeTab = _d[0], setActiveTab = _d[1];
+    // Holds the list of filtered organisations (on the second tab).
+    var _e = useState([]), filteredOrgs = _e[0], setFilteredOrgs = _e[1];
+    // Holds a reference to the active application (on the second tab).
+    var _f = useState(null), activeApplication = _f[0], setActiveApplication = _f[1];
+    // Stores any org filter text (on the second tab).
+    var _g = useState(''), searchString = _g[0], setSearchString = _g[1];
+    var messages = __assign(__assign({}, localization), defaultMessages);
+    var userId = (_a = props.userId) !== null && _a !== void 0 ? _a : '';
+    /**
+     * Toggles display of the Stream suite application dialog.
+     * @param event {React.MouseEvent} - Click event.
+     */
+    // const handleToggleAppsClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    //   setIsOpen(!isOpen)
+    // }
+    /**
+     * Handles closing of the application dialog.
+     */
+    var handleDialogClose = function () {
+        // setIsOpen(false)
+        setIsAppSwitcherOpen(false);
+        setTimeout(function () {
+            setSearchString('');
+            setActiveApplication(null);
+            setActiveTab(Constants.Tabs.ListApplications);
+        }, 400);
+    };
+    /**
+     * Updates the search/filter text.
+     * @param event {React.ChangeEvent}
+     */
+    var handleSearchChange = function (event) {
+        setSearchString(event.target.value);
+    };
+    /**
+     * Navigates to the organisation tab for an application with children.
+     * @param event {React.MouseEvent} - Click event.
+     * @param applicationId {number | undefined} - Unique identifier of the application.
+     * @returns {void}
+     */
+    var handleGoToAppClick = function (event, applicationId) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        if (!applicationId) {
+            return;
+        }
+        var selectedApplication = applications.find(function (a) { return a.applicationId === applicationId; });
+        if (!selectedApplication) {
+            return;
+        }
+        setFilteredOrgs(selectedApplication.children);
+        setActiveApplication(selectedApplication);
+        setActiveTab(Constants.Tabs.ListOrgs);
+    };
+    /**
+     * Renders an application logo.
+     * @param internalName {string | null | undefined } - Internal name of the application.
+     * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
+     */
+    var renderApplicationLogo = function (internalName, logoVariant) {
+        if (!internalName) {
+            return _jsx(_Fragment, {});
+        }
+        var urlToIcon = "".concat(Constants.AssetsUrl).concat(internalName, "/logo/latest/").concat(logoVariant !== null && logoVariant !== void 0 ? logoVariant : LogoVariants.Default, ".svg");
+        return (_jsx("svg", { children: _jsx("image", { xlinkHref: urlToIcon, width: "60", height: "60" }) }));
+    };
+    /**
+     * Queries the Steam Home API to fetch a list of applications.
+     * @returns {Promise<IApplication[]>} A list of applications the user has access to.
+     */
+    var getApplicationsForUser = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var decodedToken, response, data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(typeof token === 'string' && token !== window.localStorage.getItem(Constants.LocalStorageKey.Token))) return [3 /*break*/, 3];
+                    if (!userId) {
+                        decodedToken = jwtDecode(token);
+                        userId = decodedToken[Constants.HomeAttributes.UserId];
+                    }
+                    return [4 /*yield*/, fetch("".concat(baseUrl !== null && baseUrl !== void 0 ? baseUrl : Constants.BaseUrl, "/users/").concat(userId, "/application-instances"), {
+                            method: 'get',
+                            headers: new Headers({
+                                Authorization: "Bearer ".concat(token),
+                                'x-api-key': apiKey
+                            })
+                        })];
+                case 1:
+                    response = _a.sent();
+                    if (response.status !== 200) {
+                        console.error('Unable to retrieve user applications from Stream Home');
+                        return [2 /*return*/, []];
+                    }
+                    return [4 /*yield*/, response.json()
+                        // Store the latest access token.
+                    ];
+                case 2:
+                    data = _a.sent();
+                    // Store the latest access token.
+                    window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
+                    return [2 /*return*/, data.map(function (application) {
+                            var applicationId = application.applicationId, applicationName = application.applicationName, shortName = application.shortName, internalName = application.internalName, customName = application.customName, url = application.url;
+                            return {
+                                applicationId: applicationId,
+                                applicationName: applicationName,
+                                shortName: shortName,
+                                internalName: internalName,
+                                customName: customName,
+                                url: url || ''
+                            };
+                        })];
+                case 3: return [2 /*return*/, []];
+            }
+        });
+    }); };
+    useEffect(function () {
+        var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var applicationInstances, userApplications, parsedQueryString, uniqueApplicationIds, localApplications;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        applicationInstances = [];
+                        userApplications = [];
+                        if (!token) {
+                            parsedQueryString = queryString.parse(window.location.search);
+                            if (parsedQueryString.accessToken && typeof parsedQueryString.accessToken === 'string') {
+                                token = parsedQueryString.accessToken;
+                            }
+                        }
+                        if (!!props.applications) return [3 /*break*/, 2];
+                        return [4 /*yield*/, getApplicationsForUser()];
+                    case 1:
+                        applicationInstances = _a.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        // A hard-coded list of applications has been passed to the component.
+                        applicationInstances = props.applications;
+                        _a.label = 3;
+                    case 3:
+                        if (Array.isArray(applicationInstances) && applicationInstances.length) {
+                            uniqueApplicationIds = applicationInstances.map(function (item) { return item.applicationId; }).filter(function (value, index, self) { return self.indexOf(value) === index; });
+                            // Iterate over these to build up the userApplications array.
+                            uniqueApplicationIds.forEach(function (applicationId) {
+                                var applications = applicationInstances.filter(function (instance) { return instance.applicationId === applicationId; });
+                                if (applications.length > 1) {
+                                    // This is an application with multiple orgs/tenants the user has access to.
+                                    userApplications.push({
+                                        applicationId: applicationId,
+                                        applicationName: applications[0].applicationName,
+                                        shortName: applications[0].shortName,
+                                        internalName: applications[0].internalName,
+                                        url: '',
+                                        children: applications.map(function (a) {
+                                            var _a;
+                                            return {
+                                                name: (_a = a.customName) !== null && _a !== void 0 ? _a : a.applicationName,
+                                                url: a.url
+                                            };
+                                        })
+                                    });
+                                }
+                                else {
+                                    // This is a standalone application.
+                                    userApplications.push({
+                                        applicationId: applications[0].applicationId,
+                                        applicationName: applications[0].applicationName,
+                                        shortName: applications[0].shortName,
+                                        internalName: applications[0].internalName,
+                                        url: applications[0].url
+                                    });
+                                }
+                            });
+                            // Serialize and cache the applications returned.
+                            window.localStorage.setItem(Constants.LocalStorageKey.Applications, JSON.stringify(userApplications));
+                        }
+                        else {
+                            localApplications = window.localStorage.getItem(Constants.LocalStorageKey.Applications);
+                            if (localApplications) {
+                                // Recreate the application state from local storage.
+                                userApplications = JSON.parse(localApplications);
+                            }
+                        }
+                        // Store the user's applications.
+                        setApplications(userApplications);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        loadData()
+            .catch(console.error);
+    }, [token, apiKey, baseUrl, userId]);
+    var handleKeyDown = function (event) {
+        if (event && event.type === 'keydown') {
+            // Close AppSwitcher if Escape key is pressed
+            if (event.key === 'Escape') {
+                handleDialogClose();
+                // Doesnt return focus but we need to investigate MUI again
+                // so that should handle it
+            }
+        }
+    };
+    if (!props.applications && (!token || !apiKey)) {
+        return null;
+    }
+    return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
+            display: isAppSwitcherOpen ? 'block' : 'none',
+            left: isDrawerOpen ? DRAWER_WIDTH.Expanded : DRAWER_WIDTH.Collapsed - 3
+        }, role: 'dialog', onKeyDown: handleKeyDown }, { children: [activeTab === Constants.Tabs.ListApplications
+                ? (_jsxs("div", { children: [_jsxs(AppListHeader, { children: [_jsx("svg", { children: _jsx("image", { xlinkHref: "".concat(Constants.AssetsUrl, "suite/logo/latest/icon.svg"), width: "24", height: "24" }) }), messages['your-apps']] }), _jsx(MenuContent, __assign({ style: {
+                                display: activeTab === 1 ? 'flex' : 'none'
+                            } }, { children: applications.map(function (_a) {
+                                var applicationId = _a.applicationId, applicationName = _a.applicationName, shortName = _a.shortName, internalName = _a.internalName, url = _a.url, children = _a.children;
+                                return (_jsxs(AppListItem, { children: [url && (_jsx(AppSwitcherItem, { internalName: internalName, shortName: shortName, url: url, handleGoToAppClick: handleGoToAppClick })), !url && (_jsx(AppSwitcherItem, { internalName: internalName, shortName: shortName, handleGoToAppClick: handleGoToAppClick, applicationId: applicationId })), children && (_jsx(AppOrganisationCount, { children: children.length }))] }, applicationId));
+                            }) }))] }))
+                : null, activeTab === Constants.Tabs.ListOrgs
+                ? (_jsxs(SearchContent, __assign({ style: {
+                        display: activeTab === 2 ? 'flex' : 'none'
+                    } }, { children: [_jsxs(BackButton, __assign({ onClick: function () {
+                                setActiveTab(Constants.Tabs.ListApplications);
+                                setSearchString('');
+                            } }, { children: [_jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronLeftIcon" }, { children: _jsx("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })), messages['back-to']] })), _jsxs(SelectedOrganisation, { children: [renderApplicationLogo(activeApplication === null || activeApplication === void 0 ? void 0 : activeApplication.internalName, LogoVariants.Solid), _jsx("h6", { children: activeApplication ? activeApplication.applicationName : '' })] }), _jsx(SearchBox, { id: "app-switcher-search-org", type: 'text', value: searchString, onChange: handleSearchChange, placeholder: messages.search }), _jsx(OrganisationList, { children: filteredOrgs === null || filteredOrgs === void 0 ? void 0 : filteredOrgs.filter(function (o) { return o.name.toLowerCase().includes(searchString.toLowerCase()); }).map(function (org, i) { return (_jsxs(OrganisationLink, __assign({ href: org.url, target: "_blank" }, { children: [org.name, _jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronRightIcon" }, { children: _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }))] }), i)); }) })] })))
+                : null] })));
+};
+AppSwitcher.propTypes = {
+    accessToken: PropTypes.string,
+    apiKey: PropTypes.string,
+    layout: PropTypes.string,
+    userId: PropTypes.number,
+    baseUrl: PropTypes.string,
+    localization: PropTypes.object,
+    currentApplicationId: PropTypes.number,
+    applications: PropTypes.array
+};
+AppSwitcher.defaultProps = {
+    layout: Constants.Layout.Vertical,
+    baseUrl: Constants.BaseUrl,
+    localization: {},
+    applications: []
+};
+export default AppSwitcher;

package/components/stream/AppSwitcher/AppSwitcherItem.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+export declare const LogoVariants: {
+    Default: string;
+    Solid: string;
+    Outlined: string;
+    White: string;
+};
+interface IAppSwitcherItemProps {
+    internalName: string;
+    shortName: string;
+    handleGoToAppClick: Function;
+    applicationId?: number;
+    url?: string;
+}
+declare const AppSwitcherItem: (props: IAppSwitcherItemProps) => ReactElement;
+export default AppSwitcherItem;

package/components/stream/AppSwitcher/AppSwitcherItem.js

@@ -0,0 +1,51 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Constants } from './constants';
+import { AppLink, AppName, StyledLogoSVG } from './AppSwitcherStyles';
+// Bug in the naming of the icons on the CDN
+export var LogoVariants = {
+    Default: 'icon',
+    Solid: 'icon-solid',
+    Outlined: 'icon-outlined',
+    White: 'icon-white'
+};
+var AppSwitcherItem = function (props) {
+    var applicationId = props.applicationId, internalName = props.internalName, shortName = props.shortName, url = props.url, handleGoToAppClick = props.handleGoToAppClick;
+    /**
+     * Renders an application logo.
+     * @param internalName {string | null | undefined } - Internal name of the application.
+     * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
+     */
+    var renderApplicationLogo = function (internalName, logoVariant) {
+        if (!internalName) {
+            return _jsx(_Fragment, {});
+        }
+        var urlToIcon = "".concat(Constants.AssetsUrl).concat(internalName, "/logo/latest/").concat(logoVariant !== null && logoVariant !== void 0 ? logoVariant : LogoVariants.Default, ".svg");
+        return (_jsx(StyledLogoSVG, { children: _jsx("image", { xlinkHref: urlToIcon, width: "60", height: "60" }) }));
+    };
+    var solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
+    return (_jsxs(AppLink, __assign({ href: url !== null && url !== void 0 ? url : '#', target: "_blank", onClick: function (event) { return applicationId ? handleGoToAppClick(event, applicationId) : null; } }, { children: [applicationId && (
+            // Create a stack effect to indicate multiple
+            _jsxs(_Fragment, { children: [_jsx("span", __assign({ style: {
+                            position: 'absolute',
+                            top: '4px',
+                            transform: 'scale(0.8)',
+                            zIndex: 0
+                        } }, { children: solidLogo })), _jsx("span", __assign({ style: {
+                            position: 'absolute',
+                            top: '10px',
+                            transform: 'scale(0.9)',
+                            zIndex: 0
+                        } }, { children: solidLogo }))] })), solidLogo, _jsx(AppName, { children: shortName })] })));
+};
+export default AppSwitcherItem;

package/components/stream/AppSwitcher/AppSwitcherStyles.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const AppSwitcherPanel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const List: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const MenuContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AppListHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const AppListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AppLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const BackButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const SearchBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const AppName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const AppOrganisationCount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const SelectedOrganisation: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const OrganisationList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OrganisationLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const StyledLogoSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;

package/components/stream/AppSwitcher/AppSwitcherStyles.js

@@ -0,0 +1,48 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '@mui/material/styles';
+export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: 57px;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n"], ["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: 57px;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.dark
+    : '#E6EAF0'; });
+export var List = styled('ul')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n"], ["\n"])));
+export var MenuContent = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"], ["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"])));
+export var SearchContent = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"], ["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"])));
+export var AppListHeader = styled('p')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 0.5rem 1.25rem 0;\n  text-transform: uppercase;\n\n  & svg {\n    height: 24px;\n    margin-right: 0.5rem;\n    width: 24px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 0.5rem 1.25rem 0;\n  text-transform: uppercase;\n\n  & svg {\n    height: 24px;\n    margin-right: 0.5rem;\n    width: 24px;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#757575'; });
+export var AppListItem = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"], ["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])), 100 / 3);
+export var AppLink = styled('a')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.85rem;\n  justify-content: center;\n  overflow: hidden;\n  padding: 1rem 0 0.5rem;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  transition: all 200ms ease;\n  width: 100%;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:hover,\n  &:focus {\n    background-color: ", ";\n    text-decoration: none;\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & svg {\n    height: 60px;\n    width: 60px;\n  }\n\n  &:hover + span,\n  &:focus + span {\n    opacity: 1;\n  }\n\n  &:hover svg,\n  &:focus svg {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.85rem;\n  justify-content: center;\n  overflow: hidden;\n  padding: 1rem 0 0.5rem;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  transition: all 200ms ease;\n  width: 100%;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:hover,\n  &:focus {\n    background-color: ", ";\n    text-decoration: none;\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & svg {\n    height: 60px;\n    width: 60px;\n  }\n\n  &:hover + span,\n  &:focus + span {\n    opacity: 1;\n  }\n\n  &:hover svg,\n  &:focus svg {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? 'rgba(22, 92, 141, 1)'
+    : '#ebf2fc'; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? 'rgba(22, 92, 141, 1)'
+    : '#ebf2fc'; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? 'rgba(22, 92, 141, 1)'
+    : '#ebf2fc'; });
+export var BackButton = styled('button')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0;\n  text-align: left;\n  width: 100%;\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0;\n  text-align: left;\n  width: 100%;\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#757575'; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.1)'
+    : 'rgba(0, 0, 0, 0.1)'; });
+export var SearchBox = styled('input')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: #f4f4f4;\n  border: thin solid #888;\n  box-sizing: border-box;\n  color: #777;\n  padding: 0.5rem;\n  width: 100%;\n\n  &:hover .MuiOutlinedInput-notchedOutline {\n    border-color: #888;\n  }\n\n  & .MuiOutlinedInput-root {\n    border-radius: 0;\n    color: #777;\n    padding: 0;\n  }\n\n  & .MuiOutlinedInput-input {\n    padding: 0.5rem;\n  }\n\n  & ::placeholder {\n    opacity: 0.75;\n  }\n"], ["\n  background: #f4f4f4;\n  border: thin solid #888;\n  box-sizing: border-box;\n  color: #777;\n  padding: 0.5rem;\n  width: 100%;\n\n  &:hover .MuiOutlinedInput-notchedOutline {\n    border-color: #888;\n  }\n\n  & .MuiOutlinedInput-root {\n    border-radius: 0;\n    color: #777;\n    padding: 0;\n  }\n\n  & .MuiOutlinedInput-input {\n    padding: 0.5rem;\n  }\n\n  & ::placeholder {\n    opacity: 0.75;\n  }\n"])));
+export var AppName = styled('p')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: normal;\n  margin: 0.5rem 0 0;\n  white-space: nowrap;\n"], ["\n  color: ", ";\n  font-weight: normal;\n  margin: 0.5rem 0 0;\n  white-space: nowrap;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#757575'; });
+export var AppOrganisationCount = styled('span')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 50px;\n  left: 50%;\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 43%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  z-index: 1;\n"], ["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 50px;\n  left: 50%;\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 43%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  z-index: 1;\n"])));
+export var SelectedOrganisation = styled('div')(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  text-transform: uppercase;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & h6 {\n    font-size: 1.2rem;\n    font-weight: 600;\n    margin: 0 0 0 1rem;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  text-transform: uppercase;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & h6 {\n    font-size: 1.2rem;\n    font-weight: 600;\n    margin: 0 0 0 1rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#757575'; });
+export var StyledSVG = styled('svg')(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  user-select: none;\n  width: 1em;\n"], ["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  user-select: none;\n  width: 1em;\n"])));
+export var OrganisationList = styled('div')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 300px;\n  overflow: auto;\n  padding-top: 0.5rem;\n  width: 100%;\n"], ["\n  height: 300px;\n  overflow: auto;\n  padding-top: 0.5rem;\n  width: 100%;\n"])));
+export var OrganisationLink = styled('a')(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  color: ", ";\n  display: flex;\n  font-size: 1rem;\n  justify-content: space-between;\n  margin: 0 0.125rem;\n  padding: 0.5rem;\n  text-decoration: none;\n  transition: all 200ms ease;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n\n    & svg {\n      visibility: visible;\n    }\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & .MuiLink-root {\n    align-items: center;\n    color: #777;\n    display: flex;\n    justify-content: space-between;\n    text-decoration: none;\n    width: 100%;\n  }\n\n  & svg {\n    visibility: hidden;\n  }\n"], ["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  color: ", ";\n  display: flex;\n  font-size: 1rem;\n  justify-content: space-between;\n  margin: 0 0.125rem;\n  padding: 0.5rem;\n  text-decoration: none;\n  transition: all 200ms ease;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n\n    & svg {\n      visibility: visible;\n    }\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & .MuiLink-root {\n    align-items: center;\n    color: #777;\n    display: flex;\n    justify-content: space-between;\n    text-decoration: none;\n    width: 100%;\n  }\n\n  & svg {\n    visibility: hidden;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#757575'; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.1)'
+    : 'rgba(0, 0, 0, 0.1)'; });
+export var StyledLogoSVG = styled('svg')(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: thin solid ", ";\n  position: relative;\n  z-index: 1;\n"], ["\n  background-color: ", ";\n  border: thin solid ", ";\n  position: relative;\n  z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.dark
+    : '#E6EAF0'; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.dark
+    : '#E6EAF0'; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

package/components/stream/AppSwitcher/constants.d.ts

@@ -0,0 +1,34 @@
+export declare const Constants: Readonly<{
+    LocalStorageKey: {
+        Token: string;
+        Applications: string;
+    };
+    HomeAttributes: {
+        UserId: string;
+    };
+    BaseUrl: "https://api.home.learningpool.com/";
+    AssetsUrl: "https://uuicdn.learningpool.com/";
+    Layout: {
+        Vertical: string;
+        Horizontal: string;
+    };
+    Tabs: {
+        ListApplications: number;
+        ListOrgs: number;
+    };
+}>;
+export declare const applications: ({
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    url: string;
+    customName?: undefined;
+} | {
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    customName: string;
+    url: string;
+})[];

package/components/stream/AppSwitcher/constants.js

@@ -0,0 +1,27 @@
+export var Constants = Object.freeze({
+    LocalStorageKey: {
+        Token: 'lp-home-access-token',
+        Applications: 'lp-home-applications'
+    },
+    HomeAttributes: {
+        UserId: 'lp-home-user-id'
+    },
+    BaseUrl: 'https://api.home.learningpool.com/',
+    AssetsUrl: 'https://uuicdn.learningpool.com/',
+    Layout: {
+        Vertical: 'vertical',
+        Horizontal: 'horizontal'
+    },
+    Tabs: {
+        ListApplications: 1,
+        ListOrgs: 2
+    }
+});
+export var applications = [
+    { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },
+    { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Analytics', internalName: 'analytics', url: 'https://learningpool.com' },
+    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
+    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 2', url: 'https://learningpool.com' },
+    { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: '', url: 'https://learningpool.com' },
+    { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', customName: '', url: 'https://learningpool.com' }
+];

package/lang/en-us.d.ts

@@ -0,0 +1,6 @@
+export const defaultMessages: {
+    'your-apps': string;
+    'back-to': string;
+    'select-an-organisation': string;
+    search: string;
+};

package/lang/en-us.js

@@ -0,0 +1,6 @@
+export var defaultMessages = {
+    'your-apps': 'Your Stream suite apps',
+    'back-to': 'Back',
+    'select-an-organisation': 'Select an organisation',
+    search: 'Search'
+};

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.6.0-beta.7",
+  "version": "1.6.0-beta.9",
   "private": false,
   "main": "index.js",
   "module": "index.js",
@@ -17,7 +17,6 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@learningpool/design-tokens": "^1.1.0-beta.7",
-    "@learningpool/app-switcher": "1.1.0-beta.4",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.5",
     "@mui/x-data-grid": "^5.12.3",
@@ -30,6 +29,8 @@
     "eslint-plugin-n": "^15.2.4",
     "focus-trap-react": "^8.11.0",
     "framer-motion": "^6.5.1",
+    "jwt-decode": "^3.1.2",
+    "query-string": "^7.1.1",
     "tss-react": "^3.3.6",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4"