@learningpool/ui 1.6.0-beta.9 → 1.6.1

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

@@ -5,14 +5,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { Box, List, ListItem, ListItemText, 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 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'
     ? '#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% )'; });
 export var StyledBox = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  overflow: auto;\n  padding-bottom: 6rem;\n"], ["\n  height: 100%;\n  overflow: auto;\n  padding-bottom: 6rem;\n"])));
-export var StyledDrawerLogo = styled(motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  margin: 1.5rem 0 2.5rem 1.5rem;\n\n  .MuiSvgIcon-root {\n    width: 2rem;\n    height: 2rem;\n  }\n"], ["\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  margin: 1.5rem 0 2.5rem 1.5rem;\n\n  .MuiSvgIcon-root {\n    width: 2rem;\n    height: 2rem;\n  }\n"])));
+export var StyledDrawerLogo = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  margin: 1.5rem 0 2.5rem 1.5rem;\n\n  .MuiSvgIcon-root {\n    width: 2rem;\n    height: 2rem;\n  }\n"], ["\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  margin: 1.5rem 0 2.5rem 1.5rem;\n\n  .MuiSvgIcon-root {\n    width: 2rem;\n    height: 2rem;\n  }\n"])));
 export var StyledDrawerLogoText = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  margin-left: .5rem;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  margin-left: .5rem;\n  color: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? 'rgba(255,255,255,.9)'
     : '#555'; });

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenuStyles.d.ts

@@ -56,7 +56,7 @@ export declare const FlyoutMenuItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const FlyoutMenuButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.d.ts

@@ -14,7 +14,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isDrawerOpen?: boolean | undefined;
 }, {}, {}>;
 export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{

package/dist/components/navigation/MobileNavigation/MobileNavigationNotchIndicator.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const NotchIndicator: (props: any) => React.ReactElement;
+export default NotchIndicator;

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

@@ -0,0 +1,19 @@
+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 { useSpring, animated } from '@react-spring/web';
+import { StyledNotchShadow, StyledNotchShadowMask, StyledNotchSVG } from './MobileNavigationStyles';
+var NotchIndicator = function (props) {
+    var styles = useSpring(__assign({}, props));
+    return (_jsxs(animated.div, __assign({ style: __assign({ bottom: '58px', position: 'fixed', zIndex: '-1' }, styles) }, { children: [_jsx(StyledNotchShadow, {}), _jsx(StyledNotchSVG, __assign({ viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx(animated.path, { d: "M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" }) })), _jsx(StyledNotchShadowMask, {})] })));
+};
+export default NotchIndicator;

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

@@ -14,7 +14,7 @@ import * as React from 'react';
 import { FormControl, InputAdornment, Stack, IconButton } from '../../../index';
 import { StyledBox, StyledSwipeableSearch, StyledOutlinedInput, StyledOutlinedInputLabel } from './MobileNavigationSearchStyles';
 import Search from '@mui/icons-material/Search';
-import { motion } from 'framer-motion';
+import { animated, config, useSpring } from '@react-spring/web';
 export default function SwipeableTemporarySearch(props) {
     var isSearchOpen = props.isSearchOpen, setIsSearchOpen = props.setIsSearchOpen, searchPanelPlaceholder = props.searchPanelPlaceholder, searchPanelDefaultValue = props.searchPanelDefaultValue, searchPanelOnClickSearch = props.searchPanelOnClickSearch;
     var _a = React.useState(isSearchOpen !== null && isSearchOpen !== void 0 ? isSearchOpen : false), isOpen = _a[0], setIsOpen = _a[1];
@@ -44,9 +44,11 @@ export default function SwipeableTemporarySearch(props) {
     };
     return (_jsx(StyledSwipeableSearch, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleSearch(false), onOpen: toggleSearch(true), swipeAreaWidth: 44, variant: 'persistent', ModalProps: {
             keepMounted: true
-        } }, { children: _jsx(StyledBox, { children: _jsx(Stack, __assign({ spacing: 2 }, { children: _jsx(motion.div, __assign({ animate: isSearchOpen
-                        ? { opacity: 1 }
-                        : { opacity: 0 }, transition: isSearchOpen
-                        ? { delay: 0.1 }
-                        : { delay: 0 } }, { children: _jsxs(FormControl, __assign({ fullWidth: true, variant: 'outlined' }, { children: [_jsx(StyledOutlinedInputLabel, __assign({ htmlFor: 'mobile-nav-search' }, { children: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search' })), _jsx(StyledOutlinedInput, { label: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search', id: 'mobile-nav-search', endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: _jsx(IconButton, __assign({ "aria-label": 'Search', edge: 'end', onClick: handleSearch }, { children: _jsx(Search, {}) })) })), onKeyDown: handleSearch, value: searchValue, onChange: function (event) { var _a; return setSearchValue((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); } })] })) })) })) }) })));
+        } }, { children: _jsx(StyledBox, { children: _jsx(Stack, __assign({ spacing: 2 }, { children: _jsx(animated.div, __assign({ style: useSpring({
+                        from: { opacity: 0, y: 10 },
+                        to: { opacity: 1, y: 0 },
+                        delay: isSearchOpen ? 100 : 0,
+                        reverse: !isSearchOpen,
+                        config: __assign(__assign({}, config.default), { mass: 1 })
+                    }) }, { children: _jsxs(FormControl, __assign({ fullWidth: true, variant: 'outlined' }, { children: [_jsx(StyledOutlinedInputLabel, __assign({ htmlFor: 'mobile-nav-search' }, { children: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search' })), _jsx(StyledOutlinedInput, { label: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search', id: 'mobile-nav-search', endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: _jsx(IconButton, __assign({ "aria-label": 'Search', edge: 'end', onClick: handleSearch }, { children: _jsx(Search, {}) })) })), onKeyDown: handleSearch, value: searchValue, onChange: function (event) { var _a; return setSearchValue((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); } })] })) })) })) }) })));
 }