@superdispatch/ui-lab 0.20.3 → 0.21.0

package/dist-src/navbar/Navbar.js

@@ -33,14 +33,15 @@ export function Navbar(_ref) {
   var matches = useMediaQuery(theme.breakpoints.up('md'), {
     noSsr: true
   });
-  var [isExpanded, setIsExpanded] = useState(matches);
+  var [isMenuExpanded, setMenuExpanded] = useState(matches);
   var hasBadge = hasExtraBadge || items.some(item => item.badge);
   var ctx = useMemo(() => ({
     isDrawerOpen,
-    isExpanded,
-    setIsExpanded,
-    setDrawerOpen
-  }), [isDrawerOpen, isExpanded, setIsExpanded, setDrawerOpen]);
+    isMenuExpanded,
+    setDrawerOpen,
+    setMenuExpanded,
+    isNavbarExpanded: isMenuExpanded || isDrawerOpen
+  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
   return /*#__PURE__*/_jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/_jsxs("div", {

package/dist-src/navbar/NavbarAccordion.js

@@ -25,7 +25,7 @@ var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
 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']{background-color:#2f394a;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;}&.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);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
@@ -40,45 +40,46 @@ export function NavbarAccordion(_ref2) {
   } = _ref2;
   var uid = useUID();
   var {
-    isExpanded: isMenuExpanded,
-    isDrawerOpen,
-    setDrawerOpen
+    setDrawerOpen,
+    isNavbarExpanded
   } = useNavbarContext();
-  var [isExpanded, setExpanded] = useState(false);
+  var [isExpanded, setExpanded] = useState(true); // sync accordion state with Desktop menu state
+
   useEffect(() => {
-    if (!isMenuExpanded) {
-      setExpanded(false);
-    }
-  }, [isMenuExpanded]);
+    setExpanded(isNavbarExpanded);
+  }, [isNavbarExpanded]);
   return /*#__PURE__*/_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__*/_jsxs(NavbarAccordionSummary, {
       "data-active": !isExpanded && items.some(item => item.active),
-      "data-expanded": isMenuExpanded || isDrawerOpen,
+      "data-expanded": isNavbarExpanded,
       expandIcon: /*#__PURE__*/_jsx(ExpandMore, {}),
       children: [/*#__PURE__*/_jsx(IconWrapper, {
         children: icon
       }), /*#__PURE__*/_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__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
         key: item.key,
-        ident: 1,
+        ident: ident,
         active: item.active,
         gutter: prev && prev.groupKey !== item.groupKey,
         onClick: event => {

package/dist-src/navbar/NavbarAvatar.js

@@ -20,35 +20,34 @@ export function NavbarAvatar(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var {
-    isExpanded,
-    isDrawerOpen
+    isNavbarExpanded
   } = useNavbarContext();
 
-  if (isExpanded || isDrawerOpen) {
-    return /*#__PURE__*/_jsxs(Columns, {
-      space: "xsmall",
-      align: "center",
-      children: [/*#__PURE__*/_jsx(Column, {
-        width: "content",
-        children: /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
-          children: children
-        }))
-      }), /*#__PURE__*/_jsx(Column, {
-        children: /*#__PURE__*/_jsxs(Stack, {
-          space: "none",
-          children: [/*#__PURE__*/_jsx(StyledTypography, {
-            variant: "caption",
-            children: title
-          }), /*#__PURE__*/_jsx(StyledTypography, {
-            variant: "caption",
-            children: subtitle
-          })]
-        })
-      })]
-    });
+  if (!isNavbarExpanded) {
+    return /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
   }
 
-  return /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
-    children: children
-  }));
+  return /*#__PURE__*/_jsxs(Columns, {
+    space: "xsmall",
+    align: "center",
+    children: [/*#__PURE__*/_jsx(Column, {
+      width: "content",
+      children: /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
+        children: children
+      }))
+    }), /*#__PURE__*/_jsx(Column, {
+      children: /*#__PURE__*/_jsxs(Stack, {
+        space: "none",
+        children: [/*#__PURE__*/_jsx(StyledTypography, {
+          variant: "caption",
+          children: title
+        }), /*#__PURE__*/_jsx(StyledTypography, {
+          variant: "caption",
+          children: subtitle
+        })]
+      })
+    })]
+  });
 }

package/dist-src/navbar/NavbarContext.js

