@superdispatch/ui-lab 0.20.1 → 0.20.4

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.
Files changed (9) hide show
  1. package/dist-node/index.js +60 -28
  2. package/dist-node/index.js.map +1 -1
  3. package/dist-src/navbar/NavbarAccordion.js +6 -3
  4. package/dist-src/navbar/NavbarItem.js +1 -1
  5. package/dist-src/sidebar/SidebarContent.js +32 -17
  6. package/dist-src/sidebar/SidebarMenuItem.js +22 -8
  7. package/dist-web/index.js +60 -28
  8. package/dist-web/index.js.map +1 -1
  9. package/package.json +2 -2
package/dist-src/navbar/NavbarAccordion.js CHANGED
@@ -20,12 +20,12 @@ var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
20
20
  var {
21
21
  gutter
22
22
  } = _ref;
23
- return css(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:#1b2638;margin-top:", ";&:hover,&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&&.MuiAccordionSummary-root.Mui-expanded{margin-top:", ";max-height:40px;min-height:40px;}"], gutter ? '16px' : '0', Color.White, gutter ? '16px' : '0');
23
+ return css(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:#1b2638;margin-top:", ";&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&.MuiAccordion-root.Mui-expanded{margin-top:", ";}"], gutter ? '16px' : '0', Color.White, gutter ? '16px' : '0');
24
24
  });
