@superdispatch/ui-lab 0.18.3 → 0.19.0

package/dist-src/index.js

@@ -7,6 +7,8 @@ export * from "./container/Container.js";
 export * from "./description-item/DescriptionItem.js";
 export * from "./file-drop-zone/FileDropZone.js";
 export * from "./file-list-item/FileListItem.js";
+export * from "./linked-text/LinkedText.js";
+export * from "./multiline-text/MultilineText.js";
 export * from "./navbar/Navbar.js";
 export * from "./navbar/NavbarAvatar.js";
 export * from "./navbar/NavbarBottomBar.js";

package/dist-src/multiline-text/MultilineText.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+export var MultilineText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "MultilineText",
+  componentId: "SD__sc-34heyp-0"
+})(["white-space:pre-wrap;overflow-wrap:", ";"], _ref => {
+  var {
+    overflowWrap = 'normal'
+  } = _ref;
+  return overflowWrap;
+});
+MultilineText.displayName = 'MultilineText';

package/dist-src/navbar/NavbarAccordion.js

@@ -0,0 +1,97 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { Accordion, AccordionSummary } from '@material-ui/core';
+import { ExpandMore } from '@material-ui/icons';
+import { Color, useUID } from '@superdispatch/ui';
+import { useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { useNavbarContext } from "./NavbarContext.js";
+import { NavbarItem } from "./NavbarItem.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+export var NavbarAccordionLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "NavbarAccordion__NavbarAccordionLabel",
+  componentId: "SD__sc-1s7g3kw-0"
+})(["flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;&[data-expanded='false']{display:none;}"]);
+var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
+  displayName: "NavbarAccordion__NavbarAccordionRoot",
+  componentId: "SD__sc-1s7g3kw-1"
+})(_ref => {
+  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');
+});
+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);
+var IconWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarAccordion__IconWrapper",
+  componentId: "SD__sc-1s7g3kw-3"
+})(["width:24px;margin-right:8px;& svg{font-size:24px;}"]);
+export function NavbarAccordion(_ref2) {
+  var {
+    label,
+    icon,
+    gutter,
+    items,
+    onClick: _onClick
+  } = _ref2;
+  var uid = useUID();
+  var {
+    isExpanded: isMenuExpanded,
+    isDrawerOpen,
+    setDrawerOpen
+  } = useNavbarContext();
+  var [isExpanded, setExpanded] = useState(false);
+  useEffect(() => {
+    if (!isMenuExpanded) {
+      setExpanded(false);
+    }
+  }, [isMenuExpanded]);
+  return /*#__PURE__*/_jsxs(NavbarAccordionRoot, {
+    "aria-labelledby": uid,
+    gutter: !!gutter,
+    expanded: isExpanded,
+    onClick: event => {
+      if (isMenuExpanded || isDrawerOpen) {
+        setExpanded(!isExpanded);
+      }
+
+      _onClick(event);
+    },
+    square: true,
+    children: [/*#__PURE__*/_jsxs(NavbarAccordionSummary, {
+      "data-active": !isExpanded && items.some(item => item.active),
+      "data-expanded": isMenuExpanded || isDrawerOpen,
+      expandIcon: /*#__PURE__*/_jsx(ExpandMore, {}),
+      children: [/*#__PURE__*/_jsx(IconWrapper, {
+        children: icon
+      }), /*#__PURE__*/_jsx(NavbarAccordionLabel, {
+        id: uid,
+        "data-expanded": isMenuExpanded || isDrawerOpen,
+        children: label
+      })]
+    }), items.map(item => {
+      var index = items.indexOf(item);
+      var prev = items[index - 1];
+      return /*#__PURE__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
+        key: item.key,
+        ident: 1,
+        active: item.active,
+        gutter: prev && prev.groupKey !== item.groupKey,
+        onClick: event => {
+          var _item$onClick;
+
+          event.stopPropagation();
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+
+          if (!event.isDefaultPrevented()) {
+            setDrawerOpen(false);
+          }
+        }
+      }));
+    })]
+  });
+}

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:", ";}"], Color.White, 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']{border-left-color:", ";}"], Color.White, Color.Blue300, Color.Blue300);
 var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -27,13 +27,15 @@ export function NavbarItem(_ref) {
     component,
     onClick,
     variant,
-    ident = 0
+    ident = 0,
+    active
   } = _ref;
   var uid = useUID();
   return /*#__PURE__*/_jsxs(NavbarItemRoot, {
     as: component,
     onClick: onClick,
     "aria-labelledby": uid,
+    "data-active": active,
     style: {
       marginTop: gutter ? '16px' : '0',
       paddingLeft: (ident + 1) * 20

package/dist-src/navbar/NavbarList.js

@@ -4,6 +4,7 @@ import { Menu as MenuIcon, MenuOpen } from '@material-ui/icons';
 import { Color, Inline, useResponsiveValue } from '@superdispatch/ui';
 import { useMemo } from 'react';
 import styled from 'styled-components';
+import { NavbarAccordion } from "./NavbarAccordion.js";
 import { useNavbarContext } from "./NavbarContext.js";
 import { NavbarBadge, NavbarItem, NavbarLabel } from "./NavbarItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -66,7 +67,7 @@ export function NavbarMenuItem(_ref4) {
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
-})(["height:100%;min-height:50px;overflow:scroll;&[aria-expanded='false']{", ",", "{visibility:hidden;}}"], NavbarBadge, NavbarLabel);
+})(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}"], NavbarBadge, NavbarLabel);
 export function NavbarList(_ref5) {
   var {
     header,
@@ -106,6 +107,15 @@ export function NavbarList(_ref5) {
       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
+          }));
+        }
+
         return /*#__PURE__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
           key: item.key,
           gutter: prev && prev.groupKey !== item.groupKey,

package/dist-types/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ReactNode, ForwardRefExoticComponent, RefAttributes, Ref, AriaAttributes, MouseEventHandler, FocusEventHandler, HTMLAttributes, ComponentType, ReactElement, MouseEvent, Key, CSSProperties, ReactChild } from 'react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes, Ref, AriaAttributes, MouseEventHandler, FocusEventHandler, HTMLAttributes, AnchorHTMLAttributes, FunctionComponent, ReactElement, ComponentType, MouseEvent, Key, CSSProperties, ReactChild } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { SpaceProp, NegativeSpaceProp, ResponsiveProp, ColorProp } from '@superdispatch/ui';
@@ -163,6 +163,21 @@ interface FileListItemProps {
 }
 declare const FileListItem: ForwardRefExoticComponent<FileListItemProps & RefAttributes<HTMLDivElement>>;
 
+declare type LinkComponentProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+    href: string;
+    truncate?: number;
+};
+interface LinkedTextProps extends Omit<LinkComponentProps, 'ref' | 'href'> {
+    children?: null | string;
+    linkComponent?: FunctionComponent<LinkComponentProps>;
+}
+declare function LinkedText({ children, linkComponent, ...props }: LinkedTextProps): ReactElement | null;
+
+interface MultilineTextProps {
+    overflowWrap?: Extract<Property.OverflowWrap, 'anywhere' | 'break-word' | 'normal'>;
+}
+declare const MultilineText: StyledComponent<"span", DefaultTheme, MultilineTextProps, never>;
+
 interface NavbarBottomBarItem {
     active?: boolean;
     value: string;
@@ -178,6 +193,14 @@ interface NavbarBottomBarProps {
 }
 declare function NavbarBottomBar({ items, hasMenuBadge, }: NavbarBottomBarProps): ReactElement;
 
+interface NavbarAccordionProps {
+    label: ReactNode;
+    icon?: ReactNode;
+    gutter?: boolean;
+    items: NavbarItemOptions[];
+    onClick: (event: MouseEvent<HTMLDivElement>) => void;
+}
+
 declare const NavbarBadge: StyledComponent<"span", DefaultTheme, {}, never>;
 declare const NavbarLabel: StyledComponent<"span", DefaultTheme, {}, never>;
 interface NavbarItemProps {
@@ -189,8 +212,9 @@ interface NavbarItemProps {
     ident?: number;
     gutter?: boolean;
     variant?: 'danger' | 'primary';
+    active?: boolean;
 }
-declare function NavbarItem({ label, gutter, badge, icon, component, onClick, variant, ident, }: NavbarItemProps): ReactElement;
+declare function NavbarItem({ label, gutter, badge, icon, component, onClick, variant, ident, active, }: NavbarItemProps): ReactElement;
 
 interface NavbarMenuItemProps {
     icon?: ReactNode;
@@ -199,6 +223,11 @@ interface NavbarMenuItemProps {
     component?: ComponentType<HTMLAttributes<HTMLElement>>;
 }
 declare function NavbarMenuItem({ label, icon, onClick, component, }: NavbarMenuItemProps): ReactElement;
+interface NavbarAccordionOptions extends NavbarAccordionProps {
+    key: Key;
+    groupKey?: Key;
+    hide?: boolean;
+}
 interface NavbarItemOptions extends NavbarItemProps {
     key: Key;
     groupKey?: Key;
@@ -206,7 +235,7 @@ interface NavbarItemOptions extends NavbarItemProps {
 }
 interface NavbarListProps {
     header: ReactNode;
-    items: NavbarItemOptions[];
+    items: Array<NavbarItemOptions | NavbarAccordionOptions>;
     footer?: ReactNode;
 }
 declare function NavbarList({ header, items, footer, }: NavbarListProps): ReactElement;
@@ -322,4 +351,4 @@ interface TextBoxProps {
 }
 declare const TextBox: ForwardRefExoticComponent<TextBoxProps & RefAttributes<HTMLElement>>;
 
-export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Container, ContainerProps, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, MarginProp, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarContainer, SidebarContainerProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Container, ContainerProps, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarContainer, SidebarContainerProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext };

package/dist-web/index.js

@@ -1,4 +1,4 @@
-import { CheckCircle, Info, Error, Image, Refresh, Delete, Menu, MenuOpen, OpenInNew } from '@material-ui/icons';
+import { CheckCircle, Info, Error, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1 } from '@material-ui/lab';
 import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Inline, CardButton, useResponsiveValue } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
@@ -7,9 +7,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { CSSTransition } from 'react-transition-group';
-import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, BottomNavigation, BottomNavigationAction, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Divider as Divider$1, Checkbox } from '@material-ui/core';
+import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, BottomNavigation, BottomNavigationAction, AccordionSummary, Accordion, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Divider as Divider$1, Checkbox } from '@material-ui/core';
 import { mdiUpload, mdiFilePdfBox, mdiTextBox } from '@mdi/js';
 import Dropzone from 'react-dropzone';
+import { Anchorme } from 'react-anchorme';
 import { noop } from 'lodash';
 
 function colorMixin(textColor, backgroundColor, buttonHoverColor) {
@@ -1005,6 +1006,52 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FileListItem.displayName = "FileListItem";
 
+var _excluded$6 = ["color", "target", "rel"],
+    _excluded2$2 = ["children", "linkComponent"];
+var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    color,
+    target = '_blank',
+    rel = 'noreferrer noopener'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+
+  return /*#__PURE__*/jsx(Link, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    rel: rel,
+    target: target
+  }));
+});
+if (process.env.NODE_ENV !== "production") DefaultLinkComponent.displayName = "DefaultLinkComponent";
+DefaultLinkComponent.displayName = 'DefaultLinkComponent';
+function LinkedText(_ref2) {
+  var {
+    children,
+    linkComponent = DefaultLinkComponent
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
+
+  if (!children) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsx(Anchorme, _objectSpread(_objectSpread({}, props), {}, {
+    linkComponent: linkComponent,
+    children: children
+  }));
+}
+
+var MultilineText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "MultilineText",
+  componentId: "SD__sc-34heyp-0"
+})(["white-space:pre-wrap;overflow-wrap:", ";"], _ref => {
+  var {
+    overflowWrap = 'normal'
+  } = _ref;
+  return overflowWrap;
+});
+MultilineText.displayName = 'MultilineText';
+
 var NavbarContext = /*#__PURE__*/createContext({
   isDrawerOpen: false,
   isExpanded: false,
@@ -1083,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:", ";}"], Color.White, 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']{border-left-color:", ";}"], Color.White, Color.Blue300, Color.Blue300);
 var IconWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -1097,13 +1144,15 @@ function NavbarItem(_ref) {
     component,
     onClick,
     variant,
-    ident = 0
+    ident = 0,
+    active
   } = _ref;
   var uid = useUID();
   return /*#__PURE__*/jsxs(NavbarItemRoot, {
     as: component,
     onClick: onClick,
     "aria-labelledby": uid,
+    "data-active": active,
     style: {
       marginTop: gutter ? '16px' : '0',
       paddingLeft: (ident + 1) * 20
@@ -1120,6 +1169,93 @@ function NavbarItem(_ref) {
   });
 }
 
+var NavbarAccordionLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "NavbarAccordion__NavbarAccordionLabel",
+  componentId: "SD__sc-1s7g3kw-0"
+})(["flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;&[data-expanded='false']{display:none;}"]);
+var NavbarAccordionRoot = /*#__PURE__*/styled(Accordion).withConfig({
+  displayName: "NavbarAccordion__NavbarAccordionRoot",
+  componentId: "SD__sc-1s7g3kw-1"
+})(_ref => {
+  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');
+});
+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);
+var IconWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarAccordion__IconWrapper",
+  componentId: "SD__sc-1s7g3kw-3"
+})(["width:24px;margin-right:8px;& svg{font-size:24px;}"]);
+function NavbarAccordion(_ref2) {
+  var {
+    label,
+    icon,
+    gutter,
+    items,
+    onClick: _onClick
+  } = _ref2;
+  var uid = useUID();
+  var {
+    isExpanded: isMenuExpanded,
+    isDrawerOpen,
+    setDrawerOpen
+  } = useNavbarContext();
+  var [isExpanded, setExpanded] = useState(false);
+  useEffect(() => {
+    if (!isMenuExpanded) {
+      setExpanded(false);
+    }
+  }, [isMenuExpanded]);
+  return /*#__PURE__*/jsxs(NavbarAccordionRoot, {
+    "aria-labelledby": uid,
+    gutter: !!gutter,
+    expanded: isExpanded,
+    onClick: event => {
+      if (isMenuExpanded || isDrawerOpen) {
+        setExpanded(!isExpanded);
+      }
+
+      _onClick(event);
+    },
+    square: true,
+    children: [/*#__PURE__*/jsxs(NavbarAccordionSummary, {
+      "data-active": !isExpanded && items.some(item => item.active),
+      "data-expanded": isMenuExpanded || isDrawerOpen,
+      expandIcon: /*#__PURE__*/jsx(ExpandMore, {}),
+      children: [/*#__PURE__*/jsx(IconWrapper$2, {
+        children: icon
+      }), /*#__PURE__*/jsx(NavbarAccordionLabel, {
+        id: uid,
+        "data-expanded": isMenuExpanded || isDrawerOpen,
+        children: label
+      })]
+    }), items.map(item => {
+      var index = items.indexOf(item);
+      var prev = items[index - 1];
+      return /*#__PURE__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
+        key: item.key,
+        ident: 1,
+        active: item.active,
+        gutter: prev && prev.groupKey !== item.groupKey,
+        onClick: event => {
+          var _item$onClick;
+
+          event.stopPropagation();
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+
+          if (!event.isDefaultPrevented()) {
+            setDrawerOpen(false);
+          }
+        }
+      }));
+    })]
+  });
+}
+
 var Header = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Header",
   componentId: "SD__sc-19zrmxc-0"
@@ -1177,7 +1313,7 @@ function NavbarMenuItem(_ref4) {
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
-})(["height:100%;min-height:50px;overflow:scroll;&[aria-expanded='false']{", ",", "{visibility:hidden;}}"], NavbarBadge, NavbarLabel);
+})(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}"], NavbarBadge, NavbarLabel);
 function NavbarList(_ref5) {
   var {
     header,
@@ -1217,6 +1353,15 @@ function NavbarList(_ref5) {
       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
+          }));
+        }
+
         return /*#__PURE__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
           key: item.key,
           gutter: prev && prev.groupKey !== item.groupKey,
@@ -1311,7 +1456,7 @@ function Navbar(_ref) {
   });
 }
 
-var _excluded$6 = ["title", "subtitle", "children"];
+var _excluded$7 = ["title", "subtitle", "children"];
 var StyledTypography = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "NavbarAvatar__StyledTypography",
   componentId: "SD__sc-19q2zd0-0"
@@ -1322,7 +1467,7 @@ function NavbarAvatar(_ref) {
     subtitle,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   var {
     isExpanded,
@@ -1753,5 +1898,5 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Container, DescriptionItem, FileDropZone, FileListItem, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarContainer, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext };
+export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Container, DescriptionItem, FileDropZone, FileListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarContainer, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext };
 //# sourceMappingURL=index.js.map