@learningpool/ui 1.7.1 → 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/package.json

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