@learningpool/ui 1.15.4 → 1.16.0

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -1,24 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { Box, ButtonGroup, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
 import { StyledSwipeableAvatar, StyledBox, StyledBoxProfile, StyledAvatarName, StyledAvatar, StyledOutlineButton, StyledBoxProfileEdit, StyledListItemButton } from './MobileNavigationAvatarStyles';
@@ -31,31 +11,29 @@ import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 import { animated } from '@react-spring/web';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 import { defaultMessages } from '../../../lang/en-us';
-var SwipeableTemporaryAvatar = function (props) {
-    var _a, _b, _c, _d;
-    var theme = useTheme();
-    var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, avatarPanelLogoutString = props.avatarPanelLogoutString, isAvatarOpen = props.isAvatarOpen, setIsAvatarOpen = props.setIsAvatarOpen, setMobileNavDirection = props.setMobileNavDirection, avatarPanelOnClickSwitchDirection = props.avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelInvertNavString = props.avatarPanelInvertNavString, dataAttributes = props.dataAttributes, localization = props.localization;
-    var messages = __assign(__assign({}, defaultMessages), localization);
-    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
-    var _e = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _e[0], setIsOpen = _e[1];
-    React.useEffect(function () { return handleOpenState(isAvatarOpen); }, [isAvatarOpen]);
-    var handleOpenState = function (open) {
+import { EVENT_KEYS } from '../../../../lib/utils/constants';
+const SwipeableTemporaryAvatar = (props) => {
+    const theme = useTheme();
+    const { avatarName, mobileNavDirection, avatarPanelLogoutString, isAvatarOpen, setIsAvatarOpen, setMobileNavDirection, avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout, avatarPanelOnClickViewProfile, avatarPanelViewProfileString, avatarPanelOnClickEditProfile, avatarPanelEditProfileString, avatarPanelMenuItems, avatarPanelOnClickMainAction, avatarPanelMainActionString, avatarPanelSettingItems, avatarPanelInvertNavString, dataAttributes, localization } = props;
+    const messages = { ...defaultMessages, ...localization };
+    const dataIds = { ...defaultAttributes, ...dataAttributes };
+    const [isOpen, setIsOpen] = React.useState(isAvatarOpen ?? false);
+    React.useEffect(() => handleOpenState(isAvatarOpen), [isAvatarOpen]);
+    const handleOpenState = (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);
-        };
+    const toggleAvatar = (open) => (event) => {
+        if (event && event.type === EVENT_KEYS.Keydown &&
+            (event.key === EVENT_KEYS.Tab ||
+                event.key === EVENT_KEYS.Shift)) {
+            return;
+        }
+        handleOpenState(open);
     };
-    var _f = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
-    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
-    var handleOnClickSwitchDirection = function () {
+    const [avatarInitials, setAvatarInitials] = React.useState(handleAvatarInitials(avatarName) ?? 'AN');
+    useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [avatarName]);
+    const handleOnClickSwitchDirection = () => {
         setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
         avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();
     };
@@ -66,86 +44,100 @@ var SwipeableTemporaryAvatar = function (props) {
     // this way the number of hook calls never changes
     // --
     // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
-    var additionalItems = [
+    const additionalItems = [
         'avatarPanelOnClickLogout',
         'avatarName',
         'avatarPanelOnClickViewProfile',
         'avatarPanelOnClickMainAction',
         'mobileNavDirection'
     ];
-    var totalItems = __spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), additionalItems, true);
-    var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isAvatarOpen); }));
-    return (_jsx(StyledSwipeableAvatar, __assign({ "data-id": dataIds.MobileNavAvatarPanel, anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
+    const totalItems = [
+        ...avatarPanelMenuItems ?? [],
+        ...avatarPanelSettingItems ?? [],
+        ...additionalItems
+    ];
+    const animationRefs = React.useRef(totalItems && totalItems.map((item, index) => useFadeIn(index, !isAvatarOpen)));
+    return (_jsx(StyledSwipeableAvatar, { "data-id": dataIds.MobileNavAvatarPanel, anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
             keepMounted: true
-        } }, { children: _jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(Button
-                // @ts-expect-error
-                , __assign({ 
-                    // @ts-expect-error
-                    component: animated.button, style: __assign({ left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto', position: 'absolute', right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1), top: theme.spacing(1) }, animationRefs.current[0]), onClick: function () {
+        }, children: _jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(Button
+                // @ts-ignore
+                , { 
+                    // @ts-ignore
+                    component: animated.button, style: {
+                        left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
+                        position: 'absolute',
+                        right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
+                        top: theme.spacing(1),
+                        ...animationRefs.current[0]
+                    }, onClick: () => {
                         handleOpenState(false);
                         avatarPanelOnClickLogout();
-                    }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ "data-id": dataIds.MobileNavAvatarProfile, style: {
+                    }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit', children: avatarPanelLogoutString ?? 'Logout' })), _jsxs(Box, { "data-id": dataIds.MobileNavAvatarProfile, style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
-                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: animationRefs.current[1] }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, animationRefs.current[2]) }, { children: _jsxs(ButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledOutlineButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
+                    }, children: [_jsxs(StyledBoxProfile, { style: animationRefs.current[1], children: [_jsx(StyledAvatar, { style: { marginRight: '0.5rem' }, children: avatarInitials }), _jsxs(StyledAvatarName, { children: [_jsx("span", { style: { fontWeight: 300 }, children: "Hi," }), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] }), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, { style: {
+                                flexDirection: 'row',
+                                marginBottom: theme.spacing(1),
+                                ...animationRefs.current[2]
+                            }, children: _jsxs(ButtonGroup, { variant: 'outlined', "aria-label": "split button", children: [_jsx(StyledOutlineButton, { variant: 'outlined', color: 'inherit', size: 'medium', onClick: () => {
                                             handleOpenState(false);
                                             avatarPanelOnClickViewProfile();
-                                        } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(StyledOutlineButton, __assign({ size: 'medium', variant: 'outlined', color: 'inherit', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
+                                        }, children: avatarPanelViewProfileString ?? 'View Profile' }), avatarPanelOnClickEditProfile && (_jsx(StyledOutlineButton, { size: 'medium', variant: 'outlined', color: 'inherit', "aria-label": avatarPanelEditProfileString ?? 'Edit Profile', onClick: () => {
                                             handleOpenState(false);
                                             avatarPanelOnClickEditProfile();
-                                        } }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
+                                        }, children: _jsx(EditIcon, {}) }))] }) }))] }), _jsxs(Box, { style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
-                    } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ style: {
+                    }, children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, { style: {
                                 marginInlineStart: '3rem',
                                 marginBottom: theme.spacing(2),
                                 maxWidth: '18rem'
-                            } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[index + 2], disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            }, children: avatarPanelMenuItems.map((avatarMenuItem, index) => (_jsx(ListItem, { component: animated.div, style: animationRefs.current[index + 2], disablePadding: true, children: _jsxs(StyledListItemButton
                                 // TODO: figure out if these are links or buttons
                                 // @ts-expect-error
-                                , __assign({ 
+                                , { 
                                     // TODO: figure out if these are links or buttons
                                     // @ts-expect-error
-                                    component: Link, role: 'link', onClick: function () {
+                                    component: Link, role: 'link', onClick: () => {
                                         handleOpenState(false);
                                         avatarMenuItem.onClick();
-                                    } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                    }, children: [_jsx(ListItemIcon, { "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: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
+                                            }, children: avatarMenuItem.icon }), _jsx(ListItemText, { primary: avatarMenuItem.label })] }) }))) })), avatarPanelOnClickMainAction && _jsx(StyledOutlineButton
+                        // @ts-ignore
+                        , { 
+                            // @ts-ignore
+                            component: animated.button, style: animationRefs.current[(avatarPanelMenuItems?.length ?? 0) + 3], disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: () => {
                                 handleOpenState(false);
                                 avatarPanelOnClickMainAction();
-                            } }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
+                            }, children: avatarPanelMainActionString }), _jsxs(List, { style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) }, children: [avatarPanelSettingItems &&
                                     avatarPanelSettingItems.length > 0 &&
-                                    avatarPanelSettingItems.map(function (avatarMenuItem, index) {
-                                        var _a;
-                                        return (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                    avatarPanelSettingItems.map((avatarMenuItem, index) => (_jsx(ListItem, { component: animated.div, style: animationRefs.current[(avatarPanelMenuItems?.length ?? 0) + index + 3], disablePadding: true, children: _jsxs(StyledListItemButton
+                                        // TODO: figure out if these are links or buttons
+                                        // @ts-expect-error
+                                        , { 
                                             // TODO: figure out if these are links or buttons
                                             // @ts-expect-error
-                                            , __assign({ 
-                                                // TODO: figure out if these are links or buttons
-                                                // @ts-expect-error
-                                                component: Link, role: 'link', onClick: function () {
-                                                    handleOpenState(false);
-                                                    avatarMenuItem.onClick();
-                                                } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
-                                                            minWidth: theme.spacing(5)
-                                                        } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) })));
-                                    }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: animated.div, style: __assign({ marginTop: 0 }, animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4]), disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                            component: Link, role: 'link', onClick: () => {
+                                                handleOpenState(false);
+                                                avatarMenuItem.onClick();
+                                            }, children: [_jsx(ListItemIcon, { "aria-hidden": true, style: {
+                                                        minWidth: theme.spacing(5)
+                                                    }, children: avatarMenuItem.icon }), _jsx(ListItemText, { primary: avatarMenuItem.label })] }) }))), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, { component: animated.div, style: {
+                                        marginTop: 0,
+                                        ...animationRefs.current[(avatarPanelMenuItems?.length ?? 0) + (avatarPanelSettingItems?.length ?? 0) + 4]
+                                    }, 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 : messages['invert-navigation-bar'] }), _jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                        component: Link, role: 'link', onClick: handleOnClickSwitchDirection, children: [_jsx(ListItemText, { primary: avatarPanelInvertNavString ?? messages['invert-navigation-bar'] }), _jsx(ListItemIcon, { "aria-hidden": true, style: {
                                                     minWidth: theme.spacing(5),
                                                     marginInlineStart: '0.5rem'
-                                                } }, { children: mobileNavDirection === 'ltr'
+                                                }, children: mobileNavDirection === 'ltr'
                                                     ? (_jsx(ToggleOffIcon, { style: {
                                                             boxSizing: 'border-box',
                                                             height: '2em',
@@ -157,6 +149,6 @@ var SwipeableTemporaryAvatar = function (props) {
                                                             height: '2em',
                                                             padding: '0.15em',
                                                             width: '2em'
-                                                        } })) }))] })) })))] }))] }))] }) })));
+                                                        } })) })] }) }))] })] })] }) }));
 };
 export default SwipeableTemporaryAvatar;