@superdispatch/ui-lab 0.19.0 → 0.20.2

package/dist-node/index.js

@@ -1137,7 +1137,7 @@ var NavbarLabel = /*#__PURE__*/styled__default.span.withConfig({
 var NavbarItemRoot = /*#__PURE__*/styled__default.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']{border-left-color:", ";}"], ui.Color.White, ui.Color.Blue300, ui.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']{background-color:#2f394a;border-left-color:", ";}"], ui.Color.White, ui.Color.Blue300, ui.Color.Blue300);
 var IconWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarItem__IconWrapper",
   componentId: "SD__sc-1pvzq3w-3"
@@ -1187,12 +1187,12 @@ var NavbarAccordionRoot = /*#__PURE__*/styled__default(core.Accordion).withConfi
   var {
     gutter
   } = _ref;
-  return styled.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', ui.Color.White, gutter ? '16px' : '0');
+  return styled.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:", ";&[aria-current]{background-color:#2f394a;color:", ";}&.MuiAccordion-root:before{background-color:#1b2638;}&.MuiPaper-elevation0{border:0px;}&.MuiAccordion-root.Mui-expanded{margin-top:", ";}"], gutter ? '16px' : '0', ui.Color.White, gutter ? '16px' : '0');
 });
 var NavbarAccordionSummary = /*#__PURE__*/styled__default(core.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;}}"], ui.Color.Blue300);
+})(["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;}}"], ui.Color.Blue300);
 var IconWrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NavbarAccordion__IconWrapper",
   componentId: "SD__sc-1s7g3kw-3"
@@ -1586,7 +1586,7 @@ function NavbarMenu(_ref2) {
 var SidebarRoot = /*#__PURE__*/styled__default.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 ", ";"], ui.Color.White, ui.Color.Silver400);
+})(["top:0;position:sticky;overflow-y:auto;overflow-x:hidden;height:100vh;background-color:", ";border-right:1px solid ", ";"], ui.Color.White, ui.Color.Silver400);
 var SidebarHeader = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Sidebar__SidebarHeader",
   componentId: "SD__sc-b77o22-1"
@@ -1638,28 +1638,187 @@ var Sidebar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Sidebar.displayName = "Sidebar";
 
