@learningpool/ui 1.12.2 → 1.13.0

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -71,9 +71,21 @@ var VerticalNavigation = function (props) {
     /**
      * Toggles display of the Stream suite application dialog.
      */
-    var handleToggleAppsClick = function () {
+    var handleToggleAppSwitcher = function () {
+        if (isAvatarOpen) {
+            setIsAvatarOpen(false);
+        }
         setIsAppSwitcherOpen(!isAppSwitcherOpen);
     };
+    /**
+     * Toggles display of the avatar dialog.
+     */
+    var handleToggleAvatarPanel = function () {
+        if (isAppSwitcherOpen) {
+            setIsAppSwitcherOpen(false);
+        }
+        setIsAvatarOpen(!isAvatarOpen);
+    };
     var logoHeight = 38;
     var logoWidth = 38;
     useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
@@ -228,15 +240,15 @@ var VerticalNavigation = function (props) {
                                         var _a;
                                         return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + index + 1] })));
                                     }), hasStreamHome
-                                        ? (_jsx(VerticalNavigationItem, { "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(AppsIcon, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen, hideStreamHomeButton: hideStreamHomeButton || false, StreamHomeUrl: StreamHomeUrl !== null && StreamHomeUrl !== void 0 ? StreamHomeUrl : Constants.DefaultStreamHomeUrl })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + 1] }))
+                                        ? (_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 !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen, hideStreamHomeButton: hideStreamHomeButton || false, StreamHomeUrl: StreamHomeUrl !== null && StreamHomeUrl !== void 0 ? StreamHomeUrl : Constants.DefaultStreamHomeUrl })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + 1], isContentOpen: isAppSwitcherOpen }))
                                         : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
                                         var _a, _b;
                                         return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + index + 1] })));
-                                    }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "data-id": dataIds.VerticalNavigationAvatarToggle, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
+                                    }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, id: dataIds.VerticalNavigationAvatarToggle, "data-id": dataIds.VerticalNavigationAvatarToggle, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
                                                 fontSize: '0.75rem',
                                                 height: 32,
                                                 width: 32
-                                            } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, animationRefs.current[((_c = items === null || items === void 0 ? void 0 : items.length) !== null && _c !== void 0 ? _c : 0) + ((_d = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _d !== void 0 ? _d : 0) + ((_e = secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.length) !== null && _e !== void 0 ? _e : 0) + 2]), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))] }))] })) }))] })));
+                                            } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, animationRefs.current[((_c = items === null || items === void 0 ? void 0 : items.length) !== null && _c !== void 0 ? _c : 0) + ((_d = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _d !== void 0 ? _d : 0) + ((_e = secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.length) !== null && _e !== void 0 ? _e : 0) + 2]), onClick: handleToggleAvatarPanel, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization, handleToggleAvatarPanel: handleToggleAvatarPanel }, rest)), isDrawerOpen: isDrawerOpen, isContentOpen: isAvatarOpen }))] }))] })) }))] })));
     };
     return (_jsxs(StyledAside, __assign({ "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'

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js

@@ -35,12 +35,29 @@ import { defaultAttributes } from '../../../utils/dataAttributes';
 var AvatarPanel = function (props) {
     var _a, _b, _c, _d;
     var theme = useTheme();
-    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization, dataAttributes = props.dataAttributes;
+    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization, dataAttributes = props.dataAttributes, handleToggleAvatarPanel = props.handleToggleAvatarPanel;
     var messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
+    var handleAvatarClick = function (event) {
+        var avatarPanelId = document.getElementById(defaultAttributes.VerticalNavigationAvatarToggle);
+        // Not allow the onClick to toggle event when clicking away from the ref
+        if (avatarPanelId === null || avatarPanelId === void 0 ? void 0 : avatarPanelId.contains(event.target)) {
+            return;
+        }
+        // Toggle the panel when you're clicking away from the ref
+        handleToggleAvatarPanel();
+    };
     useEffect(function () {
         setAvatarInitials(handleAvatarInitials(avatarName));
     }, [avatarName]);
+    useEffect(function () {
+        if (isAvatarOpen) {
+            document.addEventListener('mousedown', handleAvatarClick);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleAvatarClick);
+        };
+    }, [isAvatarOpen]);
     var _e = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _e[0], setAvatarInitials = _e[1];
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
@@ -58,7 +75,7 @@ var AvatarPanel = function (props) {
     ];
     var totalItems = __spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), additionalItems, true);
     var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isAvatarOpen); }));
