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

package/components/navigation/MobileNavigation/MobileNavigationToggleX.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ToggleX: () => React.ReactElement;

package/components/navigation/MobileNavigation/MobileNavigationToggleX.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+var Path = function (props) { return (_jsx(motion.path, __assign({ fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round' }, props))); };
+export var ToggleX = function () {
+    return (_jsxs("svg", __assign({ width: "40", height: "40", viewBox: "0 0 50 50" }, { children: [_jsx(Path, { variants: {
+                    closed: { d: 'M 10 15 L 40 15' },
+                    open: { d: 'M 15 15 L 35 35' }
+                } }), _jsx(Path, { d: 'M 10 25 L 40 25', variants: {
+                    closed: { opacity: 1, scale: 1 },
+                    open: { opacity: 0, scale: 0 }
+                } }), _jsx(Path, { variants: {
+                    closed: { d: 'M 10 35 L 40 35' },
+                    open: { d: 'M 15 35 L 35 15' }
+                } })] })));
+};

package/components/navigation/MobileNavigation/MobileNavigationToggleXStyles.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/navigation/MobileNavigation/MobileNavigationToggleXStyles.js

@@ -0,0 +1,10 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { ButtonBase } from '../../../index';
+import { styled } from '@mui/material/styles';
+export var StyledButtonBase = styled(ButtonBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  stroke: ", ";\n  padding: 0px;\n  min-width: 80px;\n  max-width: 168px;\n  height: 56px;\n"], ["\n  stroke: ", ";\n  padding: 0px;\n  min-width: 80px;\n  max-width: 168px;\n  height: 56px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.text.primary; });
+var templateObject_1;

package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts

@@ -14,6 +14,7 @@ interface VerticalNavigationProps {
     isDrawerOpen?: boolean;
     isPersistent?: boolean;
     setIsPersistent?: any;
+    appRootID?: string;
 }
 declare const VerticalNavigation: (props: VerticalNavigationProps) => React.ReactElement;
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
-import { Avatar, Modal, List, Tooltip } from '../../../index';
+import { Avatar, List, Tooltip } from '../../../index';
 import { Box } from '@mui/material';
 import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
 import { AppSwitcher } from '@learningpool/app-switcher';
@@ -22,10 +22,12 @@ import { DRAWER_WIDTH, DrawerHeader, DrawerToggle, DrawerToggleHitboxContent, St
 import { ListItem, ListItemButton, ListItemIcon, ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles';
 import AvatarPanel from './AvatarPanel';
 import { motion } from '../../../utils/theme';
+import { handleAvatarInitials } from '../../../utils/helpers';
+import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
 var VerticalNavigation = function (props) {
     var _a, _b;
     var theme = useTheme();
-    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;
+    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;
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
     var propIsPersistent = typeof (props === null || props === void 0 ? void 0 : props.isPersistent) === 'boolean' ? props.isPersistent : undefined;
     var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
@@ -36,6 +38,18 @@ var VerticalNavigation = function (props) {
     useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
     useEffect(function () { return setIsDrawerOpen(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false); }, [propIsPersistent]);
     useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
+    // This fixes an issue with how MUI handles the modal and aria-hidden.
+    // When open, the Modal adds aria-hidden="true" to a top-level element,
+    // which causes some screen readers to annouce the elements as "blank".
+    // This fix just overrides the default aria-hidden attribute.
+    //
+    // https://github.com/mui/material-ui/issues/19450
+    useEffect(function () {
+        if (isDrawerOpen) {
+            var root = window.document.getElementById(appRootID !== null && appRootID !== void 0 ? appRootID : DEFAULT_REACT_APP_ID);
+            root === null || root === void 0 ? void 0 : root.removeAttribute('aria-hidden');
+        }
+    }, [isDrawerOpen]);
     var handleIsPersistent = function () {
         var _a, _b;
         if (props === null || props === void 0 ? void 0 : props.setIsPersistent) {
@@ -45,18 +59,6 @@ var VerticalNavigation = function (props) {
         }
         setIsPersistent(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false);
     };
-    var handleAvatarInitials = function (avatarName) {
-        var _a, _b;
-        var firstInitial = avatarName.split('')[0] || '';
-        var secondInitial = '';
-        if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
-            firstInitial = avatarName.split(' ')[0][0];
-            if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
-            }
-        }
-        return "".concat(firstInitial).concat(secondInitial);
-    };
     var _e = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _e[0], setAvatarInitials = _e[1];
     var toggleDrawer = function (open) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -99,7 +101,7 @@ var VerticalNavigation = function (props) {
                                         fill: theme.palette.mode === 'dark'
                                             ? theme.palette.primary.contrastText
                                             : theme.palette.primary.main
-                                    } })) })), _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
+                                    } })) })), _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
                                 ? (_jsx(ChevronLeft, { style: {
                                         fontSize: '1.75rem',
                                         height: '1.75rem',
@@ -120,7 +122,7 @@ var VerticalNavigation = function (props) {
                             top: '50%',
                             transform: 'translate(50%, -50%)',
                             width: '50px'
-                        } }), _jsxs(DrawerToggle, __assign({ onClick: handleIsPersistent, "aria-label": isDrawerOpen ? 'Close Navigation Menus' : 'Open Navigation Menus', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", style: {
+                        } }), _jsxs(DrawerToggle, __assign({ onClick: handleIsPersistent, "aria-label": isDrawerOpen ? 'Close Navigation' : 'Open Navigation', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", style: {
                             display: 'none',
                             position: 'fixed',
                             top: '50%',
@@ -171,7 +173,7 @@ var VerticalNavigation = function (props) {
                     backgroundColor: theme.palette.mode === 'dark'
                         ? theme.palette.primary.main
                         : theme.palette.background.paper
-                } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary navigation menu' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: {
+                } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: {
                                 width: DRAWER_WIDTH.Expanded,
                                 backgroundColor: theme.palette.mode === 'dark'
                                     ? theme.palette.primary.main
@@ -186,7 +188,7 @@ var VerticalNavigation = function (props) {
                                                             justifyContent: 'center'
                                                         } }, { 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 })] })) })))
                                     : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true }))); }), avatarName
