@superdispatch/ui-lab 0.50.8 → 0.50.9

package/dist-src/navbar/NavbarAccordion.js

@@ -23,7 +23,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;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:", ";border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.White10, ColorDynamic.Blue300);
+})(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root,&.MuiAccordionSummary-root.Mui-expanded{max-height:40px;min-height:40px;}& .MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:", ";border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.White10, ColorDynamic.Blue300);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"

package/dist-src/navbar/NavbarItem.js

@@ -23,6 +23,7 @@ export function NavbarItem(_ref) {
     label,
     gutter,
     badge,
+    badgeIcon,
     icon,
     component,
     onClick,
@@ -45,9 +46,9 @@ export function NavbarItem(_ref) {
     }), /*#__PURE__*/_jsx(NavbarLabel, {
       id: uid,
       children: label
-    }), badge != null && /*#__PURE__*/_jsx(NavbarBadge, {
+    }), badge != null && !badgeIcon && /*#__PURE__*/_jsx(NavbarBadge, {
       "data-variant": variant,
       children: badge
-    })]
+    }), badgeIcon]
   });
 }

package/dist-src/navbar/NavbarList.js

@@ -15,7 +15,7 @@ var Header = /*#__PURE__*/styled.div.withConfig({
 var Wrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Wrapper",
   componentId: "SD__sc-19zrmxc-1"
-})(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:", ";transition:width 0.3s linear;height:100%;width:", ";&[data-expanded='true']{width:", ";}&[data-expanded='false']{width:", ";& > ", "{justify-content:center;}}"], _ref => {
+})(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:", ";transition:width 0.3s linear;height:100%;--_SdNavbar-width:", ";width:var(--_SdNavbar-width);&[data-expanded='true']{--_SdNavbar-width:", ";}&[data-expanded='false']{--_SdNavbar-width:", ";& > ", "{justify-content:center;}}"], _ref => {
   var {
     theme
   } = _ref;
@@ -71,6 +71,10 @@ var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
 })(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, ColorDark.Silver500);
