@learningpool/ui 1.7.0 → 1.7.2

package/components/navigation/MobileNavigation/MobileNavigation.js

@@ -58,16 +58,42 @@ var MobileNavigation = function (props) {
         Height: 50,
         Width: 50
     };
-    var BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item');
+    var BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = Array.from(document.querySelectorAll('.MuiBottomNavigationAction-root'));
     var positionMobileNotch = function () {
         var _a;
         var selectedDOMRect = (_a = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition);
     };
-    useEffect(function () { return positionMobileNotch(); }, [
+    // Set index value for nav items
+    BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS.forEach(function (e, i) {
+        e.addEventListener('click', function () {
+            setValue(i);
+        });
+    });
+    // Watch for changes to the navbar width anytime a drawer is opened/closed
+    var navBarRef = React.useRef(null);
+    var _k = React.useState(0), navBarWidth = _k[0], setNavBarWidth = _k[1];
+    useEffect(function () {
+        var handleResize = function () {
+            if (navBarRef.current) {
+                setNavBarWidth(navBarRef.current.offsetWidth);
+            }
+        };
+        var resizeObserver = new ResizeObserver(handleResize);
+        if (navBarRef.current) {
+            resizeObserver.observe(navBarRef.current);
+            handleResize();
+        }
+        return function () {
+            if (navBarRef.current) {
+                resizeObserver.unobserve(navBarRef.current);
+            }
+        };
+    }, [value]);
+    useEffect(function () { positionMobileNotch(); }, [
         value,
+        navBarWidth,
         windowWidth,
-        // Fix notch position if scrollbar is hidden/shown
         (_b = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()
     ]);
     useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
@@ -83,7 +109,7 @@ var MobileNavigation = function (props) {
         }
         hideNotch();
     }, [isDrawerOpen, isSearchOpen, isAvatarOpen]);
-    var _k = React.useState((_c = handleAvatarInitials(avatarName)) !== null && _c !== void 0 ? _c : 'AN'), avatarInitials = _k[0], setAvatarInitials = _k[1];
+    var _l = React.useState((_c = handleAvatarInitials(avatarName)) !== null && _c !== void 0 ? _c : 'AN'), avatarInitials = _l[0], setAvatarInitials = _l[1];
     var toggleDrawer = function (open, action) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -99,17 +125,14 @@ var MobileNavigation = function (props) {
         switch (action) {
             case MOBILE_NAV_PANEL_TYPES.SEARCH: {
                 setIsSearchOpen(open !== null && open !== void 0 ? open : !isSearchOpen);
-                setValue(1);
                 break;
             }
             case MOBILE_NAV_PANEL_TYPES.AVATAR: {
                 setIsAvatarOpen(open !== null && open !== void 0 ? open : !isAvatarOpen);
-                setValue(2);
                 break;
             }
             default: {
                 setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
-                setValue(0);
                 break;
             }
         }
@@ -140,7 +163,7 @@ var MobileNavigation = function (props) {
     var MobileNavigationButtonAnimation = useSpring(animationConfig.MobileNavigationButton);
     return (_jsxs(_Fragment, { children: [_jsx(SwipeableTemporaryDrawer, __assign({ isDrawerOpen: isDrawerOpen, setIsDrawerOpen: setIsDrawerOpen, items: items, secondaryItems: secondaryItems, label: 'Primary' }, rest)), hasSearch && (_jsx(SwipeableTemporarySearch, __assign({ isSearchOpen: isSearchOpen, setIsSearchOpen: setIsSearchOpen }, rest))), hasAvatar && (_jsx(SwipeableTemporaryAvatar, __assign({ isAvatarOpen: isAvatarOpen, setIsAvatarOpen: setIsAvatarOpen, avatarName: avatarName, mobileNavDirection: mobileNavDirection, setMobileNavDirection: setMobileNavDirection }, rest))), _jsxs(StyledPaper, __assign({ elevation: 3, 
                 // @ts-expect-error
-                component: animated.div, style: MobileNavigationPaperAnimation }, { children: [showNotchIndicator && _jsx(NotchIndicator, __assign({}, animationConfig.MobileNavigationNotch)), _jsxs(StyledBottomNavigation, __assign({ value: value, onChange: function (event, newValue) { return setValue(newValue); }, 
+                component: animated.div, style: MobileNavigationPaperAnimation, ref: navBarRef }, { children: [showNotchIndicator && _jsx(NotchIndicator, __assign({}, animationConfig.MobileNavigationNotch)), _jsxs(StyledBottomNavigation, __assign({ value: value, 
                         // @ts-expect-error
                         component: animated.div, style: __assign({ flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row' }, MobileNavigationAnimation) }, { children: [_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleX, { isOpen: isDrawerOpen }), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
                                 // @ts-expect-error

package/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.js

@@ -6,7 +6,7 @@ import { Avatar, Button, ListItemButton, Typography } from '../../../index';
 import { Drawer } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : props.theme.palette.text.primary; });
 export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'

package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.js

@@ -6,7 +6,7 @@ import { Box, List, ListItem, ListItemText, ListItemButton, Typography } from '.
 import { Drawer } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledSwipeableDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return props.theme.palette.mode === 'dark'
     ? '#003366'
     : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
     ? 'none'

package/components/navigation/MobileNavigation/MobileNavigationSearchStyles.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { SwipeableDrawer, OutlinedInput, InputLabel } from '../../../index';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableSearch = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"])));
+export var StyledSwipeableSearch = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; });
 export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? '#003366'
     : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'

package/components/navigation/MobileNavigation/MobileNavigationStyles.js

@@ -10,9 +10,9 @@ export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: 1000000000;\n"], ["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: 1000000000;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
+    : props.theme.palette.background.paper; }, function (props) { return props.theme.zIndex.appBar; });
 export var StyledNotchSVG = styled('svg', {
     shouldForwardProp: function (prop) { return prop !== 'mobileNotchPosition'; }
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"], ["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.7.0",
+  "version": "1.7.2",
   "private": false,
   "main": "index.js",
   "module": "index.js",