@learningpool/ui 1.6.0-beta.2 → 1.6.0-beta.4

package/assets/Images.d.ts

@@ -7,3 +7,12 @@ export declare const LearningPoolLogo: import("@mui/material/OverridableComponen
 export declare const NotchSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
     muiName: string;
 };
+export declare const NotchMiniSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+export declare const NotchExtendSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+export declare const NotchBackgroundSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};

package/assets/Images.js

@@ -9,8 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createSvgIcon } from '@mui/material/utils';
 export var StreamSuiteLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", "data-name": "Layer 1", viewBox: "0 0 447.9 484.8" }, { children: _jsx("path", { d: "M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z" }) })), 'StreamSuite');
 export var LearningPoolLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 804 174" }, { children: _jsx("path", { fill: "#0069B4", d: "M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z" }) })), 'LearningPool');
 export var NotchSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-svg' }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })), 'Notch');
+export var NotchMiniSVG = createSvgIcon(_jsxs("svg", __assign({ className: 'notch-mini-svg', width: "100%", height: "100%", viewBox: "0 0 15 26" }, { children: [_jsx("path", { d: "M15 13.09c0 4.456-3.358 8.069-7.5 8.069-4.142 0-7.5-3.613-7.5-8.07 0-4.456 3.358-8.068 7.5-8.068 4.142 0 7.5 3.612 7.5 8.069Z" }), _jsx("path", { d: "M7.333 26c.167-2.869-1.666-5.2-2.666-5.559H10L7.333 26ZM7.333 0C7.5 2.869 5.667 5.2 4.667 5.559H10L7.333 0Z" })] })), 'NotchMini');
+export var NotchExtendSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-extend-svg', viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", 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" }) })), 'NotchExtend');
+export var NotchBackgroundSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-background-svg', viewBox: "0 0 25 865", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "#fff", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M25 0H0V865H25V468.5V466.451C24.6432 460.704 21.3624 455.984 18.6792 453.948C9.58731 451.059 3 442.549 3 432.5C3 422.927 8.97844 414.75 17.4054 411.5H17C19.7393 410.587 24.563 405.088 25 398.049V396V0Z" }) })), 'NotchBackground');

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { IMobileNavigationItemProps } from './MobileNavigationItem/MobileNavigationItem';
+import { IAvatarMenuItemProps } from './MobileNavigationAvatar';
+interface MobileNavigationProps {
+    logo?: string;
+    logoText?: string;
+    logoOnClick?: any;
+    items?: IMobileNavigationItemProps[];
+    secondaryItems?: IMobileNavigationItemProps[];
+    hasStreamHome?: boolean;
+    streamHomeAccessToken?: string;
+    streamHomeBaseUrl?: string;
+    streamHomeApiKey?: string;
+    avatarName?: string;
+    isDrawerOpen?: boolean;
+    isSearchOpen?: boolean;
+    isAvatarOpen?: boolean;
+    isPersistent?: boolean;
+    setIsPersistent?: any;
+    hideAvatarInitials?: boolean;
+    showNotchIndicator?: boolean;
+    hasSearch?: boolean;
+    searchPanelPlaceholder?: string;
+    searchPanelDefaultValue?: string;
+    searchPanelOnClickSearch?: any;
+    hasAvatar?: boolean;
+    avatarPanelOnClickSwitchDirection?: any;
+    avatarPanelOnClickLogout?: any;
+    avatarPanelOnClickViewProfile?: any;
+    avatarPanelViewProfileString?: string;
+    avatarPanelOnClickEditProfile?: any;
+    avatarPanelEditProfileString?: string;
+    avatarPanelMenuItems?: Array<IAvatarMenuItemProps>;
+    avatarPanelOnClickMainAction?: any;
+    avatarPanelMainActionString?: string;
+    avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
+}
+declare const MobileNavigation: (props: MobileNavigationProps) => React.ReactElement;
+export default MobileNavigation;

package/components/navigation/MobileNavigation/MobileNavigation.js

