@learningpool/ui 1.15.4 → 1.16.0

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -1,36 +1,5 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Avatar, List, Tooltip } from '../../../index';
@@ -48,30 +17,29 @@ import { ListItemText } from './VerticalNavigationItem/VerticalNavigationItemSty
 import AvatarPanel from './VerticalNavigationAvatar';
 import { motion } from '../../../utils/theme';
 import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
-import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
+import { DEFAULT_REACT_APP_ID, EVENT_KEYS } from '../../../utils/constants';
 import { animated } from '@react-spring/web';
 import { defaultMessages } from '../../../lang/en-us';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 import { getDefaultSupportLinks, getNavigationBackground, getNavigationContrastText } from '../helpers';
 import { Constants } from '../../stream/AppSwitcher/constants';
-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, hideStreamHomeButton = props.hideStreamHomeButton, StreamHomeUrl = props.StreamHomeUrl, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, dataAttributes = props.dataAttributes, showSupportLinks = props.showSupportLinks, hidePromotionalCampaign = props.hidePromotionalCampaign, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks, promotionalCampaigns = props.promotionalCampaigns, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "hideStreamHomeButton", "StreamHomeUrl", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName", "dataAttributes", "showSupportLinks", "hidePromotionalCampaign", "avatarPanelShowHelpLinks", "promotionalCampaigns"]);
-    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;
-    var propIsPersistent = typeof (props === null || props === void 0 ? void 0 : props.isPersistent) === 'boolean' ? props.isPersistent : undefined;
-    var hasAvatar = (_a = props === null || props === void 0 ? void 0 : props.hasAvatar) !== null && _a !== void 0 ? _a : true;
-    var _b = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _b[0], setIsDrawerOpen = _b[1];
-    var _c = React.useState(false), isAvatarOpen = _c[0], setIsAvatarOpen = _c[1];
-    var _d = React.useState(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false), isPersistent = _d[0], setIsPersistent = _d[1];
+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 messages = { ...defaultMessages, ...localization };
+    const dataIds = { ...defaultAttributes, ...dataAttributes };
+    const propIsDrawerOpen = typeof props?.isDrawerOpen === 'boolean' ? props.isDrawerOpen : undefined;
+    const propIsPersistent = typeof props?.isPersistent === 'boolean' ? props.isPersistent : undefined;
+    const hasAvatar = props?.hasAvatar ?? true;
+    const [isDrawerOpen, setIsDrawerOpen] = React.useState(propIsDrawerOpen ?? false);
+    const [isAvatarOpen, setIsAvatarOpen] = React.useState(false);
+    const [isPersistent, setIsPersistent] = React.useState(propIsPersistent ?? false);
     // Controls whether the application panel is open or not.
-    var _e = React.useState(false), isAppSwitcherOpen = _e[0], setIsAppSwitcherOpen = _e[1];
+    const [isAppSwitcherOpen, setIsAppSwitcherOpen] = React.useState(false);
     /**
      * Toggles display of the Stream suite application dialog.
      */