-                                    ? (_jsx(VerticalNavigationItem, { label: avatarName, icon: _jsx(Avatar, __assign({ style: {
+                                    ? (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
                                                 // backgroundColor: mainTheme.colorButtonText,
                                                 // color: mainTheme.colorButton,
                                                 fontSize: '0.75rem',
@@ -200,12 +202,13 @@ var VerticalNavigation = function (props) {
                                             transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important")
                                         }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, { avatarName: avatarName }), isDrawerOpen: isDrawerOpen }))
                                     : null] }))] })) }))] }))); };
-    return (_jsxs(StyledAside, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
+    return (_jsxs(StyledAside, __assign({ "aria-label": "Site navigation" }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
                     display: isPersistent ? 'none' : 'block'
-                } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), hideBackdrop: isPersistent, disableScrollLock: isPersistent, disableEnforceFocus: isPersistent, style: {
-                    right: isPersistent ? 'auto' : 0 // @TODO: rtl support
-                } }, { children: _jsx(StyledDrawer, __assign({ "aria-label": 'Navigation Menus', id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), ModalProps: {
-                        keepMounted: true
-                    }, variant: 'permanent' }, { children: listContent() })) }))] }));
+                } }), _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: isDrawerOpen ? 'temporary' : 'permanent', ModalProps: {
+                    keepMounted: true,
+                    disablePortal: true,
+                    open: isDrawerOpen,
+                    onClose: toggleDrawer(false)
+                } }, { children: listContent() }))] })));
 };
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js

@@ -71,7 +71,7 @@ var VerticalNavigationItem = function (props) {
                     ? null
                     : handlePopoverOpen(event); }, onBlur: function () { return fullHeightFlyout
                     ? null
-                    : 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: {
+                    : 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: {
                             '& .MuiTypography-root': {
                                 fontSize: isSecondary ? '14px' : 'inherit'
                             }

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js

@@ -18,7 +18,7 @@ var VerticalNavigationItemFlyoutMenu = function (props) {
     var _a = React.useState(false), flyoutHovered = _a[0], setFlyoutHovered = _a[1];
     var open = flyoutHovered || (props === null || props === void 0 ? void 0 : props.open);
     if (fullHeightFlyout && content) {
-        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] })) })));
+        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] })) })));
     }
     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
                         // @ts-expect-error

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -80,7 +80,7 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
     : props.theme.palette.background.paper; });
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(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  \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) {
+})(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) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);

