@superdispatch/ui-lab 0.18.0 → 0.20.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";
@@ -15,7 +17,9 @@ export * from "./navbar/NavbarItem.js";
 export * from "./navbar/NavbarList.js";
 export * from "./navbar/NavbarMenu.js";
 export * from "./sidebar/Sidebar.js";
+export * from "./sidebar/SidebarBackButton.js";
 export * from "./sidebar/SidebarContainer.js";
+export * from "./sidebar/SidebarContent.js";
 export * from "./sidebar/SidebarDivider.js";
 export * from "./sidebar/SidebarMenuItem.js";
 export * from "./sidebar/SidebarMenuItemAction.js";

package/dist-src/linked-text/LinkedText.js

@@ -0,0 +1,40 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["color", "target", "rel"],
+    _excluded2 = ["children", "linkComponent"];
+import { Link } from '@material-ui/core';
+import { forwardRef } from 'react';
+import { Anchorme } from 'react-anchorme';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    color,
+    target = '_blank',
+    rel = 'noreferrer noopener'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  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';
+export function LinkedText(_ref2) {
+  var {
+    children,
+    linkComponent = DefaultLinkComponent
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  if (!children) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(Anchorme, _objectSpread(_objectSpread({}, props), {}, {
+    linkComponent: linkComponent,
+    children: children
+  }));
+}

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/Navbar.js

@@ -15,7 +15,7 @@ var Aside = /*#__PURE__*/styled.aside.withConfig({
 var Main = /*#__PURE__*/styled.main.withConfig({
   displayName: "Navbar__Main",
   componentId: "SD__sc-1oiqig8-1"
-})(["flex:1;display:flex;flex-direction:column;overflow:auto;"]);
+})(["flex:1;display:flex;flex-direction:column;overflow:scroll;"]);
 export function Navbar(_ref) {
   var {
     footer,

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/NavbarAvatar.js

@@ -37,8 +37,10 @@ export function NavbarAvatar(_ref) {
         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/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

@@ -1,17 +1,19 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { IconButton } from '@material-ui/core';
-import { Menu as MenuIcon, MenuOpen, MoreHoriz } from '@material-ui/icons';
-import { AdaptiveVerticalToolbar, Color, Inline, useResponsiveValue } from '@superdispatch/ui';
+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";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 var Header = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Header",
   componentId: "SD__sc-19zrmxc-0"
-})(["margin:0 16px 8px;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;"]);
+})(["margin:0 16px 8px;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;position:sticky;"]);
 var Wrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Wrapper",
   componentId: "SD__sc-19zrmxc-1"
@@ -38,7 +40,7 @@ var ExpandIconButton = /*#__PURE__*/styled(IconButton).withConfig({
 var Footer = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Footer",
   componentId: "SD__sc-19zrmxc-3"
-})(["flex-grow:1;display:flex;align-items:flex-end;margin:16px 0 8px;"]);
+})(["flex-grow:1;display:flex;align-items:flex-end;margin:16px 0 8px;position:sticky;"]);
 var Root = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Root",
   componentId: "SD__sc-19zrmxc-4"
