@learningpool/ui 1.18.0 → 1.19.0

package/components/datadisplay/WelcomeBanner/WelcomeBannerStyles.js

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import { Box, Typography } from '../../../';
 export const StyledBannerWrapper = styled(Box) `
   align-items: center;
-  column-gap: 16px;
+  column-gap: 0;
   display: flex;
   flex-flow: row wrap;
   position: relative;
@@ -12,13 +12,16 @@ export const StyledBannerWrapper = styled(Box) `
 export const StyledWavingHandIcon = styled(WavingHandIcon) `
   color: orange;
   margin-right: 0.5rem;
+  margin-left: ${props => props.theme.direction === 'rtl' ? '0.5rem' : '0'}
 `;
 export const StyledWelcomeMessage = styled(Typography) `
   font-weight: 500;
   line-height: 1.2;
+  margin-left: ${props => props.theme.direction === 'rtl' ? '0.5rem' : '0'}
 `;
 export const StyledOrganizationChip = styled(MUIChip) `
   margin-left: 1rem;
+  margin-right: ${props => props.theme.direction === 'rtl' ? '0.5rem' : '0'}
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -25,7 +25,7 @@ import { getDefaultSupportLinks, getNavigationBackground, getNavigationContrastT
 import { Constants } from '../../stream/AppSwitcher/constants';
 const VerticalNavigation = (props) => {
     const theme = useTheme();
-    const { items, secondaryItems, logo, logoText, logoOnClick, appRootID, hasStreamHome, hideStreamHomeButton, StreamHomeUrl, streamHomeApiKey, streamHomeBaseUrl, localization, streamHomeAccessToken, streamHomeApplications, avatarName, dataAttributes, showSupportLinks, hidePromotionalCampaign, avatarPanelShowHelpLinks, promotionalCampaigns, ...rest } = props;
+    const { items, secondaryItems, logo, logoText, logoOnClick, appRootID, hasStreamHome, StreamHomeUrl, streamHomeApiKey, streamHomeBaseUrl, localization, streamHomeAccessToken, avatarName, dataAttributes, showSupportLinks, avatarPanelShowHelpLinks, ...rest } = props;
     const messages = { ...defaultMessages, ...localization };
     const dataIds = { ...defaultAttributes, ...dataAttributes };
     const propIsDrawerOpen = typeof props?.isDrawerOpen === 'boolean' ? props.isDrawerOpen : undefined;
@@ -77,8 +77,8 @@ const VerticalNavigation = (props) => {
     }, [isDrawerOpen]);
     const handleIsPersistent = () => {
         if (props?.setIsPersistent) {
-            props.setIsPersistent(!propIsPersistent ?? false);
-            setIsPersistent(!propIsPersistent ?? false);
+            props.setIsPersistent(!propIsPersistent || false);
+            setIsPersistent(!propIsPersistent || false);
             return;
         }
         setIsPersistent(propIsPersistent ?? false);
@@ -202,7 +202,7 @@ const VerticalNavigation = (props) => {
                             width: DRAWER_WIDTH.Expanded,
                             marginTop: `-${theme.spacing(0.5)} !important`
                         }, children: items && items.length > 0 && items.map((item, index) => (_createElement(VerticalNavigationItem, { ...item, "data-id": dataIds.VerticalNavigationPrimaryListItem, key: `${item.label} - ${index}`, index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: animationRefs.current[index] }))) }) }) }), _jsx("div", { className: 'wrapper', "data-id": dataIds.VerticalNavigationSecondary, style: { backgroundColor: getNavigationBackground(theme) }, children: _jsxs(StyledNavSecondary, { "aria-label": 'Secondary', children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, { "data-id": dataIds.VerticalNavigationSecondaryList, style: { width: DRAWER_WIDTH.Expanded }, children: [(showSupportLinks || avatarPanelShowHelpLinks) && defaultSupportLinks && defaultSupportLinks.length > 0 && defaultSupportLinks.map((item, index) => (_createElement(VerticalNavigationItem, { ...item, "data-id": dataIds.VerticalNavigationSecondaryListItem, key: `${item.label} - ${index}`, index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[(items?.length ?? 0) + index + 1] }))), hasStreamHome
-                                    ? (_jsx(VerticalNavigationItem, { id: dataIds.VerticalNavigationAppSwitcherToggle, "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(AppsIcon, {}), onClick: handleToggleAppSwitcher, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, handleToggleAppSwitcher: handleToggleAppSwitcher, applications: streamHomeApplications, apiKey: streamHomeApiKey ?? '', baseUrl: streamHomeBaseUrl ?? '', token: streamHomeAccessToken ?? '', isDrawerOpen: isDrawerOpen, hideStreamHomeButton: hideStreamHomeButton || false, StreamHomeUrl: StreamHomeUrl ?? Constants.DefaultStreamHomeUrl, hidePromotionalCampaign: hidePromotionalCampaign ?? false, promotionalCampaigns: promotionalCampaigns })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[(items?.length ?? 0) + (defaultSupportLinks?.length ?? 0) + 1], isContentOpen: isAppSwitcherOpen }))
+                                    ? (_jsx(VerticalNavigationItem, { id: dataIds.VerticalNavigationAppSwitcherToggle, "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(AppsIcon, {}), onClick: handleToggleAppSwitcher, content: (_jsx(AppSwitcher, { isStandalone: false, isAppSwitcherOpen: isAppSwitcherOpen, handleToggleAppSwitcher: handleToggleAppSwitcher, apiKey: streamHomeApiKey ?? '', baseUrl: streamHomeBaseUrl ?? '', token: streamHomeAccessToken ?? '', isDrawerOpen: isDrawerOpen, StreamHomeUrl: StreamHomeUrl ?? Constants.DefaultStreamHomeUrl, avatarName: avatarName })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[(items?.length ?? 0) + (defaultSupportLinks?.length ?? 0) + 1], isContentOpen: isAppSwitcherOpen }))
                                     : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map((item, index) => (_createElement(VerticalNavigationItem, { ...item, "data-id": dataIds.VerticalNavigationSecondaryListItem, key: `${item.label} - ${index}`, index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[(items?.length ?? 0) + (defaultSupportLinks?.length ?? 0) + index + 1] }))), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, id: dataIds.VerticalNavigationAvatarToggle, "data-id": dataIds.VerticalNavigationAvatarToggle, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, { style: {
                                             fontSize: '0.75rem',
                                             height: 32,
@@ -216,7 +216,7 @@ const VerticalNavigation = (props) => {
                                         ...animationRefs.current[(items?.length ?? 0) + (defaultSupportLinks?.length ?? 0) + (secondaryItems?.length ?? 0) + 2]
                                     }, onClick: handleToggleAvatarPanel, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, { avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization, handleToggleAvatarPanel: handleToggleAvatarPanel, ...rest }), isDrawerOpen: isDrawerOpen, isContentOpen: isAvatarOpen }))] })] }) })] }));
     return (_jsxs(StyledAside, { "aria-label": messages['site-navigation'], "data-id": dataIds.VerticalNavigationContainer, children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
-                    display: isPersistent ? 'none' : 'block'
+                    display: isPersistent || isAppSwitcherOpen ? 'none' : 'block'
                 } }), _jsx(Modal, { "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false), children: _jsx(StyledDrawer, { id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent', children: listContent() }) })] }));
 };
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -244,8 +244,4 @@ export const StyledDrawer = styled(Drawer, {
     visibility: visible !important;
     width: ${(props) => !props.open ? `calc(${props.theme.spacing(7)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
   }
-
-  .MuiTypography-root {
-    color: inherit;
-  }
 `;

package/components/stream/AppHub/AppHub.js

@@ -11,7 +11,7 @@ import WelcomeBanner from '../../datadisplay/WelcomeBanner/WelcomeBanner';
 import { handleHubTracking } from '../../../utils/helpers';
 import { HubEventTypeID } from '../../../utils/Enums/HubEventTypes.enum';
 const AppHub = (props) => {
-    const { data, isPageLayout, localization, customLinkBgColor, isAppSwitcher, userName, userOrganization, hasPromotionalCampaigns, hubApiKey, hubToken } = props;
+    const { data, isPageLayout, localization, customLinkBgColor, isAppSwitcher, userName, userOrganization, hasPromotionalCampaigns, hubApiKey, hubToken, hubApiUrl } = props;
     const messages = { ...defaultMessages, ...localization };
     const manageLinkButton = {
         url: `${window.location.origin}/links`,
@@ -23,37 +23,40 @@ const AppHub = (props) => {
         ? { columns: { xs: 8 } }
         : { columns: { xs: 12 } };
     const renderRow = (rowData, rowIndex) => {
-        const { type, items, title, allowEditLinks } = rowData;
+        const { type, items, title, allowEditLinks, allowTitle } = rowData;
         switch (type) {
             case Constants.DataRowType.BannerAdvert: {
-                // Potentially remove this
-                if (isAppSwitcher) {
-                    return;
-                }
                 rowData.welcomeMessage = messages['stream-hub-welcome'];
                 rowData.userName = userName;
                 rowData.userOrganization = userOrganization;
+                rowData.hubTrackingProps = {
+                    hubApiUrl,
+                    apiKey: hubApiKey,
+                    token: hubToken,
+                    isAppSwitcher
+                };
                 return (renderBannerAdvertRow(rowData, rowIndex));
             }
             case Constants.DataRowType.Product: {
-                return (_jsxs(AppHubRow, { children: [(title && !isAppSwitcher) && _jsx(AppHubHeader, { component: isPageLayout ? 'h2' : 'div', children: title }), _jsx(Grid, { container: true, spacing: { xs: 2, md: 3 }, rowSpacing: { xs: 3, md: 4 }, columns: gridSpacing.columns, children: items.map(({ subtitle, shortName, internalName, url, children, hubEventTypeId, hubReferenceId, ...rest }, index) => {
+                return (_jsxs(AppHubRow, { children: [(title && (!isAppSwitcher || allowTitle)) && _jsx(AppHubHeader, { component: isPageLayout ? 'h2' : 'div', children: title }), _jsx(Grid, { container: true, spacing: { xs: 2, md: 3 }, rowSpacing: { xs: 3, md: 4 }, columns: gridSpacing.columns, children: items.map(({ subtitle, shortName, internalName, url, children, hubEventTypeId, hubReferenceId, ...rest }, index) => {
                                 if (!url && !children) {
                                     return null;
                                 }
-                                return (_jsxs(Grid, { xs: 12, sm: 6, md: 4, children: [url && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, url: url, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiKey: hubApiKey, hubToken: hubToken, ...rest })), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiKey: hubApiKey, hubToken: hubToken, ...rest }))] }, `${shortName}_${rowIndex}_${index}`));
+                                return (_jsxs(Grid, { xs: 12, sm: 6, md: 4, children: [url && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, url: url, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiUrl: hubApiUrl, hubApiKey: hubApiKey, hubToken: hubToken, ...rest })), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiUrl: hubApiUrl, hubApiKey: hubApiKey, hubToken: hubToken, ...rest }))] }, `${shortName}_${rowIndex}_${index}`));
                             }) })] }, `row_${rowIndex}`));
             }
             case Constants.DataRowType.CustomLink: {
                 return (_jsxs(AppHubRow, { children: [title &&
                             _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { xs: 10, children: _jsx(AppHubHeader, { component: isPageLayout ? 'h2' : 'div', children: title }) }), (allowEditLinks && !isAppSwitcher) &&
                                         _jsx(Grid, { xs: 2, children: _jsx(Link, { href: manageLinkButton.url, "data-testid": manageLinkButton.hubReferenceId, onClick: () => handleHubTracking({
+                                                    hubApiUrl,
                                                     apiKey: hubApiKey,
                                                     token: hubToken,
                                                     isAppSwitcher,
                                                     eventTypeId: manageLinkButton.hubEventTypeId,
                                                     referenceId: manageLinkButton.hubReferenceId,
                                                     url: manageLinkButton.url
-                                                }), children: _jsxs(ManageLinksHeader, { component: isPageLayout ? 'h2' : 'div', children: [_jsx(StyledSettingsIcon, {}), manageLinkButton.title] }) }) })] }), _jsx(Grid, { container: true, spacing: { xs: 2, md: 3 }, columns: gridSpacing.columns, children: items.map(({ name, url, icon, hubEventTypeId, hubReferenceId, ...rest }, index) => (_jsx(Grid, { xs: 12, sm: 6, md: 4, ...rest, children: url && (_jsx(AppHubCustom, { name: name, customLinkBgColor: customLinkBgColor, url: url, icon: icon, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiKey: hubApiKey, hubToken: hubToken, ...rest })) }, `${name}_${rowIndex}_${index}`))) })] }, `row_${rowIndex}`));
+                                                }), children: _jsxs(ManageLinksHeader, { component: isPageLayout ? 'h2' : 'div', children: [_jsx(StyledSettingsIcon, {}), manageLinkButton.title] }) }) })] }), _jsx(Grid, { container: true, spacing: { xs: 2, md: 3 }, columns: gridSpacing.columns, children: items.map(({ name, url, icon, hubEventTypeId, hubReferenceId, ...rest }, index) => (_jsx(Grid, { xs: 12, sm: 6, md: 4, ...rest, children: url && (_jsx(AppHubCustom, { name: name, customLinkBgColor: customLinkBgColor, url: url, icon: icon, isAppSwitcher: isAppSwitcher, hubEventTypeId: hubEventTypeId, hubReferenceId: hubReferenceId, hubApiUrl: hubApiUrl, hubApiKey: hubApiKey, hubToken: hubToken, ...rest })) }, `${name}_${rowIndex}_${index}`))) })] }, `row_${rowIndex}`));
             }
             default: {
                 console.log('no items');
@@ -65,7 +68,7 @@ const AppHub = (props) => {
         console.log('No data available');
         return null;
     }
-    return (_jsxs(AppHubPanel, { role: isPageLayout ? 'main' : '', children: [!hasPromotionalCampaigns &&
-                _jsx(AppHubTitle, { component: isPageLayout ? 'h1' : 'div', children: _jsx(WelcomeBanner, { welcomeMessage: messages['stream-hub-welcome'], userName: userName, userOrganization: userOrganization }) }), data && data.map((row, rowIndex) => renderRow(row, rowIndex))] }));
+    return (_jsxs(AppHubPanel, { role: isPageLayout ? 'main' : '', style: { marginRight: isAppSwitcher ? '2rem' : 0 }, children: [!hasPromotionalCampaigns &&
+                _jsx(AppHubTitle, { component: isPageLayout ? 'h1' : 'div', style: { marginLeft: '1.5rem' }, children: _jsx(WelcomeBanner, { welcomeMessage: messages['stream-hub-welcome'], userName: userName, userOrganization: userOrganization }) }), data && data.map((row, rowIndex) => renderRow(row, rowIndex))] }));
 };
 export default AppHub;

package/components/stream/AppHub/AppHubBannerAdvert.js

@@ -5,6 +5,8 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { StyledAdvertPaper, StyledAdvertLink, StyledAdvertImage } from './AppHubAdvertStyles';
 import { defaultMessages } from '../../../lang/en-us';
 import WelcomeBanner from '../../datadisplay/WelcomeBanner/WelcomeBanner';
+import { handleHubTracking } from '../../../utils/helpers';
+import { HubEventTypeID } from '../../../utils/Enums/HubEventTypes.enum';
 const addUtmParams = (baseUrl, source, medium, campaign) => {
     try {
         const url = new URL(baseUrl);
@@ -19,7 +21,7 @@ const addUtmParams = (baseUrl, source, medium, campaign) => {
     }
 };
 export const renderBannerAdvertRow = (rowData, rowIndex) => {
-    const { items, welcomeMessage, userName, userOrganization } = rowData;
+    const { items, welcomeMessage, userName, userOrganization, hubTrackingProps } = rowData;
     const [hasValidImage, setHasValidImage] = useState(true);
     const handleImageError = () => {
         setHasValidImage(false);
@@ -27,5 +29,14 @@ export const renderBannerAdvertRow = (rowData, rowIndex) => {
     const validItems = items.filter((item) => item.hubImageUrl && item.basePromoUrl);
     if (!hasValidImage || validItems.length === 0)
         return null;
-    return (_jsx(AppHubRow, { children: _jsxs(Grid, { container: true, spacing: 2, children: [validItems.map((item, index) => (_jsx(Grid, { xs: 12, children: _jsx(StyledAdvertPaper, { elevation: 0, children: _jsx(StyledAdvertLink, { href: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name), target: "_blank", children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText || defaultMessages['banner-image-alt-text'], onError: handleImageError }) }) }) }, index))), _jsx(AppHubTitle, { component: 'h1', style: { marginTop: '2rem' }, children: _jsx(WelcomeBanner, { welcomeMessage: welcomeMessage, userName: userName, userOrganization: userOrganization }) })] }) }, `row_${rowIndex}`));
+    const { hubApiUrl, apiKey, token, isAppSwitcher } = hubTrackingProps;
+    return (_jsx(AppHubRow, { children: _jsxs(Grid, { container: true, spacing: 2, children: [validItems.map((item, index) => (_jsx(Grid, { xs: 12, children: _jsx(StyledAdvertPaper, { elevation: 0, children: _jsx(StyledAdvertLink, { href: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name), target: "_blank", onClick: () => handleHubTracking({
+                                hubApiUrl,
+                                apiKey,
+                                token,
+                                isAppSwitcher,
+                                eventTypeId: HubEventTypeID.REQUEST_DEMO,
+                                referenceId: item.name,
+                                url: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name)
+                            }), children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText || defaultMessages['banner-image-alt-text'], onError: handleImageError }) }) }) }, index))), _jsx(AppHubTitle, { component: 'h1', style: { marginTop: '2rem' }, children: _jsx(WelcomeBanner, { welcomeMessage: welcomeMessage, userName: userName, userOrganization: userOrganization }) })] }) }, `row_${rowIndex}`));
 };

package/components/stream/AppHub/AppHubCustom.d.ts

@@ -8,6 +8,7 @@ interface IAppHubCustomProps {
     hubEventTypeId: string;
     hubReferenceId: string;
     isAppSwitcher: boolean;
+    hubApiUrl: string;
     hubApiKey: string;
     hubToken: string;
 }

package/components/stream/AppHub/AppHubCustom.js

@@ -10,6 +10,17 @@ import TrendingUpIcon from '@mui/icons-material/TrendingUp';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import CoPresentIcon from '@mui/icons-material/CoPresent';
 import PreviewIcon from '@mui/icons-material/Preview';
+/* eslint-disable no-unused-vars */
+// TODO: Remove rule for enums
+var LinkTitles;
+(function (LinkTitles) {
+    LinkTitles["ACADEMY"] = "Academy";
+    LinkTitles["CONTACTS"] = "Contact Us";
+    LinkTitles["CUSTOMER_PORTAL"] = "Customer Portal";
+    LinkTitles["ROADMAPS"] = "Product Roadmaps";
+    LinkTitles["RELEASE_NOTES"] = "Release Notes";
+    LinkTitles["SHOWCASE"] = "Showcase";
+})(LinkTitles || (LinkTitles = {}));
 // Bug in the naming of the icons on the CDN
 export const LogoVariants = {
     Default: 'icon',
@@ -25,35 +36,32 @@ export const LogoVariants = {
 const getLinkIcon = (name) => {
     const style = { margin: '0.2rem 1rem 0 1rem' };
     switch (name) {
-        case 'Academy':
+        case LinkTitles.ACADEMY:
             return _jsx(SchoolIcon, { style: style });
-        case 'Contact Us':
+        case LinkTitles.CONTACTS:
             return _jsx(LocalPhoneIcon, { style: style });
-        case 'Customer Portal':
+        case LinkTitles.CUSTOMER_PORTAL:
             return _jsx(CoPresentIcon, { style: style });
-        case 'Product Roadmaps':
+        case LinkTitles.ROADMAPS:
             return _jsx(TrendingUpIcon, { style: style });
-        case 'Release Notes':
+        case LinkTitles.RELEASE_NOTES:
             return _jsx(AutoStoriesIcon, { style: style });
-        case 'Showcase':
+        case LinkTitles.SHOWCASE:
             return _jsx(PreviewIcon, { style: style });
         default: return _jsx(LinkIcon, { style: style });
     }
 };
 const AppHubCustom = (props) => {
-    const { name, url, customLinkBgColor, icon, isAppSwitcher, hubApiKey, hubToken, hubEventTypeId, hubReferenceId, ...rest } = props;
+    const { name, url, customLinkBgColor, icon, isAppSwitcher, hubApiUrl, hubApiKey, hubToken, hubEventTypeId, hubReferenceId, ...rest } = props;
     const linkIcon = getLinkIcon(name);
     return (_jsx(StyledPaper, { elevation: 0, ...rest, children: _jsx(StyledLink, { href: url, target: '_blank', underline: 'none', onClick: () => handleHubTracking({
+                hubApiUrl,
                 apiKey: hubApiKey,
                 token: hubToken,
                 eventTypeId: hubEventTypeId,
                 referenceId: hubReferenceId,
                 url,
                 isAppSwitcher
-            }), ...rest, children: _jsxs(StyledBoxWrap, { children: [linkIcon, _jsx(StyledTypography
-                    // @ts-ignore
-                    , { 
-                        // @ts-ignore
-                        component: 'div', ...rest, children: name })] }) }) }));
+            }), ...rest, children: _jsxs(StyledBoxWrap, { children: [linkIcon, _jsx(StyledTypography, { component: 'div', ...rest, children: name })] }) }) }));
 };
 export default AppHubCustom;

package/components/stream/AppHub/AppHubCustomStyles.d.ts

@@ -59,16 +59,4 @@ export declare const StyledAddCircleOutlineIcon: import("@emotion/styled").Style
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material/Typography").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledTypography: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Typography").TypographyTypeMap<{}, "span">>;

package/components/stream/AppHub/AppHubProduct.d.ts

@@ -17,6 +17,7 @@ interface IAppHubItemProps {
     hubEventTypeId: string | number;
     hubReferenceId: string;
     isAppSwitcher: boolean;
+    hubApiUrl: string;
     hubApiKey: string;
     hubToken: string;
 }

package/components/stream/AppHub/AppHubProduct.js

@@ -6,7 +6,7 @@ import { Constants } from './constants';
 import { defaultMessages } from '../../../lang/en-us';
 import { StyledPaper, StyledBoxWrap, StyledBoxText, StyledAutocomplete, StyledTypography, StyledTypographySubtitle, StyledLink } from './AppHubProductStyles';
 import { handleHubTracking } from '../../../utils/helpers';
-import { useTheme } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 // Bug in the naming of the icons on the CDN
 export const LogoVariants = {
     Default: 'icon',
@@ -28,12 +28,13 @@ const renderApplicationLogo = (internalName, logoVariant) => {
     return (_jsx("img", { src: urlToIcon, width: "30", height: "30", alt: internalName ?? '' }));
 };
 const AppHubItem = (props) => {
-    const { internalName, shortName, customName, url, subtitle, localization, options, isAppSwitcher, hubEventTypeId, hubReferenceId, hubApiKey, hubToken } = props;
+    const { internalName, shortName, customName, url, subtitle, localization, options, isAppSwitcher, hubEventTypeId, hubReferenceId, hubApiUrl, hubApiKey, hubToken } = props;
     const initialOptions = { ...options };
     const solidLogo = renderApplicationLogo(internalName, LogoVariants.NoneOutlined);
     const messages = { ...defaultMessages, ...localization };
     return (_jsx(StyledPaper, { elevation: 0, children: _jsx(StyledLink, { href: url, target: '_blank', underline: 'none', onClick: () => !options
                 ? handleHubTracking({
+                    hubApiUrl,
                     apiKey: hubApiKey,
                     token: hubToken,
                     eventTypeId: hubEventTypeId,
@@ -41,7 +42,7 @@ const AppHubItem = (props) => {
                     url: url,
                     isAppSwitcher
                 })
-                : null, children: _jsxs(StyledBoxWrap, { children: [_jsxs("div", { style: { display: 'flex' }, children: [solidLogo, options && options.length > 0 && (_jsx(StyledAutocomplete, { disablePortal: true, size: 'small', options: options.map((option) => option.applicationName), 
+                : null, children: _jsxs(StyledBoxWrap, { children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', children: [solidLogo, options && options.length > 0 && (_jsx(StyledAutocomplete, { disablePortal: true, size: 'small', options: options.map((option) => option.applicationName), 
                                 // TODO: Add link, icon and screen reader text here:
                                 renderOption: (option) => {
                                     // Autocomplete only uses applicationName and we need more properties
@@ -52,25 +53,18 @@ const AppHubItem = (props) => {
                                     const handleClick = (event) => {
                                         optionItem.onClick && optionItem.onClick(event);
                                         handleHubTracking({
+                                            hubApiUrl,
                                             apiKey: hubApiKey,
                                             token: hubToken,
                                             eventTypeId: hubEventTypeId,
                                             referenceId: hubReferenceId,
-                                            url: url,
+                                            url: optionItem.url,
                                             isAppSwitcher
                                         });
                                     };
                                     return (_jsxs(ListItemButton, { onClick: event => {
                                             handleClick(event);
                                         }, children: [option.key, _jsx(LaunchIcon, { sx: { marginInlineStart: '1rem', transform: useTheme().direction === 'rtl' ? 'scaleX(-1)' : 'none' } }), _jsxs("span", { style: visuallyHidden, children: [", ", messages['open-in-new-window']] })] }, `${option.key}_${option.id}`));
-                                }, renderInput: (params) => _jsx(TextField, { ...params, placeholder: messages['select-org'] }) }))] }), _jsxs(StyledBoxText, { children: [_jsx(Tooltip, { placement: 'top', title: customName ?? shortName, children: _jsx(StyledTypography
-                                // @ts-ignore
-                                , { 
-                                    // @ts-ignore
-                                    component: 'div', className: 'appHubCardTitle', children: customName ?? shortName }) }), subtitle && (_jsx(StyledTypographySubtitle
-                            // @ts-ignore
-                            , { 
-                                // @ts-ignore
-                                component: 'div', children: subtitle }))] })] }) }) }));
+                                }, renderInput: (params) => _jsx(TextField, { ...params, placeholder: messages['select-org'] }) }))] }), _jsxs(StyledBoxText, { children: [_jsx(Tooltip, { placement: 'top', title: customName ?? shortName, children: _jsx(StyledTypography, { component: 'div', className: 'appHubCardTitle', children: customName ?? shortName }) }), subtitle && (_jsx(StyledTypographySubtitle, { component: 'div', children: subtitle }))] })] }) }) }));
 };
 export default AppHubItem;

package/components/stream/AppHub/AppHubProductStyles.d.ts

@@ -25,32 +25,8 @@ export declare const StyledBoxText: import("@emotion/styled").StyledComponent<im
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const StyledTypographySubtitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledTypography: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>;
+export declare const StyledTypographySubtitle: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>;
 export declare const StyledButton: import("@emotion/styled").StyledComponent<Omit<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;

package/components/stream/AppHub/AppHubProductStyles.js

@@ -11,6 +11,7 @@ export const StyledPaper = styled(Paper) `
   border-radius: 5px;
   border: none;
   transition: all 180ms ease;
+  text-wrap: auto;
 
   &:hover,
   &:focus-within {

package/components/stream/AppHub/AppHubStyles.js

@@ -13,12 +13,13 @@ export const AppHubTitle = styled(Typography) `
   font-weight: 500;
   line-height: 1.3;
   color: ${props => props.theme.palette.text.primary};
-  margin-bottom: 0.5rem;
+  margin: 0 0 0.5rem 0.5rem;
 `;
 export const AppHubHeader = styled(Typography) `
   font-size: 1rem;
   font-weight: 500;
   color: ${props => props.theme.palette.text.secondary};
+  justify-self: start;
   margin: 0 0 1rem;
 `;
 export const ManageLinksHeader = styled(Typography) `

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

@@ -1,35 +1,8 @@
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { IPromotionalCampaign } from '../../../types/components/stream/AppSwitcher';
-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;
-    handleToggleAppSwitcher?: any;
-    isDrawerOpen?: boolean;
-    dataAttributes?: any;
-    StreamHomeUrl?: string;
-    hideStreamHomeButton?: boolean;
-    hidePromotionalCampaign?: boolean;
-    promotionalCampaigns?: IPromotionalCampaign[] | null;
-}
+import { IAppSwitcherProps } from '../../../types/components/stream/AppSwitcher';
 declare const AppSwitcher: {
-    (props: IProps): ReactElement | null;
+    (props: IAppSwitcherProps): ReactElement | null;
     propTypes: {
         token: PropTypes.Requireable<string>;
         apiKey: PropTypes.Requireable<string>;
@@ -37,9 +10,6 @@ declare const AppSwitcher: {
         userId: PropTypes.Requireable<string>;
         baseUrl: PropTypes.Requireable<string>;
         localization: PropTypes.Requireable<object>;
-        currentApplicationId: PropTypes.Requireable<number>;
-        applications: PropTypes.Requireable<any[]>;
-        hidePromotionalCampaign: PropTypes.Requireable<boolean>;
     };
     defaultProps: {
         layout: string;