@redocly/theme 0.4.13 → 0.4.14

package/ColorModeSwitcher/ColorModeSwitcher.js

@@ -78,5 +78,5 @@ function ColorModeSwitcher() {
         react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode })));
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
 var templateObject_1;

package/Sidebar/MenuGroup.js

@@ -3,12 +3,51 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuGroup = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var ArrowIcon_1 = require("../icons/ArrowIcon/ArrowIcon");
 var MenuLinkItem_1 = require("../Sidebar/MenuLinkItem");
@@ -16,17 +55,37 @@ var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
 var SeparatorLine_1 = require("../Sidebar/SeparatorLine");
 function MenuGroup(_a) {
     var item = _a.item, isExpanded = _a.isExpanded, toggleExpanded = _a.toggleExpanded, children = _a.children;
+    var _b = __read((0, react_1.useState)(isExpanded), 2), showChildren = _b[0], setShowChildren = _b[1];
+    var timer = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        timer.current && clearTimeout(timer.current);
+        if (isExpanded) {
+            setShowChildren(true);
+        }
+        else {
+            timer.current = setTimeout(function () {
+                setShowChildren(false);
+            }, 800);
+        }
+        return function () {
+            timer.current && clearTimeout(timer.current);
+        };
+    }, [isExpanded]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuGroup" },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active },
                 react_1.default.createElement(MenuGroupArrow, { direction: isExpanded ? 'down' : 'right' }),
                 item.label)),
-        react_1.default.createElement(MenuWrapper, null, isExpanded ? children : null),
+        react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.MenuGroup = MenuGroup;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-nested-offset);\n"], ["\n  padding-left: var(--sidebar-item-nested-offset);\n"])));
+var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-nested-offset);\n  overflow: hidden;\n  ", ";\n"], ["\n  padding-left: var(--sidebar-item-nested-offset);\n  overflow: hidden;\n  ", ";\n"])), function (props) {
+    return props.isExpanded
+        ? "max-height: 9999px;\n        transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;"
+        : "max-height: 0px;\n\t      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;";
+});
 var MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-padding-horizontal);\n  cursor: ", ";\n  font-family: var(--sidebar-item-group-font-family);\n  font-size: var(--sidebar-item-group-font-size);\n  text-transform: var(--sidebar-text-group-transform);\n  color: var(--sidebar-item-group-text-color);\n  background: var(--sidebar-item-group-background-color);\n  ", ";\n"], ["\n  padding-left: var(--sidebar-item-padding-horizontal);\n  cursor: ", ";\n  font-family: var(--sidebar-item-group-font-family);\n  font-size: var(--sidebar-item-group-font-size);\n  text-transform: var(--sidebar-text-group-transform);\n  color: var(--sidebar-item-group-text-color);\n  background: var(--sidebar-item-group-background-color);\n  ", ";\n"])), function (props) { return (props.isAlwaysExpanded ? 'default' : 'pointer'); }, function (props) {
     return props.active
         ? "color: var(--sidebar-item-group-active-text-color);\n        background-color: var(--sidebar-item-group-active-background-color);"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -48,4 +48,5 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
+  user-select: none;
 `;

package/src/Sidebar/MenuGroup.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import type { ItemState } from '@theme/Sidebar/types/ItemState';
@@ -20,6 +20,22 @@ export function MenuGroup({
   toggleExpanded,
   children,
 }: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+  const [showChildren, setShowChildren] = useState<boolean>(isExpanded);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    timer.current && clearTimeout(timer.current);
+    if (isExpanded) {
+      setShowChildren(true);
+    } else {
+      timer.current = setTimeout(() => {
+        setShowChildren(false);
+      }, 800);
+    }
+    return () => {
+      timer.current && clearTimeout(timer.current);
+    };
+  }, [isExpanded]);
+
   return (
     <Wrapper data-component-name="Sidebar/MenuGroup">
       <MenuLinkItem item={item}>
@@ -33,7 +49,7 @@ export function MenuGroup({
         </MenuGroupLabel>
       </MenuLinkItem>
 
-      <MenuWrapper>{isExpanded ? children : null}</MenuWrapper>
+      <MenuWrapper isExpanded={isExpanded}>{showChildren ? children : null}</MenuWrapper>
 
       {item.separatorLine ? <SeparatorLine /> : null}
     </Wrapper>
@@ -42,8 +58,15 @@ export function MenuGroup({
 
 const Wrapper = styled.div``;
 
-const MenuWrapper = styled.div`
+const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
   padding-left: var(--sidebar-item-nested-offset);
+  overflow: hidden;
+  ${(props) =>
+    props.isExpanded
+      ? `max-height: 9999px;
+        transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
+      : `max-height: 0px;
+	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
 `;
 
 const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`