-var SidebarContainerRoot = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "SidebarContainer__SidebarContainerRoot",
+var Context = /*#__PURE__*/react.createContext(null);
+function useSidebarContext() {
+  var context = react.useContext(Context);
+
+  if (!context) {
+    throw new Error('SidebarContext is used outside Provider');
+  }
+
+  return context;
+}
+var SidebarContainerSidebar = /*#__PURE__*/styled__default.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__default.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__default.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__*/react.forwardRef((_ref, ref) => {
   var {
     sidebar,
     children
   } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsxs(SidebarContainerRoot, {
-    ref: ref,
-    children: [sidebar, /*#__PURE__*/jsxRuntime.jsx(SidebarContainerContent, {
-      children: children
-    })]
+  var isCollapsed = ui.useCollapseBreakpoint('sm');
+  var [visibilityState, setVisibilityState] = react.useState('sidebar');
+  var visibility = isCollapsed ? visibilityState : 'both';
+  var context = react.useMemo(() => {
+    return {
+      openSidebar: () => {
+        setVisibilityState('sidebar');
+      },
+      openSidebarContent: () => {
+        setVisibilityState('content');
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(Context.Provider, {
+    value: context,
+    children: /*#__PURE__*/jsxRuntime.jsxs(SidebarContainerRoot, {
+      ref: ref,
+      "data-visibility": visibility,
+      children: [/*#__PURE__*/jsxRuntime.jsx(SidebarContainerSidebar, {
+        children: sidebar
+      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(icons.ArrowBack, {
+      fontSize: "small"
+    })
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$8);
+
+  var isCollapsed = ui.useCollapseBreakpoint('sm');
+  var {
+    openSidebar
+  } = useSidebarContext();
+
+  if (!isCollapsed) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(core.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__default(core.AppBar).withConfig({
+  displayName: "SidebarContent__SidebarAppBar",
+  componentId: "SD__sc-zpgf61-0"
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return styled.css(["", "{&&{border-left:transparent;}}"], theme.breakpoints.up('sm'));
+});
+var ToolbarContent = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SidebarContent__ToolbarContent",
+  componentId: "SD__sc-zpgf61-1"
+})(["flex:1;padding:16px;"]);
+function SidebarContent(_ref2) {
+  var {
+    dense,
+    action,
+    title,
+    children,
+    onBack,
+    openOnMount,
+    closeOnUnmount
+  } = _ref2;
+  var isOpenedOnMount = react.useRef(false);
+  var isClosedOnMount = react.useRef(false);
+  var {
+    openSidebarContent,
+    openSidebar
+  } = useSidebarContext();
+  react.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]);
+  react.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__*/jsxRuntime.jsxs(ui.Stack, {
+    space: "none",
+    children: [/*#__PURE__*/jsxRuntime.jsx(SidebarAppBar, {
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
+        disableGutters: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(ToolbarContent, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+            align: ['top', 'center'],
+            space: "small",
+            children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+              width: "content",
+              children: /*#__PURE__*/jsxRuntime.jsx(SidebarBackButton, {
+                onClick: onBack
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+              children: /*#__PURE__*/jsxRuntime.jsxs(ui.Columns, {
+                space: "small",
+                collapseBelow: "tablet",
+                reverse: [true, false],
+                align: ['bottom', 'center'],
+                children: [/*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+                  children: /*#__PURE__*/jsxRuntime.jsx(TextBox, {
+                    variant: "heading-2",
+                    children: title
+                  })
+                }), action && /*#__PURE__*/jsxRuntime.jsx(ui.Column, {
+                  width: "content",
+                  children: action
+                })]
+              })
+            })]
+          })
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Box, {
+      padding: dense ? 'none' : ['small', 'medium'],
+      children: children
+    })]
+  });
+}
+
 var SidebarDividerRoot = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SidebarDivider__SidebarDividerRoot",
   componentId: "SD__sc-5lwi2i-0"
@@ -1714,36 +1873,60 @@ var SidebarMenuItem = /*#__PURE__*/react.forwardRef((_ref2, ref) => {
   var {
     action,
     avatar,
-    onClick,
+    onClick: _onClick,
     external,
     children,
     disabled,
     selected,
     secondaryActions,
-    badge: badgeProp
+    badge: badgeProp,
+    openContentOnClick
   } = _ref2;
   var [hovered, setHovered] = react.useState(false);
+  var rootRef = react.useRef(null);
   var actionsRef = react.useRef(null);
   var actionsPlaceholderRef = react.useRef(null);
+  var {
+    openSidebarContent
+  } = useSidebarContext();
+  var {
+    matches: isHoverSupported
+  } = matchMedia('(hover: hover)');
   react.useLayoutEffect(() => {
     if (actionsRef.current && actionsPlaceholderRef.current) {
       actionsPlaceholderRef.current.style.width = "".concat(Math.max(0, actionsRef.current.offsetWidth - 8), "px");
     }
   });
+  react.useLayoutEffect(() => {
+    var rootNode = rootRef.current;
+
+    if (rootNode) {
+      if (isHoverSupported) {
+        rootNode.addEventListener('mouseenter', () => {
+          setHovered(true);
+        });
+        rootNode.addEventListener('mouseleave', () => {
+          setHovered(false);
+        });
+      } else {
+        setHovered(true);
+      }
+    }
+  }, [isHoverSupported]);
   var badge = !badgeProp || !Number.isFinite(badgeProp) ? null : badgeProp > 999 ? '999+' : badgeProp;
   return /*#__PURE__*/jsxRuntime.jsxs(SidebarMenuItemRoot, {
-    ref: ref,
+    ref: ui.mergeRefs(ref, rootRef),
     hasAvatar: !!avatar,
-    onMouseEnter: () => {
-      setHovered(true);
-    },
-    onMouseLeave: () => {
-      setHovered(false);
-    },
     children: [/*#__PURE__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsxs(ui.Columns, {
         align: "center",
         space: "xsmall",
@@ -1856,6 +2039,7 @@ var SidebarMenuItemAvatar = /*#__PURE__*/react.forwardRef((_ref, ref) => {
         color: "primary",
         checked: value,
         disabled: disabled,
+        onClick: stopPropagation,
         onMouseDown: stopPropagation,
         onTouchStart: stopPropagation,
         onChange: (_, checked) => {
@@ -1927,7 +2111,9 @@ exports.NavbarList = NavbarList;
 exports.NavbarMenu = NavbarMenu;
 exports.NavbarMenuItem = NavbarMenuItem;
 exports.Sidebar = Sidebar;
+exports.SidebarBackButton = SidebarBackButton;
 exports.SidebarContainer = SidebarContainer;
+exports.SidebarContent = SidebarContent;
 exports.SidebarDivider = SidebarDivider;
 exports.SidebarMenuItem = SidebarMenuItem;
 exports.SidebarMenuItemAction = SidebarMenuItemAction;
@@ -1937,4 +2123,5 @@ exports.TextBox = TextBox;
 exports.formatBytes = formatBytes;
 exports.toBytes = toBytes;
 exports.useNavbarContext = useNavbarContext;
+exports.useSidebarContext = useSidebarContext;
 //# sourceMappingURL=index.js.map