@@ -2,8 +2,9 @@ import { noop } from 'lodash';
 import { createContext, useContext } from 'react';
 export var NavbarContext = /*#__PURE__*/createContext({
   isDrawerOpen: false,
-  isExpanded: false,
-  setIsExpanded: noop,
+  isMenuExpanded: false,
+  isNavbarExpanded: false,
+  setMenuExpanded: noop,
   setDrawerOpen: noop
 });
 export function useNavbarContext() {

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']{background-color:#2f394a;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],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], Color.White, Color.Blue300);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"

package/dist-src/navbar/NavbarList.js

@@ -77,12 +77,12 @@ export function NavbarList(_ref5) {
   var platform = 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 = useMemo(() => items.filter(item => {
     return !item.hide && (isSidebarOpened || !!item.icon);
   }).map(item => _objectSpread(_objectSpread({}, item), {}, {
@@ -94,13 +94,13 @@ export function NavbarList(_ref5) {
     children: [/*#__PURE__*/_jsxs(Header, {
       children: [isSidebarOpened && header, !isMobile && /*#__PURE__*/_jsx(ExpandIconButton, {
         disableRipple: true,
-        style: isExpanded ? {
+        style: isMenuExpanded ? {
           paddingRight: 0
         } : {},
         onClick: () => {
-          setIsExpanded(!isExpanded);
+          setMenuExpanded(!isMenuExpanded);
         },
-        children: isExpanded ? /*#__PURE__*/_jsx(MenuOpen, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
+        children: isMenuExpanded ? /*#__PURE__*/_jsx(MenuOpen, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Content, {
       "aria-expanded": isSidebarOpened,

package/dist-types/index.d.ts

@@ -197,8 +197,8 @@ interface NavbarAccordionProps {
     label: ReactNode;
     icon?: ReactNode;
     gutter?: boolean;
-    items: NavbarItemOptions[];
-    onClick: (event: MouseEvent<HTMLDivElement>) => void;
+    items: Array<Omit<NavbarItemOptions, 'icon'>>;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
 declare const NavbarBadge: StyledComponent<"span", DefaultTheme, {}, never>;
@@ -261,9 +261,10 @@ declare function NavbarAvatar({ title, subtitle, children, ...props }: NavbarAva
 
 interface NavbarContextType {
     isDrawerOpen: boolean;
-    isExpanded: boolean;
-    setIsExpanded: (value: boolean) => void;
+    isMenuExpanded: boolean;
+    isNavbarExpanded: boolean;
     setDrawerOpen: (value: boolean) => void;
+    setMenuExpanded: (value: boolean) => void;
 }
 declare function useNavbarContext(): NavbarContextType;
 

package/dist-web/index.js

@@ -1054,8 +1054,9 @@ MultilineText.displayName = 'MultilineText';
 
 var NavbarContext = /*#__PURE__*/createContext({
   isDrawerOpen: false,
-  isExpanded: false,
-  setIsExpanded: noop,
+  isMenuExpanded: false,
+  isNavbarExpanded: false,
+  setMenuExpanded: noop,
   setDrawerOpen: noop
 });
 function useNavbarContext() {
@@ -1130,7 +1131,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']{background-color:#2f394a;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],&[data-active='true']{color:", ";background-color:#2f394a;border-left-color:", ";}"], Color.White, Color.Blue300);
 var IconWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -1185,7 +1186,7 @@ var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
 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']{background-color:#2f394a;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;}&.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);
 var IconWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
@@ -1200,45 +1201,46 @@ function NavbarAccordion(_ref2) {
   } = _ref2;
   var uid = useUID();
   var {
-    isExpanded: isMenuExpanded,
-    isDrawerOpen,
-    setDrawerOpen
+    setDrawerOpen,
+    isNavbarExpanded
   } = useNavbarContext();
-  var [isExpanded, setExpanded] = useState(false);
+  var [isExpanded, setExpanded] = useState(true); // sync accordion state with Desktop menu state
+
   useEffect(() => {
-    if (!isMenuExpanded) {
-      setExpanded(false);
-    }
-  }, [isMenuExpanded]);
+    setExpanded(isNavbarExpanded);
+  }, [isNavbarExpanded]);
   return /*#__PURE__*/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__*/jsxs(NavbarAccordionSummary, {
       "data-active": !isExpanded && items.some(item => item.active),
-      "data-expanded": isMenuExpanded || isDrawerOpen,
+      "data-expanded": isNavbarExpanded,
       expandIcon: /*#__PURE__*/jsx(ExpandMore, {}),
       children: [/*#__PURE__*/jsx(IconWrapper$2, {
         children: icon
       }), /*#__PURE__*/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__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
         key: item.key,
-        ident: 1,
+        ident: ident,
         active: item.active,
         gutter: prev && prev.groupKey !== item.groupKey,
         onClick: event => {
@@ -1323,12 +1325,12 @@ function NavbarList(_ref5) {
   var platform = 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 = useMemo(() => items.filter(item => {
     return !item.hide && (isSidebarOpened || !!item.icon);
   }).map(item => _objectSpread(_objectSpread({}, item), {}, {
@@ -1340,13 +1342,13 @@ function NavbarList(_ref5) {
     children: [/*#__PURE__*/jsxs(Header, {
       children: [isSidebarOpened && header, !isMobile && /*#__PURE__*/jsx(ExpandIconButton, {
         disableRipple: true,
-        style: isExpanded ? {
+        style: isMenuExpanded ? {
           paddingRight: 0
         } : {},
         onClick: () => {
-          setIsExpanded(!isExpanded);
+          setMenuExpanded(!isMenuExpanded);
         },
-        children: isExpanded ? /*#__PURE__*/jsx(MenuOpen, {}) : /*#__PURE__*/jsx(Menu, {})
+        children: isMenuExpanded ? /*#__PURE__*/jsx(MenuOpen, {}) : /*#__PURE__*/jsx(Menu, {})
       })]
     }), /*#__PURE__*/jsx(Content, {
       "aria-expanded": isSidebarOpened,
@@ -1407,14 +1409,15 @@ function Navbar(_ref) {
   var matches = useMediaQuery(theme.breakpoints.up('md'), {
     noSsr: true
   });
-  var [isExpanded, setIsExpanded] = useState(matches);
+  var [isMenuExpanded, setMenuExpanded] = useState(matches);
   var hasBadge = hasExtraBadge || items.some(item => item.badge);
   var ctx = useMemo(() => ({
     isDrawerOpen,
-    isExpanded,
-    setIsExpanded,
-    setDrawerOpen
-  }), [isDrawerOpen, isExpanded, setIsExpanded, setDrawerOpen]);
+    isMenuExpanded,
+    setDrawerOpen,
+    setMenuExpanded,
+    isNavbarExpanded: isMenuExpanded || isDrawerOpen
+  }), [isDrawerOpen, isMenuExpanded, setMenuExpanded, setDrawerOpen]);
   return /*#__PURE__*/jsx(NavbarContext.Provider, {
     value: ctx,
     children: /*#__PURE__*/jsxs("div", {
@@ -1470,37 +1473,36 @@ function NavbarAvatar(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$7);
 
   var {
-    isExpanded,
-    isDrawerOpen
+    isNavbarExpanded
   } = useNavbarContext();
 
-  if (isExpanded || isDrawerOpen) {
-    return /*#__PURE__*/jsxs(Columns, {
-      space: "xsmall",
-      align: "center",
-      children: [/*#__PURE__*/jsx(Column, {
-        width: "content",
-        children: /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
-          children: children
-        }))
-      }), /*#__PURE__*/jsx(Column, {
-        children: /*#__PURE__*/jsxs(Stack, {
-          space: "none",
-          children: [/*#__PURE__*/jsx(StyledTypography, {
-            variant: "caption",
-            children: title
-          }), /*#__PURE__*/jsx(StyledTypography, {
-            variant: "caption",
-            children: subtitle
-          })]
-        })
-      })]
-    });
+  if (!isNavbarExpanded) {
+    return /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
   }
 
-  return /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
-    children: children
-  }));
+  return /*#__PURE__*/jsxs(Columns, {
+    space: "xsmall",
+    align: "center",
+    children: [/*#__PURE__*/jsx(Column, {
+      width: "content",
+      children: /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
+        children: children
+      }))
+    }), /*#__PURE__*/jsx(Column, {
+      children: /*#__PURE__*/jsxs(Stack, {
+        space: "none",
+        children: [/*#__PURE__*/jsx(StyledTypography, {
+          variant: "caption",
+          children: title
+        }), /*#__PURE__*/jsx(StyledTypography, {
+          variant: "caption",
+          children: subtitle
+        })]
+      })
+    })]
+  });
 }
 
 var Divider = /*#__PURE__*/styled.div.withConfig({