@learningpool/ui 1.10.6 → 1.11.0

package/components/navigation/MobileNavigation/MobileNavigation.d.ts

@@ -17,7 +17,9 @@ interface MobileNavigationProps {
     isAvatarOpen?: boolean;
     hideAvatarInitials?: boolean;
     showNotchIndicator?: boolean;
+    localization?: string | Record<string, any>;
     dataAttributes?: any;
+    showSupportLinks?: boolean;
     hasSearch?: boolean;
     searchPanelPlaceholder?: string;
     searchPanelDefaultValue?: string;
@@ -34,6 +36,7 @@ interface MobileNavigationProps {
     avatarPanelOnClickMainAction?: any;
     avatarPanelMainActionString?: string;
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
+    /** @deprecated This property will be removed in the next major version (2.X) */
     avatarPanelShowHelpLinks?: boolean;
 }
 declare const MobileNavigation: (props: MobileNavigationProps) => React.ReactElement;

package/components/navigation/MobileNavigation/MobileNavigationAvatar.d.ts

@@ -25,7 +25,6 @@ export interface ISwipeableTemporaryAvatarProps {
     avatarPanelMainActionString?: string;
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
     avatarPanelInvertNavString?: string;
-    avatarPanelShowHelpLinks?: boolean;
 }
 declare const SwipeableTemporaryAvatar: (props: ISwipeableTemporaryAvatarProps) => React.ReactElement;
 export default SwipeableTemporaryAvatar;

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -31,14 +31,13 @@ import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 import { animated } from '@react-spring/web';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 import { defaultMessages } from '../../../lang/en-us';
-import { Help, Lightbulb, Phone } from '@mui/icons-material';
 var SwipeableTemporaryAvatar = function (props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     var theme = useTheme();
-    var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, avatarPanelLogoutString = props.avatarPanelLogoutString, isAvatarOpen = props.isAvatarOpen, setIsAvatarOpen = props.setIsAvatarOpen, setMobileNavDirection = props.setMobileNavDirection, avatarPanelOnClickSwitchDirection = props.avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelInvertNavString = props.avatarPanelInvertNavString, dataAttributes = props.dataAttributes, localization = props.localization, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks;
+    var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, avatarPanelLogoutString = props.avatarPanelLogoutString, isAvatarOpen = props.isAvatarOpen, setIsAvatarOpen = props.setIsAvatarOpen, setMobileNavDirection = props.setMobileNavDirection, avatarPanelOnClickSwitchDirection = props.avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelInvertNavString = props.avatarPanelInvertNavString, dataAttributes = props.dataAttributes, localization = props.localization;
     var messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
-    var _f = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _f[0], setIsOpen = _f[1];
+    var _e = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _e[0], setIsOpen = _e[1];
     React.useEffect(function () { return handleOpenState(isAvatarOpen); }, [isAvatarOpen]);
     var handleOpenState = function (open) {
         setIsOpen(open);
@@ -54,19 +53,12 @@ var SwipeableTemporaryAvatar = function (props) {
             handleOpenState(open);
         };
     };
-    var _g = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _g[0], setAvatarInitials = _g[1];
+    var _f = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
     useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
     var handleOnClickSwitchDirection = function () {
         setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
         avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();
     };
-    // Add default helpful links below avatarPanelSettingItems,
-    // these can be toggled on/off with the avatarPanelShowHelpLinks prop
-    var defaultHelpLinks = [
-        { label: messages['help-center'], icon: _jsx(Help, {}), onClick: function () { return window.open('https://learningpool.zendesk.com', '_blank'); } },
-        { label: messages['feature-request'], icon: _jsx(Lightbulb, {}), onClick: function () { return window.open('https://app.smartsheet.com/b/form/823248624a324630a904e825098ca816', '_blank'); } },
-        { label: messages['contact-us'], icon: _jsx(Phone, {}), onClick: function () { return window.open('https://learningpool.com/support', '_blank'); } }
-    ];
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
     // --
@@ -81,7 +73,7 @@ var SwipeableTemporaryAvatar = function (props) {
         'avatarPanelOnClickMainAction',
         'mobileNavDirection'
     ];
-    var totalItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), defaultHelpLinks !== null && defaultHelpLinks !== void 0 ? defaultHelpLinks : [], true), additionalItems, true);
+    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 (_jsx(StyledSwipeableAvatar, __assign({ "data-id": dataIds.MobileNavAvatarPanel, anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
             keepMounted: true
@@ -144,29 +136,13 @@ var SwipeableTemporaryAvatar = function (props) {
                                                 } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                             minWidth: theme.spacing(5)
                                                         } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) })));
