@learningpool/ui 1.6.0-beta.9 → 1.6.1

package/dist/components/landmarks/Header/HeaderActionButtons.js

@@ -0,0 +1,66 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Icon from '@mui/material/Icon';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+var MAX_ICONS = 0;
+var HeaderActionButtons = function (props) {
+    var options = props.options, styles = props.styles, forceListView = props.forceListView;
+    var _a = useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var handleClick = function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        setAnchorEl(null);
+    };
+    var handleOptionClick = function (event, option) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        option === null || option === void 0 ? void 0 : option.onClick();
+        handleClose(event);
+    };
+    if (!options) {
+        console.log('Did you mean to pass items using the `options` parameter?');
+        return null;
+    }
+    // Show icon buttons if less than MAX_ICONS
+    if (options.length <= MAX_ICONS && !forceListView) {
+        return (_jsx("div", __assign({ style: styles }, { children: options.map(function (option) {
+                var label = option.label, icon = option.icon, onClick = option.onClick;
+                var handleOptionClick = onClick;
+                return (_jsx(Tooltip, __assign({ title: label, "aria-label": label, placement: 'bottom', enterDelay: 500, enterNextDelay: 50, leaveDelay: 50, disableInteractive: true }, { children: _jsx(IconButton, __assign({ size: 'small', "aria-label": label, onClick: handleOptionClick }, { children: _jsx(Icon, { children: icon }) })) }), label));
+            }) })));
+    }
+    // Show menu and v-ellipsis if more than MAX_ICONS
+    return (_jsxs("div", __assign({ style: styles }, { children: [_jsx(IconButton, __assign({ "aria-label": 'more', "aria-haspopup": 'true', onClick: handleClick }, { children: _jsx(MoreVertIcon, {}) })), _jsx(Menu, __assign({ id: 'actionButtonMenu', anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                }, 
+                // getContentAnchorEl={null}
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'center'
+                } }, { children: options.map(function (option) {
+                    var label = option.label, isDisabled = option.isDisabled, actionKey = option.actionKey, hide = option.hide;
+                    if (hide) {
+                        return null;
+                    }
+                    return (_jsx(MenuItem, __assign({ onClick: function (event) { return handleOptionClick(event, option); }, "aria-label": label, disabled: isDisabled }, { children: label }), actionKey));
+                }) }))] })));
+};
+export default HeaderActionButtons;

