@learningpool/ui 1.8.7 → 1.8.8

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     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 React, { useEffect } from 'react';
 import { Box, ButtonGroup, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
@@ -18,15 +27,15 @@ import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
 import ToggleOffIcon from '@mui/icons-material/ToggleOff';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
-import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers';
+import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 import { animated } from '@react-spring/web';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 var SwipeableTemporaryAvatar = function (props) {
-    var _a;
+    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;
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
-    var _b = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _b[0], setIsOpen = _b[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);
@@ -42,30 +51,42 @@ var SwipeableTemporaryAvatar = function (props) {
             handleOpenState(open);
         };
     };
-    var _c = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _c[0], setAvatarInitials = _c[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();
     };
-    // First item starts at 70ms
-    // see STAGGER_ITEMS_DELAY in helpers.js
-    var animationCount = 1;
-    var incrementAnimationCount = function () { return animationCount++; };
+    // Workaround to handle the react-spring calls without
+    // adding additional hook calls on prop or state changes
+    // --
+    // Store the total possible number of animations in a ref
+    // this way the number of hook calls never changes
+    // --
+    // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
+    var additionalItems = [
+        'avatarPanelOnClickLogout',
+        'avatarName',
+        'avatarPanelOnClickViewProfile',
+        'avatarPanelOnClickMainAction',
+        'mobileNavDirection'
+    ];
+    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
         } }, { children: _jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(Button
                 // @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) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)), onClick: function () {
+                    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: function () {
                         handleOpenState(false);
                         avatarPanelOnClickLogout();
                     }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ "data-id": dataIds.MobileNavAvatarProfile, style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
-                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(ButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledOutlineButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
+                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: animationRefs.current[1] }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, animationRefs.current[2]) }, { children: _jsxs(ButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledOutlineButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
                                             handleOpenState(false);
                                             avatarPanelOnClickViewProfile();
                                         } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(StyledOutlineButton, __assign({ size: 'medium', variant: 'outlined', color: 'inherit', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
@@ -79,10 +100,7 @@ var SwipeableTemporaryAvatar = function (props) {
                                 marginInlineStart: '3rem',
                                 marginBottom: theme.spacing(2),
                                 maxWidth: '18rem'
-                            } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
-                                // whileHover={motionWhileHover}
-                                // whileTap={motionWhileTap}
-                                disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ 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({ 
@@ -97,29 +115,26 @@ var SwipeableTemporaryAvatar = function (props) {
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: animated.button, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
+                            component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
                                 handleOpenState(false);
                                 avatarPanelOnClickMainAction();
                             } }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
                                     avatarPanelSettingItems.length > 0 &&
-                                    avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
-                                        // whileHover={motionWhileHover}
-                                        // whileTap={motionWhileTap}
-                                        disablePadding: true }, { children: _jsxs(StyledListItemButton
-                                        // TODO: figure out if these are links or buttons
-                                        // @ts-expect-error
-                                        , __assign({ 
+                                    avatarPanelSettingItems.map(function (avatarMenuItem, index) {
+                                        var _a;
+                                        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) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
                                             // 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: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
-                                    // whileHover={motionWhileHover}
-                                    // whileTap={motionWhileTap}
-                                    disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                            , __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: 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({ 

package/components/navigation/MobileNavigation/MobileNavigationDrawer.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     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, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
@@ -16,7 +25,7 @@ import { List, ListItemText } from '../../../index';
 import { StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider, StyledListSecondaryItem, StyledDrawerLogo, StyledDrawerLogoText, StyledListSecondaryList, StyledListItemText, StyledListSecondaryButton, StyledChildList, StyledChildListItem, StyledChildListItemText, StyledListItemButton, StyledChildListItemButton } from './MobileNavigationDrawerStyles';
 import { StreamSuiteLogo } from '../../../assets/Images';
 import { animated } from '@react-spring/web';
-import { useStaggerAnimation } from '../../../utils/helpers';
+import { useFadeIn } from '../../../utils/helpers';
 import { getOffsetNavigationContrastText } from '../helpers';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 export default function SwipeableTemporaryDrawer(props) {
@@ -39,33 +48,45 @@ export default function SwipeableTemporaryDrawer(props) {
             handleOpenState(open);
         };
     };
-    // First item starts at 70ms
-    // see STAGGER_ITEMS_DELAY in helpers.js
-    var animationCount = 1;
-    var incrementAnimationCount = function () { return animationCount++; };
-    var list = function () { return (_jsxs(StyledBox, __assign({ onClick: toggleDrawer(false), onKeyDown: toggleDrawer(false) }, { children: [_jsxs(StyledDrawerLogo, __assign({ "data-id": dataIds.MobileNavDrawerBrand, onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: [logo
-                        ? typeof logo === 'string'
-                            ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
-                            : 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;
-                    return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
-                        // @ts-expect-error
-                        component: animated.li, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledListItemButton
-                            // whileHover={{ scale: 1.02 }}
-                            // whileTap={{ scale: 0.95 }}
-                            , __assign({}, item, { 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
-                                    // whileHover={{ scale: 1.02 }}
-                                    // whileTap={{ scale: 0.95 }}
-                                    , __assign({}, childItem, { children: _jsx(StyledChildListItemText, { primary: childItem.label }, childItem.label) })) }), childItem.label)); }) })))] }), label));
-                }) })), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(animated.div, __assign({ style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryList }, { children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(StyledListSecondaryItem, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryItem, disablePadding: true, 
+    // Workaround to handle the react-spring calls without
+    // adding additional hook calls on prop or state changes
+    // --
+    // Store the total possible number of animations in a ref
+    // this way the number of hook calls never changes
+    // --
+    // 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 animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isOpen); }));
+    var list = function () {
+        var _a;
+        return (_jsxs(StyledBox, __assign({ onClick: toggleDrawer(false), onKeyDown: toggleDrawer(false) }, { children: [_jsxs(StyledDrawerLogo, __assign({ "data-id": dataIds.MobileNavDrawerBrand, onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, style: animationRefs.current[0] }, { children: [logo
+                            ? typeof logo === 'string'
+                                ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
+                                : 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;
+                        return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
                             // @ts-expect-error
-                            component: animated.li, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: _jsx(StyledListSecondaryButton
-                            // whileHover={{ scale: 1.02 }}
-                            // whileTap={{ scale: 0.95, boxShadow: '0 6px 15px rgb(36 37 38 / 0%);' }}
-                            , __assign({}, item, { children: _jsx(ListItemText, { primary: item.label }) })) }), item.label)); }) }))] }))] }))); };
+                            component: animated.li, style: animationRefs.current[index] }, { children: [_jsx(StyledListItemButton
+                                // whileHover={{ scale: 1.02 }}
+                                // whileTap={{ scale: 0.95 }}
+                                , __assign({}, item, { 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
+                                        // whileHover={{ scale: 1.02 }}
+                                        // whileTap={{ scale: 0.95 }}
+                                        , __assign({}, childItem, { children: _jsx(StyledChildListItemText, { primary: childItem.label }, childItem.label) })) }), 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
+                                    component: animated.li, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + index + 2] }, { children: _jsx(StyledListSecondaryButton
+                                    // whileHover={{ scale: 1.02 }}
+                                    // whileTap={{ scale: 0.95, boxShadow: '0 6px 15px rgb(36 37 38 / 0%);' }}
+                                    , __assign({}, item, { children: _jsx(ListItemText, { primary: item.label }) })) }), item.label));
+                            }) }))] }))] })));
+    };
     return (_jsx("aside", { children: _jsx(StyledSwipeableDrawer, __assign({ "data-id": dataIds.MobileNavDrawerPanel, anchor: 'bottom', open: isOpen, onClose: toggleDrawer(false), hideBackdrop: true, ModalProps: {
                 keepMounted: true
             } }, { children: list() })) }));

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -20,6 +20,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 React, { useEffect } from 'react';
@@ -64,6 +73,11 @@ var VerticalNavigation = function (props) {
     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 () {
+        if (!avatarName || !hasAvatar) {
+            setIsAvatarOpen(false);
+        }
+    }, [avatarName, hasAvatar]);
     // This fixes an issue with how MUI handles the modal and aria-hidden.
     // When open, the Modal adds aria-hidden="true" to a top-level element,
     // which causes some screen readers to annouce the elements as "blank".