-                                    }), avatarPanelShowHelpLinks && defaultHelpLinks &&
-                                    defaultHelpLinks.length > 0 &&
-                                    defaultHelpLinks.map(function (avatarMenuItem, index) {
-                                        var _a, _b;
-                                        return (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + ((_b = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _b !== void 0 ? _b : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
-                                            // TODO: figure out if these are links or buttons
-                                            // @ts-expect-error
-                                            , __assign({ 
-                                                // TODO: figure out if these are links or buttons
-                                                // @ts-expect-error
-                                                component: Link, role: 'link', onClick: function () {
-                                                    handleOpenState(false);
-                                                    avatarMenuItem.onClick();
-                                                } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
-                                                            minWidth: theme.spacing(5)
-                                                        } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) })));
-                                    }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: animated.div, style: __assign({ marginTop: avatarPanelShowHelpLinks ? theme.spacing(2) : 0 }, 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) + ((_e = defaultHelpLinks === null || defaultHelpLinks === void 0 ? void 0 : defaultHelpLinks.length) !== null && _e !== void 0 ? _e : 0) + 4]), disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                    }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: animated.div, style: __assign({ marginTop: 0 }, 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]), disablePadding: true }, { children: _jsxs(StyledListItemButton
                                     // TODO: figure out if these are links or buttons
                                     // @ts-expect-error
                                     , __assign({ 
                                         // TODO: figure out if these are links or buttons
                                         // @ts-expect-error
-                                        component: Link, role: 'link', onClick: handleOnClickSwitchDirection }, { children: [_jsx(ListItemText, { primary: avatarPanelInvertNavString !== null && avatarPanelInvertNavString !== void 0 ? avatarPanelInvertNavString : 'Invert navigation bar' }), _jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                        component: Link, role: 'link', onClick: handleOnClickSwitchDirection }, { children: [_jsx(ListItemText, { primary: avatarPanelInvertNavString !== null && avatarPanelInvertNavString !== void 0 ? avatarPanelInvertNavString : messages['invert-navigation-bar'] }), _jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                     minWidth: theme.spacing(5),
                                                     marginInlineStart: '0.5rem'
                                                 } }, { children: mobileNavDirection === 'ltr'

package/components/navigation/MobileNavigation/MobileNavigationDrawer.d.ts

@@ -20,6 +20,10 @@ export interface ISwipeableTemporaryDrawerProps {
     logoOnClick?: any;
     label: string;
     children?: ISwipeableTemporaryDrawerProps[];
+    localization?: any;
     dataAttributes?: any;
+    showSupportLinks?: boolean;
+    /** @deprecated This property will be removed in the next major version (2.X) */
+    avatarPanelShowHelpLinks?: boolean;
 }
 export default function SwipeableTemporaryDrawer(props: ISwipeableTemporaryDrawerProps): JSX.Element;

package/components/navigation/MobileNavigation/MobileNavigationDrawer.js

@@ -26,12 +26,14 @@ import { StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider, Styled
 import { StreamSuiteLogo } from '../../../assets/Images';
 import { animated } from '@react-spring/web';
 import { useFadeIn } from '../../../utils/helpers';
-import { getOffsetNavigationContrastText } from '../helpers';
+import { getDefaultSupportLinks, getOffsetNavigationContrastText } from '../helpers';
 import { defaultAttributes } from '../../../utils/dataAttributes';
+import { defaultMessages } from '../../../lang/en-us';
 export default function SwipeableTemporaryDrawer(props) {
-    var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, dataAttributes = props.dataAttributes;
+    var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, dataAttributes = props.dataAttributes, localization = props.localization, showSupportLinks = props.showSupportLinks, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks;
     var theme = useTheme();
     var _a = React.useState(isDrawerOpen !== null && isDrawerOpen !== void 0 ? isDrawerOpen : false), isOpen = _a[0], setIsOpen = _a[1];
+    var messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     React.useEffect(function () { return handleOpenState(isDrawerOpen); }, [isDrawerOpen]);
     var handleOpenState = function (open) {
@@ -48,6 +50,8 @@ export default function SwipeableTemporaryDrawer(props) {
             handleOpenState(open);
         };
     };
+    // Default support links, these can be toggled on/off via the showSupportLinks
+    var defaultSupportLinks = getDefaultSupportLinks(messages);
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
     // --
@@ -56,7 +60,7 @@ export default function SwipeableTemporaryDrawer(props) {
     // --
     // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
     var additionalItems = ['logo', 'divider'];
-    var totalItems = __spreadArray(__spreadArray(__spreadArray([], items !== null && items !== void 0 ? items : [], true), secondaryItems !== null && secondaryItems !== void 0 ? secondaryItems : [], true), additionalItems, true);
+    var totalItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], items !== null && items !== void 0 ? items : [], true), defaultSupportLinks !== null && defaultSupportLinks !== void 0 ? defaultSupportLinks : [], true), secondaryItems !== null && secondaryItems !== void 0 ? secondaryItems : [], true), additionalItems, true);
     var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isOpen); }));
     var list = function () {
         var _a;
@@ -66,12 +70,17 @@ export default function SwipeableTemporaryDrawer(props) {
                                 : logo
                             : (_jsx(StreamSuiteLogo, { style: {
                                     fill: getOffsetNavigationContrastText(theme)
-                                } })), _jsx(StyledDrawerLogoText, __assign({ variant: 'body1' }, { children: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))] })), _jsx(List, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryList }, { children: items && items.length > 0 && items.map(function (item, index) {
-                        var label = item.label, children = item.children, onClick = item.onClick;
-                        return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
-                            // @ts-expect-error
-                            component: animated.li, style: animationRefs.current[index] }, { children: [_jsx(StyledListItemButton, __assign({ onClick: onClick }, { children: _jsx(StyledListItemText, { primary: label }) })), children && children.length > 0 && (_jsx(StyledChildList, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildList, "aria-label": label }, { children: children.map(function (childItem) { return (_jsx(StyledChildListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildItem }, { children: _jsx(StyledChildListItemButton, __assign({ onClick: childItem === null || childItem === void 0 ? void 0 : childItem.onClick }, { children: _jsx(StyledChildListItemText, { primary: childItem === null || childItem === void 0 ? void 0 : childItem.label }, childItem === null || childItem === void 0 ? void 0 : childItem.label) })) }), childItem === null || childItem === void 0 ? void 0 : childItem.label)); }) })))] }), label));
-                    }) })), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(animated.div, __assign({ style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + 1] }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryList }, { children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
+                                } })), _jsx(StyledDrawerLogoText, __assign({ variant: 'body1' }, { children: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))] })), _jsxs(List, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryList }, { children: [items && items.length > 0 && items.map(function (item, index) {
+                            var label = item.label, children = item.children, onClick = item.onClick;
+                            return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
+                                // @ts-expect-error
+                                component: animated.li, style: animationRefs.current[index] }, { children: [_jsx(StyledListItemButton, __assign({ onClick: onClick }, { children: _jsx(StyledListItemText, { primary: label }) })), children && children.length > 0 && (_jsx(StyledChildList, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildList, "aria-label": label }, { children: children.map(function (childItem) { return (_jsx(StyledChildListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildItem }, { children: _jsx(StyledChildListItemButton, __assign({ onClick: childItem === null || childItem === void 0 ? void 0 : childItem.onClick }, { children: _jsx(StyledChildListItemText, { primary: childItem === null || childItem === void 0 ? void 0 : childItem.label }, childItem === null || childItem === void 0 ? void 0 : childItem.label) })) }), childItem === null || childItem === void 0 ? void 0 : childItem.label)); }) })))] }), label));
+                        }), (showSupportLinks || avatarPanelShowHelpLinks) && defaultSupportLinks && defaultSupportLinks.length > 0 && defaultSupportLinks.map(function (item, index) {
+                            var label = item.label, children = item.children, onClick = item.onClick;
+                            return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
+                                // @ts-expect-error
+                                component: animated.li, style: animationRefs.current[index] }, { children: [_jsx(StyledListItemButton, __assign({ onClick: onClick }, { children: _jsx(StyledListItemText, { primary: label }) })), children && children.length > 0 && (_jsx(StyledChildList, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildList, "aria-label": label }, { children: children.map(function (childItem) { return (_jsx(StyledChildListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildItem }, { children: _jsx(StyledChildListItemButton, __assign({ onClick: childItem === null || childItem === void 0 ? void 0 : childItem.onClick }, { children: _jsx(StyledChildListItemText, { primary: childItem === null || childItem === void 0 ? void 0 : childItem.label }, childItem === null || childItem === void 0 ? void 0 : childItem.label) })) }), childItem === null || childItem === void 0 ? void 0 : childItem.label)); }) })))] }), label));
+                        })] })), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(animated.div, __assign({ style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + 1] }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryList }, { children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
                                 var _a;
                                 return (_jsx(StyledListSecondaryItem, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryItem, disablePadding: true, 
                                     // @ts-expect-error

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -48,11 +48,11 @@ import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
 import { animated } from '@react-spring/web';
 import { defaultMessages } from '../../../lang/en-us';
 import { defaultAttributes } from '../../../utils/dataAttributes';
-import { getNavigationBackground, getNavigationContrastText } from '../helpers';
+import { getDefaultSupportLinks, getNavigationBackground, getNavigationContrastText } from '../helpers';
 var VerticalNavigation = function (props) {
     var _a;
     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, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, dataAttributes = props.dataAttributes, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName", "dataAttributes"]);
+    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, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, dataAttributes = props.dataAttributes, showSupportLinks = props.showSupportLinks, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName", "dataAttributes", "showSupportLinks", "avatarPanelShowHelpLinks"]);
     var messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
@@ -109,6 +109,8 @@ var VerticalNavigation = function (props) {
         setIsAppSwitcherOpen(false);
         setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
     }; };
+    // Default support links, these can be toggled on/off via the showSupportLinks
+    var defaultSupportLinks = getDefaultSupportLinks(messages);
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
     // --
@@ -117,10 +119,10 @@ var VerticalNavigation = function (props) {
     // --
     // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
     var additionalItems = ['hasStreamHome', 'hasAvatar', 'avatarName'];
-    var totalItems = __spreadArray(__spreadArray(__spreadArray([], items !== null && items !== void 0 ? items : [], true), secondaryItems !== null && secondaryItems !== void 0 ? secondaryItems : [], true), additionalItems, true);
+    var totalItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], items !== null && items !== void 0 ? items : [], true), defaultSupportLinks !== null && defaultSupportLinks !== void 0 ? defaultSupportLinks : [], true), secondaryItems !== null && secondaryItems !== void 0 ? secondaryItems : [], true), additionalItems, true);
     var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index); }));
     var listContent = function () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         return (_jsxs(Box, __assign({ sx: {
                 display: 'flex',
                 flex: '1 auto',
@@ -217,16 +219,19 @@ var VerticalNavigation = function (props) {
                                 height: '100%',
                                 width: DRAWER_WIDTH.Expanded,
                                 marginTop: "-".concat(theme.spacing(0.5), " !important")
-                            } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationPrimaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: animationRefs.current[index] }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', "data-id": dataIds.VerticalNavigationSecondary, style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ "data-id": dataIds.VerticalNavigationSecondaryList, style: { width: DRAWER_WIDTH.Expanded } }, { children: [hasStreamHome
-                                        ? (_jsx(VerticalNavigationItem, { "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(Apps, {}), 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 })), 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) + 1] }))
-                                        : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
+                            } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationPrimaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: animationRefs.current[index] }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', "data-id": dataIds.VerticalNavigationSecondary, style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ "data-id": dataIds.VerticalNavigationSecondaryList, style: { width: DRAWER_WIDTH.Expanded } }, { children: [(showSupportLinks || avatarPanelShowHelpLinks) && defaultSupportLinks && defaultSupportLinks.length > 0 && defaultSupportLinks.map(function (item, index) {
                                         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(Apps, {}), 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 })), 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] }))
