@superdispatch/ui-lab 0.20.0 → 0.20.3

package/dist-src/navbar/NavbarAccordion.js

@@ -20,12 +20,12 @@ var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
   var {
     gutter
   } = _ref;
-  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');
+  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');
 });
 var NavbarAccordionSummary = /*#__PURE__*/styled(AccordionSummary).withConfig({
   displayName: "NavbarAccordion__NavbarAccordionSummary",
   componentId: "SD__sc-1s7g3kw-2"
-})(["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);
+})(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&:hover,&[data-active='true']{background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.Blue300);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"

package/dist-src/navbar/NavbarItem.js

@@ -13,7 +13,7 @@ export var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
 var NavbarItemRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__NavbarItemRoot",
   componentId: "SD__sc-1pvzq3w-2"
-})(["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);
+})(["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']{background-color:#2f394a;border-left-color:", ";}"], Color.White, Color.Blue300, Color.Blue300);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"

package/dist-src/sidebar/SidebarContent.js

@@ -17,6 +17,10 @@ var SidebarAppBar = /*#__PURE__*/styled(AppBar).withConfig({
   } = _ref;
   return css(["", "{&&{border-left:transparent;}}"], theme.breakpoints.up('sm'));
 });
+var ToolbarContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarContent__ToolbarContent",
+  componentId: "SD__sc-zpgf61-1"
+})(["flex:1;padding:16px;"]);
 export function SidebarContent(_ref2) {
   var {
     dense,
@@ -61,27 +65,38 @@ export function SidebarContent(_ref2) {
     space: "none",
     children: [/*#__PURE__*/_jsx(SidebarAppBar, {
       children: /*#__PURE__*/_jsx(Toolbar, {
-        children: /*#__PURE__*/_jsxs(Columns, {
-          align: "center",
-          space: "small",
-          children: [/*#__PURE__*/_jsx(Column, {
-            width: "content",
-            children: /*#__PURE__*/_jsx(SidebarBackButton, {
-              onClick: onBack
-            })
-          }), /*#__PURE__*/_jsx(Column, {
-            children: /*#__PURE__*/_jsx(TextBox, {
-              variant: "heading-2",
-              children: title
-            })
-          }), /*#__PURE__*/_jsx(Column, {
-            width: "content",
-            children: action
-          })]
+        disableGutters: true,
+        children: /*#__PURE__*/_jsx(ToolbarContent, {
+          children: /*#__PURE__*/_jsxs(Columns, {
+            align: ['top', 'center'],
+            space: "small",
+            children: [/*#__PURE__*/_jsx(Column, {
+              width: "content",
+              children: /*#__PURE__*/_jsx(SidebarBackButton, {
+                onClick: onBack
+              })
+            }), /*#__PURE__*/_jsx(Column, {
+              children: /*#__PURE__*/_jsxs(Columns, {
+                space: "small",
+                collapseBelow: "tablet",
+                reverse: [true, false],
+                align: ['bottom', 'center'],
+                children: [/*#__PURE__*/_jsx(Column, {
+                  children: /*#__PURE__*/_jsx(TextBox, {
+                    variant: "heading-2",
+                    children: title
+                  })
+                }), action && /*#__PURE__*/_jsx(Column, {
+                  width: "content",
+                  children: action
+                })]
+              })
+            })]
+          })
         })
       })
     }), /*#__PURE__*/_jsx(Box, {
-      padding: dense ? 'none' : 'medium',
+      padding: dense ? 'none' : ['small', 'medium'],
       children: children
     })]
   });

package/dist-src/sidebar/SidebarMenuItem.js

@@ -1,6 +1,6 @@
 import { ButtonBase } from '@material-ui/core';
 import { OpenInNew } from '@material-ui/icons';
-import { Color, Column, Columns, Inline } from '@superdispatch/ui';
+import { Color, Column, Columns, Inline, mergeRefs } from '@superdispatch/ui';
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TextBox } from "../text-box/TextBox.js";
@@ -40,26 +40,40 @@ export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     openContentOnClick
   } = _ref2;
   var [hovered, setHovered] = useState(false);
+  var rootRef = useRef(null);
   var actionsRef = useRef(null);
   var actionsPlaceholderRef = useRef(null);
   var {
     openSidebarContent
   } = useSidebarContext();
+  var {
+    matches: isHoverSupported
+  } = matchMedia('(hover: hover)');
   useLayoutEffect(() => {
     if (actionsRef.current && actionsPlaceholderRef.current) {
       actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
     }
   });
+  useLayoutEffect(() => {
+    var rootNode = rootRef.current;
+
+    if (rootNode) {
+      if (isHoverSupported) {
+        rootNode.addEventListener('mouseenter', () => {
+          setHovered(true);
+        });
+        rootNode.addEventListener('mouseleave', () => {
+          setHovered(false);
+        });
+      } else {
+        setHovered(true);
+      }
+    }
+  }, [isHoverSupported]);
   var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
   return /*#__PURE__*/_jsxs(SidebarMenuItemRoot, {
-    ref: ref,
+    ref: mergeRefs(ref, rootRef),
     hasAvatar: !!avatar,
-    onMouseEnter: () => {
-      setHovered(true);
-    },
-    onMouseLeave: () => {
-      setHovered(false);
-    },
     children: [/*#__PURE__*/_jsx(ButtonBase, {
       disabled: disabled,
       "aria-current": selected,

package/dist-web/index.js

@@ -1130,7 +1130,7 @@ var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
 var NavbarItemRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__NavbarItemRoot",
   componentId: "SD__sc-1pvzq3w-2"
-})(["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);
+})(["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']{background-color:#2f394a;border-left-color:", ";}"], Color.White, Color.Blue300, Color.Blue300);
 var IconWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -1180,12 +1180,12 @@ var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
   var {
     gutter
   } = _ref;
-  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');
+  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');
 });
 var NavbarAccordionSummary = /*#__PURE__*/styled(AccordionSummary).withConfig({
   displayName: "NavbarAccordion__NavbarAccordionSummary",
   componentId: "SD__sc-1s7g3kw-2"
-})(["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);
+})(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root{max-height:40px;min-height:40px;}&:hover,&[data-active='true']{background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.Blue300);
 var IconWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
@@ -1727,6 +1727,10 @@ var SidebarAppBar = /*#__PURE__*/styled(AppBar).withConfig({
   } = _ref;
   return css(["", "{&&{border-left:transparent;}}"], theme.breakpoints.up('sm'));
 });
+var ToolbarContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarContent__ToolbarContent",
+  componentId: "SD__sc-zpgf61-1"
+})(["flex:1;padding:16px;"]);
 function SidebarContent(_ref2) {
   var {
     dense,
@@ -1771,27 +1775,38 @@ function SidebarContent(_ref2) {
     space: "none",
     children: [/*#__PURE__*/jsx(SidebarAppBar, {
       children: /*#__PURE__*/jsx(Toolbar, {
-        children: /*#__PURE__*/jsxs(Columns, {
-          align: "center",
-          space: "small",
-          children: [/*#__PURE__*/jsx(Column, {
-            width: "content",
-            children: /*#__PURE__*/jsx(SidebarBackButton, {
-              onClick: onBack
-            })
-          }), /*#__PURE__*/jsx(Column, {
-            children: /*#__PURE__*/jsx(TextBox, {
-              variant: "heading-2",
-              children: title
-            })
-          }), /*#__PURE__*/jsx(Column, {
-            width: "content",
-            children: action
-          })]
+        disableGutters: true,
+        children: /*#__PURE__*/jsx(ToolbarContent, {
+          children: /*#__PURE__*/jsxs(Columns, {
+            align: ['top', 'center'],
+            space: "small",
+            children: [/*#__PURE__*/jsx(Column, {
+              width: "content",
+              children: /*#__PURE__*/jsx(SidebarBackButton, {
+                onClick: onBack
+              })
+            }), /*#__PURE__*/jsx(Column, {
+              children: /*#__PURE__*/jsxs(Columns, {
+                space: "small",
+                collapseBelow: "tablet",
+                reverse: [true, false],
+                align: ['bottom', 'center'],
+                children: [/*#__PURE__*/jsx(Column, {
+                  children: /*#__PURE__*/jsx(TextBox, {
+                    variant: "heading-2",
+                    children: title
+                  })
+                }), action && /*#__PURE__*/jsx(Column, {
+                  width: "content",
+                  children: action
+                })]
+              })
+            })]
+          })
         })
       })
     }), /*#__PURE__*/jsx(Box, {
-      padding: dense ? 'none' : 'medium',
+      padding: dense ? 'none' : ['small', 'medium'],
       children: children
     })]
   });
@@ -1861,26 +1876,40 @@ var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     openContentOnClick
   } = _ref2;
   var [hovered, setHovered] = useState(false);
+  var rootRef = useRef(null);
   var actionsRef = useRef(null);
   var actionsPlaceholderRef = useRef(null);
   var {
     openSidebarContent
   } = useSidebarContext();
+  var {
+    matches: isHoverSupported
+  } = matchMedia('(hover: hover)');
   useLayoutEffect(() => {
     if (actionsRef.current && actionsPlaceholderRef.current) {
       actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
     }
   });
+  useLayoutEffect(() => {
+    var rootNode = rootRef.current;
+
+    if (rootNode) {
+      if (isHoverSupported) {
+        rootNode.addEventListener('mouseenter', () => {
+          setHovered(true);
+        });
+        rootNode.addEventListener('mouseleave', () => {
+          setHovered(false);
+        });
+      } else {
+        setHovered(true);
+      }
+    }
+  }, [isHoverSupported]);
   var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
   return /*#__PURE__*/jsxs(SidebarMenuItemRoot, {
-    ref: ref,
+    ref: mergeRefs(ref, rootRef),
     hasAvatar: !!avatar,
-    onMouseEnter: () => {
-      setHovered(true);
-    },
-    onMouseLeave: () => {
-      setHovered(false);
-    },
     children: [/*#__PURE__*/jsx(ButtonBase, {
       disabled: disabled,
       "aria-current": selected,