@learningpool/ui 1.6.0-beta.13 → 1.6.0-beta.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/navigation/MobileNavigation/MobileNavigationDrawer.js +2 -3
- package/components/navigation/VerticalNavigation/VerticalNavigation.js +2 -7
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js +27 -23
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js +1 -1
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.d.ts +0 -2
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js +3 -5
- package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +2 -2
- package/package.json +1 -1
|
@@ -17,14 +17,13 @@ import { StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider, Styled
|
|
|
17
17
|
import { StreamSuiteLogo } from '../../../assets/Images';
|
|
18
18
|
import { motion } from 'framer-motion';
|
|
19
19
|
export default function SwipeableTemporaryDrawer(props) {
|
|
20
|
-
var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick
|
|
20
|
+
var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick;
|
|
21
21
|
var theme = useTheme();
|
|
22
22
|
var _a = React.useState(isDrawerOpen !== null && isDrawerOpen !== void 0 ? isDrawerOpen : false), isOpen = _a[0], setIsOpen = _a[1];
|
|
23
23
|
React.useEffect(function () { return handleOpenState(isDrawerOpen); }, [isDrawerOpen]);
|
|
24
24
|
var handleOpenState = function (open) {
|
|
25
25
|
setIsOpen(open);
|
|
26
26
|
setIsDrawerOpen(open);
|
|
27
|
-
console.log(children);
|
|
28
27
|
};
|
|
29
28
|
var toggleDrawer = function (open) {
|
|
30
29
|
return function (event) {
|
|
@@ -132,7 +131,7 @@ export default function SwipeableTemporaryDrawer(props) {
|
|
|
132
131
|
// @ts-expect-error
|
|
133
132
|
, __assign({
|
|
134
133
|
// @ts-expect-error
|
|
135
|
-
component: motion.button, variants: variantsLi, whileHover: { scale: 1.02 }, whileTap: { scale: 0.95 } },
|
|
134
|
+
component: motion.button, variants: variantsLi, whileHover: { scale: 1.02 }, whileTap: { scale: 0.95 } }, childItem, { children: _jsx(StyledChildListItemText, { primary: childItem.label }, childItem.label) })) }), childItem.label)); }) })))] }), label));
|
|
136
135
|
}) })), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(motion.div, __assign({ animate: isDrawerOpen ? 'open' : 'closed', variants: variantsDivider }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList
|
|
137
136
|
// @ts-expect-error
|
|
138
137
|
, __assign({
|
|
@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
24
24
|
import React, { useEffect } from 'react';
|
|
25
25
|
import { useTheme } from '@mui/material/styles';
|
|
26
26
|
import { Avatar, List, Tooltip } from '../../../index';
|
|
27
|
-
import { Box } from '@mui/material';
|
|
27
|
+
import { Box, Modal } from '@mui/material';
|
|
28
28
|
import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
|
|
29
29
|
import AppSwitcher from '../../stream/AppSwitcher/AppSwitcher';
|
|
30
30
|
import { Apps, ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
|
|
@@ -217,11 +217,6 @@ var VerticalNavigation = function (props) {
|
|
|
217
217
|
: null] }))] })) }))] }))); };
|
|
218
218
|
return (_jsxs(StyledAside, __assign({ "aria-label": "Site navigation" }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
|
|
219
219
|
display: isPersistent ? 'none' : 'block'
|
|
220
|
-
} }), _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant:
|
|
221
|
-
keepMounted: true,
|
|
222
|
-
disablePortal: true,
|
|
223
|
-
open: isDrawerOpen,
|
|
224
|
-
onClose: toggleDrawer(false)
|
|
225
|
-
} }, { children: listContent() }))] })));
|
|
220
|
+
} }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent' }, { children: listContent() })) }))] })));
|
|
226
221
|
};
|
|
227
222
|
export default VerticalNavigation;
|
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js
CHANGED
|
@@ -32,8 +32,7 @@ var VerticalNavigationItem = function (props) {
|
|
|
32
32
|
var _a, _b, _c;
|
|
33
33
|
var theme = useTheme();
|
|
34
34
|
var label = props.label, icon = props.icon, onClick = props.onClick, isActive = props.isActive, children = props.children, isDrawerOpen = props.isDrawerOpen, index = props.index, hasFlyout = props.hasFlyout, fullHeightFlyout = props.fullHeightFlyout, isSecondary = props.isSecondary, content = props.content, style = props.style, hasCustomContent = props.hasCustomContent, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style", "hasCustomContent"]);
|
|
35
|
-
var _d = React.useState(
|
|
36
|
-
var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
|
|
35
|
+
var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
|
|
37
36
|
var open = Boolean(anchorEl);
|
|
38
37
|
var handlePopoverOpen = function (event) {
|
|
39
38
|
if (open) {
|
|
@@ -50,42 +49,47 @@ var VerticalNavigationItem = function (props) {
|
|
|
50
49
|
handlePopoverOpen(event);
|
|
51
50
|
return;
|
|
52
51
|
}
|
|
53
|
-
if (children && children.length > 0) {
|
|
54
|
-
setIsExpanded(!isExpanded);
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
52
|
if (onClick) {
|
|
58
53
|
onClick(event);
|
|
59
54
|
}
|
|
60
55
|
setAnchorEl(null);
|
|
61
56
|
};
|
|
57
|
+
var handleChildItemClick = function (event, item) {
|
|
58
|
+
if (!event) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
event.preventDefault();
|
|
62
|
+
if (item.onClick) {
|
|
63
|
+
item.onClick(event);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
62
66
|
return (_jsxs(ListItem, __assign({ disablePadding: true, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton
|
|
63
67
|
// @ts-expect-error
|
|
64
68
|
, __assign({
|
|
65
69
|
// @ts-expect-error
|
|
66
|
-
component: Link, onClick: handleClick, isActive: isActive, isDrawerOpen: isDrawerOpen,
|
|
70
|
+
component: Link, onClick: handleClick, isActive: isActive, isDrawerOpen: isDrawerOpen, open: open, onMouseEnter: function (event) { return (fullHeightFlyout || isDrawerOpen)
|
|
67
71
|
? null
|
|
68
|
-
: handlePopoverOpen(event); }, onMouseLeave: function () { return fullHeightFlyout
|
|
72
|
+
: handlePopoverOpen(event); }, onMouseLeave: function () { return (fullHeightFlyout || isDrawerOpen)
|
|
69
73
|
? null
|
|
70
|
-
: handlePopoverClose(); }, onFocus: function (event) { return fullHeightFlyout
|
|
74
|
+
: handlePopoverClose(); }, onFocus: function (event) { return (fullHeightFlyout || isDrawerOpen)
|
|
71
75
|
? null
|
|
72
|
-
: handlePopoverOpen(event); }, onBlur: function () { return fullHeightFlyout
|
|
76
|
+
: handlePopoverOpen(event); }, onBlur: function () { return (fullHeightFlyout || isDrawerOpen)
|
|
73
77
|
? null
|
|
74
|
-
: handlePopoverClose(); }, "aria-expanded":
|
|
78
|
+
: handlePopoverClose(); }, "aria-expanded": 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: {
|
|
75
79
|
'& .MuiTypography-root': {
|
|
76
80
|
fontSize: isSecondary ? '14px' : 'inherit'
|
|
77
81
|
}
|
|
78
|
-
} }), children && children.length > 0 && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
82
|
+
} })] }), label), children && children.length > 0 && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
|
|
83
|
+
// @ts-expect-error
|
|
84
|
+
, __assign({
|
|
85
|
+
// @ts-expect-error
|
|
86
|
+
component: Link, role: 'link', index: index, isDrawerOpen: isDrawerOpen, onClick: function (event) { return handleChildItemClick(event, childItem); } }, { children: [_jsx(ListItemIcon, { children: childItem.icon }), _jsx(ListItemText, { primary: childItem.label, isDrawerOpen: isDrawerOpen, sx: {
|
|
87
|
+
'& .MuiTypography-root': {
|
|
88
|
+
fontSize: '14px !important',
|
|
89
|
+
color: theme.palette.mode === 'dark'
|
|
90
|
+
? theme.palette.primary.contrastText
|
|
91
|
+
: theme.palette.getContrastText(theme.palette.background.paper)
|
|
92
|
+
}
|
|
93
|
+
} })] }), label) }))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
|
|
90
94
|
};
|
|
91
95
|
export default VerticalNavigationItem;
|
|
@@ -24,6 +24,6 @@ var VerticalNavigationItemFlyoutMenu = function (props) {
|
|
|
24
24
|
// @ts-expect-error
|
|
25
25
|
, __assign({
|
|
26
26
|
// @ts-expect-error
|
|
27
|
-
component: Link, onClick: childItem.onClick
|
|
27
|
+
component: Link, role: 'link', onClick: childItem.onClick }, { children: _jsx(ListItemText, { primary: childItem.label }) }), childItem.label) })); }) }))] })) })));
|
|
28
28
|
};
|
|
29
29
|
export default VerticalNavigationItemFlyoutMenu;
|
|
@@ -37,7 +37,6 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
|
|
|
37
37
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
38
38
|
}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
39
39
|
isDrawerOpen?: boolean | undefined;
|
|
40
|
-
isExpanded?: boolean | undefined;
|
|
41
40
|
}, {}, {}>;
|
|
42
41
|
export declare const ListItemButtonChild: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
|
|
43
42
|
action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
|
|
@@ -81,7 +80,6 @@ export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<i
|
|
|
81
80
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
82
81
|
}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
83
82
|
isDrawerOpen?: boolean | undefined;
|
|
84
|
-
isExpanded?: boolean | undefined;
|
|
85
83
|
} & {
|
|
86
84
|
children?: import("react").ReactNode;
|
|
87
85
|
} & {
|
|
@@ -15,11 +15,11 @@ var ICON = {
|
|
|
15
15
|
};
|
|
16
16
|
export var ListItem = styled(SSListItem, {
|
|
17
17
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
18
|
-
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n color: ", ";\n min-height: ", "px;\n padding: 0 !important;\n transition: width\n ", "ms\n ", "\n ", ";\n width: ", "px;\n\n .MuiListItemIcon-root: {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root .MuiTypography-root: {\n white-space: normal;\n }\n"], ["\n align-items: flex-start;\n color: ", ";\n min-height: ", "px;\n padding: 0 !important;\n transition: width\n ", "ms\n ", "\n ", ";\n width: ", "px;\n\n .MuiListItemIcon-root: {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root .MuiTypography-root: {\n white-space: normal;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
18
|
+
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n color: ", ";\n flex-direction: column;\n min-height: ", "px;\n padding: 0 !important;\n transition: width\n ", "ms\n ", "\n ", ";\n width: ", "px;\n\n .MuiListItemIcon-root: {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root .MuiTypography-root: {\n white-space: normal;\n }\n"], ["\n align-items: flex-start;\n color: ", ";\n flex-direction: column;\n min-height: ", "px;\n padding: 0 !important;\n transition: width\n ", "ms\n ", "\n ", ";\n width: ", "px;\n\n .MuiListItemIcon-root: {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root .MuiTypography-root: {\n white-space: normal;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
19
19
|
? props.theme.palette.primary.contrastText
|
|
20
20
|
: props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
|
|
21
21
|
export var ListItemButton = styled(SSListItemButton, {
|
|
22
|
-
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'
|
|
22
|
+
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
23
23
|
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: flex-start !important;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-transform: none;\n transition: all\n ", "ms\n ", "\n 0ms !important;\n padding: 0 ", " 0 0;\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n left: 3px;\n transition: all\n ", "ms\n ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover:before,\n :focus-visible:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :hover {\n background-color: ", ";\n }\n\n :focus-visible {\n background-color: ", ";\n }\n\n :active {\n background-color: transparent\n }\n"], ["\n align-items: flex-start !important;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-transform: none;\n transition: all\n ", "ms\n ", "\n 0ms !important;\n padding: 0 ", " 0 0;\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n left: 3px;\n transition: all\n ", "ms\n ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover:before,\n :focus-visible:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :hover {\n background-color: ", ";\n }\n\n :focus-visible {\n background-color: ", ";\n }\n\n :active {\n background-color: transparent\n }\n"])), function (props) {
|
|
24
24
|
return props.theme.palette.mode === 'dark'
|
|
25
25
|
? props.theme.palette.primary.main
|
|
@@ -29,9 +29,7 @@ export var ListItemButton = styled(SSListItemButton, {
|
|
|
29
29
|
? props.theme.palette.primary.contrastText
|
|
30
30
|
: props.theme.palette.getContrastText(props.theme.palette.background.paper);
|
|
31
31
|
}, ICON.Height + 8, function (props) { return props.isDrawerOpen
|
|
32
|
-
?
|
|
33
|
-
? 'auto'
|
|
34
|
-
: '200px'
|
|
32
|
+
? 'auto'
|
|
35
33
|
: "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(2); }, function (props) {
|
|
36
34
|
return props.theme.palette.mode === 'dark'
|
|
37
35
|
? 'rgba(255, 255, 255, 0.5)'
|
|
@@ -81,9 +81,9 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
|
|
|
81
81
|
: props.theme.palette.background.paper; });
|
|
82
82
|
export var StyledDrawer = styled(Drawer, {
|
|
83
83
|
shouldForwardProp: function (prop) { return prop !== 'open'; }
|
|
84
|
-
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n
|
|
84
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n transition: width\n ", "ms\n ", ";\n white-space: nowrap;\n width: ", ";\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\n ", "ms\n ", ";\n visibility: visible !important;\n width: ", ";\n }\n"], ["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n transition: width\n ", "ms\n ", ";\n white-space: nowrap;\n width: ", ";\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\n ", "ms\n ", ";\n visibility: visible !important;\n width: ", ";\n }\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
|
|
85
85
|
return props.theme.palette.mode === 'dark'
|
|
86
86
|
? props.theme.palette.primary.contrastText
|
|
87
87
|
: props.theme.palette.getContrastText(props.theme.palette.background.paper);
|
|
88
|
-
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }
|
|
88
|
+
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
|
|
89
89
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|