+                                        : 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: {
                                                 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[((_b = items === null || items === void 0 ? void 0 : items.length) !== null && _b !== void 0 ? _b : 0) + ((_c = secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.length) !== null && _c !== void 0 ? _c : 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: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))] }))] })) }))] })));
     };
     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

@@ -26,28 +26,21 @@ import { useTheme } from '@mui/material/styles';
 import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
 import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
-import { Help, Lightbulb, Person, Phone, Settings } from '@mui/icons-material';
+import { Person, Settings } from '@mui/icons-material';
 import { animated } from '@react-spring/web';
 import { FlyoutMenuItemText } from './VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles';
 import { defaultMessages } from '../../../lang/en-us';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 var AvatarPanel = function (props) {
-    var _a, _b, _c, _d, _e;
+    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, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks;
+    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 messages = __assign(__assign({}, defaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     useEffect(function () {
         setAvatarInitials(handleAvatarInitials(avatarName));
     }, [avatarName]);
-    var _f = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
-    // Add default helpful links below avatarPanelSettingItems,
-    // these can be toggled on/off with the avatarPanelShowHelpLinks prop
-    var defaultHelpLinks = [
-        { label: messages['help-center'], icon: _jsx(Help, {}), onClick: function () { return window.open('https://learningpool.zendesk.com/', '_blank'); } },
-        { label: messages['feature-request'], icon: _jsx(Lightbulb, {}), onClick: function () { return window.open('https://app.smartsheet.com/b/form/823248624a324630a904e825098ca816', '_blank'); } },
-        { label: messages['contact-us'], icon: _jsx(Phone, {}), onClick: function () { return window.open('https://learningpool.com/support/', '_blank'); } }
-    ];
+    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
     // --
@@ -62,7 +55,7 @@ var AvatarPanel = function (props) {
         'avatarPanelOnClickMainAction',
         'avatarPanelFootnote'
     ];
-    var totalItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), defaultHelpLinks !== null && defaultHelpLinks !== void 0 ? defaultHelpLinks : [], true), additionalItems, true);
+    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
             // @ts-expect-error