@@ -95,113 +109,125 @@ var VerticalNavigation = function (props) {
         setIsAppSwitcherOpen(false);
         setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
     }; };
-    // First item starts at 70ms
-    // see STAGGER_ITEMS_DELAY in helpers.js
-    var animationCount = 1;
-    var incrementAnimationCount = function () { return animationCount++; };
-    var listContent = function () { return (_jsxs(Box, __assign({ sx: {
-            display: 'flex',
-            flex: '1 auto',
-            flexDirection: 'column',
-            justifyContent: 'flex-start',
-            '.wrapper': {
+    // Workaround to handle the react-spring calls without
+    // adding additional hook calls on prop or state changes
+    // --
+    // Store the total possible number of animations in a ref
+    // 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([], items !== null && items !== void 0 ? items : [], 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;
+        return (_jsxs(Box, __assign({ sx: {
                 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: useFadeIn(animationCount, incrementAnimationCount) }, { 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: useFadeIn(animationCount, incrementAnimationCount) }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
-                                ? (_jsx(ChevronLeft, { style: {
-                                        fill: getNavigationContrastText(theme),
-                                        fontSize: '1.75rem',
-                                        height: '1.75rem',
-                                        width: '1.75rem'
-                                    } }))
-                                : (_jsx(ChevronRight, { 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(PushPin, { style: {
-                                            fontSize: '1.3rem',
-                                            height: '1.3rem',
-                                            width: '1.3rem'
+                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(ChevronLeft, { style: {
+                                            fill: getNavigationContrastText(theme),
+                                            fontSize: '1.75rem',
+                                            height: '1.75rem',
+                                            width: '1.75rem'
                                         } }))
-                                    : (_jsx(PushPin, { 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: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _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: useFadeIn(animationCount, incrementAnimationCount) }))
-                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), 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") }, useFadeIn(animationCount, incrementAnimationCount)), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))] }))] })) }))] }))); };
+                                    : (_jsx(ChevronRight, { 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(PushPin, { style: {
+                                                fontSize: '1.3rem',
+                                                height: '1.3rem',
+                                                width: '1.3rem'
+                                            } }))
+                                        : (_jsx(PushPin, { 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: [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) {
+                                        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] })));
+                                    }), 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 }))] }))] })) }))] })));
+    };
     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'
                 } }), _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() })) }))] })));

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     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 React, { useEffect } from 'react';
 import { Box, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
@@ -16,14 +25,14 @@ import { StyledBox, StyledBoxProfile, StyledButton, StyledAvatarName, StyledAvat
 import { useTheme } from '@mui/material/styles';
 import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
-import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers';
+import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 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;
+    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, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization, dataAttributes = props.dataAttributes;
     var messages = __assign(__assign({}, defaultMessages), localization);
@@ -31,27 +40,39 @@ var AvatarPanel = function (props) {
     useEffect(function () {
         setAvatarInitials(handleAvatarInitials(avatarName));
     }, [avatarName]);
-    var _b = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _b[0], setAvatarInitials = _b[1];
-    // First item starts at 70ms
-    // see STAGGER_ITEMS_DELAY in helpers.js
-    var animationCount = 1;
-    var incrementAnimationCount = function () { return animationCount++; };
+    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
+    // --
+    // Store the total possible number of animations in a ref
+    // this way the number of hook calls never changes
+    // --
+    // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
+    var 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, { 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) }, useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)), 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: {
+                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: {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
-                } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount) }, { 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) }, useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(StyledButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(Person, {}) }, { 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, __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(Person, {}) }, { 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: {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
                 } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ "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: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
+                        } }, { 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
                             // TODO: figure out if these are links or buttons
                             // @ts-expect-error
                             , __assign({ 
@@ -61,16 +82,19 @@ var AvatarPanel = function (props) {
                     // @ts-expect-error
                     , __assign({ 
                         // @ts-expect-error
-                        component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), 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) } }, { children: avatarPanelSettingItems &&
+                        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) } }, { children: avatarPanelSettingItems &&
                             avatarPanelSettingItems.length > 0 &&
-                            avatarPanelSettingItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
-                                // TODO: figure out if these are links or buttons
-                                // @ts-expect-error
-                                , __assign({ 
+                            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
-                                    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' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
+                                    , __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 }))] }));
 };
 export default AvatarPanel;

