@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.
@@ -35,7 +35,8 @@ function parseMargin(input) {
35
35
 
36
36
  var normalizeBorderRadius = /*#__PURE__*/createRuleNormalizer({
37
37
  none: 0,
38
- small: 4
38
+ small: 4,
39
+ medium: 8
39
40
  });
40
41
  var normalizeBorderWidth = /*#__PURE__*/createRuleNormalizer({
41
42
  none: 0,
@@ -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(Tooltip, {
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: !isHovered && status === 'success' ? /*#__PURE__*/_jsx(CheckCircle, {
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 [isExpanded, setIsExpanded] = useState(matches);
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
- isExpanded,
41
- setIsExpanded,
42
- setDrawerOpen
43
- }), [isDrawerOpen, isExpanded, setIsExpanded, setDrawerOpen]);
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
- isExpanded: isMenuExpanded,
44
- isDrawerOpen,
45
- setDrawerOpen
43
+ setDrawerOpen,
44
+ isNavbarExpanded
46
45
  } = useNavbarContext();
47
- var [isExpanded, setExpanded] = useState(false);
46
+ var [isExpanded, setExpanded] = useState(true); // sync accordion state with Desktop menu state
47
+
48
48
  useEffect(() => {
49
- if (!isMenuExpanded) {
50
- setExpanded(false);
51
- }
52
- }, [isMenuExpanded]);
49
+ setExpanded(isNavbarExpanded);
50
+ }, [isNavbarExpanded]);
53
51
  return /*#__PURE__*/_jsxs(NavbarAccordionRoot, {
54
- "aria-labelledby": uid,
52
+ square: true,
55
53
  gutter: !!gutter,
54
+ "aria-labelledby": uid,
56
55
  expanded: isExpanded,
57
56
  onClick: event => {
58
- if (isMenuExpanded || isDrawerOpen) {
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": isMenuExpanded || isDrawerOpen,
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": isMenuExpanded || isDrawerOpen,
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
- isExpanded,
24
- isDrawerOpen
23
+ isNavbarExpanded
25
24
  } = useNavbarContext();
26
25
 
27
- if (isExpanded || isDrawerOpen) {
28
- return /*#__PURE__*/_jsxs(Columns, {
29
- space: "xsmall",
30
- align: "center",
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__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
52
- children: children
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
- isExpanded: false,
6
- setIsExpanded: noop,
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
- isExpanded,
80
+ isMenuExpanded,
81
81
  isDrawerOpen,
82
82
  setDrawerOpen,
83
- setIsExpanded
83
+ setMenuExpanded
84
84
  } = useNavbarContext();
85
- var isSidebarOpened = isMobile ? isDrawerOpen : isExpanded;
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: isExpanded ? {
97
+ style: isMenuExpanded ? {
98
98
  paddingRight: 0
99
99
  } : {},
100
100
  onClick: () => {
101
- setIsExpanded(!isExpanded);
101
+ setMenuExpanded(!isMenuExpanded);
102
102
  },
103
- children: isExpanded ? /*#__PURE__*/_jsx(MenuOpen, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
103
+ children: isMenuExpanded ? /*#__PURE__*/_jsx(MenuOpen, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
104
104
  })]
105
105
  }), /*#__PURE__*/_jsx(Content, {
106
106
  "aria-expanded": isSidebarOpened,
@@ -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: (event: MouseEvent<HTMLDivElement>) => void;
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
- isExpanded: boolean;
265
- setIsExpanded: (value: boolean) => void;
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(Tooltip, {
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: !isHovered && status === 'success' ? /*#__PURE__*/jsx(CheckCircle, {
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
- isExpanded: false,
1058
- setIsExpanded: noop,
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
- isExpanded: isMenuExpanded,
1204
- isDrawerOpen,
1205
- setDrawerOpen
1210
+ setDrawerOpen,
1211
+ isNavbarExpanded
1206
1212
  } = useNavbarContext();
1207
- var [isExpanded, setExpanded] = useState(false);
1213
+ var [isExpanded, setExpanded] = useState(true); // sync accordion state with Desktop menu state
1214
+
1208
1215
  useEffect(() => {
1209
- if (!isMenuExpanded) {
1210
- setExpanded(false);
1211
- }
1212
- }, [isMenuExpanded]);
1216
+ setExpanded(isNavbarExpanded);
1217
+ }, [isNavbarExpanded]);
1213
1218
  return /*#__PURE__*/jsxs(NavbarAccordionRoot, {
1214
- "aria-labelledby": uid,
1219
+ square: true,
1215
1220
  gutter: !!gutter,
1221
+ "aria-labelledby": uid,
1216
1222
  expanded: isExpanded,
1217
1223
  onClick: event => {
1218
- if (isMenuExpanded || isDrawerOpen) {
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": isMenuExpanded || isDrawerOpen,
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": isMenuExpanded || isDrawerOpen,
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
- isExpanded,
1334
+ isMenuExpanded,
1330
1335
  isDrawerOpen,
1331
1336
  setDrawerOpen,
1332
- setIsExpanded
1337
+ setMenuExpanded
1333
1338
  } = useNavbarContext();
1334
- var isSidebarOpened = isMobile ? isDrawerOpen : isExpanded;
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: isExpanded ? {
1351
+ style: isMenuExpanded ? {
1347
1352
  paddingRight: 0
1348
1353
  } : {},
1349
1354
  onClick: () => {
1350
- setIsExpanded(!isExpanded);
1355
+ setMenuExpanded(!isMenuExpanded);
1351
1356
  },
1352
- children: isExpanded ? /*#__PURE__*/jsx(MenuOpen, {}) : /*#__PURE__*/jsx(Menu, {})
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 [isExpanded, setIsExpanded] = useState(matches);
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
- isExpanded,
1418
- setIsExpanded,
1419
- setDrawerOpen
1420
- }), [isDrawerOpen, isExpanded, setIsExpanded, setDrawerOpen]);
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
- isExpanded,
1477
- isDrawerOpen
1482
+ isNavbarExpanded
1478
1483
  } = useNavbarContext();
1479
1484
 
1480
- if (isExpanded || isDrawerOpen) {
1481
- return /*#__PURE__*/jsxs(Columns, {
1482
- space: "xsmall",
1483
- align: "center",
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__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
1505
- children: children
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({