-    return (_jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(StyledButton
+    return (_jsxs(StyledBox, __assign({ onMouseDown: function (event) { return event.stopPropagation(); } }, { children: [avatarPanelOnClickLogout && (_jsx(StyledButton
             // @ts-expect-error
             , __assign({ 
                 // @ts-expect-error
@@ -96,6 +113,6 @@ var AvatarPanel = function (props) {
                                         component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                     minWidth: theme.spacing(5)
                                                 } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index)));
-                            }) }))] })), _jsx(Box, __assign({ "data-id": dataIds.VerticalNavigationFlyoutFootnote, className: 'avatar-panel-footnote', style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4] }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
+                            }) }))] })), _jsx(Box, __assign({ "data-id": dataIds.VerticalNavigationFlyoutFootnote, className: 'avatar-panel-footnote', style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4] }, { children: avatarPanelFootnote && avatarPanelFootnote }))] })));
 };
 export default AvatarPanel;

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

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Link, List, Tooltip, Collapse } from '../../../../index';
 import MailIcon from '@mui/icons-material/Mail';
@@ -32,10 +32,15 @@ import { animated } from '@react-spring/web';
 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, hasCustomContent = props.hasCustomContent, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style", "hasCustomContent"]);
+    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, isContentOpen = props.isContentOpen, content = props.content, style = props.style, hasCustomContent = props.hasCustomContent, id = props.id, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "isContentOpen", "content", "style", "hasCustomContent", "id"]);
     var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
     var _e = React.useState(false), isFlyoutHovered = _e[0], setIsFlyoutHovered = _e[1];
     var open = isFlyoutHovered || Boolean(anchorEl);
