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

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.
Files changed (8) hide show
  1. package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts +1 -0
  2. package/components/navigation/VerticalNavigation/VerticalNavigation.js +26 -12
  3. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js +1 -1
  4. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js +1 -1
  5. package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +1 -1
  6. package/package.json +2 -1
  7. package/utils/constants.d.ts +1 -0
  8. package/utils/constants.js +1 -0
package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts CHANGED
@@ -14,6 +14,7 @@ interface VerticalNavigationProps {
14
14
  isDrawerOpen?: boolean;
15
15
  isPersistent?: boolean;
16
16
  setIsPersistent?: any;
17
+ appRootID?: string;
17
18
  }
18
19
  declare const VerticalNavigation: (props: VerticalNavigationProps) => React.ReactElement;
19
20
  export default VerticalNavigation;
package/components/navigation/VerticalNavigation/VerticalNavigation.js CHANGED
@@ -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 React, { useEffect } from 'react';
14
14
  import { useTheme } from '@mui/material/styles';
15
- import { Avatar, Modal, List, Tooltip } from '../../../index';
15
+ import { Avatar, List, Tooltip } from '../../../index';
16
16
  import { Box } from '@mui/material';
17
17
  import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
18
18
  import { AppSwitcher } from '@learningpool/app-switcher';
@@ -23,10 +23,11 @@ import { ListItem, ListItemButton, ListItemIcon, ListItemText } from './Vertical
23
23
  import AvatarPanel from './AvatarPanel';
24
24
  import { motion } from '../../../utils/theme';
25
25
  import { handleAvatarInitials } from '../../../utils/helpers';
26
+ import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
26
27
  var VerticalNavigation = function (props) {
27
28
  var _a, _b;
28
29
  var theme = useTheme();
29
- var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken;
30
+ var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken;
30
31
  var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
31
32
  var propIsPersistent = typeof (props === null || props === void 0 ? void 0 : props.isPersistent) === 'boolean' ? props.isPersistent : undefined;
32
33
  var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
@@ -37,6 +38,18 @@ var VerticalNavigation = function (props) {
37
38
  useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
38
39
  useEffect(function () { return setIsDrawerOpen(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false); }, [propIsPersistent]);
39
40
  useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
41
+ // This fixes an issue with how MUI handles the modal and aria-hidden.
42
+ // When open, the Modal adds aria-hidden="true" to a top-level element,
43
+ // which causes some screen readers to annouce the elements as "blank".
44
+ // This fix just overrides the default aria-hidden attribute.
45
+ //
46
+ // https://github.com/mui/material-ui/issues/19450
47
+ useEffect(function () {
48
+ if (isDrawerOpen) {
49
+ var root = window.document.getElementById(appRootID !== null && appRootID !== void 0 ? appRootID : DEFAULT_REACT_APP_ID);
50
+ root === null || root === void 0 ? void 0 : root.removeAttribute('aria-hidden');
51
+ }
52
+ }, [isDrawerOpen]);
40
53
  var handleIsPersistent = function () {
41
54
  var _a, _b;
42
55
  if (props === null || props === void 0 ? void 0 : props.setIsPersistent) {
@@ -88,7 +101,7 @@ var VerticalNavigation = function (props) {
88
101
  fill: theme.palette.mode === 'dark'
89
102
  ? theme.palette.primary.contrastText
90
103
  : theme.palette.primary.main
91
- } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper' }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation Menus' : 'Open Navigation Menus', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation" }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
104
+ } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper' }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation' : 'Open Navigation', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation" }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
92
105
  ? (_jsx(ChevronLeft, { style: {
93
106
  fontSize: '1.75rem',
94
107
  height: '1.75rem',
@@ -109,7 +122,7 @@ var VerticalNavigation = function (props) {
109
122
  top: '50%',
110
123
  transform: 'translate(50%, -50%)',
111
124
  width: '50px'
112
- } }), _jsxs(DrawerToggle, __assign({ onClick: handleIsPersistent, "aria-label": isDrawerOpen ? 'Close Navigation Menus' : 'Open Navigation Menus', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", style: {
125
+ } }), _jsxs(DrawerToggle, __assign({ onClick: handleIsPersistent, "aria-label": isDrawerOpen ? 'Close Navigation' : 'Open Navigation', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", style: {
113
126
  display: 'none',
114
127
  position: 'fixed',
115
128
  top: '50%',
@@ -160,7 +173,7 @@ var VerticalNavigation = function (props) {
160
173
  backgroundColor: theme.palette.mode === 'dark'
161
174
  ? theme.palette.primary.main
162
175
  : theme.palette.background.paper
163
- } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary navigation menu' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: {
176
+ } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: {
164
177
  width: DRAWER_WIDTH.Expanded,
165
178
  backgroundColor: theme.palette.mode === 'dark'
166
179
  ? theme.palette.primary.main
@@ -175,7 +188,7 @@ var VerticalNavigation = function (props) {
175
188
  justifyContent: 'center'
176
189
  } }, { children: _jsx(AppSwitcher, { apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '' }) })) })), _jsx(ListItemText, { primary: 'App switcher', isDrawerOpen: isDrawerOpen || isPersistent })] })) })))