+var ContentInner = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarList__ContentInner",
+  componentId: "SD__sc-19zrmxc-6"
+})(["width:var(--_SdNavbar-width);transition:width 0.3s linear;"]);
 export function NavbarList(_ref6) {
   var {
     header,
@@ -107,28 +111,30 @@ export function NavbarList(_ref6) {
       })]
     }), /*#__PURE__*/_jsx(Content, {
       "aria-expanded": isSidebarOpened,
-      children: filteredItems.map(item => {
-        var index = filteredItems.indexOf(item);
-        var prev = filteredItems[index - 1];
-        if ('items' in item) {
-          return /*#__PURE__*/_createElement(NavbarAccordion, _objectSpread(_objectSpread({}, item), {}, {
+      children: /*#__PURE__*/_jsx(ContentInner, {
+        children: filteredItems.map(item => {
+          var index = filteredItems.indexOf(item);
+          var prev = filteredItems[index - 1];
+          if ('items' in item) {
+            return /*#__PURE__*/_createElement(NavbarAccordion, _objectSpread(_objectSpread({}, item), {}, {
+              key: item.key,
+              gutter: prev && prev.groupKey !== item.groupKey,
+              onClick: item.onClick,
+              groupKey: item.groupKey || item.key
+            }));
+          }
+          return /*#__PURE__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
             key: item.key,
             gutter: prev && prev.groupKey !== item.groupKey,
-            onClick: item.onClick,
-            groupKey: item.groupKey || item.key
-          }));
-        }
-        return /*#__PURE__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
-          key: item.key,
-          gutter: prev && prev.groupKey !== item.groupKey,
-          onClick: event => {
-            var _item$onClick;
-            (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
-            if (!event.isDefaultPrevented()) {
-              setDrawerOpen(false);
+            onClick: event => {
+              var _item$onClick;
+              (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
+              if (!event.isDefaultPrevented()) {
+                setDrawerOpen(false);
+              }
             }
-          }
-        }));
+          }));
+        })
       })
     }), /*#__PURE__*/_jsx(Footer, {
       children: footer

package/dist-types/index.d.ts

@@ -271,12 +271,13 @@ interface NavbarItemProps {
     label: ReactNode;
     icon?: ReactNode;
     badge?: ReactNode;
+    badgeIcon?: ReactNode;
     ident?: number;
     gutter?: boolean;
     variant?: 'danger' | 'primary';
     active?: boolean;
 }
-declare function NavbarItem({ label, gutter, badge, icon, component, onClick, variant, ident, active, }: NavbarItemProps): ReactElement;
+declare function NavbarItem({ label, gutter, badge, badgeIcon, icon, component, onClick, variant, ident, active, }: NavbarItemProps): ReactElement;
 
 interface NavbarMenuItemProps {
     icon?: ReactNode;

package/dist-web/index.js

@@ -1429,6 +1429,7 @@ function NavbarItem(_ref) {
     label,
     gutter,
     badge,
+    badgeIcon,
     icon,
     component,
     onClick,
@@ -1451,10 +1452,10 @@ function NavbarItem(_ref) {
     }), /*#__PURE__*/jsx(NavbarLabel, {
       id: uid,
       children: label
-    }), badge != null && /*#__PURE__*/jsx(NavbarBadge, {
+    }), badge != null && !badgeIcon && /*#__PURE__*/jsx(NavbarBadge, {
       "data-variant": variant,
       children: badge
-    })]
+    }), badgeIcon]
   });
 }
 
@@ -1474,7 +1475,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;}&.MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:", ";border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.White10, ColorDynamic.Blue300);
+})(["border-left:4px solid transparent;padding-left:20px;&.MuiAccordionSummary-root,&.MuiAccordionSummary-root.Mui-expanded{max-height:40px;min-height:40px;}& .MuiAccordionSummary-content{align-items:center;}&:hover,&[aria-current],&[data-active='true']{color:", ";background-color:", ";border-left-color:", ";}&[data-expanded='false']{.MuiAccordionSummary-expandIcon{display:none;}}"], Color.White, Color.White10, ColorDynamic.Blue300);
 var IconWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
@@ -1551,7 +1552,7 @@ var Header = /*#__PURE__*/styled.div.withConfig({
 var Wrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Wrapper",
   componentId: "SD__sc-19zrmxc-1"
-})(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:", ";transition:width 0.3s linear;height:100%;width:", ";&[data-expanded='true']{width:", ";}&[data-expanded='false']{width:", ";& > ", "{justify-content:center;}}"], _ref => {
+})(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:", ";transition:width 0.3s linear;height:100%;--_SdNavbar-width:", ";width:var(--_SdNavbar-width);&[data-expanded='true']{--_SdNavbar-width:", ";}&[data-expanded='false']{--_SdNavbar-width:", ";& > ", "{justify-content:center;}}"], _ref => {
   var {
     theme
   } = _ref;
@@ -1607,6 +1608,10 @@ var Content$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
 })(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, ColorDark.Silver500);
+var ContentInner = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarList__ContentInner",
+  componentId: "SD__sc-19zrmxc-6"
+})(["width:var(--_SdNavbar-width);transition:width 0.3s linear;"]);
 function NavbarList(_ref6) {
   var {
     header,
@@ -1643,28 +1648,30 @@ function NavbarList(_ref6) {
       })]
     }), /*#__PURE__*/jsx(Content$1, {
       "aria-expanded": isSidebarOpened,
-      children: filteredItems.map(item => {
-        var index = filteredItems.indexOf(item);
-        var prev = filteredItems[index - 1];
-        if ('items' in item) {
-          return /*#__PURE__*/createElement(NavbarAccordion, _objectSpread(_objectSpread({}, item), {}, {
+      children: /*#__PURE__*/jsx(ContentInner, {
+        children: filteredItems.map(item => {
+          var index = filteredItems.indexOf(item);
+          var prev = filteredItems[index - 1];
+          if ('items' in item) {
+            return /*#__PURE__*/createElement(NavbarAccordion, _objectSpread(_objectSpread({}, item), {}, {
+              key: item.key,
+              gutter: prev && prev.groupKey !== item.groupKey,
+              onClick: item.onClick,
+              groupKey: item.groupKey || item.key
+            }));
+          }
+          return /*#__PURE__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
             key: item.key,
             gutter: prev && prev.groupKey !== item.groupKey,
-            onClick: item.onClick,
-            groupKey: item.groupKey || item.key
-          }));
-        }
-        return /*#__PURE__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
-          key: item.key,
-          gutter: prev && prev.groupKey !== item.groupKey,
-          onClick: event => {
-            var _item$onClick;
-            (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
-            if (!event.isDefaultPrevented()) {
-              setDrawerOpen(false);
+            onClick: event => {
+              var _item$onClick;
+              (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, event);
+              if (!event.isDefaultPrevented()) {
+                setDrawerOpen(false);
+              }
             }
-          }
-        }));
+          }));
+        })
       })
     }), /*#__PURE__*/jsx(Footer, {
       children: footer