@@ -65,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;&[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,
@@ -102,41 +104,31 @@ export function NavbarList(_ref5) {
       })]
     }), /*#__PURE__*/_jsx(Content, {
       "aria-expanded": isSidebarOpened,
-      children: /*#__PURE__*/_jsx(AdaptiveVerticalToolbar, {
-        disableGutters: true,
-        items: filteredItems,
-        renderItem: item => {
-          var navbarItem = item;
-          var index = filteredItems.indexOf(navbarItem);
-          var prev = filteredItems[index - 1];
-          return /*#__PURE__*/_jsx(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
-            gutter: prev && prev.groupKey !== navbarItem.groupKey,
-            onClick: event => {
-              var _item$onClick;
+      children: filteredItems.map(item => {
+        var index = filteredItems.indexOf(item);
+        var prev = filteredItems[index - 1];
 
-              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-
-              if (!event.isDefaultPrevented()) {
-                setDrawerOpen(false);
-              }
-            }
+        if ('items' in item) {
+          return /*#__PURE__*/_createElement(NavbarAccordion, _objectSpread(_objectSpread({}, item), {}, {
+            key: item.key,
+            gutter: prev && prev.groupKey !== item.groupKey,
+            onClick: item.onClick
           }));
-        },
-        renderMenuItem: item => /*#__PURE__*/_jsx(NavbarMenuItem, _objectSpread(_objectSpread({}, item), {}, {
+        }
+
+        return /*#__PURE__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
+          key: item.key,
+          gutter: prev && prev.groupKey !== item.groupKey,
           onClick: event => {
-            var _item$onClick2;
+            var _item$onClick;
 
-            (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item, event);
+            (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
 
             if (!event.isDefaultPrevented()) {
               setDrawerOpen(false);
             }
           }
-        })),
-        moreElement: /*#__PURE__*/_jsx(NavbarItem, {
-          icon: /*#__PURE__*/_jsx(MoreHoriz, {}),
-          label: "More"
-        })
+        }));
       })
     }), /*#__PURE__*/_jsx(Footer, {
       children: footer

package/dist-src/sidebar/Sidebar.js

@@ -7,7 +7,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var SidebarRoot = /*#__PURE__*/styled.aside.withConfig({
   displayName: "Sidebar__SidebarRoot",
   componentId: "SD__sc-b77o22-0"
-})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;width:240px;height:100vh;background-color:", ";border-right:1px solid ", ";"], Color.White, Color.Silver400);
+})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;height:100vh;background-color:", ";border-right:1px solid ", ";"], Color.White, Color.Silver400);
 var SidebarHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "Sidebar__SidebarHeader",
   componentId: "SD__sc-b77o22-1"

package/dist-src/sidebar/SidebarBackButton.js

@@ -0,0 +1,38 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClick", "children"];
+import { IconButton } from '@material-ui/core';
+import { ArrowBack } from '@material-ui/icons';
+import { useCollapseBreakpoint } from '@superdispatch/ui';
+import { useSidebarContext } from "./SidebarContainer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SidebarBackButton(_ref) {
+  var {
+    onClick: _onClick,
+    children = /*#__PURE__*/_jsx(ArrowBack, {
+      fontSize: "small"
+    })
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var isCollapsed = useCollapseBreakpoint('sm');
+  var {
+    openSidebar
+  } = useSidebarContext();
+
+  if (!isCollapsed) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, props), {}, {
+    size: "small",
+    onClick: event => {
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+
+      if (!event.isDefaultPrevented()) {
+        openSidebar();
+      }
+    },
+    children: children
+  }));
+}

package/dist-src/sidebar/SidebarContainer.js

@@ -1,25 +1,59 @@
-import { forwardRef } from 'react';
+import { useCollapseBreakpoint } from '@superdispatch/ui';
+import { createContext, forwardRef, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var SidebarContainerRoot = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SidebarContainer__SidebarContainerRoot",
+var Context = /*#__PURE__*/createContext(null);
+export function useSidebarContext() {
+  var context = useContext(Context);
+
+  if (!context) {
+    throw new Error('SidebarContext is used outside Provider');
+  }
+
+  return context;
+}
+var SidebarContainerSidebar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarContainer__SidebarContainerSidebar",
   componentId: "SD__sc-uibj1m-0"
-})(["display:flex;height:inherit;max-height:inherit;min-height:inherit;"]);
+})(["height:inherit;max-height:inherit;min-height:inherit;width:240px;"]);
 var SidebarContainerContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarContainer__SidebarContainerContent",
   componentId: "SD__sc-uibj1m-1"
-})(["height:inherit;max-height:inherit;min-height:inherit;width:calc(100% - 240px);min-width:calc(100% - 240px);max-width:calc(100% - 240px);"]);
+})(["height:inherit;max-height:inherit;min-height:inherit;"]);
+var SidebarContainerRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarContainer__SidebarContainerRoot",
+  componentId: "SD__sc-uibj1m-2"
+})(["display:flex;height:inherit;max-height:inherit;min-height:inherit;& ", "{width:calc(100% - 240px);min-width:calc(100% - 240px);max-width:calc(100% - 240px);}&[data-visibility='sidebar'] ", "{width:100%;}&[data-visibility='sidebar'] ", "{display:none;}&[data-visibility='content'] ", "{display:none;}&[data-visibility='content'] ", "{width:100%;max-width:unset;}"], SidebarContainerContent, SidebarContainerSidebar, SidebarContainerContent, SidebarContainerSidebar, SidebarContainerContent);
 export var SidebarContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     sidebar,
     children
   } = _ref;