177
190
  : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true }))); }), avatarName
178
- ? (_jsx(VerticalNavigationItem, { label: avatarName, icon: _jsx(Avatar, __assign({ style: {
191
+ ? (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
179
192
  // backgroundColor: mainTheme.colorButtonText,
180
193
  // color: mainTheme.colorButton,
181
194
  fontSize: '0.75rem',
@@ -189,12 +202,13 @@ var VerticalNavigation = function (props) {
189
202
  transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important")
190
203
  }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, { avatarName: avatarName }), isDrawerOpen: isDrawerOpen }))
191
204
  : null] }))] })) }))] }))); };
192
- return (_jsxs(StyledAside, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
205
+ return (_jsxs(StyledAside, __assign({ "aria-label": "Site navigation" }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
193
206
  display: isPersistent ? 'none' : 'block'
194
- } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), hideBackdrop: isPersistent, disableScrollLock: isPersistent, disableEnforceFocus: isPersistent, style: {
195
- right: isPersistent ? 'auto' : 0 // @TODO: rtl support
196
- } }, { children: _jsx(StyledDrawer, __assign({ "aria-label": 'Navigation Menus', id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), ModalProps: {
197
- keepMounted: true
198
- }, variant: 'permanent' }, { children: listContent() })) }))] }));
207
+ } }), _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: isDrawerOpen ? 'temporary' : 'permanent', ModalProps: {
208
+ keepMounted: true,
209
+ disablePortal: true,
210
+ open: isDrawerOpen,
211
+ onClose: toggleDrawer(false)
212
+ } }, { children: listContent() }))] })));
199
213
  };
200
214
  export default VerticalNavigation;
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js CHANGED
@@ -71,7 +71,7 @@ var VerticalNavigationItem = function (props) {
71
71
  ? null
72
72
  : handlePopoverOpen(event); }, onBlur: function () { return fullHeightFlyout
73
73
  ? null
74
- : handlePopoverClose(); }, "aria-expanded": (children && children.length > 0) ? open : null, "aria-haspopup": (children && children.length > 0) ? 'true' : null, "aria-current": isActive ? 'page' : null, role: (children && children.length > 0) ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
74
+ : handlePopoverClose(); }, "aria-expanded": (children && children.length > 0) || fullHeightFlyout ? open : null, "aria-current": isActive ? 'page' : null, role: (children && children.length > 0) || fullHeightFlyout ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
75
75
  '& .MuiTypography-root': {
76
76
  fontSize: isSecondary ? '14px' : 'inherit'
77
77
  }
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js CHANGED
@@ -18,7 +18,7 @@ var VerticalNavigationItemFlyoutMenu = function (props) {
18
18
  var _a = React.useState(false), flyoutHovered = _a[0], setFlyoutHovered = _a[1];
19
19
  var open = flyoutHovered || (props === null || props === void 0 ? void 0 : props.open);
20
20
  if (fullHeightFlyout && content) {
21
- return (_jsx(FullHeightFlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open }, { children: _jsxs(FullHeightFlyoutMenuWrapper, __assign({ open: open }, { children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] })) })));
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
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
24
24
  // @ts-expect-error
package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js CHANGED
@@ -80,7 +80,7 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
80
80
  : props.theme.palette.background.paper; });
81
81
  export var StyledDrawer = styled(Drawer, {
82
82
  shouldForwardProp: function (prop) { return prop !== 'open'; }
83
- })(templateObject_13 || (templateObject_13 = __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 [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 [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) {
83
+ })(templateObject_13 || (templateObject_13 = __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 !important;\n width: ", ";\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 !important;\n width: ", ";\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) {
84
84
  return props.theme.palette.mode === 'dark'
85
85
  ? props.theme.palette.primary.contrastText
86
86
  : props.theme.palette.getContrastText(props.theme.palette.background.paper);
package/package.json CHANGED
@@ -9,13 +9,14 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.6.0-beta.4",
12
+ "version": "1.6.0-beta.5",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",
16
16
  "dependencies": {
17
17
  "@emotion/react": "^11.7.1",
18
18
  "@emotion/styled": "^11.6.0",
19
+ "@learningpool/design-tokens": "^1.1.0-beta.7",
19
20
  "@learningpool/app-switcher": "1.1.0-beta.4",
20
21
  "@mui/icons-material": "^5.8.4",
21
22
  "@mui/material": "^5.8.5",
package/utils/constants.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare const DEFAULT_REACT_APP_ID = "root";
1
2
  export declare const MOBILE_NAV_PANEL_TYPES: {
2
3
  DRAWER: string;
3
4
  SEARCH: string;
package/utils/constants.js CHANGED
@@ -1,3 +1,4 @@
1
+ export var DEFAULT_REACT_APP_ID = 'root';
1
2
  export var MOBILE_NAV_PANEL_TYPES = {
2
3
  DRAWER: 'drawer',
3
4
  SEARCH: 'search',