package/package.json

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

package/utils/helpers.d.ts

@@ -17,17 +17,20 @@ export declare const stringToColor: (string: string) => string;
  */
 export declare const stringAvatar: (name: string) => any;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param trigger boolean - Trigger to reverse the animation from main component
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades an item
+ * in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export declare const useStaggerAnimation: (trigger: boolean, animationCount: number, incrementAnimationCount: Function) => Object;
+export declare const useFadeIn: (delayOrder: number, reverse?: boolean) => Object;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades and moves
+ * an item in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export declare const useFadeIn: (animationCount: number, incrementAnimationCount: Function) => Object;
+export declare const useFadeAndMoveIn: (delayOrder: number, reverse?: boolean) => Object;

package/utils/helpers.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { useEffect, useRef } from 'react';
 import { useSpring, config } from '@react-spring/web';
 /**
  * Accepts a string and returns 2 characters (max) as initials e.g. AN from Avatar Name
@@ -62,36 +63,55 @@ export var stringAvatar = function (name) {
 };
 var STAGGER_ITEMS_DELAY = 70;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param trigger boolean - Trigger to reverse the animation from main component
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring based on the
+ * animation configuration provided
+ * @param animationConfig object - Config for useSpring animation (react-spring object)
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export var useStaggerAnimation = function (trigger, animationCount, incrementAnimationCount) {
+var useStaggerIn = function (animationConfig, delayOrder, reverse) {
     var defaultAnimationConfig = {
-        from: { opacity: 0, y: 10 },
-        to: { opacity: 1, y: 0 },
-        reverse: !trigger,
+        reverse: reverse,
         config: __assign(__assign({}, config.default), { mass: 1 })
     };
-    var staggerAnimation = useSpring(__assign(__assign({}, defaultAnimationConfig), { delay: trigger ? STAGGER_ITEMS_DELAY * (animationCount + 1) : 0 }));
-    incrementAnimationCount();
-    return staggerAnimation;
+    var animationCountRef = useRef(0);
+    var staggerInAnimation = useSpring(__assign(__assign(__assign({}, defaultAnimationConfig), animationConfig), { delay: STAGGER_ITEMS_DELAY * delayOrder }));
+    useEffect(function () {
+        animationCountRef.current += 1;
+    });
+    return staggerInAnimation;
 };
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades an item
+ * in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export var useFadeIn = function (animationCount, incrementAnimationCount) {
-    var defaultAnimationConfig = {
+export var useFadeIn = function (delayOrder, reverse) {
+    if (reverse === void 0) { reverse = false; }
+    var animationConfig = {
         from: { opacity: 0 },
-        to: { opacity: 1 },
-        config: __assign(__assign({}, config.default), { mass: 1 })
+        to: { opacity: 1 }
+    };
+    return useStaggerIn(animationConfig, delayOrder, reverse);
+};
+/**
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades and moves
+ * an item in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
+ * @returns Object
+ */
+export var useFadeAndMoveIn = function (delayOrder, reverse) {
+    if (reverse === void 0) { reverse = false; }
+    var animationConfig = {
+        from: { opacity: 0, y: 10 },
+        to: { opacity: 1, y: 0 }
     };
-    var staggerFadeInUpAnimation = useSpring(__assign(__assign({}, defaultAnimationConfig), { delay: STAGGER_ITEMS_DELAY * (animationCount + 1) }));
-    incrementAnimationCount();
-    return staggerFadeInUpAnimation;
+    return useStaggerIn(animationConfig, delayOrder, reverse);
 };