@learningpool/ui 1.7.8 → 1.7.9
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/VerticalNavigation/VerticalNavigation.js +3 -2
- package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js +5 -5
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js +1 -1
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js +2 -2
- package/package.json +1 -1
|
@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
20
|
}
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
|
+
import { createElement as _createElement } from "react";
|
|
23
24
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
25
|
import React, { useEffect } from 'react';
|
|
25
26
|
import { useTheme } from '@mui/material/styles';
|
|
@@ -192,9 +193,9 @@ var VerticalNavigation = function (props) {
|
|
|
192
193
|
height: '100%',
|
|
193
194
|
width: DRAWER_WIDTH.Expanded,
|
|
194
195
|
marginTop: "-".concat(theme.spacing(0.5), " !important")
|
|
195
|
-
} }, { children: items && items.length > 0 && items.map(function (item, index) { return (
|
|
196
|
+
} }, { children: items && items.length > 0 && items.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: { width: DRAWER_WIDTH.Expanded } }, { children: [hasStreamHome
|
|
196
197
|
? (_jsx(VerticalNavigationItem, { label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: useFadeIn(animationCount, incrementAnimationCount) }))
|
|
197
|
-
: null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (
|
|
198
|
+
: null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
|
|
198
199
|
fontSize: '0.75rem',
|
|
199
200
|
height: 32,
|
|
200
201
|
width: 32
|
|
@@ -49,19 +49,19 @@ var AvatarPanel = function (props) {
|
|
|
49
49
|
} }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ style: {
|
|
50
50
|
marginBottom: theme.spacing(2),
|
|
51
51
|
maxWidth: '14rem'
|
|
52
|
-
} }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
|
|
52
|
+
} }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
|
|
53
53
|
// TODO: figure out if these are links or buttons
|
|
54
54
|
// @ts-expect-error
|
|
55
55
|
, __assign({
|
|
56
56
|
// TODO: figure out if these are links or buttons
|
|
57
57
|
// @ts-expect-error
|
|
58
|
-
component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: { minWidth: theme.spacing(5) } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledButton
|
|
58
|
+
component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: { minWidth: theme.spacing(5) } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledButton
|
|
59
59
|
// @ts-expect-error
|
|
60
60
|
, __assign({
|
|
61
61
|
// @ts-expect-error
|
|
62
|
-
component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount),
|
|
62
|
+
component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
|
|
63
63
|
avatarPanelSettingItems.length > 0 &&
|
|
64
|
-
avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
|
|
64
|
+
avatarPanelSettingItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
|
|
65
65
|
// TODO: figure out if these are links or buttons
|
|
66
66
|
// @ts-expect-error
|
|
67
67
|
, __assign({
|
|
@@ -69,6 +69,6 @@ var AvatarPanel = function (props) {
|
|
|
69
69
|
// @ts-expect-error
|
|
70
70
|
component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
|
|
71
71
|
minWidth: theme.spacing(5)
|
|
72
|
-
} }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))] })), _jsx(Box, __assign({ className: 'avatar-panel-footnote' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
|
|
72
|
+
} }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index))); }) }))] })), _jsx(Box, __assign({ className: 'avatar-panel-footnote' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
|
|
73
73
|
};
|
|
74
74
|
export default AvatarPanel;
|
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js
CHANGED
|
@@ -91,6 +91,6 @@ var VerticalNavigationItem = function (props) {
|
|
|
91
91
|
'& .MuiTypography-root': {
|
|
92
92
|
fontSize: '14px !important'
|
|
93
93
|
}
|
|
94
|
-
} })] }), label) }))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
|
|
94
|
+
} })] }), label) }), "".concat(childItem.label, " - ").concat(index))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
|
|
95
95
|
};
|
|
96
96
|
export default VerticalNavigationItem;
|
|
@@ -20,10 +20,10 @@ var VerticalNavigationItemFlyoutMenu = function (props) {
|
|
|
20
20
|
if (fullHeightFlyout && content) {
|
|
21
21
|
return (_jsx(FullHeightFlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, id: "avatar-panel" }, { children: _jsxs(FullHeightFlyoutMenuWrapper, __assign({ open: open }, { children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] })) })));
|
|
22
22
|
}
|
|
23
|
-
return (_jsx(FlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setFlyoutHovered(true); }, onMouseLeave: function () { return setFlyoutHovered(false); }, onFocus: function () { return setFlyoutHovered(true); }, onBlur: function () { return setFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
|
|
23
|
+
return (_jsx(FlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setFlyoutHovered(true); }, onMouseLeave: function () { return setFlyoutHovered(false); }, onFocus: function () { return setFlyoutHovered(true); }, onBlur: function () { return setFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
|
|
24
24
|
// @ts-expect-error
|
|
25
25
|
, __assign({
|
|
26
26
|
// @ts-expect-error
|
|
27
|
-
component: Link, role: 'link', onClick: childItem.onClick }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) })); }) }))] })) })));
|
|
27
|
+
component: Link, role: 'link', onClick: childItem.onClick }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }, "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
|
|
28
28
|
};
|
|
29
29
|
export default VerticalNavigationItemFlyoutMenu;
|