@learningpool/ui 1.6.0-beta.16 → 1.6.0-beta.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/navigation/MobileNavigation/MobileNavigation.d.ts +1 -2
- package/components/navigation/MobileNavigation/MobileNavigation.js +29 -82
- package/components/navigation/MobileNavigation/MobileNavigationAvatar.d.ts +1 -1
- package/components/navigation/MobileNavigation/MobileNavigationAvatar.js +26 -8
- package/components/navigation/MobileNavigation/MobileNavigationDrawer.js +1 -1
- package/components/navigation/MobileNavigation/MobileNavigationNotchIndicator.d.ts +3 -0
- package/components/navigation/MobileNavigation/MobileNavigationNotchIndicator.js +31 -0
- package/components/navigation/MobileNavigation/MobileNavigationStyles.d.ts +0 -254
- package/components/navigation/MobileNavigation/MobileNavigationStyles.js +19 -24
- package/components/navigation/MobileNavigation/MobileNavigationToggleSearchX.d.ts +2 -1
- package/components/navigation/MobileNavigation/MobileNavigationToggleSearchX.js +2 -1
- package/components/navigation/MobileNavigation/MobileNavigationToggleX.d.ts +2 -1
- package/components/navigation/MobileNavigation/MobileNavigationToggleX.js +2 -1
- package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts +1 -0
- package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js +2 -2
- package/package.json +1 -1
- package/types/components/navigation/VerticalNavigation.d.ts +1 -0
- package/types/components/navigation/VerticalNavigationAvatar.d.ts +1 -1
|
@@ -15,8 +15,6 @@ interface MobileNavigationProps {
|
|
|
15
15
|
isDrawerOpen?: boolean;
|
|
16
16
|
isSearchOpen?: boolean;
|
|
17
17
|
isAvatarOpen?: boolean;
|
|
18
|
-
isPersistent?: boolean;
|
|
19
|
-
setIsPersistent?: any;
|
|
20
18
|
hideAvatarInitials?: boolean;
|
|
21
19
|
showNotchIndicator?: boolean;
|
|
22
20
|
hasSearch?: boolean;
|
|
@@ -24,6 +22,7 @@ interface MobileNavigationProps {
|
|
|
24
22
|
searchPanelDefaultValue?: string;
|
|
25
23
|
searchPanelOnClickSearch?: any;
|
|
26
24
|
hasAvatar?: boolean;
|
|
25
|
+
avatarPanelLogoutString?: string;
|
|
27
26
|
avatarPanelOnClickSwitchDirection?: any;
|
|
28
27
|
avatarPanelOnClickLogout?: any;
|
|
29
28
|
avatarPanelOnClickViewProfile?: any;
|
|
@@ -20,42 +20,33 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
-
import { jsx as _jsx,
|
|
23
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
import React, { useEffect } from 'react';
|
|
25
|
-
import { Person
|
|
26
|
-
import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation
|
|
25
|
+
import { Person } from '@mui/icons-material';
|
|
26
|
+
import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation } from './MobileNavigationStyles';
|
|
27
27
|
import { StyledAvatar } from './MobileNavigationAvatarStyles';
|
|
28
28
|
import SwipeableTemporaryDrawer from './MobileNavigationDrawer';
|
|
29
29
|
import SwipeableTemporarySearch from './MobileNavigationSearch';
|
|
30
30
|
import SwipeableTemporaryAvatar from './MobileNavigationAvatar';
|
|
31
|
-
import
|
|
32
|
-
import
|
|
33
|
-
import
|
|
34
|
-
import { slice } from 'lodash';
|
|
31
|
+
import NotchIndicator from './MobileNavigationNotchIndicator';
|
|
32
|
+
import ToggleX from './MobileNavigationToggleX';
|
|
33
|
+
import ToggleSearchX from './MobileNavigationToggleSearchX';
|
|
35
34
|
import { motion } from 'framer-motion';
|
|
36
35
|
import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants';
|
|
37
36
|
import { handleAvatarInitials } from '../../../utils/helpers';
|
|
38
37
|
var MobileNavigation = function (props) {
|
|
39
|
-
var _a, _b
|
|
38
|
+
var _a, _b;
|
|
40
39
|
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"]);
|
|
41
40
|
var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
|
|
42
41
|
var propIsSearchOpen = typeof (props === null || props === void 0 ? void 0 : props.isSearchOpen) === 'boolean' ? props.isSearchOpen : undefined;
|
|
43
42
|
var propIsAvatarOpen = typeof (props === null || props === void 0 ? void 0 : props.isAvatarOpen) === 'boolean' ? props.isAvatarOpen : undefined;
|
|
44
43
|
var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
|
|
45
|
-
var
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var
|
|
49
|
-
var priorityItems = slice(items, 0, maxMobilePrimaryItems);
|
|
50
|
-
var _g = React.useState(0), value = _g[0], setValue = _g[1];
|
|
51
|
-
var _h = React.useState(0), mobileNotchPosition = _h[0], setMobileNotchPosition = _h[1];
|
|
52
|
-
var windowWidth = useCurrentWidth();
|
|
44
|
+
var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
|
|
45
|
+
var _d = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _d[0], setIsSearchOpen = _d[1];
|
|
46
|
+
var _e = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _e[0], setIsAvatarOpen = _e[1];
|
|
47
|
+
var _f = React.useState(0), value = _f[0], setValue = _f[1];
|
|
53
48
|
var currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction');
|
|
54
|
-
var
|
|
55
|
-
useEffect(function () {
|
|
56
|
-
window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection);
|
|
57
|
-
positionMobileNotch();
|
|
58
|
-
}, [mobileNavDirection]);
|
|
49
|
+
var _g = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _g[0], setMobileNavDirection = _g[1];
|
|
59
50
|
useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
|
|
60
51
|
useEffect(function () { return setIsSearchOpen(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false); }, [propIsSearchOpen]);
|
|
61
52
|
useEffect(function () { return setIsAvatarOpen(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false); }, [propIsAvatarOpen]);
|
|
@@ -69,7 +60,7 @@ var MobileNavigation = function (props) {
|
|
|
69
60
|
}
|
|
70
61
|
hideNotch();
|
|
71
62
|
}, [isDrawerOpen, isSearchOpen, isAvatarOpen]);
|
|
72
|
-
var
|
|
63
|
+
var _h = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _h[0], setAvatarInitials = _h[1];
|
|
73
64
|
var toggleDrawer = function (open, action) { return function (event) {
|
|
74
65
|
event === null || event === void 0 ? void 0 : event.stopPropagation();
|
|
75
66
|
if (event.type === 'keydown') {
|
|
@@ -90,6 +81,7 @@ var MobileNavigation = function (props) {
|
|
|
90
81
|
}
|
|
91
82
|
case MOBILE_NAV_PANEL_TYPES.AVATAR: {
|
|
92
83
|
setIsAvatarOpen(open !== null && open !== void 0 ? open : !isAvatarOpen);
|
|
84
|
+
setValue(2);
|
|
93
85
|
break;
|
|
94
86
|
}
|
|
95
87
|
default: {
|
|
@@ -99,22 +91,6 @@ var MobileNavigation = function (props) {
|
|
|
99
91
|
}
|
|
100
92
|
}
|
|
101
93
|
}; };
|
|
102
|
-
var NOTCH = {
|
|
103
|
-
Height: 50,
|
|
104
|
-
Width: 50
|
|
105
|
-
};
|
|
106
|
-
var BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item');
|
|
107
|
-
var positionMobileNotch = function () {
|
|
108
|
-
var _a;
|
|
109
|
-
var selectedDOMRect = (_a = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
110
|
-
setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition);
|
|
111
|
-
};
|
|
112
|
-
useEffect(function () { return positionMobileNotch(); }, [
|
|
113
|
-
value,
|
|
114
|
-
windowWidth,
|
|
115
|
-
// Fix notch position if scrollbar is hidden/shown
|
|
116
|
-
(_c = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()
|
|
117
|
-
]);
|
|
118
94
|
var variantsPaper = {
|
|
119
95
|
open: {
|
|
120
96
|
opacity: 1
|
|
@@ -134,50 +110,21 @@ var MobileNavigation = function (props) {
|
|
|
134
110
|
}
|
|
135
111
|
}
|
|
136
112
|
};
|
|
137
|
-
return (_jsxs(_Fragment, { children: [_jsx(SwipeableTemporaryDrawer, __assign({ isDrawerOpen: isDrawerOpen, setIsDrawerOpen: setIsDrawerOpen, items: items, secondaryItems: secondaryItems, label: 'Primary' }, rest)), hasSearch && (_jsx(SwipeableTemporarySearch, __assign({
|
|
113
|
+
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))), _jsx(StyledPaper, __assign({ elevation: 3,
|
|
138
114
|
// @ts-expect-error
|
|
139
|
-
component: motion.div, animate: 'open', variants: variantsPaper, initial: { opacity: 0 },
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
},
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
type: 'spring',
|
|
154
|
-
// mass: 0.5,
|
|
155
|
-
bounce: 0.25
|
|
156
|
-
// stiffness: 50
|
|
157
|
-
},
|
|
158
|
-
y: {
|
|
159
|
-
delay: 0.25,
|
|
160
|
-
// duration: 0.5,
|
|
161
|
-
type: 'spring',
|
|
162
|
-
// mass: 0.5,
|
|
163
|
-
bounce: 0
|
|
164
|
-
}
|
|
165
|
-
// duration: 0.5
|
|
166
|
-
} }, { 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); },
|
|
167
|
-
// @ts-expect-error
|
|
168
|
-
component: motion.div, animate: 'open', variants: variantsContainer, style: {
|
|
169
|
-
flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row'
|
|
170
|
-
} }, { children: [_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleX, {}), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER),
|
|
171
|
-
// @ts-expect-error
|
|
172
|
-
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: {
|
|
173
|
-
marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial',
|
|
174
|
-
marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto'
|
|
175
|
-
} }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleSearchX, {}), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH),
|
|
176
|
-
// @ts-expect-error
|
|
177
|
-
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
|
|
178
|
-
? _jsx(StyledAvatar, { children: avatarInitials })
|
|
179
|
-
: value === (priorityItems ? priorityItems.length + 1 : 1) ? _jsx(Person, {}) : _jsx(PersonOutline, {}),
|
|
180
|
-
// @ts-expect-error
|
|
181
|
-
component: motion.button, variants: variantsButtons, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' }))] }))] }))] }));
|
|
115
|
+
component: motion.div, animate: 'open', variants: variantsPaper, initial: { opacity: 0 } }, { children: _jsxs(StyledBottomNavigation, __assign({ value: value, onChange: function (event, newValue) { return setValue(newValue); },
|
|
116
|
+
// @ts-expect-error
|
|
117
|
+
component: motion.div, animate: 'open', variants: variantsContainer, style: {
|
|
118
|
+
flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row'
|
|
119
|
+
} }, { children: [_jsx(StyledBottomNavigationAction, { icon: (_jsxs(_Fragment, { children: [_jsx(ToggleX, {}), showNotchIndicator && value === 0 && _jsx(NotchIndicator, {})] })), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER),
|
|
120
|
+
// @ts-expect-error
|
|
121
|
+
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: {
|
|
122
|
+
marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial',
|
|
123
|
+
marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto'
|
|
124
|
+
} }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: (_jsxs(_Fragment, { children: [_jsx(ToggleSearchX, {}), showNotchIndicator && value === 1 && _jsx(NotchIndicator, {})] })), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH),
|
|
125
|
+
// @ts-expect-error
|
|
126
|
+
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: (_jsxs(_Fragment, { children: [!hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(Person, {}), showNotchIndicator && value === 2 && _jsx(NotchIndicator, {})] })),
|
|
127
|
+
// @ts-expect-error
|
|
128
|
+
component: motion.button, variants: variantsButtons, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' }))] })) }))] }));
|
|
182
129
|
};
|
|
183
130
|
export default MobileNavigation;
|
|
@@ -7,11 +7,11 @@ export interface IAvatarMenuItemProps {
|
|
|
7
7
|
export interface ISwipeableTemporaryAvatarProps {
|
|
8
8
|
avatarName: string;
|
|
9
9
|
editProfileText?: string;
|
|
10
|
-
logoutText?: string;
|
|
11
10
|
isAvatarOpen: boolean;
|
|
12
11
|
setIsAvatarOpen?: any;
|
|
13
12
|
mobileNavDirection?: string;
|
|
14
13
|
setMobileNavDirection?: any;
|
|
14
|
+
avatarPanelLogoutString?: string;
|
|
15
15
|
avatarPanelOnClickSwitchDirection?: any;
|
|
16
16
|
avatarPanelOnClickLogout?: any;
|
|
17
17
|
avatarPanelOnClickViewProfile?: any;
|
|
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import React, { useEffect } from 'react';
|
|
14
|
-
import { Box, ButtonGroup,
|
|
14
|
+
import { Box, ButtonGroup, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
|
|
15
15
|
import { StyledSwipeableAvatar, StyledBox, StyledBoxProfile, StyledAvatarName, StyledAvatar, StyledOutlineButton, StyledBoxProfileEdit, StyledListItemButton } from './MobileNavigationAvatarStyles';
|
|
16
16
|
import { useTheme } from '@mui/material/styles';
|
|
17
17
|
import EditIcon from '@mui/icons-material/Edit';
|
|
@@ -24,7 +24,7 @@ import { handleAvatarInitials } from '../../../utils/helpers';
|
|
|
24
24
|
var SwipeableTemporaryAvatar = function (props) {
|
|
25
25
|
var _a;
|
|
26
26
|
var theme = useTheme();
|
|
27
|
-
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;
|
|
27
|
+
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;
|
|
28
28
|
var _b = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _b[0], setIsOpen = _b[1];
|
|
29
29
|
React.useEffect(function () { return handleOpenState(isAvatarOpen); }, [isAvatarOpen]);
|
|
30
30
|
var handleOpenState = function (open) {
|
|
@@ -49,7 +49,7 @@ var SwipeableTemporaryAvatar = function (props) {
|
|
|
49
49
|
};
|
|
50
50
|
return (_jsx(StyledSwipeableAvatar, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
|
|
51
51
|
keepMounted: true
|
|
52
|
-
} }, { children: _jsxs(StyledBox, __assign({ animate: isAvatarOpen ? 'open' : 'closed', variants: motionParent }, { children: [avatarPanelOnClickLogout && (_jsx(
|
|
52
|
+
} }, { children: _jsxs(StyledBox, __assign({ animate: isAvatarOpen ? 'open' : 'closed', variants: motionParent }, { children: [avatarPanelOnClickLogout && (_jsx(Button
|
|
53
53
|
// @ts-expect-error
|
|
54
54
|
, __assign({
|
|
55
55
|
// @ts-expect-error
|
|
@@ -58,14 +58,23 @@ var SwipeableTemporaryAvatar = function (props) {
|
|
|
58
58
|
position: 'absolute',
|
|
59
59
|
right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
|
|
60
60
|
top: theme.spacing(1)
|
|
61
|
-
}, onClick:
|
|
61
|
+
}, onClick: function () {
|
|
62
|
+
handleOpenState(false);
|
|
63
|
+
avatarPanelOnClickLogout();
|
|
64
|
+
}, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ style: {
|
|
62
65
|
alignItems: 'center',
|
|
63
66
|
display: 'flex',
|
|
64
67
|
flexDirection: 'column'
|
|
65
68
|
} }, { 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: {
|
|
66
69
|
flexDirection: 'row',
|
|
67
70
|
marginBottom: theme.spacing(1)
|
|
68
|
-
} }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick:
|
|
71
|
+
} }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: function () {
|
|
72
|
+
handleOpenState(false);
|
|
73
|
+
avatarPanelOnClickViewProfile();
|
|
74
|
+
} }, { 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 () {
|
|
75
|
+
handleOpenState(false);
|
|
76
|
+
avatarPanelOnClickEditProfile();
|
|
77
|
+
} }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
|
|
69
78
|
alignItems: 'center',
|
|
70
79
|
display: 'flex',
|
|
71
80
|
flexDirection: 'column'
|
|
@@ -79,13 +88,19 @@ var SwipeableTemporaryAvatar = function (props) {
|
|
|
79
88
|
, __assign({
|
|
80
89
|
// TODO: figure out if these are links or buttons
|
|
81
90
|
// @ts-expect-error
|
|
82
|
-
component: Link, role: 'link', onClick:
|
|
91
|
+
component: Link, role: 'link', onClick: function () {
|
|
92
|
+
handleOpenState(false);
|
|
93
|
+
avatarMenuItem.onClick();
|
|
94
|
+
} }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
|
|
83
95
|
minWidth: theme.spacing(5)
|
|
84
96
|
} }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledOutlineButton
|
|
85
97
|
// @ts-expect-error
|
|
86
98
|
, __assign({
|
|
87
99
|
// @ts-expect-error
|
|
88
|
-
component: motion.button, variants: motionFadeInUp, disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick:
|
|
100
|
+
component: motion.button, variants: motionFadeInUp, disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick: function () {
|
|
101
|
+
handleOpenState(false);
|
|
102
|
+
avatarPanelOnClickMainAction();
|
|
103
|
+
} }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
|
|
89
104
|
avatarPanelSettingItems.length > 0 &&
|
|
90
105
|
avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
|
|
91
106
|
// TODO: figure out if these are links or buttons
|
|
@@ -93,7 +108,10 @@ var SwipeableTemporaryAvatar = function (props) {
|
|
|
93
108
|
, __assign({
|
|
94
109
|
// TODO: figure out if these are links or buttons
|
|
95
110
|
// @ts-expect-error
|
|
96
|
-
component: Link, role: 'link', onClick:
|
|
111
|
+
component: Link, role: 'link', onClick: function () {
|
|
112
|
+
handleOpenState(false);
|
|
113
|
+
avatarMenuItem.onClick();
|
|
114
|
+
} }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
|
|
97
115
|
minWidth: theme.spacing(5)
|
|
98
116
|
} }, { 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
|
|
99
117
|
// TODO: figure out if these are links or buttons
|
|
@@ -107,7 +107,7 @@ export default function SwipeableTemporaryDrawer(props) {
|
|
|
107
107
|
};
|
|
108
108
|
var list = function () { return (_jsxs(StyledBox, __assign({ onClick: toggleDrawer(false), onKeyDown: toggleDrawer(false) }, { children: [_jsxs(StyledDrawerLogo, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, animate: isDrawerOpen ? 'open' : 'closed', variants: variantsLogo, whileHover: { scale: 1.02 }, whileTap: { scale: 0.95 } }, { children: [logo
|
|
109
109
|
? typeof logo === 'string'
|
|
110
|
-
? (_jsx("img", { height:
|
|
110
|
+
? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
|
|
111
111
|
: logo
|
|
112
112
|
: (_jsx(StreamSuiteLogo, { style: {
|
|
113
113
|
fill: theme.palette.mode === 'dark'
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { motion } from 'framer-motion';
|
|
14
|
+
import { StyledNotchShadow, StyledNotchShadowMask, StyledNotchSVG } from './MobileNavigationStyles';
|
|
15
|
+
var NotchIndicator = function () { return (_jsxs(motion.div, __assign({ layoutId: "underline", style: {
|
|
16
|
+
bottom: '58px',
|
|
17
|
+
marginInlineStart: '-50px',
|
|
18
|
+
position: 'fixed',
|
|
19
|
+
zIndex: '-1'
|
|
20
|
+
}, transition: {
|
|
21
|
+
x: {
|
|
22
|
+
type: 'spring',
|
|
23
|
+
bounce: 0.25
|
|
24
|
+
},
|
|
25
|
+
y: {
|
|
26
|
+
delay: 0.25,
|
|
27
|
+
type: 'spring',
|
|
28
|
+
bounce: 0
|
|
29
|
+
}
|
|
30
|
+
} }, { 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, {})] }))); };
|
|
31
|
+
export default NotchIndicator;
|
|
@@ -13,263 +13,9 @@ export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
|
|
|
13
13
|
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
14
14
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
15
15
|
}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
16
|
-
export declare const StyledCircle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
17
16
|
export declare const StyledNotchSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
18
17
|
mobileNotchPosition?: number | undefined;
|
|
19
18
|
}, import("react").SVGProps<SVGSVGElement>, {}>;
|
|
20
|
-
export declare const StyledNavigationIndicator: import("@emotion/styled").StyledComponent<{
|
|
21
|
-
className?: string | undefined;
|
|
22
|
-
slot?: string | undefined;
|
|
23
|
-
title?: string | undefined;
|
|
24
|
-
defaultChecked?: boolean | undefined;
|
|
25
|
-
defaultValue?: string | number | readonly string[] | undefined;
|
|
26
|
-
suppressContentEditableWarning?: boolean | undefined;
|
|
27
|
-
suppressHydrationWarning?: boolean | undefined;
|
|
28
|
-
accessKey?: string | undefined;
|
|
29
|
-
contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
|
|
30
|
-
contextMenu?: string | undefined;
|
|
31
|
-
dir?: string | undefined;
|
|
32
|
-
draggable?: (boolean | "true" | "false") | undefined;
|
|
33
|
-
hidden?: boolean | undefined;
|
|
34
|
-
id?: string | undefined;
|
|
35
|
-
lang?: string | undefined;
|
|
36
|
-
placeholder?: string | undefined;
|
|
37
|
-
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
38
|
-
tabIndex?: number | undefined;
|
|
39
|
-
translate?: "yes" | "no" | undefined;
|
|
40
|
-
radioGroup?: string | undefined;
|
|
41
|
-
role?: import("react").AriaRole | undefined;
|
|
42
|
-
about?: string | undefined;
|
|
43
|
-
datatype?: string | undefined;
|
|
44
|
-
inlist?: any;
|
|
45
|
-
prefix?: string | undefined;
|
|
46
|
-
property?: string | undefined;
|
|
47
|
-
resource?: string | undefined;
|
|
48
|
-
typeof?: string | undefined;
|
|
49
|
-
vocab?: string | undefined;
|
|
50
|
-
autoCapitalize?: string | undefined;
|
|
51
|
-
autoCorrect?: string | undefined;
|
|
52
|
-
autoSave?: string | undefined;
|
|
53
|
-
color?: string | undefined;
|
|
54
|
-
itemProp?: string | undefined;
|
|
55
|
-
itemScope?: boolean | undefined;
|
|
56
|
-
itemType?: string | undefined;
|
|
57
|
-
itemID?: string | undefined;
|
|
58
|
-
itemRef?: string | undefined;
|
|
59
|
-
results?: number | undefined;
|
|
60
|
-
security?: string | undefined;
|
|
61
|
-
unselectable?: "on" | "off" | undefined;
|
|
62
|
-
inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
63
|
-
is?: string | undefined;
|
|
64
|
-
"aria-activedescendant"?: string | undefined;
|
|
65
|
-
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
66
|
-
"aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
|
|
67
|
-
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
68
|
-
"aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
69
|
-
"aria-colcount"?: number | undefined;
|
|
70
|
-
"aria-colindex"?: number | undefined;
|
|
71
|
-
"aria-colspan"?: number | undefined;
|
|
72
|
-
"aria-controls"?: string | undefined;
|
|
73
|
-
"aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
74
|
-
"aria-describedby"?: string | undefined;
|
|
75
|
-
"aria-details"?: string | undefined;
|
|
76
|
-
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
77
|
-
"aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
78
|
-
"aria-errormessage"?: string | undefined;
|
|
79
|
-
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
80
|
-
"aria-flowto"?: string | undefined;
|
|
81
|
-
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
82
|
-
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
83
|
-
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
84
|
-
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
85
|
-
"aria-keyshortcuts"?: string | undefined;
|
|
86
|
-
"aria-label"?: string | undefined;
|
|
87
|
-
"aria-labelledby"?: string | undefined;
|
|
88
|
-
"aria-level"?: number | undefined;
|
|
89
|
-
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
90
|
-
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
91
|
-
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
92
|
-
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
93
|
-
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
94
|
-
"aria-owns"?: string | undefined;
|
|
95
|
-
"aria-placeholder"?: string | undefined;
|
|
96
|
-
"aria-posinset"?: number | undefined;
|
|
97
|
-
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
98
|
-
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
99
|
-
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
100
|
-
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
101
|
-
"aria-roledescription"?: string | undefined;
|
|
102
|
-
"aria-rowcount"?: number | undefined;
|
|
103
|
-
"aria-rowindex"?: number | undefined;
|
|
104
|
-
"aria-rowspan"?: number | undefined;
|
|
105
|
-
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
106
|
-
"aria-setsize"?: number | undefined;
|
|
107
|
-
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
108
|
-
"aria-valuemax"?: number | undefined;
|
|
109
|
-
"aria-valuemin"?: number | undefined;
|
|
110
|
-
"aria-valuenow"?: number | undefined;
|
|
111
|
-
"aria-valuetext"?: string | undefined;
|
|
112
|
-
children?: import("react").ReactNode;
|
|
113
|
-
dangerouslySetInnerHTML?: {
|
|
114
|
-
__html: string;
|
|
115
|
-
} | undefined;
|
|
116
|
-
onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
117
|
-
onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
118
|
-
onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
119
|
-
onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
120
|
-
onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
121
|
-
onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
122
|
-
onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
123
|
-
onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
124
|
-
onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
125
|
-
onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
126
|
-
onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
127
|
-
onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
128
|
-
onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
129
|
-
onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
130
|
-
onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
131
|
-
onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
132
|
-
onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
133
|
-
onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
134
|
-
onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
135
|
-
onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
136
|
-
onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
137
|
-
onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
138
|
-
onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
139
|
-
onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
140
|
-
onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
141
|
-
onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
142
|
-
onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
143
|
-
onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
144
|
-
onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
145
|
-
onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
146
|
-
onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
147
|
-
onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
148
|
-
onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
149
|
-
onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
150
|
-
onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
151
|
-
onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
152
|
-
onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
153
|
-
onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
154
|
-
onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
155
|
-
onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
156
|
-
onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
157
|
-
onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
158
|
-
onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
159
|
-
onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
160
|
-
onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
161
|
-
onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
162
|
-
onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
163
|
-
onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
164
|
-
onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
165
|
-
onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
166
|
-
onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
167
|
-
onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
168
|
-
onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
169
|
-
onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
170
|
-
onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
171
|
-
onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
172
|
-
onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
173
|
-
onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
174
|
-
onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
175
|
-
onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
176
|
-
onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
177
|
-
onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
178
|
-
onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
179
|
-
onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
180
|
-
onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
181
|
-
onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
182
|
-
onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
183
|
-
onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
184
|
-
onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
185
|
-
onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
186
|
-
onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
187
|
-
onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
188
|
-
onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
189
|
-
onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
190
|
-
onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
191
|
-
onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
192
|
-
onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
193
|
-
onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
194
|
-
onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
195
|
-
onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
196
|
-
onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
197
|
-
onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
198
|
-
onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
199
|
-
onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
200
|
-
onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
201
|
-
onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
202
|
-
onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
203
|
-
onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
204
|
-
onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
205
|
-
onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
206
|
-
onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
207
|
-
onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
208
|
-
onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
209
|
-
onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
210
|
-
onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
211
|
-
onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
212
|
-
onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
213
|
-
onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
214
|
-
onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
215
|
-
onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
216
|
-
onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
217
|
-
onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
218
|
-
onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
219
|
-
onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
220
|
-
onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
221
|
-
onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
222
|
-
onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
223
|
-
onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
224
|
-
onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
225
|
-
onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
226
|
-
onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
227
|
-
onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
228
|
-
onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
229
|
-
onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
230
|
-
onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
231
|
-
onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
232
|
-
onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
233
|
-
onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
234
|
-
onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
235
|
-
onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
236
|
-
onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
237
|
-
onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
238
|
-
onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
239
|
-
onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
240
|
-
onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
241
|
-
onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
242
|
-
onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
243
|
-
onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
244
|
-
onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
245
|
-
onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
246
|
-
onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
247
|
-
onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
248
|
-
onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
249
|
-
onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
250
|
-
onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
251
|
-
onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
252
|
-
onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
253
|
-
onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
254
|
-
onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
255
|
-
onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
256
|
-
onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
257
|
-
onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
258
|
-
onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
259
|
-
onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
260
|
-
onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
261
|
-
onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
262
|
-
onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
263
|
-
onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
264
|
-
onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
265
|
-
onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
266
|
-
onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
267
|
-
onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
268
|
-
onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
269
|
-
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
270
|
-
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
271
|
-
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
272
|
-
} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
273
19
|
export declare const StyledBottomNavigation: import("@emotion/styled").StyledComponent<{
|
|
274
20
|
children?: import("react").ReactNode;
|
|
275
21
|
classes?: Partial<import("@mui/material").BottomNavigationClasses> | undefined;
|
|
@@ -6,27 +6,22 @@ import Drawer from '@mui/material/Drawer';
|
|
|
6
6
|
import { Box, IconButton, BottomNavigation, BottomNavigationAction, Paper } from '../../../index';
|
|
7
7
|
import { styled } from '@mui/material/styles';
|
|
8
8
|
import { motion } from '../../../utils/theme';
|
|
9
|
-
import { motion as Motion } from 'framer-motion';
|
|
10
9
|
export var DRAWER_WIDTH = {
|
|
11
10
|
Collapsed: 60,
|
|
12
11
|
Expanded: 300
|
|
13
12
|
};
|
|
14
|
-
export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
15
|
-
? props.theme.palette.primary.main
|
|
16
|
-
: props.theme.palette.background.paper; });
|
|
17
|
-
export var StyledCircle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n left: 0px;\n bottom: 0;\n width: 300px;\n background: rgb(255, 255, 255);\n"], ["\n background: ", ";\n position: absolute;\n left: 0px;\n bottom: 0;\n width: 300px;\n background: rgb(255, 255, 255);\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
13
|
+
export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n background-image: none;\n border-radius: 0;\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n z-index: 1000000000;\n"], ["\n background-color: ", ";\n background-image: none;\n border-radius: 0;\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n z-index: 1000000000;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
18
14
|
? props.theme.palette.primary.main
|
|
19
15
|
: props.theme.palette.background.paper; });
|
|
20
16
|
export var StyledNotchSVG = styled('svg', {
|
|
21
17
|
shouldForwardProp: function (prop) { return prop !== 'mobileNotchPosition'; }
|
|
22
|
-
})(
|
|
18
|
+
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n fill: ", ";\n height: 50px;\n left: 0;\n padding: 0;\n position: absolute;\n stroke: transparent;\n top: -29px;\n transform: rotate(270deg);\n width: 50px;\n z-index: -1;\n"], ["\n display: block;\n fill: ", ";\n height: 50px;\n left: 0;\n padding: 0;\n position: absolute;\n stroke: transparent;\n top: -29px;\n transform: rotate(270deg);\n width: 50px;\n z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
23
19
|
? props.theme.palette.primary.main
|
|
24
20
|
: props.theme.palette.background.paper; });
|
|
25
|
-
export var
|
|
26
|
-
export var StyledBottomNavigation = styled(BottomNavigation)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n position: relative;\n"], ["\n background-color: ", ";\n position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
21
|
+
export var StyledBottomNavigation = styled(BottomNavigation)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n position: relative;\n"], ["\n background-color: ", ";\n position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
27
22
|
? props.theme.palette.primary.main
|
|
28
23
|
: props.theme.palette.background.paper; });
|
|
29
|
-
export var StyledBottomNavigationAction = styled(BottomNavigationAction)(
|
|
24
|
+
export var StyledBottomNavigationAction = styled(BottomNavigationAction)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n backgroundColor: ", ";\n color: ", ";\n flex: none;\n height: 56px;\n max-width: 168px;\n min-width: 80px;\n overflow: hidden;\n padding: 0;\n stroke: ", ";\n\n .MuiBottomNavigationAction-label {\n color: inherit;\n font-size: 0.65rem;\n\n // Handle long text string overflow\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n\n &.Mui-selected {\n color: ", ";\n font-size: 0.75rem;\n }\n }\n\n .MuiSvgIcon-root {\n fill: ", ";\n }\n"], ["\n backgroundColor: ", ";\n color: ", ";\n flex: none;\n height: 56px;\n max-width: 168px;\n min-width: 80px;\n overflow: hidden;\n padding: 0;\n stroke: ", ";\n\n .MuiBottomNavigationAction-label {\n color: inherit;\n font-size: 0.65rem;\n\n // Handle long text string overflow\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n\n &.Mui-selected {\n color: ", ";\n font-size: 0.75rem;\n }\n }\n\n .MuiSvgIcon-root {\n fill: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
30
25
|
? props.theme.palette.primary.main
|
|
31
26
|
: props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
|
|
32
27
|
? props.theme.palette.primary.contrastText
|
|
@@ -43,13 +38,13 @@ export var StyledBottomNavigationAction = styled(BottomNavigationAction)(templat
|
|
|
43
38
|
});
|
|
44
39
|
export var DrawerHeader = styled('div', {
|
|
45
40
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
46
|
-
})(
|
|
47
|
-
export var DrawerToggle = styled(IconButton)(
|
|
48
|
-
export var DrawerToggleHitboxContent = styled('span')(
|
|
41
|
+
})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n"], ["\n"])));
|
|
42
|
+
export var DrawerToggle = styled(IconButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n transform: translate(22px, calc(50% - 5.5px));\n transition: all 225ms ", " 0ms !important;\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"], ["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n transform: translate(22px, calc(50% - 5.5px));\n transition: all 225ms ", " 0ms !important;\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"])), function (props) { return props.theme.spacing(2); }, motion.easeInOut, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
|
|
43
|
+
export var DrawerToggleHitboxContent = styled('span')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
49
44
|
? props.theme.palette.primary.main
|
|
50
45
|
: props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
|
|
51
|
-
export var StyledAside = styled('aside')(
|
|
52
|
-
export var StyledNav = styled('nav')(
|
|
46
|
+
export var StyledAside = styled('aside')(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
|
|
47
|
+
export var StyledNav = styled('nav')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: -1px;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor 225ms ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: background-color 225ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: -1px;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor 225ms ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: background-color 225ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
53
48
|
? props.theme.palette.primary.main
|
|
54
49
|
: props.theme.palette.background.paper; }, function (props) {
|
|
55
50
|
return props.theme.palette.mode === 'dark'
|
|
@@ -68,37 +63,37 @@ export var StyledNav = styled('nav')(templateObject_11 || (templateObject_11 = _
|
|
|
68
63
|
? 'rgba(255, 255, 255, 0.24)'
|
|
69
64
|
: 'rgba(0, 0, 0, 0.24)';
|
|
70
65
|
});
|
|
71
|
-
export var StyledNavSecondary = styled('nav')(
|
|
66
|
+
export var StyledNavSecondary = styled('nav')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-end;\n margin-top: auto;\n overflow: hidden;\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-end;\n margin-top: auto;\n overflow: hidden;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
72
67
|
? props.theme.palette.primary.main
|
|
73
68
|
: props.theme.palette.background.paper; });
|
|
74
69
|
export var DrawerShadow = styled(Box, {
|
|
75
70
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
76
|
-
})(
|
|
71
|
+
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background: rgba(0,0,0,0.125);\n content: '';\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n position: fixed;\n top: 0;\n transition: left 225ms ", " 0ms;\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n }\n"], ["\n background: rgba(0,0,0,0.125);\n content: '';\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n position: fixed;\n top: 0;\n transition: left 225ms ", " 0ms;\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n }\n"])), function (props) { return props.isDrawerOpen
|
|
77
72
|
? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
|
|
78
73
|
: "".concat(DRAWER_WIDTH.Collapsed - 41, "px"); }, motion.easeInOut, function (props) { return props.theme.breakpoints.values.sm; }, function (props) {
|
|
79
74
|
return props.isDrawerOpen
|
|
80
75
|
? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
|
|
81
76
|
: "".concat(DRAWER_WIDTH.Collapsed - 33, "px");
|
|
82
77
|
});
|
|
83
|
-
export var NotchContainer = styled(Box)(
|
|
84
|
-
export var NotchBackground = styled(Box)(
|
|
78
|
+
export var NotchContainer = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -", ";\n position: relative;\n transition: width 225ms ", " 0ms !important;\n width: 100%;\n z-index: 9;\n"], ["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -", ";\n position: relative;\n transition: width 225ms ", " 0ms !important;\n width: 100%;\n z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, motion.easeInOut);
|
|
79
|
+
export var NotchBackground = styled(Box)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: ", ";\n flex: 1;\n height: auto;\n width: auto;\n"], ["\n background-color: ", ";\n flex: 1;\n height: auto;\n width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
85
80
|
? props.theme.palette.primary.main
|
|
86
81
|
: props.theme.palette.background.paper; });
|
|
87
|
-
export var NotchBackgroundClip = styled(Box)(
|
|
82
|
+
export var NotchBackgroundClip = styled(Box)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n clip-path: url(\"#notch\");\n display: flex;\n height: 85px;\n width: 45px;\n"], ["\n background-color: ", ";\n clip-path: url(\"#notch\");\n display: flex;\n height: 85px;\n width: 45px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
88
83
|
? props.theme.palette.primary.main
|
|
89
84
|
: props.theme.palette.background.paper; });
|
|
90
|
-
export var NotchSeemMask = styled(Box)(
|
|
85
|
+
export var NotchSeemMask = styled(Box)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background-color: ", ";\n height: 90px;\n position: absolute;\n right: 25px;\n top: -2px;\n width: calc(100% - 25px);\n"], ["\n background-color: ", ";\n height: 90px;\n position: absolute;\n right: 25px;\n top: -2px;\n width: calc(100% - 25px);\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
91
86
|
? props.theme.palette.primary.main
|
|
92
87
|
: props.theme.palette.background.paper; });
|
|
93
88
|
export var StyledDrawer = styled(Drawer, {
|
|
94
89
|
shouldForwardProp: function (prop) { return prop !== 'open'; }
|
|
95
|
-
})(
|
|
90
|
+
})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n transition: width 225ms ", " 0ms !important;\n white-space: nowrap;\n width: ", ";\n\n @media (min-width: ", ") {\n width: ", ";\n }\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width 225ms ", " 0ms !important;\n visibility: visible;\n width: ", ";\n\n [theme.breakpoints.up('sm')] {\n width: ", ";\n }\n }\n"], ["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n transition: width 225ms ", " 0ms !important;\n white-space: nowrap;\n width: ", ";\n\n @media (min-width: ", ") {\n width: ", ";\n }\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width 225ms ", " 0ms !important;\n visibility: visible;\n width: ", ";\n\n [theme.breakpoints.up('sm')] {\n width: ", ";\n }\n }\n"])), motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
|
|
96
91
|
return props.theme.palette.mode === 'dark'
|
|
97
92
|
? props.theme.palette.primary.contrastText
|
|
98
93
|
: props.theme.palette.getContrastText(props.theme.palette.background.paper);
|
|
99
94
|
}, motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
|
|
100
|
-
export var StyledNotchShadow = styled(Box)(
|
|
101
|
-
export var StyledNotchShadowMask = styled(Box)(
|
|
95
|
+
export var StyledNotchShadow = styled(Box)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n border-radius: 50%;\n box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n height: 13px;\n left: 13px;\n position: absolute;\n top: -7px;\n width: 25px;\n z-index: -2;\n"], ["\n border-radius: 50%;\n box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n height: 13px;\n left: 13px;\n position: absolute;\n top: -7px;\n width: 25px;\n z-index: -2;\n"])));
|
|
96
|
+
export var StyledNotchShadowMask = styled(Box)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n height: 13px;\n left: 13px;\n position: absolute;\n top: -1px;\n width: 25px;\n z-index: -1;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n height: 13px;\n left: 13px;\n position: absolute;\n top: -1px;\n width: 25px;\n z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
102
97
|
? props.theme.palette.primary.main
|
|
103
98
|
: props.theme.palette.background.paper; });
|
|
104
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18
|
|
99
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { motion } from 'framer-motion';
|
|
14
14
|
var Path = function (props) { return (_jsx(motion.path, __assign({ fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round' }, props))); };
|
|
15
|
-
|
|
15
|
+
var ToggleSearchX = function () {
|
|
16
16
|
return (_jsxs("svg", __assign({ width: '40', height: '40', viewBox: '0 0 50 50', stroke: 'inherit' }, { children: [_jsx(Path, { variants: {
|
|
17
17
|
closed: { d: 'M 26 26 L 35 35' },
|
|
18
18
|
open: { d: 'M 15 15 L 35 35' }
|
|
@@ -30,3 +30,4 @@ export var ToggleSearchX = function () {
|
|
|
30
30
|
open: { opacity: 0, scale: 0 }
|
|
31
31
|
} })] })));
|
|
32
32
|
};
|
|
33
|
+
export default ToggleSearchX;
|
|
@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { motion } from 'framer-motion';
|
|
14
14
|
var Path = function (props) { return (_jsx(motion.path, __assign({ fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round' }, props))); };
|
|
15
|
-
|
|
15
|
+
var ToggleX = function () {
|
|
16
16
|
return (_jsxs("svg", __assign({ width: "40", height: "40", viewBox: "0 0 50 50" }, { children: [_jsx(Path, { variants: {
|
|
17
17
|
closed: { d: 'M 10 15 L 40 15' },
|
|
18
18
|
open: { d: 'M 15 15 L 35 35' }
|
|
@@ -24,3 +24,4 @@ export var ToggleX = function () {
|
|
|
24
24
|
open: { d: 'M 15 35 L 35 15' }
|
|
25
25
|
} })] })));
|
|
26
26
|
};
|
|
27
|
+
export default ToggleX;
|
|
@@ -17,6 +17,7 @@ interface VerticalNavigationProps {
|
|
|
17
17
|
setIsPersistent?: any;
|
|
18
18
|
appRootID?: string;
|
|
19
19
|
hasAvatar?: boolean;
|
|
20
|
+
avatarPanelLogoutString?: string;
|
|
20
21
|
avatarPanelOnClickSwitchDirection?: any;
|
|
21
22
|
avatarPanelOnClickLogout?: any;
|
|
22
23
|
avatarPanelOnClickViewProfile?: any;
|
|
@@ -23,7 +23,7 @@ import { Person, Settings } from '@mui/icons-material';
|
|
|
23
23
|
var AvatarPanel = function (props) {
|
|
24
24
|
var _a;
|
|
25
25
|
var theme = useTheme();
|
|
26
|
-
var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout,
|
|
26
|
+
var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote;
|
|
27
27
|
useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
|
|
28
28
|
avatarName
|
|
29
29
|
]);
|
|
@@ -43,7 +43,7 @@ var AvatarPanel = function (props) {
|
|
|
43
43
|
position: 'absolute',
|
|
44
44
|
right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
|
|
45
45
|
top: theme.spacing(1)
|
|
46
|
-
}, onClick: avatarPanelOnClickLogout, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children:
|
|
46
|
+
}, onClick: avatarPanelOnClickLogout, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ style: {
|
|
47
47
|
alignItems: 'center',
|
|
48
48
|
display: 'flex',
|
|
49
49
|
flexDirection: 'column'
|
package/package.json
CHANGED
|
@@ -34,6 +34,7 @@ export interface IVerticalNavigationProps {
|
|
|
34
34
|
setIsPersistent?: any;
|
|
35
35
|
appRootID?: string;
|
|
36
36
|
hasAvatar?: boolean;
|
|
37
|
+
avatarPanelLogoutString?: string;
|
|
37
38
|
avatarPanelOnClickSwitchDirection?: any;
|
|
38
39
|
avatarPanelOnClickLogout?: any;
|
|
39
40
|
avatarPanelOnClickViewProfile?: any;
|
|
@@ -6,7 +6,7 @@ export interface IAvatarMenuItemProps {
|
|
|
6
6
|
export interface IAvatarPanelProps {
|
|
7
7
|
avatarName: string;
|
|
8
8
|
editProfileText?: string;
|
|
9
|
-
|
|
9
|
+
avatarPanelLogoutString?: string;
|
|
10
10
|
avatarPanelOnClickSwitchDirection?: any;
|
|
11
11
|
avatarPanelOnClickLogout?: any;
|
|
12
12
|
avatarPanelOnClickViewProfile?: any;
|