package/index.d.ts

@@ -128,4 +128,5 @@ export { default as List } from './components/datadisplay/List/List';
 export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
+export { default as MobileNavigation } from './components/navigation/MobileNavigation/MobileNavigation';
 export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';

package/index.js

@@ -140,4 +140,5 @@ export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
 // Stream Suite components
+export { default as MobileNavigation } from './components/navigation/MobileNavigation/MobileNavigation';
 export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';

package/package.json

@@ -9,14 +9,15 @@
     "components",
     "ui"
   ],
-  "version": "1.6.0-beta.3",
+  "version": "1.6.0-beta.5",
   "private": false,
   "main": "index.js",
   "module": "index.js",
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@learningpool/app-switcher": "1.1.0-beta.2",
+    "@learningpool/design-tokens": "^1.1.0-beta.7",
+    "@learningpool/app-switcher": "1.1.0-beta.4",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.5",
     "@mui/x-data-grid": "^5.12.3",
@@ -28,6 +29,7 @@
     "anysort": "^2.0.0",
     "eslint-plugin-n": "^15.2.4",
     "focus-trap-react": "^8.11.0",
+    "framer-motion": "^6.5.1",
     "tss-react": "^3.3.6",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4"

package/utils/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_REACT_APP_ID = "root";
+export declare const MOBILE_NAV_PANEL_TYPES: {
+    DRAWER: string;
+    SEARCH: string;
+    AVATAR: string;
+};

package/utils/constants.js

@@ -0,0 +1,6 @@
+export var DEFAULT_REACT_APP_ID = 'root';
+export var MOBILE_NAV_PANEL_TYPES = {
+    DRAWER: 'drawer',
+    SEARCH: 'search',
+    AVATAR: 'avatar'
+};

package/utils/helpers.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Accepts a string and returns 2 characters (max) as initials e.g. AN from Avatar Name
+ * @param avatarName string - Expected full name but accepts any string
+ * @returns string
+ */
+export declare const handleAvatarInitials: (avatarName: string) => string;

package/utils/helpers.js

@@ -0,0 +1,17 @@
+/**
+ * Accepts a string and returns 2 characters (max) as initials e.g. AN from Avatar Name
+ * @param avatarName string - Expected full name but accepts any string
+ * @returns string
+ */
+export var handleAvatarInitials = function (avatarName) {
+    var _a, _b;
+    var firstInitial = avatarName.split('')[0] || '';
+    var secondInitial = '';
+    if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+        firstInitial = avatarName.split(' ')[0][0];
+        if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
+        }
+    }
+    return "".concat(firstInitial).concat(secondInitial);
+};

package/utils/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useCurrentWidth: () => number;

package/utils/hooks.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+var getWidth = function () {
+    var _a, _b;
+    return (_b = (_a = window.innerWidth) !== null && _a !== void 0 ? _a : document.documentElement.clientWidth) !== null && _b !== void 0 ? _b : document.body.clientWidth;
+};
+export var useCurrentWidth = function () {
+    // save current window width in the state object
+    var _a = useState(getWidth()), width = _a[0], setWidth = _a[1];
+    // in this case useEffect will execute only once because
+    // it does not have any dependencies.
+    useEffect(function () {
+        // timeoutId for debounce mechanism
+        var timeoutId;
+        var resizeListener = function () {
+            // prevent execution of previous setTimeout
+            clearTimeout(timeoutId);
+            // change width from the state object after 150 milliseconds
+            timeoutId = setTimeout(function () { return setWidth(getWidth()); }, 150);
+        };
+        // set resize listener
+        window.addEventListener('resize', resizeListener);
+        // clean up function
+        return function () {
+            // remove resize listener
+            window.removeEventListener('resize', resizeListener);
+        };
+    }, []);
+    return width;
+};