@superdispatch/ui-lab 0.20.5 → 0.21.2
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/dist-node/index.js +67 -62
- package/dist-node/index.js.map +1 -1
- package/dist-src/box/Box.js +2 -1
- package/dist-src/file-list-item/FileListItem.js +11 -6
- package/dist-src/navbar/Navbar.js +6 -5
- package/dist-src/navbar/NavbarAccordion.js +13 -15
- package/dist-src/navbar/NavbarAvatar.js +26 -27
- package/dist-src/navbar/NavbarContext.js +3 -2
- package/dist-src/navbar/NavbarList.js +6 -6
- package/dist-types/index.d.ts +6 -4
- package/dist-web/index.js +67 -62
- package/dist-web/index.js.map +1 -1
- package/package.json +3 -3
package/dist-src/box/Box.js
CHANGED
|
@@ -44,6 +44,7 @@ export var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
44
44
|
url,
|
|
45
45
|
name,
|
|
46
46
|
status,
|
|
47
|
+
canDelete = true,
|
|
47
48
|
onRetry,
|
|
48
49
|
onDelete
|
|
49
50
|
} = _ref2;
|
|
@@ -59,6 +60,7 @@ export var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
59
60
|
onMouseLeave: () => {
|
|
60
61
|
setIsHovered(false);
|
|
61
62
|
},
|
|
63
|
+
"aria-label": "file-list-item",
|
|
62
64
|
children: /*#__PURE__*/_jsxs(Columns, {
|
|
63
65
|
align: "center",
|
|
64
66
|
space: "xsmall",
|
|
@@ -109,19 +111,22 @@ export var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
109
111
|
children: /*#__PURE__*/_jsx(FileListItemProgress, {
|
|
110
112
|
size: "1em"
|
|
111
113
|
})
|
|
112
|
-
}) : /*#__PURE__*/_jsx(
|
|
114
|
+
}) : !isHovered && status === 'success' ? /*#__PURE__*/_jsx(IconButton, {
|
|
115
|
+
size: "small",
|
|
116
|
+
children: /*#__PURE__*/_jsx(CheckCircle, {
|
|
117
|
+
fontSize: "small",
|
|
118
|
+
htmlColor: Color.Green300
|
|
119
|
+
})
|
|
120
|
+
}) : canDelete ? /*#__PURE__*/_jsx(Tooltip, {
|
|
113
121
|
title: "Delete",
|
|
114
122
|
children: /*#__PURE__*/_jsx(IconButton, {
|
|
115
123
|
size: "small",
|
|
116
124
|
onClick: onDelete,
|
|
117
|
-
children:
|
|
118
|
-
fontSize: "small",
|
|
119
|
-
htmlColor: Color.Green300
|
|
120
|
-
}) : /*#__PURE__*/_jsx(Delete, {
|
|
125
|
+
children: /*#__PURE__*/_jsx(Delete, {
|
|
121
126
|
fontSize: "small"
|
|
122
127
|
})
|
|
123
128
|
})
|
|
124
|
-
})
|
|
129
|
+
}) : null
|
|
125
130
|
})]
|
|
126
131
|
})
|
|
127
132
|
});
|
|
@@ -33,14 +33,15 @@ export function Navbar(_ref) {
|
|
|
33
33
|
var matches = useMediaQuery(theme.breakpoints.up('md'), {
|
|
34
34
|
noSsr: true
|
|
35
35
|
});
|
|
36
|
-
var [
|
|
36
|
+
var [isMenuExpanded, setMenuExpanded] = useState(matches);
|
|
37
37
|
var hasBadge = hasExtraBadge || items.some(item => item.badge);
|
|
38
38
|
var ctx = useMemo(() => ({
|
|
39
39
|
isDrawerOpen,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
isMenuExpanded,
|
|
41
|
+
setDrawerOpen,
|
|
42
|
+
setMenuExpanded,
|
|
43
|
+
isNavbarExpanded: isMenuExpanded || isDrawerOpen
|
|
44
|
+
}), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
|
|
44
45
|
return /*#__PURE__*/_jsx(NavbarContext.Provider, {
|
|
45
46
|
value: ctx,
|
|
46
47
|
children: /*#__PURE__*/_jsxs("div", {
|
|
@@ -40,37 +40,35 @@ export function NavbarAccordion(_ref2) {
|
|
|
40
40
|
} = _ref2;
|
|
41
41
|
var uid = useUID();
|
|
42
42
|
var {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
setDrawerOpen
|
|
43
|
+
setDrawerOpen,
|
|
44
|
+
isNavbarExpanded
|
|
46
45
|
} = useNavbarContext();
|
|
47
|
-
var [isExpanded, setExpanded] = useState(
|
|
46
|
+
var [isExpanded, setExpanded] = useState(true); // sync accordion state with Desktop menu state
|
|
47
|
+
|
|
48
48
|
useEffect(() => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
}, [isMenuExpanded]);
|
|
49
|
+
setExpanded(isNavbarExpanded);
|
|
50
|
+
}, [isNavbarExpanded]);
|
|
53
51
|
return /*#__PURE__*/_jsxs(NavbarAccordionRoot, {
|
|
54
|
-
|
|
52
|
+
square: true,
|
|
55
53
|
gutter: !!gutter,
|
|
54
|
+
"aria-labelledby": uid,
|
|
56
55
|
expanded: isExpanded,
|
|
57
56
|
onClick: event => {
|
|
58
|
-
|
|
57
|
+
_onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
|
|
58
|
+
|
|
59
|
+
if (isNavbarExpanded) {
|
|
59
60
|
setExpanded(!isExpanded);
|
|
60
61
|
}
|
|
61
|
-
|
|
62
|
-
_onClick(event);
|
|
63
62
|
},
|
|
64
|
-
square: true,
|
|
65
63
|
children: [/*#__PURE__*/_jsxs(NavbarAccordionSummary, {
|
|
66
64
|
"data-active": !isExpanded && items.some(item => item.active),
|
|
67
|
-
"data-expanded":
|
|
65
|
+
"data-expanded": isNavbarExpanded,
|
|
68
66
|
expandIcon: /*#__PURE__*/_jsx(ExpandMore, {}),
|
|
69
67
|
children: [/*#__PURE__*/_jsx(IconWrapper, {
|
|
70
68
|
children: icon
|
|
71
69
|
}), /*#__PURE__*/_jsx(NavbarAccordionLabel, {
|
|
72
70
|
id: uid,
|
|
73
|
-
"data-expanded":
|
|
71
|
+
"data-expanded": isNavbarExpanded,
|
|
74
72
|
children: label
|
|
75
73
|
})]
|
|
76
74
|
}), items.map(item => {
|
|
@@ -20,35 +20,34 @@ export function NavbarAvatar(_ref) {
|
|
|
20
20
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
21
21
|
|
|
22
22
|
var {
|
|
23
|
-
|
|
24
|
-
isDrawerOpen
|
|
23
|
+
isNavbarExpanded
|
|
25
24
|
} = useNavbarContext();
|
|
26
25
|
|
|
27
|
-
if (
|
|
28
|
-
return /*#__PURE__*/
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
children: [/*#__PURE__*/_jsx(Column, {
|
|
32
|
-
width: "content",
|
|
33
|
-
children: /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
|
|
34
|
-
children: children
|
|
35
|
-
}))
|
|
36
|
-
}), /*#__PURE__*/_jsx(Column, {
|
|
37
|
-
children: /*#__PURE__*/_jsxs(Stack, {
|
|
38
|
-
space: "none",
|
|
39
|
-
children: [/*#__PURE__*/_jsx(StyledTypography, {
|
|
40
|
-
variant: "caption",
|
|
41
|
-
children: title
|
|
42
|
-
}), /*#__PURE__*/_jsx(StyledTypography, {
|
|
43
|
-
variant: "caption",
|
|
44
|
-
children: subtitle
|
|
45
|
-
})]
|
|
46
|
-
})
|
|
47
|
-
})]
|
|
48
|
-
});
|
|
26
|
+
if (!isNavbarExpanded) {
|
|
27
|
+
return /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
|
|
28
|
+
children: children
|
|
29
|
+
}));
|
|
49
30
|
}
|
|
50
31
|
|
|
51
|
-
return /*#__PURE__*/
|
|
52
|
-
|
|
53
|
-
|
|
32
|
+
return /*#__PURE__*/_jsxs(Columns, {
|
|
33
|
+
space: "xsmall",
|
|
34
|
+
align: "center",
|
|
35
|
+
children: [/*#__PURE__*/_jsx(Column, {
|
|
36
|
+
width: "content",
|
|
37
|
+
children: /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
|
|
38
|
+
children: children
|
|
39
|
+
}))
|
|
40
|
+
}), /*#__PURE__*/_jsx(Column, {
|
|
41
|
+
children: /*#__PURE__*/_jsxs(Stack, {
|
|
42
|
+
space: "none",
|
|
43
|
+
children: [/*#__PURE__*/_jsx(StyledTypography, {
|
|
44
|
+
variant: "caption",
|
|
45
|
+
children: title
|
|
46
|
+
}), /*#__PURE__*/_jsx(StyledTypography, {
|
|
47
|
+
variant: "caption",
|
|
48
|
+
children: subtitle
|
|
49
|
+
})]
|
|
50
|
+
})
|
|
51
|
+
})]
|
|
52
|
+
});
|
|
54
53
|
}
|
|
@@ -2,8 +2,9 @@ import { noop } from 'lodash';
|
|
|
2
2
|
import { createContext, useContext } from 'react';
|
|
3
3
|
export var NavbarContext = /*#__PURE__*/createContext({
|
|
4
4
|
isDrawerOpen: false,
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
isMenuExpanded: false,
|
|
6
|
+
isNavbarExpanded: false,
|
|
7
|
+
setMenuExpanded: noop,
|
|
7
8
|
setDrawerOpen: noop
|
|
8
9
|
});
|
|
9
10
|
export function useNavbarContext() {
|
|
@@ -77,12 +77,12 @@ export function NavbarList(_ref5) {
|
|
|
77
77
|
var platform = useResponsiveValue('mobile', 'tablet', 'desktop');
|
|
78
78
|
var isMobile = platform === 'mobile';
|
|
79
79
|
var {
|
|
80
|
-
|
|
80
|
+
isMenuExpanded,
|
|
81
81
|
isDrawerOpen,
|
|
82
82
|
setDrawerOpen,
|
|
83
|
-
|
|
83
|
+
setMenuExpanded
|
|
84
84
|
} = useNavbarContext();
|
|
85
|
-
var isSidebarOpened = isMobile ? isDrawerOpen :
|
|
85
|
+
var isSidebarOpened = isMobile ? isDrawerOpen : isMenuExpanded;
|
|
86
86
|
var filteredItems = useMemo(() => items.filter(item => {
|
|
87
87
|
return !item.hide && (isSidebarOpened || !!item.icon);
|
|
88
88
|
}).map(item => _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -94,13 +94,13 @@ export function NavbarList(_ref5) {
|
|
|
94
94
|
children: [/*#__PURE__*/_jsxs(Header, {
|
|
95
95
|
children: [isSidebarOpened && header, !isMobile && /*#__PURE__*/_jsx(ExpandIconButton, {
|
|
96
96
|
disableRipple: true,
|
|
97
|
-
style:
|
|
97
|
+
style: isMenuExpanded ? {
|
|
98
98
|
paddingRight: 0
|
|
99
99
|
} : {},
|
|
100
100
|
onClick: () => {
|
|
101
|
-
|
|
101
|
+
setMenuExpanded(!isMenuExpanded);
|
|
102
102
|
},
|
|
103
|
-
children:
|
|
103
|
+
children: isMenuExpanded ? /*#__PURE__*/_jsx(MenuOpen, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
|
|
104
104
|
})]
|
|
105
105
|
}), /*#__PURE__*/_jsx(Content, {
|
|
106
106
|
"aria-expanded": isSidebarOpened,
|
package/dist-types/index.d.ts
CHANGED
|
@@ -25,7 +25,7 @@ declare type BannerProps = Omit<CustomerTransitionProps, 'timeout' | 'className'
|
|
|
25
25
|
declare const Banner: ForwardRefExoticComponent<Pick<BannerProps, string | number> & RefAttributes<CSSTransition<HTMLDivElement>>>;
|
|
26
26
|
|
|
27
27
|
declare type MarginProp = 'auto' | SpaceProp | NegativeSpaceProp;
|
|
28
|
-
declare type BorderRadiusProp = 'none' | 'small';
|
|
28
|
+
declare type BorderRadiusProp = 'none' | 'small' | 'medium';
|
|
29
29
|
declare type BorderWidthProp = 'none' | 'small' | 'medium' | 'large';
|
|
30
30
|
interface BoxRules {
|
|
31
31
|
display?: ResponsiveProp<Property.Display>;
|
|
@@ -158,6 +158,7 @@ interface FileListItemProps {
|
|
|
158
158
|
name: string;
|
|
159
159
|
onRetry?: () => void;
|
|
160
160
|
onDelete?: () => void;
|
|
161
|
+
canDelete?: boolean;
|
|
161
162
|
helperText?: ReactNode;
|
|
162
163
|
status?: 'idle' | 'loading' | 'error' | 'success';
|
|
163
164
|
}
|
|
@@ -198,7 +199,7 @@ interface NavbarAccordionProps {
|
|
|
198
199
|
icon?: ReactNode;
|
|
199
200
|
gutter?: boolean;
|
|
200
201
|
items: Array<Omit<NavbarItemOptions, 'icon'>>;
|
|
201
|
-
onClick
|
|
202
|
+
onClick?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
202
203
|
}
|
|
203
204
|
|
|
204
205
|
declare const NavbarBadge: StyledComponent<"span", DefaultTheme, {}, never>;
|
|
@@ -261,9 +262,10 @@ declare function NavbarAvatar({ title, subtitle, children, ...props }: NavbarAva
|
|
|
261
262
|
|
|
262
263
|
interface NavbarContextType {
|
|
263
264
|
isDrawerOpen: boolean;
|
|
264
|
-
|
|
265
|
-
|
|
265
|
+
isMenuExpanded: boolean;
|
|
266
|
+
isNavbarExpanded: boolean;
|
|
266
267
|
setDrawerOpen: (value: boolean) => void;
|
|
268
|
+
setMenuExpanded: (value: boolean) => void;
|
|
267
269
|
}
|
|
268
270
|
declare function useNavbarContext(): NavbarContextType;
|
|
269
271
|
|
package/dist-web/index.js
CHANGED
|
@@ -156,7 +156,8 @@ function parseMargin(input) {
|
|
|
156
156
|
|
|
157
157
|
var normalizeBorderRadius = /*#__PURE__*/createRuleNormalizer({
|
|
158
158
|
none: 0,
|
|
159
|
-
small: 4
|
|
159
|
+
small: 4,
|
|
160
|
+
medium: 8
|
|
160
161
|
});
|
|
161
162
|
var normalizeBorderWidth = /*#__PURE__*/createRuleNormalizer({
|
|
162
163
|
none: 0,
|
|
@@ -922,6 +923,7 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
922
923
|
url,
|
|
923
924
|
name,
|
|
924
925
|
status,
|
|
926
|
+
canDelete = true,
|
|
925
927
|
onRetry,
|
|
926
928
|
onDelete
|
|
927
929
|
} = _ref2;
|
|
@@ -937,6 +939,7 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
937
939
|
onMouseLeave: () => {
|
|
938
940
|
setIsHovered(false);
|
|
939
941
|
},
|
|
942
|
+
"aria-label": "file-list-item",
|
|
940
943
|
children: /*#__PURE__*/jsxs(Columns, {
|
|
941
944
|
align: "center",
|
|
942
945
|
space: "xsmall",
|
|
@@ -987,19 +990,22 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
987
990
|
children: /*#__PURE__*/jsx(FileListItemProgress, {
|
|
988
991
|
size: "1em"
|
|
989
992
|
})
|
|
990
|
-
}) : /*#__PURE__*/jsx(
|
|
993
|
+
}) : !isHovered && status === 'success' ? /*#__PURE__*/jsx(IconButton, {
|
|
994
|
+
size: "small",
|
|
995
|
+
children: /*#__PURE__*/jsx(CheckCircle, {
|
|
996
|
+
fontSize: "small",
|
|
997
|
+
htmlColor: Color.Green300
|
|
998
|
+
})
|
|
999
|
+
}) : canDelete ? /*#__PURE__*/jsx(Tooltip, {
|
|
991
1000
|
title: "Delete",
|
|
992
1001
|
children: /*#__PURE__*/jsx(IconButton, {
|
|
993
1002
|
size: "small",
|
|
994
1003
|
onClick: onDelete,
|
|
995
|
-
children:
|
|
996
|
-
fontSize: "small",
|
|
997
|
-
htmlColor: Color.Green300
|
|
998
|
-
}) : /*#__PURE__*/jsx(Delete, {
|
|
1004
|
+
children: /*#__PURE__*/jsx(Delete, {
|
|
999
1005
|
fontSize: "small"
|
|
1000
1006
|
})
|
|
1001
1007
|
})
|
|
1002
|
-
})
|
|
1008
|
+
}) : null
|
|
1003
1009
|
})]
|
|
1004
1010
|
})
|
|
1005
1011
|
});
|
|
@@ -1054,8 +1060,9 @@ MultilineText.displayName = 'MultilineText';
|
|
|
1054
1060
|
|
|
1055
1061
|
var NavbarContext = /*#__PURE__*/createContext({
|
|
1056
1062
|
isDrawerOpen: false,
|
|
1057
|
-
|
|
1058
|
-
|
|
1063
|
+
isMenuExpanded: false,
|
|
1064
|
+
isNavbarExpanded: false,
|
|
1065
|
+
setMenuExpanded: noop,
|
|
1059
1066
|
setDrawerOpen: noop
|
|
1060
1067
|
});
|
|
1061
1068
|
function useNavbarContext() {
|
|
@@ -1200,37 +1207,35 @@ function NavbarAccordion(_ref2) {
|
|
|
1200
1207
|
} = _ref2;
|
|
1201
1208
|
var uid = useUID();
|
|
1202
1209
|
var {
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
setDrawerOpen
|
|
1210
|
+
setDrawerOpen,
|
|
1211
|
+
isNavbarExpanded
|
|
1206
1212
|
} = useNavbarContext();
|
|
1207
|
-
var [isExpanded, setExpanded] = useState(
|
|
1213
|
+
var [isExpanded, setExpanded] = useState(true); // sync accordion state with Desktop menu state
|
|
1214
|
+
|
|
1208
1215
|
useEffect(() => {
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
}
|
|
1212
|
-
}, [isMenuExpanded]);
|
|
1216
|
+
setExpanded(isNavbarExpanded);
|
|
1217
|
+
}, [isNavbarExpanded]);
|
|
1213
1218
|
return /*#__PURE__*/jsxs(NavbarAccordionRoot, {
|
|
1214
|
-
|
|
1219
|
+
square: true,
|
|
1215
1220
|
gutter: !!gutter,
|
|
1221
|
+
"aria-labelledby": uid,
|
|
1216
1222
|
expanded: isExpanded,
|
|
1217
1223
|
onClick: event => {
|
|
1218
|
-
|
|
1224
|
+
_onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
|
|
1225
|
+
|
|
1226
|
+
if (isNavbarExpanded) {
|
|
1219
1227
|
setExpanded(!isExpanded);
|
|
1220
1228
|
}
|
|
1221
|
-
|
|
1222
|
-
_onClick(event);
|
|
1223
1229
|
},
|
|
1224
|
-
square: true,
|
|
1225
1230
|
children: [/*#__PURE__*/jsxs(NavbarAccordionSummary, {
|
|
1226
1231
|
"data-active": !isExpanded && items.some(item => item.active),
|
|
1227
|
-
"data-expanded":
|
|
1232
|
+
"data-expanded": isNavbarExpanded,
|
|
1228
1233
|
expandIcon: /*#__PURE__*/jsx(ExpandMore, {}),
|
|
1229
1234
|
children: [/*#__PURE__*/jsx(IconWrapper$2, {
|
|
1230
1235
|
children: icon
|
|
1231
1236
|
}), /*#__PURE__*/jsx(NavbarAccordionLabel, {
|
|
1232
1237
|
id: uid,
|
|
1233
|
-
"data-expanded":
|
|
1238
|
+
"data-expanded": isNavbarExpanded,
|
|
1234
1239
|
children: label
|
|
1235
1240
|
})]
|
|
1236
1241
|
}), items.map(item => {
|
|
@@ -1326,12 +1331,12 @@ function NavbarList(_ref5) {
|
|
|
1326
1331
|
var platform = useResponsiveValue('mobile', 'tablet', 'desktop');
|
|
1327
1332
|
var isMobile = platform === 'mobile';
|
|
1328
1333
|
var {
|
|
1329
|
-
|
|
1334
|
+
isMenuExpanded,
|
|
1330
1335
|
isDrawerOpen,
|
|
1331
1336
|
setDrawerOpen,
|
|
1332
|
-
|
|
1337
|
+
setMenuExpanded
|
|
1333
1338
|
} = useNavbarContext();
|
|
1334
|
-
var isSidebarOpened = isMobile ? isDrawerOpen :
|
|
1339
|
+
var isSidebarOpened = isMobile ? isDrawerOpen : isMenuExpanded;
|
|
1335
1340
|
var filteredItems = useMemo(() => items.filter(item => {
|
|
1336
1341
|
return !item.hide && (isSidebarOpened || !!item.icon);
|
|
1337
1342
|
}).map(item => _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -1343,13 +1348,13 @@ function NavbarList(_ref5) {
|
|
|
1343
1348
|
children: [/*#__PURE__*/jsxs(Header, {
|
|
1344
1349
|
children: [isSidebarOpened && header, !isMobile && /*#__PURE__*/jsx(ExpandIconButton, {
|
|
1345
1350
|
disableRipple: true,
|
|
1346
|
-
style:
|
|
1351
|
+
style: isMenuExpanded ? {
|
|
1347
1352
|
paddingRight: 0
|
|
1348
1353
|
} : {},
|
|
1349
1354
|
onClick: () => {
|
|
1350
|
-
|
|
1355
|
+
setMenuExpanded(!isMenuExpanded);
|
|
1351
1356
|
},
|
|
1352
|
-
children:
|
|
1357
|
+
children: isMenuExpanded ? /*#__PURE__*/jsx(MenuOpen, {}) : /*#__PURE__*/jsx(Menu, {})
|
|
1353
1358
|
})]
|
|
1354
1359
|
}), /*#__PURE__*/jsx(Content, {
|
|
1355
1360
|
"aria-expanded": isSidebarOpened,
|
|
@@ -1410,14 +1415,15 @@ function Navbar(_ref) {
|
|
|
1410
1415
|
var matches = useMediaQuery(theme.breakpoints.up('md'), {
|
|
1411
1416
|
noSsr: true
|
|
1412
1417
|
});
|
|
1413
|
-
var [
|
|
1418
|
+
var [isMenuExpanded, setMenuExpanded] = useState(matches);
|
|
1414
1419
|
var hasBadge = hasExtraBadge || items.some(item => item.badge);
|
|
1415
1420
|
var ctx = useMemo(() => ({
|
|
1416
1421
|
isDrawerOpen,
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1422
|
+
isMenuExpanded,
|
|
1423
|
+
setDrawerOpen,
|
|
1424
|
+
setMenuExpanded,
|
|
1425
|
+
isNavbarExpanded: isMenuExpanded || isDrawerOpen
|
|
1426
|
+
}), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
|
|
1421
1427
|
return /*#__PURE__*/jsx(NavbarContext.Provider, {
|
|
1422
1428
|
value: ctx,
|
|
1423
1429
|
children: /*#__PURE__*/jsxs("div", {
|
|
@@ -1473,37 +1479,36 @@ function NavbarAvatar(_ref) {
|
|
|
1473
1479
|
props = _objectWithoutProperties(_ref, _excluded$7);
|
|
1474
1480
|
|
|
1475
1481
|
var {
|
|
1476
|
-
|
|
1477
|
-
isDrawerOpen
|
|
1482
|
+
isNavbarExpanded
|
|
1478
1483
|
} = useNavbarContext();
|
|
1479
1484
|
|
|
1480
|
-
if (
|
|
1481
|
-
return /*#__PURE__*/
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
children: [/*#__PURE__*/jsx(Column, {
|
|
1485
|
-
width: "content",
|
|
1486
|
-
children: /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
|
|
1487
|
-
children: children
|
|
1488
|
-
}))
|
|
1489
|
-
}), /*#__PURE__*/jsx(Column, {
|
|
1490
|
-
children: /*#__PURE__*/jsxs(Stack, {
|
|
1491
|
-
space: "none",
|
|
1492
|
-
children: [/*#__PURE__*/jsx(StyledTypography, {
|
|
1493
|
-
variant: "caption",
|
|
1494
|
-
children: title
|
|
1495
|
-
}), /*#__PURE__*/jsx(StyledTypography, {
|
|
1496
|
-
variant: "caption",
|
|
1497
|
-
children: subtitle
|
|
1498
|
-
})]
|
|
1499
|
-
})
|
|
1500
|
-
})]
|
|
1501
|
-
});
|
|
1485
|
+
if (!isNavbarExpanded) {
|
|
1486
|
+
return /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
|
|
1487
|
+
children: children
|
|
1488
|
+
}));
|
|
1502
1489
|
}
|
|
1503
1490
|
|
|
1504
|
-
return /*#__PURE__*/
|
|
1505
|
-
|
|
1506
|
-
|
|
1491
|
+
return /*#__PURE__*/jsxs(Columns, {
|
|
1492
|
+
space: "xsmall",
|
|
1493
|
+
align: "center",
|
|
1494
|
+
children: [/*#__PURE__*/jsx(Column, {
|
|
1495
|
+
width: "content",
|
|
1496
|
+
children: /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
|
|
1497
|
+
children: children
|
|
1498
|
+
}))
|
|
1499
|
+
}), /*#__PURE__*/jsx(Column, {
|
|
1500
|
+
children: /*#__PURE__*/jsxs(Stack, {
|
|
1501
|
+
space: "none",
|
|
1502
|
+
children: [/*#__PURE__*/jsx(StyledTypography, {
|
|
1503
|
+
variant: "caption",
|
|
1504
|
+
children: title
|
|
1505
|
+
}), /*#__PURE__*/jsx(StyledTypography, {
|
|
1506
|
+
variant: "caption",
|
|
1507
|
+
children: subtitle
|
|
1508
|
+
})]
|
|
1509
|
+
})
|
|
1510
|
+
})]
|
|
1511
|
+
});
|
|
1507
1512
|
}
|
|
1508
1513
|
|
|
1509
1514
|
var Divider = /*#__PURE__*/styled.div.withConfig({
|