@learningpool/ui 1.6.0-beta.5 → 1.6.0-beta.7

package/components/navigation/MobileNavigation/MobileNavigation.js

@@ -34,23 +34,24 @@ import { useCurrentWidth } from '../../../utils/hooks';
 import { slice } from 'lodash';
 import { motion } from 'framer-motion';
 import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants';
+import { handleAvatarInitials } from '../../../utils/helpers';
 var MobileNavigation = function (props) {
-    var _a, _b;
+    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"]);
     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 _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 _f = React.useState(0), value = _f[0], setValue = _f[1];
-    var _g = React.useState(0), mobileNotchPosition = _g[0], setMobileNotchPosition = _g[1];
+    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 _h = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _h[0], setMobileNavDirection = _h[1];
+    var _j = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _j[0], setMobileNavDirection = _j[1];
     useEffect(function () {
         window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection);
         positionMobileNotch();
@@ -68,19 +69,7 @@ var MobileNavigation = function (props) {
         }
         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 _k = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : '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') {
@@ -114,12 +103,18 @@ var MobileNavigation = function (props) {
         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 = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item')[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        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);
     };
-    React.useEffect(function () { return positionMobileNotch(); }, [value, windowWidth]);
+    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

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -41,10 +41,8 @@ var SwipeableTemporaryAvatar = function (props) {
             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];
+    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
     var handleOnClickSwitchDirection = function () {
         setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
         avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IVerticalNavigationItemProps } from './VerticalNavigationItem/VerticalNavigationItem';
+import { IAvatarMenuItemProps } from './VerticalNavigationAvatar';
 interface VerticalNavigationProps {
     logo?: string;
     logoText?: string;
@@ -15,6 +16,17 @@ interface VerticalNavigationProps {
     isPersistent?: boolean;
     setIsPersistent?: any;
     appRootID?: string;
+    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 VerticalNavigation: (props: VerticalNavigationProps) => React.ReactElement;
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
@@ -20,14 +31,14 @@ import { ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
 import VerticalNavigationItem from './VerticalNavigationItem/VerticalNavigationItem';
 import { DRAWER_WIDTH, DrawerHeader, DrawerToggle, DrawerToggleHitboxContent, StyledDivider, StyledNav, StyledNavSecondary, DrawerShadow, StyledAside, NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask, StyledDrawer } from './VerticalNavigationStyles';
 import { ListItem, ListItemButton, ListItemIcon, ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles';
-import AvatarPanel from './AvatarPanel';
+import AvatarPanel from './VerticalNavigationAvatar';
 import { motion } from '../../../utils/theme';
 import { handleAvatarInitials } from '../../../utils/helpers';
 import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
 var VerticalNavigation = function (props) {
     var _a, _b;
     var theme = useTheme();
-    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken;
+    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "streamHomeApiKey", "streamHomeBaseUrl", "streamHomeAccessToken"]);
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
     var propIsPersistent = typeof (props === null || props === void 0 ? void 0 : props.isPersistent) === 'boolean' ? props.isPersistent : undefined;
     var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
@@ -200,7 +211,7 @@ var VerticalNavigation = function (props) {
                                             padding: 0,
                                             minHeight: 52,
                                             transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important")
-                                        }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, { avatarName: avatarName }), isDrawerOpen: isDrawerOpen }))
+                                        }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName }, rest)), isDrawerOpen: isDrawerOpen }))
                                     : null] }))] })) }))] }))); };
     return (_jsxs(StyledAside, __assign({ "aria-label": "Site navigation" }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
                     display: isPersistent ? 'none' : 'block'

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

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface IAvatarMenuItemProps {
+    label: string;
+    icon: any;
+    onClick: any;
+}
+export interface IAvatarPanelProps {
+    avatarName: string;
+    editProfileText?: string;
+    logoutText?: string;
+    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 AvatarPanel: (props: IAvatarPanelProps) => React.ReactElement;
+export default AvatarPanel;

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js

@@ -0,0 +1,84 @@
+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, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
+import { StyledBox, StyledBoxProfile, StyledAvatarName, StyledAvatar, StyledOutlineButton, StyledBoxProfileEdit, StyledListItemButton } from './VerticalNavigationAvatarStyles';
+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 './VerticalNavigationMotion';
+import { handleAvatarInitials } from '../../../utils/helpers';
+import { Person, Settings } from '@mui/icons-material';
+var AvatarPanel = function (props) {
+    var _a;
+    var theme = useTheme();
+    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, logoutText = props.logoutText, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems;
+    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
+        avatarName
+    ]);
+    var _b = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _b[0], setAvatarInitials = _b[1];
+    return (_jsxs(StyledBox
+    // TODO: add check for isAvatarOpen to trigger animation effects
+    // animate={ isAvatarOpen ? 'open' : 'closed' }
+    , __assign({ 
+        // TODO: add check for isAvatarOpen to trigger animation effects
+        // animate={ isAvatarOpen ? 'open' : 'closed' }
+        variants: motionParent }, { 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, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: logoutText !== null && logoutText !== void 0 ? logoutText : '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, startIcon: _jsx(Person, {}) }, { 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: {
+                            marginBottom: theme.spacing(2),
+                            maxWidth: '14rem'
+                        } }, { 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, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(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 })] })) }))); }) }))] }))] })));
+};
+export default AvatarPanel;