package/dist/components/landmarks/Header/HeaderStyles.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "outlined" | "elevation" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBreadcrumbs: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").BreadcrumbsClasses> | undefined;
+    expandText?: string | undefined;
+    itemsAfterCollapse?: number | undefined;
+    itemsBeforeCollapse?: number | undefined;
+    maxItems?: number | undefined;
+    separator?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "separator" | "sx" | "expandText" | "itemsAfterCollapse" | "itemsBeforeCollapse" | "maxItems"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledHeaderPrimary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledHeaderSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledAdditionalButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/landmarks/Header/HeaderStyles.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Box, Paper } from '../../../index';
+import { Breadcrumbs, styled } from '@mui/material';
+export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  position: relative;\n  width: 100%;\n\n  &.is-sticky {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  position: relative;\n  width: 100%;\n\n  &.is-sticky {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledBreadcrumbs = styled(Breadcrumbs)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  margin-bottom: 0.5rem;\n\n  ol {\n    flex-direction: ", ";\n  }\n"], ["\n  font-size: ", ";\n  margin-bottom: 0.5rem;\n\n  ol {\n    flex-direction: ", ";\n  }\n"])), function (props) { return props.theme.typography.subtitle2.fontSize; }, function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledHeaderPrimary = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  padding: 1rem;\n  padding-inline-start: 2rem;\n\n  h1,\n  h4 {\n    font-size: clamp(1.125rem, 3.25vw, 2.75rem);\n    text-align: ", ";\n  }\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  padding: 1rem;\n  padding-inline-start: 2rem;\n\n  h1,\n  h4 {\n    font-size: clamp(1.125rem, 3.25vw, 2.75rem);\n    text-align: ", ";\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'flex-start' : 'flex-end'; }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
+export var StyledHeaderSecondary = styled(Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-end;\n  padding: 1rem;\n  padding-inline-end: 2rem;\n\n  button,\n  a {\n    white-space: nowrap;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-end;\n  padding: 1rem;\n  padding-inline-end: 2rem;\n\n  button,\n  a {\n    white-space: nowrap;\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledAdditionalButtonsContainer = styled(Box)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-inline-start: ", ";\n  margin-inline-end: ", ";\n"], ["\n  margin-inline-start: ", ";\n  margin-inline-end: ", ";\n"])), function (props) { return props.theme.direction === 'ltr' ? '0.5rem' : '0'; }, function (props) { return props.theme.direction === 'rtl' ? '0.5rem' : '0'; });
+export var StyledBox = styled(Box)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { return props.theme.palette.background.default; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigation.d.ts

@@ -15,8 +15,6 @@ interface MobileNavigationProps {
     isDrawerOpen?: boolean;
     isSearchOpen?: boolean;
     isAvatarOpen?: boolean;
-    isPersistent?: boolean;
-    setIsPersistent?: any;
     hideAvatarInitials?: boolean;
     showNotchIndicator?: boolean;
     hasSearch?: boolean;
@@ -24,6 +22,7 @@ interface MobileNavigationProps {
     searchPanelDefaultValue?: string;
     searchPanelOnClickSearch?: any;
     hasAvatar?: boolean;
+    avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;
     avatarPanelOnClickViewProfile?: any;

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigation.js

@@ -22,19 +22,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { Person, PersonOutline } from '@mui/icons-material';
-import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation, StyledNotchSVG, StyledNotchShadow, StyledNotchShadowMask } from './MobileNavigationStyles';
+import { Person } from '@mui/icons-material';
+import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation } from './MobileNavigationStyles';
 import { StyledAvatar } from './MobileNavigationAvatarStyles';
 import SwipeableTemporaryDrawer from './MobileNavigationDrawer';
 import SwipeableTemporarySearch from './MobileNavigationSearch';
 import SwipeableTemporaryAvatar from './MobileNavigationAvatar';
-import { ToggleX } from './MobileNavigationToggleX';
-import { ToggleSearchX } from './MobileNavigationToggleSearchX';
-import { useCurrentWidth } from '../../../utils/hooks';
-import { slice } from 'lodash';
-import { motion } from 'framer-motion';
+import NotchIndicator from './MobileNavigationNotchIndicator';
+import ToggleX from './MobileNavigationToggleX';
+import ToggleSearchX from './MobileNavigationToggleSearchX';
 import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants';
 import { handleAvatarInitials } from '../../../utils/helpers';
+import { useSpring, animated, useSpringRef, config } from '@react-spring/web';
+import { useCurrentWidth } from '../../../utils/hooks';
 var MobileNavigation = function (props) {
     var _a, _b, _c;
     var items = props.items, secondaryItems = props.secondaryItems, hideAvatarInitials = props.hideAvatarInitials, hasSearch = props.hasSearch, hasAvatar = props.hasAvatar, showNotchIndicator = props.showNotchIndicator, rest = __rest(props, ["items", "secondaryItems", "hideAvatarInitials", "hasSearch", "hasAvatar", "showNotchIndicator"]);
@@ -45,17 +45,31 @@ var MobileNavigation = function (props) {
     var _d = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _d[0], setIsDrawerOpen = _d[1];
     var _e = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _e[0], setIsSearchOpen = _e[1];
     var _f = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _f[0], setIsAvatarOpen = _f[1];
-    var maxMobilePrimaryItems = 3;
-    var priorityItems = slice(items, 0, maxMobilePrimaryItems);
     var _g = React.useState(0), value = _g[0], setValue = _g[1];
-    var _h = React.useState(0), mobileNotchPosition = _h[0], setMobileNotchPosition = _h[1];
-    var windowWidth = useCurrentWidth();
     var currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction');
-    var _j = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _j[0], setMobileNavDirection = _j[1];
+    var _h = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _h[0], setMobileNavDirection = _h[1];
+    var _j = React.useState(0), mobileNotchPosition = _j[0], setMobileNotchPosition = _j[1];
+    var windowWidth = useCurrentWidth();
     useEffect(function () {
         window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection);
         positionMobileNotch();
     }, [mobileNavDirection]);
+    var NOTCH = {
+        Height: 50,
+        Width: 50
+    };
+    var BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item');
+    var positionMobileNotch = function () {
+        var _a;
+        var selectedDOMRect = (_a = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition);
+    };
+    useEffect(function () { return positionMobileNotch(); }, [
+        value,
+        windowWidth,
+        // Fix notch position if scrollbar is hidden/shown
+        (_b = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()
+    ]);
     useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
     useEffect(function () { return setIsSearchOpen(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false); }, [propIsSearchOpen]);
     useEffect(function () { return setIsAvatarOpen(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false); }, [propIsAvatarOpen]);
@@ -69,7 +83,7 @@ var MobileNavigation = function (props) {
         }
         hideNotch();
     }, [isDrawerOpen, isSearchOpen, isAvatarOpen]);
-    var _k = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _k[0], setAvatarInitials = _k[1];
+    var _k = React.useState((_c = handleAvatarInitials(avatarName)) !== null && _c !== void 0 ? _c : 'AN'), avatarInitials = _k[0], setAvatarInitials = _k[1];
     var toggleDrawer = function (open, action) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -90,6 +104,7 @@ var MobileNavigation = function (props) {
             }
             case MOBILE_NAV_PANEL_TYPES.AVATAR: {
                 setIsAvatarOpen(open !== null && open !== void 0 ? open : !isAvatarOpen);
+                setValue(2);
                 break;
             }
             default: {
@@ -99,85 +114,40 @@ var MobileNavigation = function (props) {
             }
         }
     }; };
-    var NOTCH = {
-        Height: 50,
-        Width: 50
-    };
-    var BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item');
-    var positionMobileNotch = function () {
-        var _a;
-        var selectedDOMRect = (_a = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition);
-    };
-    useEffect(function () { return positionMobileNotch(); }, [
-        value,
-        windowWidth,
-        // Fix notch position if scrollbar is hidden/shown
-        (_c = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()
-    ]);
-    var variantsPaper = {
-        open: {
-            opacity: 1
-        }
-    };
-    var variantsContainer = {
-        open: {
-            transition: { staggerChildren: 0.07, delayChildren: 0.25 }
-        }
-    };
-    var variantsButtons = {
-        open: {
-            y: 0,
-            opacity: 1,
-            transition: {
-                y: { stiffness: 500, velocity: -100 }
-            }
+    var api = useSpringRef();
+    var animationConfig = {
+        MobileNavigationPaper: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        MobileNavigation: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        MobileNavigationButton: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        MobileNavigationNotch: {
+            ref: api,
+            config: __assign(__assign({}, config.default), { mass: 1 }),
+            x: mobileNotchPosition,
+            y: value < 0 ? 100 : 0
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(SwipeableTemporaryDrawer, __assign({ isDrawerOpen: isDrawerOpen, setIsDrawerOpen: setIsDrawerOpen, items: items, secondaryItems: secondaryItems, label: 'Primary' }, rest)), hasSearch && (_jsx(SwipeableTemporarySearch, __assign({}, rest, { isSearchOpen: isSearchOpen, setIsSearchOpen: setIsSearchOpen }))), hasAvatar && (_jsx(SwipeableTemporaryAvatar, __assign({}, rest, { isAvatarOpen: isAvatarOpen, setIsAvatarOpen: setIsAvatarOpen, avatarName: avatarName, mobileNavDirection: mobileNavDirection, setMobileNavDirection: setMobileNavDirection }))), _jsxs(StyledPaper, __assign({ elevation: 3, 
+    var MobileNavigationPaperAnimation = useSpring(animationConfig.MobileNavigationPaper);
+    var MobileNavigationAnimation = useSpring(animationConfig.MobileNavigation);
+    var MobileNavigationButtonAnimation = useSpring(animationConfig.MobileNavigationButton);
+    return (_jsxs(_Fragment, { children: [_jsx(SwipeableTemporaryDrawer, __assign({ isDrawerOpen: isDrawerOpen, setIsDrawerOpen: setIsDrawerOpen, items: items, secondaryItems: secondaryItems, label: 'Primary' }, rest)), hasSearch && (_jsx(SwipeableTemporarySearch, __assign({ isSearchOpen: isSearchOpen, setIsSearchOpen: setIsSearchOpen }, rest))), hasAvatar && (_jsx(SwipeableTemporaryAvatar, __assign({ isAvatarOpen: isAvatarOpen, setIsAvatarOpen: setIsAvatarOpen, avatarName: avatarName, mobileNavDirection: mobileNavDirection, setMobileNavDirection: setMobileNavDirection }, rest))), _jsxs(StyledPaper, __assign({ elevation: 3, 
                 // @ts-expect-error
-                component: motion.div, animate: 'open', variants: variantsPaper, initial: { opacity: 0 }, transition: {
-                // when: 'beforeChildren'
-                } }, { children: [showNotchIndicator &&
-                        _jsxs(motion.div, __assign({ style: { zIndex: '-1' }, initial: {
-                                opacity: 0,
-                                x: -75,
-                                y: 100
-                            }, animate: {
-                                opacity: 1,
-                                x: mobileNotchPosition,
-                                y: value < 0 ? 100 : -2
-                            }, transition: {
-                                x: {
-                                    // duration: 0.5,
-                                    type: 'spring',
-                                    // mass: 0.5,
-                                    bounce: 0.25
-                                    // stiffness: 50
-                                },
-                                y: {
-                                    delay: 0.25,
-                                    // duration: 0.5,
-                                    type: 'spring',
-                                    // mass: 0.5,
-                                    bounce: 0
-                                }
-                                // duration: 0.5
-                            } }, { children: [_jsx(StyledNotchShadow, {}), _jsx(StyledNotchSVG, __assign({ viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx(motion.path, { d: "M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" }) })), _jsx(StyledNotchShadowMask, {})] })), _jsxs(StyledBottomNavigation, __assign({ value: value, onChange: function (event, newValue) { return setValue(newValue); }, 
+                component: animated.div, style: MobileNavigationPaperAnimation }, { children: [showNotchIndicator && _jsx(NotchIndicator, __assign({}, animationConfig.MobileNavigationNotch)), _jsxs(StyledBottomNavigation, __assign({ value: value, onChange: function (event, newValue) { return setValue(newValue); }, 
                         // @ts-expect-error
-                        component: motion.div, animate: 'open', variants: variantsContainer, style: {
-                            flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row'
-                        } }, { children: [_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleX, {}), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
+                        component: animated.div, style: __assign({ flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row' }, MobileNavigationAnimation) }, { children: [_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleX, { isOpen: isDrawerOpen }), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
                                 // @ts-expect-error
-                                component: motion.div, animate: isDrawerOpen ? 'open' : 'closed', variants: variantsButtons, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: {
-                                    marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial',
-                                    marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto'
-                                } }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleSearchX, {}), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH), 
+                                component: animated.div, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: __assign({ marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial', marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto' }, MobileNavigationButtonAnimation) }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleSearchX, { isOpen: isSearchOpen }), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH), 
                                 // @ts-expect-error
-                                component: motion.div, animate: isSearchOpen ? 'open' : 'closed', variants: variantsButtons, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' })), hasAvatar && (_jsx(StyledBottomNavigationAction, { onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: !hideAvatarInitials
-                                    ? _jsx(StyledAvatar, { children: avatarInitials })
-                                    : value === (priorityItems ? priorityItems.length + 1 : 1) ? _jsx(Person, {}) : _jsx(PersonOutline, {}), 
+                                component: animated.div, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation })), hasAvatar && (_jsx(StyledBottomNavigationAction, { onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: !hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(Person, {}), 
                                 // @ts-expect-error
-                                component: motion.button, variants: variantsButtons, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' }))] }))] }))] }));
+                                component: animated.button, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation }))] }))] }))] }));
 };
 export default MobileNavigation;

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigationAvatar.d.ts

@@ -7,11 +7,11 @@ export interface IAvatarMenuItemProps {
 export interface ISwipeableTemporaryAvatarProps {
     avatarName: string;
     editProfileText?: string;
-    logoutText?: string;
     isAvatarOpen: boolean;
     setIsAvatarOpen?: any;
     mobileNavDirection?: string;
     setMobileNavDirection?: any;
+    avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;
     avatarPanelOnClickViewProfile?: any;

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -11,20 +11,19 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { Box, ButtonGroup, IconButton, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
+import { Box, ButtonGroup, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
 import { StyledSwipeableAvatar, StyledBox, StyledBoxProfile, StyledAvatarName, StyledAvatar, StyledOutlineButton, StyledBoxProfileEdit, StyledListItemButton } from './MobileNavigationAvatarStyles';
 import { useTheme } from '@mui/material/styles';
 import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
-import { motion } from 'framer-motion';
-import { motionParent, motionFadeIn, motionFadeInUp, motionWhileHover, motionWhileTap } from './MobileNavigationMotion';
 import ToggleOffIcon from '@mui/icons-material/ToggleOff';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
-import { handleAvatarInitials } from '../../../utils/helpers';
+import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers';
+import { animated } from '@react-spring/web';
 var SwipeableTemporaryAvatar = function (props) {
     var _a;
     var theme = useTheme();
-    var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, 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;
+    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;
     var _b = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _b[0], setIsOpen = _b[1];
     React.useEffect(function () { return handleOpenState(isAvatarOpen); }, [isAvatarOpen]);
     var handleOpenState = function (open) {
@@ -47,25 +46,30 @@ var SwipeableTemporaryAvatar = function (props) {
         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++; };
     return (_jsx(StyledSwipeableAvatar, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
             keepMounted: true
-        } }, { children: _jsxs(StyledBox, __assign({ animate: isAvatarOpen ? 'open' : 'closed', variants: motionParent }, { children: [avatarPanelOnClickLogout && (_jsx(IconButton
+        } }, { children: _jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(Button
                 // @ts-expect-error
                 , __assign({ 
                     // @ts-expect-error
-                    component: motion.button, variants: motionFadeIn, style: {
-                        left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
-                        position: 'absolute',
-                        right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
-                        top: theme.spacing(1)
-                    }, onClick: avatarPanelOnClickLogout }, { children: _jsx(LogoutIcon, {}) }))), _jsxs(Box, __assign({ 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) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)), onClick: function () {
+                        handleOpenState(false);
+                        avatarPanelOnClickLogout();
+                    }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
-                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ variants: motionFadeInUp }, { 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({ variants: motionFadeInUp, style: {
-                                flexDirection: 'row',
-                                marginBottom: theme.spacing(1)
-                            } }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: avatarPanelOnClickViewProfile }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
+                    } }, { 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: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: function () {
+                                            handleOpenState(false);
+                                            avatarPanelOnClickViewProfile();
+                                        } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
+                                            handleOpenState(false);
+                                            avatarPanelOnClickEditProfile();
+                                        } }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
@@ -73,29 +77,47 @@ var SwipeableTemporaryAvatar = function (props) {
                                 marginInlineStart: '3rem',
                                 marginBottom: theme.spacing(2),
                                 maxWidth: '18rem'
-                            } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            } }, { 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
                                 // 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: {
+                                    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 })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledOutlineButton
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: motion.button, variants: motionFadeInUp, disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick: avatarPanelOnClickMainAction }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
+                            component: animated.button, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'primary', 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: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                    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({ 
                                             // 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: {
+                                            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: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                                    } }, { 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
                                     // TODO: figure out if these are links or buttons
                                     // @ts-expect-error
                                     , __assign({ 
@@ -117,6 +139,6 @@ var SwipeableTemporaryAvatar = function (props) {
                                                             height: '2em',
                                                             padding: '0.15em',
                                                             width: '2em'
-                                                        } })) }))] })) })))] }))] }))] })) })));
+                                                        } })) }))] })) })))] }))] }))] }) })));
 };
 export default SwipeableTemporaryAvatar;