@superdispatch/ui-lab 0.20.3 → 0.21.0

package/dist-node/index.js

@@ -1061,8 +1061,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() {
@@ -1137,7 +1138,7 @@ var NavbarLabel = /*#__PURE__*/styled__default.span.withConfig({
 var NavbarItemRoot = /*#__PURE__*/styled__default.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']{background-color:#2f394a;border-left-color:", ";}"], ui.Color.White, ui.Color.Blue300, ui.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],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], ui.Color.White, ui.Color.Blue300);
 var IconWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -1192,7 +1193,7 @@ var NavbarAccordionRoot = /*#__PURE__*/styled__default(core.Accordion).withConfi
 var NavbarAccordionSummary = /*#__PURE__*/styled__default(core.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']{background-color:#2f394a;border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], ui.Color.Blue300);
+})(["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;}}"], ui.Color.White, ui.Color.Blue300);
 var IconWrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
@@ -1207,45 +1208,46 @@ 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 => {
       var index = items.indexOf(item);
       var prev = items[index - 1];
+      var {
+        ident = 0
+      } = item;
       return /*#__PURE__*/react.createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
         key: item.key,
-        ident: 1,
+        ident: ident,
         active: item.active,
         gutter: prev && prev.groupKey !== item.groupKey,
         onClick: event => {
@@ -1330,12 +1332,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), {}, {
@@ -1347,13 +1349,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,
@@ -1414,14 +1416,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", {
@@ -1477,37 +1480,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({