@learningpool/ui 1.7.7 → 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/assets/Images.js +10 -1
- package/components/navigation/VerticalNavigation/VerticalNavigation.js +5 -3
- 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/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js +1 -1
- package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +2 -6
- package/package.json +1 -1
package/assets/Images.js
CHANGED
|
@@ -13,7 +13,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
import { createSvgIcon } from '@mui/material/utils';
|
|
14
14
|
export var StreamSuiteLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", "data-name": "Layer 1", viewBox: "0 0 447.9 484.8" }, { children: _jsx("path", { d: "M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z" }) })), 'StreamSuite');
|
|
15
15
|
export var LearningPoolLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 804 174" }, { children: _jsx("path", { fill: "#0069B4", d: "M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z" }) })), 'LearningPool');
|
|
16
|
-
|
|
16
|
+
// VerticleNavigation Notch SVG
|
|
17
|
+
//
|
|
18
|
+
// This SVG is used to create the cutout notch shape for the VerticleNavigation component.
|
|
19
|
+
// The shape is created using a CSS clip-path that points to the ID value below.
|
|
20
|
+
//
|
|
21
|
+
// Generally, image editing programs will output absolute path values for SVGs.
|
|
22
|
+
// Our notch element needs relative path values to work with 'objectBoundingBox'.
|
|
23
|
+
// So we use this tool to covert the absoulte paths to relative path values:
|
|
24
|
+
// https://yoksel.github.io/relative-clip-path/
|
|
25
|
+
export var NotchSVG = createSvgIcon(_jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: "M0.833,0.253 C0.949,0.227,1,0.164,1,0.094 V0 H0 v0.5 V1 h1 v-0.094 c0,-0.069,-0.051,-0.133,-0.167,-0.159 c-0.207,-0.045,-0.322,-0.145,-0.322,-0.247 C0.509,0.398,0.624,0.298,0.833,0.253" }) })), 'Notch');
|
|
17
26
|
export var NotchMiniSVG = createSvgIcon(_jsxs("svg", __assign({ className: 'notch-mini-svg', width: "100%", height: "100%", viewBox: "0 0 15 26" }, { children: [_jsx("path", { d: "M15 13.09c0 4.456-3.358 8.069-7.5 8.069-4.142 0-7.5-3.613-7.5-8.07 0-4.456 3.358-8.068 7.5-8.068 4.142 0 7.5 3.612 7.5 8.069Z" }), _jsx("path", { d: "M7.333 26c.167-2.869-1.666-5.2-2.666-5.559H10L7.333 26ZM7.333 0C7.5 2.869 5.667 5.2 4.667 5.559H10L7.333 0Z" })] })), 'NotchMini');
|
|
18
27
|
export var NotchExtendSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-extend-svg', viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" }) })), 'NotchExtend');
|
|
19
28
|
export var NotchBackgroundSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-background-svg', viewBox: "0 0 25 865", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "#fff", fillRule: "evenodd", clipRule: "evenodd", d: "M25 0H0V865H25V468.5V466.451C24.6432 460.704 21.3624 455.984 18.6792 453.948C9.58731 451.059 3 442.549 3 432.5C3 422.927 8.97844 414.75 17.4054 411.5H17C19.7393 410.587 24.563 405.088 25 398.049V396V0Z" }) })), 'NotchBackground');
|
|
@@ -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';
|
|
@@ -186,14 +187,15 @@ var VerticalNavigation = function (props) {
|
|
|
186
187
|
flex: '1 1px',
|
|
187
188
|
marginTop: '-1px',
|
|
188
189
|
overflow: 'auto',
|
|
189
|
-
position: 'relative'
|
|
190
|
+
position: 'relative',
|
|
191
|
+
zIndex: 10
|
|
190
192
|
} }, { children: _jsx(StyledNav, __assign({ tabIndex: -1, "aria-label": 'Primary' }, { children: _jsx(List, __assign({ style: {
|
|
191
193
|
height: '100%',
|
|
192
194
|
width: DRAWER_WIDTH.Expanded,
|
|
193
195
|
marginTop: "-".concat(theme.spacing(0.5), " !important")
|
|
194
|
-
} }, { 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
|
|
195
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) }))
|
|
196
|
-
: 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: {
|
|
197
199
|
fontSize: '0.75rem',
|
|
198
200
|
height: 32,
|
|
199
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;
|
|
@@ -43,6 +43,6 @@ export var FullHeightFlyoutMenuWrapper = styled('div', {
|
|
|
43
43
|
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
|
|
44
44
|
? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
|
|
45
45
|
: "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
|
|
46
|
-
export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n content: '';\n display: block;\n height:
|
|
46
|
+
export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n content: '';\n display: block;\n height: 82px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 63px;\n width: 80px;\n z-index: -1;\n"], ["\n background-color: ", ";\n content: '';\n display: block;\n height: 82px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 63px;\n width: 80px;\n z-index: -1;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '-40px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '-40px' : 'auto'; });
|
|
47
47
|
export var NotchMini = styled(NotchMiniSVG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"], ["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '-12px' : 0; }, function (props) { return props.theme.direction === 'rtl' ? '-12px' : 0; });
|
|
48
48
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -30,11 +30,7 @@ export var DrawerHeader = styled(animated.div, {
|
|
|
30
30
|
: "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
|
|
31
31
|
export var DrawerToggle = styled(IconButton, {
|
|
32
32
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
33
|
-
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n
|
|
34
|
-
? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important'
|
|
35
|
-
: 'auto !important'; }, function (props) { return props.theme.direction === 'rtl'
|
|
36
|
-
? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important'
|
|
37
|
-
: 'auto !important'; }, function (props) { return (props.theme.direction === 'rtl' ? '180deg' : 0); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
|
|
33
|
+
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n left: ", ";\n right: ", ";\n transform: translate(0, calc(50% - 4.5px)) rotate(", ");\n transition: all ", "ms ", ";\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 left: ", ";\n right: ", ";\n transform: translate(0, calc(50% - 4.5px)) rotate(", ");\n transition: all ", "ms ", ";\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); }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? '180deg' : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
|
|
38
34
|
export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __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 getNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(0.5); });
|
|
39
35
|
export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
|
|
40
36
|
export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: background-color ", "ms ", ";\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 ", "ms ", ";\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 overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: background-color ", "ms ", ";\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 ", "ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
|
|
@@ -63,7 +59,7 @@ export var DrawerShadow = styled(Box, {
|
|
|
63
59
|
: 0; }, function (props) { return props.theme.direction === 'rtl'
|
|
64
60
|
? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
|
|
65
61
|
: 0; });
|
|
66
|
-
export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -
|
|
62
|
+
export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -3px;\n position: relative;\n transition: width ", "ms ", ";\n width: 100%;\n z-index: 9;\n"], ["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -3px;\n position: relative;\n transition: width ", "ms ", ";\n width: 100%;\n z-index: 9;\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
|
|
67
63
|
export var NotchBackground = styled(Box)(templateObject_10 || (templateObject_10 = __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 getNavigationBackground(props.theme); });
|
|
68
64
|
export var NotchBackgroundClip = styled(Box)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n clip-path: url(\"#notch\");\n display: flex;\n height: 85px;\n transform: rotate(", ");\n width: 45px;\n"], ["\n background-color: ", ";\n clip-path: url(\"#notch\");\n display: flex;\n height: 85px;\n transform: rotate(", ");\n width: 45px;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return (props.theme.direction === 'rtl' ? '180deg' : 0); });
|
|
69
65
|
export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n height: 90px;\n position: absolute;\n left: ", ";\n right: ", ";\n top: -2px;\n width: calc(100% - ", "px);\n"], ["\n background-color: ", ";\n height: 90px;\n position: absolute;\n left: ", ";\n right: ", ";\n top: -2px;\n width: calc(100% - ", "px);\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'rtl' ? "".concat(NOTCH.Width, "px") : 'auto'; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(NOTCH.Width, "px") : 'auto'; }, NOTCH.Width);
|