@superdispatch/ui-lab 0.20.4 → 0.21.1

package/dist-node/index.js

@@ -163,7 +163,8 @@ function parseMargin(input) {
 
 var normalizeBorderRadius = /*#__PURE__*/createRuleNormalizer({
   none: 0,
-  small: 4
+  small: 4,
+  medium: 8
 });
 var normalizeBorderWidth = /*#__PURE__*/createRuleNormalizer({
   none: 0,
@@ -1061,8 +1062,9 @@ MultilineText.displayName = 'MultilineText';
 
 var NavbarContext = /*#__PURE__*/react.createContext({
   isDrawerOpen: false,
-  isExpanded: false,
-  setIsExpanded: lodash.noop,
+  isMenuExpanded: false,
+  isNavbarExpanded: false,
+  setMenuExpanded: lodash.noop,
   setDrawerOpen: lodash.noop
 });
 function useNavbarContext() {
@@ -1207,37 +1209,35 @@ function NavbarAccordion(_ref2) {
   } = _ref2;
   var uid = ui.useUID();
   var {
-    isExpanded: isMenuExpanded,
-    isDrawerOpen,
-    setDrawerOpen
+    setDrawerOpen,
+    isNavbarExpanded
   } = useNavbarContext();
-  var [isExpanded, setExpanded] = react.useState(false);
+  var [isExpanded, setExpanded] = react.useState(true); // sync accordion state with Desktop menu state
+
   react.useEffect(() => {
-    if (!isMenuExpanded) {
-      setExpanded(false);
-    }
-  }, [isMenuExpanded]);
+    setExpanded(isNavbarExpanded);
+  }, [isNavbarExpanded]);
   return /*#__PURE__*/jsxRuntime.jsxs(NavbarAccordionRoot, {
-    "aria-labelledby": uid,
+    square: true,
     gutter: !!gutter,
+    "aria-labelledby": uid,
     expanded: isExpanded,
     onClick: event => {
-      if (isMenuExpanded || isDrawerOpen) {
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+
+      if (isNavbarExpanded) {
         setExpanded(!isExpanded);
       }
-
-      _onClick(event);
     },
-    square: true,
     children: [/*#__PURE__*/jsxRuntime.jsxs(NavbarAccordionSummary, {
       "data-active": !isExpanded && items.some(item => item.active),
-      "data-expanded": isMenuExpanded || isDrawerOpen,
+      "data-expanded": isNavbarExpanded,
       expandIcon: /*#__PURE__*/jsxRuntime.jsx(icons.ExpandMore, {}),
       children: [/*#__PURE__*/jsxRuntime.jsx(IconWrapper$2, {
         children: icon
       }), /*#__PURE__*/jsxRuntime.jsx(NavbarAccordionLabel, {
         id: uid,
-        "data-expanded": isMenuExpanded || isDrawerOpen,
+        "data-expanded": isNavbarExpanded,
         children: label
       })]
     }), items.map(item => {
@@ -1248,7 +1248,7 @@ function NavbarAccordion(_ref2) {
       } = item;
       return /*#__PURE__*/react.createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
         key: item.key,
-        ident: ident + 1,
+        ident: ident,
         active: item.active,
         gutter: prev && prev.groupKey !== item.groupKey,
         onClick: event => {
@@ -1333,12 +1333,12 @@ function NavbarList(_ref5) {
   var platform = ui.useResponsiveValue('mobile', 'tablet', 'desktop');
   var isMobile = platform === 'mobile';
   var {
-    isExpanded,
+    isMenuExpanded,
     isDrawerOpen,
     setDrawerOpen,
-    setIsExpanded
+    setMenuExpanded
   } = useNavbarContext();
-  var isSidebarOpened = isMobile ? isDrawerOpen : isExpanded;
+  var isSidebarOpened = isMobile ? isDrawerOpen : isMenuExpanded;
   var filteredItems = react.useMemo(() => items.filter(item => {
     return !item.hide && (isSidebarOpened || !!item.icon);
   }).map(item => _objectSpread(_objectSpread({}, item), {}, {
@@ -1350,13 +1350,13 @@ function NavbarList(_ref5) {
     children: [/*#__PURE__*/jsxRuntime.jsxs(Header, {
       children: [isSidebarOpened && header, !isMobile && /*#__PURE__*/jsxRuntime.jsx(ExpandIconButton, {
         disableRipple: true,
-        style: isExpanded ? {
+        style: isMenuExpanded ? {
           paddingRight: 0
         } : {},
         onClick: () => {
-          setIsExpanded(!isExpanded);
+          setMenuExpanded(!isMenuExpanded);
         },
-        children: isExpanded ? /*#__PURE__*/jsxRuntime.jsx(icons.MenuOpen, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Menu, {})
+        children: isMenuExpanded ? /*#__PURE__*/jsxRuntime.jsx(icons.MenuOpen, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Menu, {})
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Content, {
       "aria-expanded": isSidebarOpened,
@@ -1417,14 +1417,15 @@ function Navbar(_ref) {
   var matches = core.useMediaQuery(theme.breakpoints.up('md'), {
     noSsr: true
   });
-  var [isExpanded, setIsExpanded] = react.useState(matches);
+  var [isMenuExpanded, setMenuExpanded] = react.useState(matches);
   var hasBadge = hasExtraBadge || items.some(item => item.badge);
   var ctx = react.useMemo(() => ({
     isDrawerOpen,
-    isExpanded,
-    setIsExpanded,
-    setDrawerOpen
-  }), [isDrawerOpen, isExpanded, setIsExpanded, setDrawerOpen]);
+    isMenuExpanded,
+    setDrawerOpen,
+    setMenuExpanded,
+    isNavbarExpanded: isMenuExpanded || isDrawerOpen
+  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
   return /*#__PURE__*/jsxRuntime.jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1480,37 +1481,36 @@ function NavbarAvatar(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$7);
 
   var {
-    isExpanded,
-    isDrawerOpen
+    isNavbarExpanded
   } = useNavbarContext();
 
-  if (isExpanded || isDrawerOpen) {
-    return /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
-      space: "xsmall",
-      align: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
-        width: "content",
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Avatar, _objectSpread(_objectSpread({}, props), {}, {
-          children: children
-        }))
-      }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
-        children: /*#__PURE__*/jsxRuntime.jsxs(ui.Stack, {
-          space: "none",
-          children: [/*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-            variant: "caption",
-            children: title
-          }), /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
-            variant: "caption",
-            children: subtitle
-          })]
-        })
-      })]
-    });
+  if (!isNavbarExpanded) {
+    return /*#__PURE__*/jsxRuntime.jsx(core.Avatar, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(core.Avatar, _objectSpread(_objectSpread({}, props), {}, {
-    children: children
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+    space: "xsmall",
+    align: "center",
+    children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      width: "content",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Avatar, _objectSpread(_objectSpread({}, props), {}, {
+        children: children
+      }))
+    }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(ui.Stack, {
+        space: "none",
+        children: [/*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
+          variant: "caption",
+          children: title
+        }), /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
+          variant: "caption",
+          children: subtitle
+        })]
+      })
+    })]
+  });
 }
 
 var Divider = /*#__PURE__*/styled__default.div.withConfig({