+    useEffect(function () {
+        if (!isContentOpen && open) {
+            handlePopoverClose();
+        }
+    }, [isContentOpen]);
     var handlePopoverOpen = function (event) {
         if (open) {
             handlePopoverClose();
@@ -97,7 +102,7 @@ var VerticalNavigationItem = function (props) {
     };
     return (_jsxs(ListItem, __assign({ disablePadding: true, 
         // @ts-expect-error
-        component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton, __assign({ ref: ref, 
+        component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton, __assign({ ref: ref, id: id, 
                 // @ts-expect-error
                 component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, onMouseEnter: function (event) { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
                     ? null

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

@@ -19,7 +19,7 @@ interface IProps {
     currentApplicationId?: number;
     localization?: any;
     isAppSwitcherOpen?: boolean;
-    setIsAppSwitcherOpen?: any;
+    handleToggleAppSwitcher?: any;
     isDrawerOpen?: boolean;
     dataAttributes?: any;
     StreamHomeUrl?: string;

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -57,7 +57,7 @@ import { defaultAttributes } from '../../../utils/dataAttributes';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 var AppSwitcher = function (props) {
     var _a;
-    var isAppSwitcherOpen = props.isAppSwitcherOpen, setIsAppSwitcherOpen = props.setIsAppSwitcherOpen, isDrawerOpen = props.isDrawerOpen, localization = props.localization, dataAttributes = props.dataAttributes, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
+    var isAppSwitcherOpen = props.isAppSwitcherOpen, handleToggleAppSwitcher = props.handleToggleAppSwitcher, isDrawerOpen = props.isDrawerOpen, localization = props.localization, dataAttributes = props.dataAttributes, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
     var token = props.token;
     // Holds the applications which are displayed.
     var _c = useState([]), applications = _c[0], setApplications = _c[1];
@@ -76,7 +76,7 @@ var AppSwitcher = function (props) {
      * Handles closing of the application dialog.
      */
     var handleDialogClose = function () {
-        setIsAppSwitcherOpen(false);
+        handleToggleAppSwitcher();
         setTimeout(function () {
             setSearchString('');
             setActiveApplication(null);
@@ -253,8 +253,26 @@ var AppSwitcher = function (props) {
         loadData()
             .catch(console.error);
     }, [token, userId, props.applications]);
+    useEffect(function () {
+        if (isAppSwitcherOpen) {
+            document.addEventListener('mousedown', handleAppSwitcherClose);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleAppSwitcherClose);
+        };
+    }, [isAppSwitcherOpen]);
+    useEffect(function () { return document.addEventListener('keydown', handleKeyDown); });
+    var handleAppSwitcherClose = function (event) {
+        var appSwitcherButton = document.getElementById(defaultAttributes.VerticalNavigationAppSwitcherToggle);
+        // Allow the appswitcher button to handle closing instead of closing it here.
+        if (appSwitcherButton === null || appSwitcherButton === void 0 ? void 0 : appSwitcherButton.contains(event.target)) {
+            return;
+        }
+        // Close the dialog when clicking outside the panel.
+        handleDialogClose();
+    };
     var handleKeyDown = function (event) {
-        if (event && event.type === 'keydown') {
+        if (isAppSwitcherOpen && event && event.type === 'keydown') {
             // Close AppSwitcher if Escape key is pressed
             if (event.key === 'Escape') {
                 handleDialogClose();
@@ -269,7 +287,7 @@ var AppSwitcher = function (props) {
     return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
             display: isAppSwitcherOpen ? 'block' : 'none',
             left: isDrawerOpen ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3
-        }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer }, { children: [activeTab === Constants.Tabs.ListApplications
+        }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer, onMouseDown: function (event) { return event.stopPropagation(); } }, { children: [activeTab === Constants.Tabs.ListApplications
                 ? (_jsxs("div", { children: [_jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [messages['your-apps'], !props.hideStreamHomeButton &&
                                     _jsx(StyleHomeButton, __assign({ "aria-label": messages['go-to-hub'], endIcon: _jsx(ChevronRightIcon, {}), onClick: function (e) { var _a; return window.open((_a = props.StreamHomeUrl) !== null && _a !== void 0 ? _a : Constants.DefaultStreamHomeUrl); } }, { children: messages['go-to-hub'] }))] })), _jsx(MenuContent, __assign({ style: {
                                 display: activeTab === 1 ? 'flex' : 'none'

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.12.2",
+  "version": "1.13.0",
   "private": false,
   "main": "index.js",
   "module": "index.js",

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

@@ -8,6 +8,7 @@ export interface IVerticalNavigationItemProps {
     isActive?: boolean;
     children?: IVerticalNavigationItemProps[];
     isDrawerOpen?: boolean;
+    isContentOpen?: boolean;
     index?: number;
     isSecondary?: boolean;
     hasFlyout?: boolean;
@@ -16,6 +17,7 @@ export interface IVerticalNavigationItemProps {
     style?: any;
     open?: boolean;
     hasCustomContent?: boolean;
+    id?: string;
 }
 export interface IVerticalNavigationProps {
     logo?: string;

package/types/components/navigation/VerticalNavigationAvatar.d.ts

@@ -7,6 +7,7 @@ export interface IAvatarPanelProps {
     avatarName: string;
     editProfileText?: string;
     isAvatarOpen: boolean;
+    handleToggleAvatarPanel: Function;
     localization?: any;
     dataAttributes?: any;
     avatarPanelLogoutString?: string;