@@ -89,30 +82,19 @@ var AvatarPanel = function (props) {
                     // @ts-expect-error
                     , __assign({ 
                         // @ts-expect-error
-                        component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
-                                avatarPanelSettingItems.length > 0 &&
-                                avatarPanelSettingItems.map(function (avatarMenuItem, index) {
-                                    var _a;
-                                    return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
+                        component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
+                            avatarPanelSettingItems.length > 0 &&
+                            avatarPanelSettingItems.map(function (avatarMenuItem, index) {
+                                var _a;
+                                return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                    // TODO: figure out if these are links or buttons
+                                    // @ts-expect-error
+                                    , __assign({ 
                                         // TODO: figure out if these are links or buttons
                                         // @ts-expect-error
-                                        , __assign({ 
-                                            // TODO: figure out if these are links or buttons
-                                            // @ts-expect-error
-                                            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)));
-                                }), avatarPanelShowHelpLinks && defaultHelpLinks &&
-                                defaultHelpLinks.length > 0 &&
-                                defaultHelpLinks.map(function (avatarMenuItem, index) {
-                                    var _a, _b;
-                                    return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + ((_b = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _b !== void 0 ? _b : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
-                                        // @ts-expect-error
-                                        , __assign({ 
-                                            // @ts-expect-error
-                                            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) + ((_e = defaultHelpLinks === null || defaultHelpLinks === void 0 ? void 0 : defaultHelpLinks.length) !== null && _e !== void 0 ? _e : 0) + 4] }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
+                                        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 }))] }));
 };
 export default AvatarPanel;

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

@@ -41,7 +41,7 @@ var VerticalNavigationItem = function (props) {
             handlePopoverClose();
             return;
         }
-        if (!isDrawerOpen) {
+        if (!isDrawerOpen || fullHeightFlyout) {
             setAnchorEl(event === null || event === void 0 ? void 0 : event.currentTarget);
         }
     };

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

@@ -15,6 +15,7 @@ import { Link } from '../../../../index';
 import { FullHeightFlyoutMenuPaper, FullHeightFlyoutMenuWrapper, FlyoutNotchMask, NotchMini, FlyoutMenuHeader, FlyoutMenuPaper, FlyoutMenuWrap, FlyoutMenuList, FlyoutMenuButton, FlyoutMenuItem, FlyoutMenuItemText } from './VerticalNavigationItemFlyoutMenuStyles';
 import { defaultAttributes } from '../../../../utils/dataAttributes';
 var VerticalNavigationItemFlyoutMenu = forwardRef(function (props, ref) {
+    var _a;
     var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, fullHeightFlyout = props.fullHeightFlyout, open = props.open, parentItemRef = props.parentItemRef, dataAttributes = props.dataAttributes, content = props.content, anchorEl = props.anchorEl, setAnchorEl = props.setAnchorEl, setIsFlyoutHovered = props.setIsFlyoutHovered;
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     if (fullHeightFlyout && content) {
@@ -35,7 +36,13 @@ var VerticalNavigationItemFlyoutMenu = forwardRef(function (props, ref) {
             }, CLOSE_SUBMENU_DELAY);
         }
     };
-    return (_jsx(FlyoutMenuPaper, __assign({ ref: ref, "data-id": dataIds.VerticalNavigationFlyout, isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setIsFlyoutHovered(true); }, onMouseLeave: function () { return setIsFlyoutHovered(false); }, onFocus: function () { return setIsFlyoutHovered(true); }, onBlur: function () { return setIsFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem }, { children: _jsx(FlyoutMenuButton
+    var isBottomHalfOfScreen = ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y) > window.innerHeight / 2;
+    return (_jsx(FlyoutMenuPaper, __assign({ ref: ref, "data-id": dataIds.VerticalNavigationFlyout, isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setIsFlyoutHovered(true); }, onMouseLeave: function () { return setIsFlyoutHovered(false); }, onFocus: function () { return setIsFlyoutHovered(true); }, onBlur: function () { return setIsFlyoutHovered(false); }, sx: {
+            transform: isBottomHalfOfScreen ? 'translateY(calc(-100% + 48px))' : ''
+        } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { sx: {
+                        bottom: isBottomHalfOfScreen ? '12px' : 'auto',
+                        top: isBottomHalfOfScreen ? 'auto' : '12px'
+                    } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem }, { children: _jsx(FlyoutMenuButton
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error

package/components/navigation/helpers.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Return the background color for the navigation
  * @returns string
@@ -20,3 +21,12 @@ export declare const getOffsetNavigationBackground: (theme: any, colorAdjustAmou
  * @returns string
  */
 export declare const getOffsetNavigationContrastText: (theme: any, colorAdjustAmount?: number) => any;
+export declare const getDefaultSupportLinks: (messages: Record<string, string>) => {
+    label: string;
+    icon: JSX.Element;
+    onClick: () => null;
+    children: {
+        label: string;
+        onClick: () => Window | null;
+    }[];
+}[];

package/components/navigation/helpers.js

@@ -1,4 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { darken, lighten, getLuminance } from 'polished';
+import { HelpOutline } from '@mui/icons-material';
 var DEFAULT_COLOR_ADJUST_AMOUNT = 0.1;
 // Luminance threshold for determining if we should lighten or darken the color
 // .033 is the luminance value of #333333
@@ -62,3 +64,17 @@ export var getOffsetNavigationContrastText = function (theme, colorAdjustAmount)
         ? palette.getContrastText(lighten(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background))
         : palette.getContrastText(darken(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background));
 };
+export var getDefaultSupportLinks = function (messages) {
+    return [
+        {
+            label: messages.support,
+            icon: _jsx(HelpOutline, {}),
+            onClick: function () { return null; },
+            children: [
+                { label: messages['help-center'], onClick: function () { return window.open('https://learningpool.zendesk.com/', '_blank'); } },
+                { label: messages['submit-feedback'], onClick: function () { return window.open('https://app.smartsheet.com/b/form/823248624a324630a904e825098ca816', '_blank'); } },
+                { label: messages['contact-us'], onClick: function () { return window.open('https://learningpool.com/support/', '_blank'); } }
+            ]
+        }
+    ];
+};

package/lang/en-us.d.ts

@@ -16,11 +16,13 @@ export const defaultMessages: {
     'open-navigation': string;
     'close-navigation': string;
     'site-logo': string;
+    'invert-navigation-bar': string;
     greeting: string;
     logout: string;
     'view-profile': string;
     'edit-profile': string;
+    support: string;
     'help-center': string;
-    'feature-request': string;
+    'submit-feedback': string;
     'contact-us': string;
 };

package/lang/en-us.js

@@ -18,12 +18,14 @@ export var defaultMessages = {
     'open-navigation': 'Open navigation',
     'close-navigation': 'Close navigation',
     'site-logo': 'Site logo',
+    'invert-navigation-bar': 'Invert navigation bar',
     // Avatar Panel
     greeting: 'Hi',
     logout: 'Logout',
     'view-profile': 'View Profile',
     'edit-profile': 'Edit Profile',
+    support: 'Support',
     'help-center': 'Help Centre',
-    'feature-request': 'Feature Request',
+    'submit-feedback': 'Submit Feedback',
     'contact-us': 'Contact Us'
 };

package/package.json

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

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

@@ -35,6 +35,7 @@ export interface IVerticalNavigationProps {
     appRootID?: string;
     localization?: any;
     dataAttributes?: any;
+    showSupportLinks?: boolean;
     hasAvatar?: boolean;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
@@ -48,5 +49,6 @@ export interface IVerticalNavigationProps {
     avatarPanelMainActionString?: string;
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
     avatarPanelFootnote?: any;
+    /** @deprecated This property will be removed in the next major version (2.X) */
     avatarPanelShowHelpLinks?: boolean;
 }

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

@@ -22,5 +22,4 @@ export interface IAvatarPanelProps {
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
     avatarPanelInvertNavString?: string;
     avatarPanelFootnote?: any;
-    avatarPanelShowHelpLinks?: boolean;
 }