@learningpool/ui 1.6.0-beta.9 → 1.6.1

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigationAvatarStyles.js

@@ -5,17 +5,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { Avatar, Button, ListItemButton, Typography } from '../../../index';
 import { Drawer } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { motion } from 'framer-motion';
+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'
     ? props.theme.palette.primary.contrastText
     : props.theme.palette.text.primary; });
-export var StyledBox = styled(motion.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'
+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'
     ? '#003366'
     : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
     ? 'none'
     : 'radial-gradient( circle farthest-corner at 10% 20%, #fdfbfb 0.1%, #ebedee 99.8% )'; }, function (props) { return props.theme.spacing(2); });
-export var StyledBoxProfile = styled(motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"])));
-export var StyledBoxProfileEdit = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var StyledBoxProfile = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"])));
+export var StyledBoxProfileEdit = styled(animated.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 export var StyledAvatarName = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.75rem;\n"], ["\n  color: ", ";\n  font-size: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : props.theme.palette.text.primary; });

package/dist/components/navigation/MobileNavigation/MobileNavigationDrawer.js

@@ -0,0 +1,71 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { List, ListItemText } from '../../../index';
+import { StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider, StyledListSecondaryItem, StyledDrawerLogo, StyledDrawerLogoText, StyledListSecondaryList, StyledListItemText, StyledListSecondaryButton, StyledChildList, StyledChildListItem, StyledChildListItemText, StyledListItemButton, StyledChildListItemButton } from './MobileNavigationDrawerStyles';
+import { StreamSuiteLogo } from '../../../assets/Images';
+import { animated } from '@react-spring/web';
+import { useStaggerAnimation } from '../../../utils/helpers';
+export default function SwipeableTemporaryDrawer(props) {
+    var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick;
+    var theme = useTheme();
+    var _a = React.useState(isDrawerOpen !== null && isDrawerOpen !== void 0 ? isDrawerOpen : false), isOpen = _a[0], setIsOpen = _a[1];
+    React.useEffect(function () { return handleOpenState(isDrawerOpen); }, [isDrawerOpen]);
+    var handleOpenState = function (open) {
+        setIsOpen(open);
+        setIsDrawerOpen(open);
+    };
+    var toggleDrawer = function (open) {
+        return function (event) {
+            if (event && event.type === 'keydown' &&
+                (event.key === 'Tab' ||
+                    event.key === 'Shift')) {
+                return;
+            }
+            handleOpenState(open);
+        };
+    };
+    // First item starts at 70ms
+    // see STAGGER_ITEMS_DELAY in helpers.js
+    var animationCount = 1;
+    var incrementAnimationCount = function () { return animationCount++; };
+    var list = function () { return (_jsxs(StyledBox, __assign({ onClick: toggleDrawer(false), onKeyDown: toggleDrawer(false) }, { children: [_jsxs(StyledDrawerLogo, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: [logo
+                        ? typeof logo === 'string'
+                            ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
+                            : logo
+                        : (_jsx(StreamSuiteLogo, { style: {
+                                fill: theme.palette.mode === 'dark'
+                                    ? theme.palette.primary.main
+                                    : theme.palette.primary.main
+                            } })), _jsx(StyledDrawerLogoText, __assign({ variant: 'body1' }, { children: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))] })), _jsx(List, { children: items && items.length > 0 && items.map(function (item, index) {
+                    var label = item.label, children = item.children;
+                    return (_jsxs(StyledListItem, __assign({ disablePadding: true, 
+                        // @ts-expect-error
+                        component: animated.li, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledListItemButton
+                            // whileHover={{ scale: 1.02 }}
+                            // whileTap={{ scale: 0.95 }}
+                            , __assign({}, item, { children: _jsx(StyledListItemText, { primary: label }) })), children && children.length > 0 && (_jsx(StyledChildList, __assign({ "aria-label": label }, { children: children.map(function (childItem) { return (_jsx(StyledChildListItem, { children: _jsx(StyledChildListItemButton
+                                    // whileHover={{ scale: 1.02 }}
+                                    // whileTap={{ scale: 0.95 }}
+                                    , __assign({}, childItem, { children: _jsx(StyledChildListItemText, { primary: childItem.label }, childItem.label) })) }, childItem.label)); }) })))] }), label));
+                }) }), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(animated.div, __assign({ style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList, { children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(StyledListSecondaryItem, __assign({ disablePadding: true, 
+                            // @ts-expect-error
+                            component: animated.li, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: _jsx(StyledListSecondaryButton
+                            // whileHover={{ scale: 1.02 }}
+                            // whileTap={{ scale: 0.95, boxShadow: '0 6px 15px rgb(36 37 38 / 0%);' }}
+                            , __assign({}, item, { children: _jsx(ListItemText, { primary: item.label }) })) }), item.label)); }) })] }))] }))); };
+    return (_jsx("aside", { children: _jsx(StyledSwipeableDrawer, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleDrawer(false), hideBackdrop: true, ModalProps: {
+                keepMounted: true
+            } }, { children: list() })) }));
+}