25
25
  var NavbarAccordionSummary = /*#__PURE__*/styled(AccordionSummary).withConfig({
26
26
  displayName: "NavbarAccordion__NavbarAccordionSummary",
27
27
  componentId: "SD__sc-1s7g3kw-2"
28
- })(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&:hover,&[data-active='true']{border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.Blue300);
28
+ })(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.Blue300);
29
29
  var IconWrapper = /*#__PURE__*/styled.div.withConfig({
30
30
  displayName: "NavbarAccordion__IconWrapper",
31
31
  componentId: "SD__sc-1s7g3kw-3"
@@ -76,9 +76,12 @@ export function NavbarAccordion(_ref2) {
76
76
  }), items.map(item => {
77
77
  var index = items.indexOf(item);
78
78
  var prev = items[index - 1];
79
+ var {
80
+ ident = 0
81
+ } = item;
79
82
  return /*#__PURE__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
80
83
  key: item.key,
81
- ident: 1,
84
+ ident: ident + 1,
82
85
  active: item.active,
83
86
  gutter: prev && prev.groupKey !== item.groupKey,
84
87
  onClick: event => {
package/dist-src/navbar/NavbarItem.js CHANGED
@@ -13,7 +13,7 @@ export var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
13
13
  var NavbarItemRoot = /*#__PURE__*/styled.div.withConfig({
14
14
  displayName: "NavbarItem__NavbarItemRoot",
15
15
  componentId: "SD__sc-1pvzq3w-2"
16
- })(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current]{background-color:#2f394a;color:", ";border-left-color:", ";}&[data-active='true']{border-left-color:", ";}"], Color.White, Color.Blue300, Color.Blue300);
16
+ })(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], Color.White, Color.Blue300);
17
17
  var IconWrapper = /*#__PURE__*/styled.div.withConfig({
18
18
  displayName: "NavbarItem__IconWrapper",
19
19
  componentId: "SD__sc-1pvzq3w-3"
package/dist-src/sidebar/SidebarContent.js CHANGED
@@ -17,6 +17,10 @@ var SidebarAppBar = /*#__PURE__*/styled(AppBar).withConfig({
17
17
  } = _ref;
18
18
  return css(["", "{&&{border-left:transparent;}}"], theme.breakpoints.up('sm'));
19
19
  });
20
+ var ToolbarContent = /*#__PURE__*/styled.div.withConfig({
21
+ displayName: "SidebarContent__ToolbarContent",
22
+ componentId: "SD__sc-zpgf61-1"
23
+ })(["flex:1;padding:16px;"]);
20
24
  export function SidebarContent(_ref2) {
21
25
  var {
22
26
  dense,
@@ -61,23 +65,34 @@ export function SidebarContent(_ref2) {
61
65
  space: "none",
62
66
  children: [/*#__PURE__*/_jsx(SidebarAppBar, {
63
67
  children: /*#__PURE__*/_jsx(Toolbar, {
64
- children: /*#__PURE__*/_jsxs(Columns, {
65
- align: "center",
66
- space: "small",
67
- children: [/*#__PURE__*/_jsx(Column, {
68
- width: "content",
69
- children: /*#__PURE__*/_jsx(SidebarBackButton, {
70
- onClick: onBack
71
- })
72
- }), /*#__PURE__*/_jsx(Column, {
73
- children: /*#__PURE__*/_jsx(TextBox, {
74
- variant: "heading-2",
75
- children: title
76
- })
77
- }), /*#__PURE__*/_jsx(Column, {
78
- width: "content",
79
- children: action
80
- })]
68
+ disableGutters: true,
69
+ children: /*#__PURE__*/_jsx(ToolbarContent, {
70
+ children: /*#__PURE__*/_jsxs(Columns, {
71
+ align: ['top', 'center'],
72
+ space: "small",
73
+ children: [/*#__PURE__*/_jsx(Column, {
74
+ width: "content",
75
+ children: /*#__PURE__*/_jsx(SidebarBackButton, {
76
+ onClick: onBack
77
+ })
78
+ }), /*#__PURE__*/_jsx(Column, {
79
+ children: /*#__PURE__*/_jsxs(Columns, {
80
+ space: "small",
81
+ collapseBelow: "tablet",
82
+ reverse: [true, false],
83
+ align: ['bottom', 'center'],
84
+ children: [/*#__PURE__*/_jsx(Column, {
85
+ children: /*#__PURE__*/_jsx(TextBox, {
86
+ variant: "heading-2",
87
+ children: title
88
+ })
89
+ }), action && /*#__PURE__*/_jsx(Column, {
90
+ width: "content",
91
+ children: action
92
+ })]
93
+ })
94
+ })]
95
+ })
81
96
  })
82
97
  })
83
98
  }), /*#__PURE__*/_jsx(Box, {
package/dist-src/sidebar/SidebarMenuItem.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ButtonBase } from '@material-ui/core';
2
2
  import { OpenInNew } from '@material-ui/icons';
3
- import { Color, Column, Columns, Inline } from '@superdispatch/ui';
3
+ import { Color, Column, Columns, Inline, mergeRefs } from '@superdispatch/ui';
4
4
  import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
5
5
  import styled, { css } from 'styled-components';
6
6
  import { TextBox } from "../text-box/TextBox.js";
@@ -40,26 +40,40 @@ export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
40
40
  openContentOnClick
41
41
  } = _ref2;
42
42
  var [hovered, setHovered] = useState(false);
43
+ var rootRef = useRef(null);
43
44
  var actionsRef = useRef(null);
44
45
  var actionsPlaceholderRef = useRef(null);
45
46
  var {
46
47
  openSidebarContent
47
48
  } = useSidebarContext();
49
+ var {
50
+ matches: isHoverSupported
51
+ } = matchMedia('(hover: hover)');
48
52
  useLayoutEffect(() => {
49
53
  if (actionsRef.current && actionsPlaceholderRef.current) {
50
54
  actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
51
55
  }
52
56
  });
57
+ useLayoutEffect(() => {
58
+ var rootNode = rootRef.current;
59
+
60
+ if (rootNode) {
61
+ if (isHoverSupported) {
62
+ rootNode.addEventListener('mouseenter', () => {
63
+ setHovered(true);
64
+ });
65
+ rootNode.addEventListener('mouseleave', () => {
66
+ setHovered(false);
67
+ });
68
+ } else {
69
+ setHovered(true);
70
+ }
71
+ }
72
+ }, [isHoverSupported]);
53
73
  var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
54
74
  return /*#__PURE__*/_jsxs(SidebarMenuItemRoot, {
55
- ref: ref,
75
+ ref: mergeRefs(ref, rootRef),
56
76
  hasAvatar: !!avatar,
57
- onMouseEnter: () => {
58
- setHovered(true);
59
- },
60
- onMouseLeave: () => {
61
- setHovered(false);
62
- },
63
77
  children: [/*#__PURE__*/_jsx(ButtonBase, {
64
78
  disabled: disabled,
65
79
  "aria-current": selected,
package/dist-web/index.js CHANGED
@@ -1130,7 +1130,7 @@ var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
1130
1130
  var NavbarItemRoot = /*#__PURE__*/styled.div.withConfig({
1131
1131
  displayName: "NavbarItem__NavbarItemRoot",
1132
1132
  componentId: "SD__sc-1pvzq3w-2"
1133
- })(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current]{background-color:#2f394a;color:", ";border-left-color:", ";}&[data-active='true']{border-left-color:", ";}"], Color.White, Color.Blue300, Color.Blue300);
1133
+ })(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], Color.White, Color.Blue300);
1134
1134
  var IconWrapper$1 = /*#__PURE__*/styled.div.withConfig({
1135
1135
  displayName: "NavbarItem__IconWrapper",
1136
1136
  componentId: "SD__sc-1pvzq3w-3"
@@ -1180,12 +1180,12 @@ var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
1180
1180
  var {
1181
1181
  gutter
1182
1182
  } = _ref;
1183
- return css(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:#1b2638;margin-top:", ";&:hover,&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&&.MuiAccordionSummary-root.Mui-expanded{margin-top:", ";max-height:40px;min-height:40px;}"], gutter ? '16px' : '0', Color.White, gutter ? '16px' : '0');
1183
+ return css(["width:100%;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;background-color:#1b2638;margin-top:", ";&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&.MuiAccordion-root.Mui-expanded{margin-top:", ";}"], gutter ? '16px' : '0', Color.White, gutter ? '16px' : '0');
1184
1184
  });
1185
1185
  var NavbarAccordionSummary = /*#__PURE__*/styled(AccordionSummary).withConfig({
1186
1186
  displayName: "NavbarAccordion__NavbarAccordionSummary",
1187
1187
  componentId: "SD__sc-1s7g3kw-2"
1188
- })(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&:hover,&[data-active='true']{border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.Blue300);
1188
+ })(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.Blue300);
1189
1189
  var IconWrapper$2 = /*#__PURE__*/styled.div.withConfig({
1190
1190
  displayName: "NavbarAccordion__IconWrapper",
1191
1191
  componentId: "SD__sc-1s7g3kw-3"
@@ -1236,9 +1236,12 @@ function NavbarAccordion(_ref2) {
1236
1236
  }), items.map(item => {
1237
1237
  var index = items.indexOf(item);
1238
1238
  var prev = items[index - 1];
1239
+ var {
1240
+ ident = 0
1241
+ } = item;
1239
1242
  return /*#__PURE__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
1240
1243
  key: item.key,
1241
- ident: 1,
1244
+ ident: ident + 1,
1242
1245
  active: item.active,
1243
1246
  gutter: prev && prev.groupKey !== item.groupKey,
1244
1247
  onClick: event => {
@@ -1727,6 +1730,10 @@ var SidebarAppBar = /*#__PURE__*/styled(AppBar).withConfig({
1727
1730
  } = _ref;
1728
1731
  return css(["", "{&&{border-left:transparent;}}"], theme.breakpoints.up('sm'));
1729
1732
  });
1733
+ var ToolbarContent = /*#__PURE__*/styled.div.withConfig({
1734
+ displayName: "SidebarContent__ToolbarContent",
1735
+ componentId: "SD__sc-zpgf61-1"
1736
+ })(["flex:1;padding:16px;"]);
1730
1737
  function SidebarContent(_ref2) {
1731
1738
  var {
1732
1739
  dense,
@@ -1771,23 +1778,34 @@ function SidebarContent(_ref2) {
1771
1778
  space: "none",
1772
1779
  children: [/*#__PURE__*/jsx(SidebarAppBar, {
1773
1780
  children: /*#__PURE__*/jsx(Toolbar, {
1774
- children: /*#__PURE__*/jsxs(Columns, {
1775
- align: "center",
1776
- space: "small",
1777
- children: [/*#__PURE__*/jsx(Column, {
1778
- width: "content",
1779
- children: /*#__PURE__*/jsx(SidebarBackButton, {
1780
- onClick: onBack
1781
- })
1782
- }), /*#__PURE__*/jsx(Column, {
1783
- children: /*#__PURE__*/jsx(TextBox, {
1784
- variant: "heading-2",
1785
- children: title
1786
- })
1787
- }), /*#__PURE__*/jsx(Column, {
1788
- width: "content",
1789
- children: action
1790
- })]
1781
+ disableGutters: true,
1782
+ children: /*#__PURE__*/jsx(ToolbarContent, {
1783
+ children: /*#__PURE__*/jsxs(Columns, {
1784
+ align: ['top', 'center'],
1785
+ space: "small",
1786
+ children: [/*#__PURE__*/jsx(Column, {
1787
+ width: "content",
1788
+ children: /*#__PURE__*/jsx(SidebarBackButton, {
1789
+ onClick: onBack
1790
+ })
1791
+ }), /*#__PURE__*/jsx(Column, {
1792
+ children: /*#__PURE__*/jsxs(Columns, {
1793
+ space: "small",
1794
+ collapseBelow: "tablet",
1795
+ reverse: [true, false],
1796
+ align: ['bottom', 'center'],
1797
+ children: [/*#__PURE__*/jsx(Column, {
1798
+ children: /*#__PURE__*/jsx(TextBox, {
1799
+ variant: "heading-2",
1800
+ children: title
1801
+ })
1802
+ }), action && /*#__PURE__*/jsx(Column, {
1803
+ width: "content",
1804
+ children: action
1805
+ })]
1806
+ })
1807
+ })]
1808
+ })
1791
1809
  })
1792
1810
  })
1793
1811
  }), /*#__PURE__*/jsx(Box, {
@@ -1861,26 +1879,40 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
1861
1879
  openContentOnClick
1862
1880
  } = _ref2;
1863
1881
  var [hovered, setHovered] = useState(false);
1882
+ var rootRef = useRef(null);
1864
1883
  var actionsRef = useRef(null);
1865
1884
  var actionsPlaceholderRef = useRef(null);
1866
1885
  var {
1867
1886
  openSidebarContent
1868
1887
  } = useSidebarContext();
1888
+ var {
1889
+ matches: isHoverSupported
1890
+ } = matchMedia('(hover: hover)');
1869
1891
  useLayoutEffect(() => {
1870
1892
  if (actionsRef.current && actionsPlaceholderRef.current) {
1871
1893
  actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
1872
1894
  }
1873
1895
  });
1896
+ useLayoutEffect(() => {
1897
+ var rootNode = rootRef.current;
1898
+
1899
+ if (rootNode) {
1900
+ if (isHoverSupported) {
1901
+ rootNode.addEventListener('mouseenter', () => {
1902
+ setHovered(true);
1903
+ });
1904
+ rootNode.addEventListener('mouseleave', () => {
1905
+ setHovered(false);
1906
+ });
1907
+ } else {
1908
+ setHovered(true);
1909
+ }
1910
+ }
1911
+ }, [isHoverSupported]);
1874
1912
  var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
1875
1913
  return /*#__PURE__*/jsxs(SidebarMenuItemRoot, {
1876
- ref: ref,
1914
+ ref: mergeRefs(ref, rootRef),
1877
1915
  hasAvatar: !!avatar,
1878
- onMouseEnter: () => {
1879
- setHovered(true);
1880
- },
1881
- onMouseLeave: () => {
1882
- setHovered(false);
1883
- },
1884
1916
  children: [/*#__PURE__*/jsx(ButtonBase, {
1885
1917
  disabled: disabled,
1886
1918
  "aria-current": selected,