@superdispatch/ui-lab 0.19.0 → 0.20.0

package/dist-src/index.js

@@ -17,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/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) => {

package/dist-types/index.d.ts

@@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { SpaceProp, NegativeSpaceProp, ResponsiveProp, ColorProp } from '@superdispatch/ui';
 import { Property } from 'csstype';
-import { ButtonBaseProps, AvatarProps, TooltipProps } from '@material-ui/core';
+import { ButtonBaseProps, AvatarProps, IconButtonProps, TooltipProps } from '@material-ui/core';
 import { FileRejection } from 'react-dropzone';
 import { StyledComponent, DefaultTheme } from 'styled-components';
 
@@ -289,12 +289,30 @@ interface SidebarProps {
 }
 declare const Sidebar: ForwardRefExoticComponent<SidebarProps & RefAttributes<HTMLDivElement>>;
 
+declare function SidebarBackButton({ onClick, children, ...props }: IconButtonProps): ReactElement | null;
+
+interface SidebarContext {
+    openSidebar: () => void;
+    openSidebarContent: () => void;
+}
+declare function useSidebarContext(): SidebarContext;
 interface SidebarContainerProps {
     sidebar: ReactChild;
     children?: ReactNode;
 }
 declare const SidebarContainer: ForwardRefExoticComponent<SidebarContainerProps & RefAttributes<HTMLDivElement>>;
 
+interface SidebarContentProps {
+    dense?: boolean;
+    title: ReactNode;
+    children: ReactNode;
+    action?: ReactNode;
+    openOnMount?: boolean;
+    closeOnUnmount?: boolean;
+    onBack?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+declare function SidebarContent({ dense, action, title, children, onBack, openOnMount, closeOnUnmount, }: SidebarContentProps): ReactElement;
+
 
 declare const SidebarDivider: ForwardRefExoticComponent<RefAttributes<HTMLDivElement>>;
 
@@ -307,6 +325,7 @@ interface SidebarMenuItemProps {
     action?: ReactNode;
     avatar?: ReactNode;
     children?: ReactNode;
+    openContentOnClick?: boolean;
     secondaryActions?: ReactNode;
 }
 declare const SidebarMenuItem: ForwardRefExoticComponent<SidebarMenuItemProps & RefAttributes<HTMLDivElement>>;
@@ -351,4 +370,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, 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 };
+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, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };

package/dist-web/index.js

@@ -1,13 +1,13 @@
-import { CheckCircle, Info, Error, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, OpenInNew } from '@material-ui/icons';
+import { CheckCircle, Info, Error as Error$1, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, ArrowBack, 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 { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Inline, CardButton, useResponsiveValue, useCollapseBreakpoint } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 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, AccordionSummary, Accordion, 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, Toolbar, AppBar, 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';
@@ -29,7 +29,7 @@ function toMaterialSeverity(severity) {
 var iconMapping = {
   success: /*#__PURE__*/jsx(CheckCircle, {}),
   info: /*#__PURE__*/jsx(Info, {}),
-  error: /*#__PURE__*/jsx(Error, {})
+  error: /*#__PURE__*/jsx(Error$1, {})
 };
 var Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -807,7 +807,7 @@ function UploadRejection(_ref2) {
     align: "center",
     children: [/*#__PURE__*/jsx(Column, {
       width: "content",
-      children: /*#__PURE__*/jsx(Error, {})
+      children: /*#__PURE__*/jsx(Error$1, {})
     }), /*#__PURE__*/jsx(Column, {
       children: error.code === 'file-too-large' ? maxSize == null ? 'Attachment size is too large' : "Attachment size should be less than ".concat(formatBytes(maxSize)) : error.message
     })]
@@ -942,7 +942,7 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       space: "xsmall",
       children: [/*#__PURE__*/jsx(Column, {
         width: "content",
-        children: status === 'error' ? /*#__PURE__*/jsx(Error, {
+        children: status === 'error' ? /*#__PURE__*/jsx(Error$1, {
           color: "error",
           fontSize: "small"
         }) : fileType === 'pdf' ? /*#__PURE__*/jsx(PdfIcon, {
@@ -1579,7 +1579,7 @@ function NavbarMenu(_ref2) {
 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"
@@ -1631,28 +1631,172 @@ var Sidebar = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Sidebar.displayName = "Sidebar";
 
-var SidebarContainerRoot = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SidebarContainer__SidebarContainerRoot",
+var Context = /*#__PURE__*/createContext(null);
+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);
 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";
 
+var _excluded$8 = ["onClick", "children"];
+function SidebarBackButton(_ref) {
+  var {
+    onClick: _onClick,
+    children = /*#__PURE__*/jsx(ArrowBack, {
+      fontSize: "small"
+    })
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$8);
+
+  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
+  }));
+}
+
+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'));
+});
+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
+    })]
+  });
+}
+
 var SidebarDividerRoot = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarDivider__SidebarDividerRoot",
   componentId: "SD__sc-5lwi2i-0"
@@ -1707,17 +1851,21 @@ 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");
@@ -1734,9 +1882,15 @@ 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",
@@ -1849,6 +2003,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/forwardRef((_ref, ref) => {
         color: "primary",
         checked: value,
         disabled: disabled,
+        onClick: stopPropagation,
         onMouseDown: stopPropagation,
         onTouchStart: stopPropagation,
         onChange: (_, checked) => {
@@ -1898,5 +2053,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, LinkedText, MultilineText, 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, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
 //# sourceMappingURL=index.js.map