@@ -0,0 +1,188 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 { 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 { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants';
+var MobileNavigation = function (props) {
+    var _a, _b;
+    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"]);
+    var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
+    var propIsSearchOpen = typeof (props === null || props === void 0 ? void 0 : props.isSearchOpen) === 'boolean' ? props.isSearchOpen : undefined;
+    var propIsAvatarOpen = typeof (props === null || props === void 0 ? void 0 : props.isAvatarOpen) === 'boolean' ? props.isAvatarOpen : undefined;
+    var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
+    var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
+    var _d = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _d[0], setIsSearchOpen = _d[1];
+    var _e = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _e[0], setIsAvatarOpen = _e[1];
+    var maxMobilePrimaryItems = 3;
+    var priorityItems = slice(items, 0, maxMobilePrimaryItems);
+    var _f = React.useState(0), value = _f[0], setValue = _f[1];
+    var _g = React.useState(0), mobileNotchPosition = _g[0], setMobileNotchPosition = _g[1];
+    var windowWidth = useCurrentWidth();
+    var currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction');
+    var _h = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _h[0], setMobileNavDirection = _h[1];
+    useEffect(function () {
+        window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection);
+        positionMobileNotch();
+    }, [mobileNavDirection]);
+    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]);
+    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
+    useEffect(function () {
+        function hideNotch() {
+            var HIDE_NOTCH = -1;
+            if (!isDrawerOpen && !isSearchOpen && !isAvatarOpen) {
+                setValue(HIDE_NOTCH);
+            }
+        }
+        hideNotch();
+    }, [isDrawerOpen, isSearchOpen, isAvatarOpen]);
+    var handleAvatarInitials = function (avatarName) {
+        var _a, _b;
+        var firstInitial = avatarName.split('')[0] || '';
+        var secondInitial = '';
+        if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+            firstInitial = avatarName.split(' ')[0][0];
+            if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
+            }
+        }
+        return "".concat(firstInitial).concat(secondInitial);
+    };
+    var _j = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _j[0], setAvatarInitials = _j[1];
+    var toggleDrawer = function (open, action) { return function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        if (event.type === 'keydown') {
+            if (event.key === 'Tab' || event.key === 'Shift') {
+                return;
+            }
+        }
+        // Close any open drawers
+        setIsDrawerOpen(false);
+        setIsSearchOpen(false);
+        setIsAvatarOpen(false);
+        // Handle drawer toggling based on 'action' or default to 'drawer'
+        switch (action) {
+            case MOBILE_NAV_PANEL_TYPES.SEARCH: {
+                setIsSearchOpen(open !== null && open !== void 0 ? open : !isSearchOpen);
+                setValue(1);
+                break;
+            }
+            case MOBILE_NAV_PANEL_TYPES.AVATAR: {
+                setIsAvatarOpen(open !== null && open !== void 0 ? open : !isAvatarOpen);
+                break;
+            }
+            default: {
+                setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
+                setValue(0);
+                break;
+            }
+        }
+    }; };
+    var NOTCH = {
+        Height: 50,
+        Width: 50
+    };
+    var positionMobileNotch = function () {
+        var _a;
+        var selectedDOMRect = (_a = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item')[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition);
+    };
+    React.useEffect(function () { return positionMobileNotch(); }, [value, windowWidth]);
+    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 }
+            }
+        }
+    };
+    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, 
+                // @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); }, 
+                        // @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), 
+                                // @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), 
+                                // @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, {}), 
+                                // @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' }))] }))] }))] }));
+};
+export default MobileNavigation;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface IAvatarMenuItemProps {
+    label: string;
+    icon: any;
+    onClick: any;
+}
+export interface ISwipeableTemporaryAvatarProps {
+    avatarName: string;
+    editProfileText?: string;
+    logoutText?: string;
+    isAvatarOpen: boolean;
+    setIsAvatarOpen?: any;
+    mobileNavDirection?: string;
+    setMobileNavDirection?: any;
+    avatarPanelOnClickSwitchDirection?: any;
+    avatarPanelOnClickLogout?: any;
+    avatarPanelOnClickViewProfile?: any;
+    avatarPanelViewProfileString?: string;
+    avatarPanelOnClickEditProfile?: any;
+    avatarPanelEditProfileString?: string;
+    avatarPanelMenuItems?: Array<IAvatarMenuItemProps>;
+    avatarPanelOnClickMainAction?: any;
+    avatarPanelMainActionString?: string;
+    avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
+    avatarPanelInvertNavString?: string;
+}
+declare const SwipeableTemporaryAvatar: (props: ISwipeableTemporaryAvatarProps) => React.ReactElement;
+export default SwipeableTemporaryAvatar;

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -0,0 +1,124 @@
+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 React, { useEffect } from 'react';
+import { Box, ButtonGroup, IconButton, 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';
+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 _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) {
+        setIsOpen(open);
+        setIsAvatarOpen(open);
+    };
+    var toggleAvatar = function (open) {
+        return function (event) {
+            if (event && event.type === 'keydown' &&
+                (event.key === 'Tab' ||
+                    event.key === 'Shift')) {
+                return;
+            }
+            handleOpenState(open);
+        };
+    };
+    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
+        avatarName
+    ]);
+    var _c = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _c[0], setAvatarInitials = _c[1];
+    var handleOnClickSwitchDirection = function () {
+        setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
+        avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();
+    };
+    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
+                // @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: {
+                        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: {
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column'
+                    } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ style: {
+                                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
+                                // TODO: figure out if these are links or buttons
+                                // @ts-expect-error
+                                , __assign({ 
+                                    // TODO: figure out if these are links or buttons
+                                    // @ts-expect-error
+                                    component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                minWidth: theme.spacing(5)
+                                            } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), 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 &&
+                                    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
+                                        // TODO: figure out if these are links or buttons
+                                        // @ts-expect-error
+                                        , __assign({ 
+                                            // TODO: figure out if these are links or buttons
+                                            // @ts-expect-error
+                                            component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                        minWidth: theme.spacing(5)
+                                                    } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: motion.div, variants: motionFadeInUp, 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: handleOnClickSwitchDirection }, { children: [_jsx(ListItemText, { primary: avatarPanelInvertNavString !== null && avatarPanelInvertNavString !== void 0 ? avatarPanelInvertNavString : 'Invert navigation bar' }), _jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                    minWidth: theme.spacing(5),
+                                                    marginInlineStart: '0.5rem'
+                                                } }, { children: mobileNavDirection === 'ltr'
+                                                    ? (_jsx(ToggleOffIcon, { style: {
+                                                            boxSizing: 'border-box',
+                                                            height: '2em',
+                                                            padding: '0.15em',
+                                                            width: '2em'
+                                                        } }))
+                                                    : (_jsx(ToggleOnIcon, { style: {
+                                                            boxSizing: 'border-box',
+                                                            color: 'green',
+                                                            height: '2em',
+                                                            padding: '0.15em',
+                                                            width: '2em'
+                                                        } })) }))] })) })))] }))] }))] })) })));
+};
+export default SwipeableTemporaryAvatar;