-  return /*#__PURE__*/_jsxs(SidebarContainerRoot, {
-    ref: ref,
-    children: [sidebar, /*#__PURE__*/_jsx(SidebarContainerContent, {
-      children: children
-    })]
+  var isCollapsed = useCollapseBreakpoint('sm');
+  var [visibilityState, setVisibilityState] = useState('sidebar');
+  var visibility = isCollapsed ? visibilityState : 'both';
+  var context = useMemo(() => {
+    return {
+      openSidebar: () => {
+        setVisibilityState('sidebar');
+      },
+      openSidebarContent: () => {
+        setVisibilityState('content');
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsxs(SidebarContainerRoot, {
+      ref: ref,
+      "data-visibility": visibility,
+      children: [/*#__PURE__*/_jsx(SidebarContainerSidebar, {
+        children: sidebar
+      }), /*#__PURE__*/_jsx(SidebarContainerContent, {
+        children: children
+      })]
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "SidebarContainer";

package/dist-src/sidebar/SidebarContent.js

@@ -0,0 +1,88 @@
+import { AppBar, Toolbar } from '@material-ui/core';
+import { Column, Columns, Stack } from '@superdispatch/ui';
+import { useLayoutEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from "../box/Box.js";
+import { TextBox } from "../text-box/TextBox.js";
+import { SidebarBackButton } from "./SidebarBackButton.js";
+import { useSidebarContext } from "./SidebarContainer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SidebarAppBar = /*#__PURE__*/styled(AppBar).withConfig({
+  displayName: "SidebarContent__SidebarAppBar",
+  componentId: "SD__sc-zpgf61-0"
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return css(["", "{&&{border-left:transparent;}}"], theme.breakpoints.up('sm'));
+});
+export function SidebarContent(_ref2) {
+  var {
+    dense,
+    action,
+    title,
+    children,
+    onBack,
+    openOnMount,
+    closeOnUnmount
+  } = _ref2;
+  var isOpenedOnMount = useRef(false);
+  var isClosedOnMount = useRef(false);
+  var {
+    openSidebarContent,
+    openSidebar
+  } = useSidebarContext();
+  useLayoutEffect(() => {
+    if (openOnMount) {
+      if (isOpenedOnMount.current) {
+        // eslint-disable-next-line no-console
+        console.warn('[SidebarContent]: "openOnMount" should not change during lifecycle of the component.');
+      } else {
+        isOpenedOnMount.current = true;
+        openSidebarContent();
+      }
+    }
+  }, [openOnMount, openSidebarContent]);
+  useLayoutEffect(() => {
+    return () => {
+      if (closeOnUnmount) {
+        if (isClosedOnMount.current) {
+          // eslint-disable-next-line no-console
+          console.warn('[SidebarContent]: "closeOnUnmount" should not change during lifecycle of the component.');
+        } else {
+          isClosedOnMount.current = true;
+          openSidebar();
+        }
+      }
+    };
+  }, [openSidebar, closeOnUnmount]);
+  return /*#__PURE__*/_jsxs(Stack, {
+    space: "none",
+    children: [/*#__PURE__*/_jsx(SidebarAppBar, {
+      children: /*#__PURE__*/_jsx(Toolbar, {
+        children: /*#__PURE__*/_jsxs(Columns, {
+          align: "center",
+          space: "small",
+          children: [/*#__PURE__*/_jsx(Column, {
+            width: "content",
+            children: /*#__PURE__*/_jsx(SidebarBackButton, {
+              onClick: onBack
+            })
+          }), /*#__PURE__*/_jsx(Column, {
+            children: /*#__PURE__*/_jsx(TextBox, {
+              variant: "heading-2",
+              children: title
+            })
+          }), /*#__PURE__*/_jsx(Column, {
+            width: "content",
+            children: action
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      padding: dense ? 'none' : 'medium',
+      children: children
+    })]
+  });
+}

package/dist-src/sidebar/SidebarMenuItem.js

@@ -4,6 +4,7 @@ import { Color, Column, Columns, Inline } from '@superdispatch/ui';
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TextBox } from "../text-box/TextBox.js";
+import { useSidebarContext } from "./SidebarContainer.js";
 import { SidebarMenuItemContextProvider } from "./SidebarMenuItemContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,17 +30,21 @@ export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     action,
     avatar,
-    onClick,
+    onClick: _onClick,
     external,
     children,
     disabled,
     selected,
     secondaryActions,
-    badge: badgeProp
+    badge: badgeProp,
+    openContentOnClick
   } = _ref2;
   var [hovered, setHovered] = useState(false);
   var actionsRef = useRef(null);
   var actionsPlaceholderRef = useRef(null);
+  var {
+    openSidebarContent
+  } = useSidebarContext();
   useLayoutEffect(() => {
     if (actionsRef.current && actionsPlaceholderRef.current) {
       actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
@@ -56,9 +61,15 @@ export var SidebarMenuItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       setHovered(false);
     },
     children: [/*#__PURE__*/_jsx(ButtonBase, {
-      onClick: onClick,
       disabled: disabled,
       "aria-current": selected,
+      onClick: event => {
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+
+        if (!event.isDefaultPrevented() && openContentOnClick) {
+          openSidebarContent();
+        }
+      },
       children: /*#__PURE__*/_jsxs(Columns, {
         align: "center",
         space: "xsmall",

package/dist-src/sidebar/SidebarMenuItemAvatar.js

@@ -35,6 +35,7 @@ export var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
         color: "primary",
         checked: value,
         disabled: disabled,
+        onClick: stopPropagation,
         onMouseDown: stopPropagation,
         onTouchStart: stopPropagation,
         onChange: (_, checked) => {