-    var handleToggleAppSwitcher = function () {
+    const handleToggleAppSwitcher = () => {
         if (isAvatarOpen) {
             setIsAvatarOpen(false);
         }
@@ -80,17 +48,17 @@ var VerticalNavigation = function (props) {
     /**
      * Toggles display of the avatar dialog.
      */
-    var handleToggleAvatarPanel = function () {
+    const handleToggleAvatarPanel = () => {
         if (isAppSwitcherOpen) {
             setIsAppSwitcherOpen(false);
         }
         setIsAvatarOpen(!isAvatarOpen);
     };
-    var logoHeight = 38;
-    var logoWidth = 38;
-    useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
-    useEffect(function () { return setIsDrawerOpen(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false); }, [propIsPersistent]);
-    useEffect(function () {
+    const logoHeight = 38;
+    const logoWidth = 38;
+    useEffect(() => setIsDrawerOpen(propIsDrawerOpen ?? false), [propIsDrawerOpen]);
+    useEffect(() => setIsDrawerOpen(propIsPersistent ?? false), [propIsPersistent]);
+    useEffect(() => {
         if (!avatarName || !hasAvatar) {
             setIsAvatarOpen(false);
         }
@@ -101,33 +69,32 @@ var VerticalNavigation = function (props) {
     // This fix just overrides the default aria-hidden attribute.
     //
     // https://github.com/mui/material-ui/issues/19450
-    useEffect(function () {
+    useEffect(() => {
         if (isDrawerOpen) {
-            var root = window.document.getElementById(appRootID !== null && appRootID !== void 0 ? appRootID : DEFAULT_REACT_APP_ID);
-            root === null || root === void 0 ? void 0 : root.removeAttribute('aria-hidden');
+            const root = window.document.getElementById(appRootID ?? DEFAULT_REACT_APP_ID);
+            root?.removeAttribute('aria-hidden');
         }
     }, [isDrawerOpen]);
-    var handleIsPersistent = function () {
-        var _a, _b;
-        if (props === null || props === void 0 ? void 0 : props.setIsPersistent) {
-            props.setIsPersistent((_a = !propIsPersistent) !== null && _a !== void 0 ? _a : false);
-            setIsPersistent((_b = !propIsPersistent) !== null && _b !== void 0 ? _b : false);
+    const handleIsPersistent = () => {
+        if (props?.setIsPersistent) {
+            props.setIsPersistent(!propIsPersistent ?? false);
+            setIsPersistent(!propIsPersistent ?? false);
             return;
         }
-        setIsPersistent(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false);
+        setIsPersistent(propIsPersistent ?? false);
     };
-    var toggleDrawer = function (open) { return function (event) {
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        if (event.type === 'keydown') {
-            if (event.key === 'Tab' || event.key === 'Shift') {
+    const toggleDrawer = (open) => (event) => {
+        event?.stopPropagation();
+        if (event.type === EVENT_KEYS.Keydown) {
+            if (event.key === EVENT_KEYS.Tab || event.key === EVENT_KEYS.Shift) {
                 return;
             }
         }
         setIsAppSwitcherOpen(false);
-        setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
-    }; };
+        setIsDrawerOpen(open ?? !isDrawerOpen);
+    };
     // Default support links, these can be toggled on/off via the showSupportLinks
-    var defaultSupportLinks = getDefaultSupportLinks(messages);
+    const defaultSupportLinks = getDefaultSupportLinks(messages);
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
     // --
@@ -135,123 +102,121 @@ var VerticalNavigation = function (props) {
     // this way the number of hook calls never changes
     // --
     // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
-    var additionalItems = ['hasStreamHome', 'hasAvatar', 'avatarName'];
-    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, _d, _e;
-        return (_jsxs(Box, __assign({ sx: {
+    const additionalItems = ['hasStreamHome', 'hasAvatar', 'avatarName'];
+    const totalItems = [...items ?? [], ...defaultSupportLinks ?? [], ...secondaryItems ?? [], ...additionalItems];
+    const animationRefs = React.useRef(totalItems && totalItems.map((item, index) => useFadeIn(index)));
+    const listContent = () => (_jsxs(Box, { sx: {
+            display: 'flex',
+            flex: '1 auto',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            '.wrapper': {
                 display: 'flex',
-                flex: '1 auto',
-                flexDirection: 'column',
-                justifyContent: 'flex-start',
-                '.wrapper': {
-                    display: 'flex',
-                    position: 'relative'
-                },
-                '.wrapper > :not(:first-of-type)': {
-                    position: 'absolute',
-                    right: 0,
-                    background: 'transparent',
-                    fontSize: 0
-                }
-            }, className: 'grid-container' }, { children: [_jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) }, "data-id": dataIds.VerticalNavigationBrand }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent, style: animationRefs.current[0] }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
-                                    ? typeof logo === 'string'
-                                        ? (_jsx("img", { src: logo, height: "".concat(logoHeight, "px"), width: "".concat(logoWidth, "px"), style: {
-                                                marginInlineEnd: '16px'
-                                            }, alt: logoText !== null && logoText !== void 0 ? logoText : messages['site-logo'] }))
-                                        : logo
-                                    : (_jsx(StreamSuiteLogo, { style: {
-                                            height: "".concat(logoHeight, "px"),
-                                            width: "".concat(logoWidth, "px"),
-                                            marginInlineEnd: '16px',
-                                            fill: getNavigationContrastText(theme)
-                                        } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper', "data-id": dataIds.VerticalNavigationToggle }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", isDrawerOpen: isDrawerOpen, 
-                            // @ts-expect-error
-                            component: animated.button, style: animationRefs.current[0] }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
-                                    ? (_jsx(ChevronLeftIcon, { style: {
-                                            fill: getNavigationContrastText(theme),
-                                            fontSize: '1.75rem',
-                                            height: '1.75rem',
-                                            width: '1.75rem'
+                position: 'relative'
+            },
+            '.wrapper > :not(:first-of-type)': {
+                position: 'absolute',
+                right: 0,
+                background: 'transparent',
+                fontSize: 0
+            }
+        }, className: 'grid-container', children: [_jsx("div", { className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) }, "data-id": dataIds.VerticalNavigationBrand, children: _jsxs(DrawerHeader, { onClick: logoOnClick ?? null, isDrawerOpen: isDrawerOpen || isPersistent, style: animationRefs.current[0], children: [_jsx(Tooltip, { disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText ?? '', placement: theme.direction === 'rtl' ? 'left' : 'right', children: logo
+                                ? typeof logo === 'string'
+                                    ? (_jsx("img", { src: logo, height: `${logoHeight}px`, width: `${logoWidth}px`, style: {
+                                            marginInlineEnd: '16px'
+                                        }, alt: logoText ?? messages['site-logo'] }))
+                                    : logo
+                                : (_jsx(StreamSuiteLogo, { style: {
+                                        height: `${logoHeight}px`,
+                                        width: `${logoWidth}px`,
+                                        marginInlineEnd: '16px',
+                                        fill: getNavigationContrastText(theme)
+                                    } })) }), _jsx(ListItemText, { primary: logoText ?? '', isDrawerOpen: isDrawerOpen || isPersistent })] }) }), _jsxs("div", { className: 'wrapper', "data-id": dataIds.VerticalNavigationToggle, children: [_jsxs(NotchContainer, { sx: { height: '85px', position: 'relative !important' }, children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] }), !isPersistent && _jsx(DrawerToggle, { onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", isDrawerOpen: isDrawerOpen, 
+                        // @ts-ignore
+                        component: animated.button, style: animationRefs.current[0], children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
+                                ? (_jsx(ChevronLeftIcon, { style: {
+                                        fill: getNavigationContrastText(theme),
+                                        fontSize: '1.75rem',
+                                        height: '1.75rem',
+                                        width: '1.75rem'
+                                    } }))
+                                : (_jsx(ChevronRightIcon, { style: {
+                                        fill: getNavigationContrastText(theme),
+                                        fontSize: '1.75rem',
+                                        height: '1.75rem',
+                                        width: '1.75rem'
+                                    } })) }) }), _jsx(Box, { style: {
+                            borderRadius: '50%',
+                            boxShadow: '5px 0 15px 0 rgb(0 0 0 / 10%)',
+                            display: 'none',
+                            height: '50px',
+                            left: '12px',
+                            position: 'fixed',
+                            right: 'auto !important',
+                            top: '50%',
+                            transform: 'translate(50%, -50%)',
+                            width: '50px'
+                        } }), _jsxs(DrawerToggle, { onClick: handleIsPersistent, "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", style: {
+                            display: 'none',
+                            position: 'fixed',
+                            top: '50%',
+                            transform: 'translate(50%, -50%)',
+                            zIndex: 10
+                        }, children: [_jsx(NotchExtendSVG, { style: {
+                                    display: 'block',
+                                    fill: getNavigationBackground(theme),
+                                    height: '165px',
+                                    left: '-12px',
+                                    padding: '0',
+                                    position: 'absolute',
+                                    top: '-61px',
+                                    transition: 'none',
+                                    width: '90px',
+                                    zIndex: '-1'
+                                } }), _jsx(DrawerToggleHitboxContent, { style: {
+                                    background: 'transparent',
+                                    boxShadow: 'none',
+                                    fontSize: '1.3rem',
+                                    height: '1.3rem',
+                                    padding: theme.spacing(1),
+                                    width: '1.3rem'
+                                }, children: isPersistent
+                                    ? (_jsx(PushPinIcon, { style: {
+                                            fontSize: '1.3rem',
+                                            height: '1.3rem',
+                                            width: '1.3rem'
                                         } }))
-                                    : (_jsx(ChevronRightIcon, { style: {
-                                            fill: getNavigationContrastText(theme),
-                                            fontSize: '1.75rem',
-                                            height: '1.75rem',
-                                            width: '1.75rem'
-                                        } })) }) })), _jsx(Box, { style: {
-                                borderRadius: '50%',
-                                boxShadow: '5px 0 15px 0 rgb(0 0 0 / 10%)',
-                                display: 'none',
-                                height: '50px',
-                                left: '12px',
-                                position: 'fixed',
-                                right: 'auto !important',
-                                top: '50%',
-                                transform: 'translate(50%, -50%)',
-                                width: '50px'
-                            } }), _jsxs(DrawerToggle, __assign({ onClick: handleIsPersistent, "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", style: {
-                                display: 'none',
-                                position: 'fixed',
-                                top: '50%',
-                                transform: 'translate(50%, -50%)',
-                                zIndex: 10
-                            } }, { children: [_jsx(NotchExtendSVG, { style: {
-                                        display: 'block',
-                                        fill: getNavigationBackground(theme),
-                                        height: '165px',
-                                        left: '-12px',
-                                        padding: '0',
-                                        position: 'absolute',
-                                        top: '-61px',
-                                        transition: 'none',
-                                        width: '90px',
-                                        zIndex: '-1'
-                                    } }), _jsx(DrawerToggleHitboxContent, __assign({ style: {
-                                        background: 'transparent',
-                                        boxShadow: 'none',
-                                        fontSize: '1.3rem',
-                                        height: '1.3rem',
-                                        padding: theme.spacing(1),
-                                        width: '1.3rem'
-                                    } }, { children: isPersistent
-                                        ? (_jsx(PushPinIcon, { style: {
-                                                fontSize: '1.3rem',
-                                                height: '1.3rem',
-                                                width: '1.3rem'
-                                            } }))
-                                        : (_jsx(PushPinIcon, { style: {
-                                                fontSize: '1.3rem',
-                                                height: '1.3rem',
-                                                width: '1.3rem'
-                                            } })) }))] }))] })), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsx("div", __assign({ className: 'wrapper', "data-id": dataIds.VerticalNavigationPrimary, style: {
-                        backgroundColor: getNavigationBackground(theme),
-                        flex: '1 1px',
-                        marginTop: '-1px',
-                        overflow: 'auto',
-                        position: 'relative',
-                        zIndex: 10
-                    } }, { children: _jsx(StyledNav, __assign({ tabIndex: -1, "aria-label": 'Primary' }, { children: _jsx(List, __assign({ "data-id": dataIds.VerticalNavigationPrimaryList, style: {
-                                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: [(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, { 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, hidePromotionalCampaign: hidePromotionalCampaign !== null && hidePromotionalCampaign !== void 0 ? hidePromotionalCampaign : false, promotionalCampaigns: promotionalCampaigns })), 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, 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: 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: {
+                                    : (_jsx(PushPinIcon, { style: {
+                                            fontSize: '1.3rem',
+                                            height: '1.3rem',
+                                            width: '1.3rem'
+                                        } })) })] })] }), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsx("div", { className: 'wrapper', "data-id": dataIds.VerticalNavigationPrimary, style: {
+                    backgroundColor: getNavigationBackground(theme),
+                    flex: '1 1px',
+                    marginTop: '-1px',
+                    overflow: 'auto',
+                    position: 'relative',
+                    zIndex: 10
+                }, children: _jsx(StyledNav, { tabIndex: -1, "aria-label": 'Primary', children: _jsx(List, { "data-id": dataIds.VerticalNavigationPrimaryList, style: {
+                            height: '100%',
+                            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 }))
+                                    : 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,
+                                            width: 32
+                                        }, children: handleAvatarInitials(avatarName) }), style: {
+                                        maxHeight: isDrawerOpen ? '200px' : '48px',
+                                        overflow: 'hidden',
+                                        padding: 0,
+                                        minHeight: 52,
+                                        transition: `max-height 225ms ${motion.easeInOut} 0ms !important`,
+                                        ...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'
-                } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent' }, { children: listContent() })) }))] })));
+                } }), _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/VerticalNavigationAvatar.js

@@ -1,24 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { Box, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
 import { StyledBox, StyledBoxProfile, StyledButton, StyledAvatarName, StyledAvatar, StyledBoxProfileEdit, StyledListItemButton, StyledButtonGroup } from './VerticalNavigationAvatarStyles';
@@ -32,33 +12,32 @@ 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;
-    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, 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);
+const AvatarPanel = (props) => {
+    const theme = useTheme();
+    const { avatarName, avatarPanelOnClickLogout, avatarPanelLogoutString, avatarPanelOnClickViewProfile, avatarPanelViewProfileString, avatarPanelOnClickEditProfile, avatarPanelEditProfileString, avatarPanelMenuItems, avatarPanelSettingItems, avatarPanelOnClickMainAction, avatarPanelMainActionString, avatarPanelFootnote, isAvatarOpen, localization, dataAttributes, handleToggleAvatarPanel } = props;
+    const messages = { ...defaultMessages, ...localization };
+    const dataIds = { ...defaultAttributes, ...dataAttributes };
+    const handleAvatarClick = (event) => {
+        const 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)) {
+        if (avatarPanelId?.contains(event.target)) {
             return;
         }
         // Toggle the panel when you're clicking away from the ref
         handleToggleAvatarPanel();
     };
-    useEffect(function () {
+    useEffect(() => {
         setAvatarInitials(handleAvatarInitials(avatarName));
     }, [avatarName]);
-    useEffect(function () {
+    useEffect(() => {
         if (isAvatarOpen) {
             document.addEventListener('mousedown', handleAvatarClick);
         }
-        return function () {
+        return () => {
             document.removeEventListener('mousedown', handleAvatarClick);
         };
     }, [isAvatarOpen]);
-    var _e = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _e[0], setAvatarInitials = _e[1];
+    const [avatarInitials, setAvatarInitials] = React.useState(handleAvatarInitials(avatarName) ?? 'AN');
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
     // --
@@ -66,53 +45,63 @@ var AvatarPanel = function (props) {
     // this way the number of hook calls never changes
     // --
     // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
-    var additionalItems = [
+    const additionalItems = [
         'avatarPanelOnClickLogout',
         'avatarName',
         'avatarPanelOnClickViewProfile',
         'avatarPanelOnClickMainAction',
         'avatarPanelFootnote'
     ];
-    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, __assign({ onMouseDown: function (event) { return event.stopPropagation(); } }, { children: [avatarPanelOnClickLogout && (_jsx(StyledButton
-            // @ts-expect-error
-            , __assign({ 
-                // @ts-expect-error
-                component: animated.button, style: __assign({ left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto', position: 'absolute', right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1), top: theme.spacing(1) }, animationRefs.current[0]), onClick: avatarPanelOnClickLogout, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : messages.logout }))), _jsxs(Box, __assign({ "data-id": dataIds.VerticalNavigationAvatarProfile, style: {
+    const totalItems = [
+        ...avatarPanelMenuItems ?? [],
+        ...avatarPanelSettingItems ?? [],
+        ...additionalItems
+    ];
+    const animationRefs = React.useRef(totalItems && totalItems.map((item, index) => useFadeIn(index, !isAvatarOpen)));
+    return (_jsxs(StyledBox, { onMouseDown: (event) => event.stopPropagation(), children: [avatarPanelOnClickLogout && (_jsx(StyledButton
+            // @ts-ignore
+            , { 
+                // @ts-ignore
+                component: animated.button, style: {
+                    left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
+                    position: 'absolute',
+                    right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
+                    top: theme.spacing(1),
+                    ...animationRefs.current[0]
+                }, onClick: avatarPanelOnClickLogout, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit', children: avatarPanelLogoutString ?? messages.logout })), _jsxs(Box, { "data-id": dataIds.VerticalNavigationAvatarProfile, style: {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
-                } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: animationRefs.current[1] }, { children: [_jsx(StyledAvatar, __assign({ style: { marginInlineEnd: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: messages.greeting })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ marginBottom: theme.spacing(2) }, animationRefs.current[2]) }, { children: _jsxs(StyledButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(PersonIcon, {}) }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : messages['view-profile'] })), avatarPanelOnClickEditProfile && (_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : messages['edit-profile'], onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
+                }, children: [_jsxs(StyledBoxProfile, { style: animationRefs.current[1], children: [_jsx(StyledAvatar, { style: { marginInlineEnd: '0.5rem' }, children: avatarInitials }), _jsxs(StyledAvatarName, { children: [_jsx("span", { style: { fontWeight: 300 }, children: messages.greeting }), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] }), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, { style: {
+                            marginBottom: theme.spacing(2),
+                            ...animationRefs.current[2]
+                        }, children: _jsxs(StyledButtonGroup, { variant: 'outlined', "aria-label": "split button", children: [_jsx(StyledButton, { variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(PersonIcon, {}), children: avatarPanelViewProfileString ?? messages['view-profile'] }), avatarPanelOnClickEditProfile && (_jsx(StyledButton, { variant: 'outlined', color: 'inherit', size: 'medium', "aria-label": avatarPanelEditProfileString ?? messages['edit-profile'], onClick: avatarPanelOnClickEditProfile, children: _jsx(EditIcon, {}) }))] }) }))] }), _jsxs(Box, { style: {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
-                } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: {
+                }, children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, { "data-id": dataIds.VerticalNavigationFlyoutList, style: {
                             marginBottom: theme.spacing(2),
                             maxWidth: '14rem'
-                        } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[index + 2], disablePadding: true }, { children: _jsxs(StyledListItemButton
+                        }, children: avatarPanelMenuItems.map((avatarMenuItem, index) => (_jsx(ListItem, { "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[index + 2], 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: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: { minWidth: theme.spacing(5) } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledButton
-                    // @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(SettingsIcon, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
+                                component: Link, role: 'link', onClick: avatarMenuItem.onClick, children: [_jsx(ListItemIcon, { "aria-hidden": true, style: { minWidth: theme.spacing(5) }, children: avatarMenuItem.icon }), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] }) }, `${avatarMenuItem.label} - ${index}`))) })), avatarPanelOnClickMainAction && _jsx(StyledButton
+                    // @ts-ignore
+                    , { 
+                        // @ts-ignore
+                        component: animated.button, style: animationRefs.current[(avatarPanelMenuItems?.length ?? 0) + 3], variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(SettingsIcon, {}), children: avatarPanelMainActionString }), _jsx(List, { "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
+                            avatarPanelSettingItems.map((avatarMenuItem, index) => (_jsx(ListItem, { "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: animationRefs.current[(avatarPanelMenuItems?.length ?? 0) + index + 3], disablePadding: true, children: _jsxs(StyledListItemButton
+                                // TODO: figure out if these are links or buttons
+                                // @ts-expect-error
+                                , { 
                                     // 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)));
-                            }) }))] })), _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 }))] })));
+                                    component: Link, role: 'link', onClick: avatarMenuItem.onClick, children: [_jsx(ListItemIcon, { "aria-hidden": true, style: {
+                                                minWidth: theme.spacing(5)
+                                            }, children: avatarMenuItem.icon }), _jsx(ListItemText, { primary: avatarMenuItem.label })] }) }, `${avatarMenuItem.label} - ${index}`))) })] }), _jsx(Box, { "data-id": dataIds.VerticalNavigationFlyoutFootnote, className: 'avatar-panel-footnote', style: animationRefs.current[(avatarPanelMenuItems?.length ?? 0) + (avatarPanelSettingItems?.length ?? 0) + 4], children: avatarPanelFootnote && avatarPanelFootnote })] }));
 };
 export default AvatarPanel;