@redocly/theme 0.4.13 → 0.4.15

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/Markdown/MarkdownLayout.d.ts

@@ -2,8 +2,6 @@ import React from 'react';
 declare type MarkdownLayoutProps = {
     tableOfContent: React.ReactNode;
     markdownWrapper: React.ReactNode;
-    showPrevButton?: boolean;
-    showNextButton?: boolean;
     editPage?: {
         to: string;
         text: string;
@@ -11,5 +9,5 @@ declare type MarkdownLayoutProps = {
     };
     lastModified?: string | null;
 };
-export declare function MarkdownLayout({ tableOfContent, markdownWrapper, showPrevButton, showNextButton, editPage, lastModified, }: MarkdownLayoutProps): JSX.Element;
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, editPage, lastModified, }: MarkdownLayoutProps): JSX.Element;
 export {};

package/Markdown/MarkdownLayout.js

@@ -16,14 +16,14 @@ var PageNavigation_1 = require("../PageNavigation/PageNavigation");
 var EditPageButton_1 = require("../EditPageButton");
 var LastUpdated_1 = require("../LastUpdated/LastUpdated");
 function MarkdownLayout(_a) {
-    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper, showPrevButton = _a.showPrevButton, showNextButton = _a.showNextButton, editPage = _a.editPage, lastModified = _a.lastModified;
+    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper, editPage = _a.editPage, lastModified = _a.lastModified;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
         react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
             react_1.default.createElement(LayoutTop, null,
                 lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: lastModified }),
                 editPage && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: editPage.text, to: editPage.to, icon: editPage.icon }))),
             markdownWrapper,
-            react_1.default.createElement(PageNavigation_1.PageNavigation, { showPrevButton: showPrevButton, showNextButton: showNextButton })),
+            react_1.default.createElement(PageNavigation_1.PageNavigation, null)),
         tableOfContent));
 }
 exports.MarkdownLayout = MarkdownLayout;

package/PageNavigation/PageNavigation.d.ts

@@ -1,7 +1,2 @@
 /// <reference types="react" />
-declare type PageNavigationProps = {
-    showPrevButton?: boolean;
-    showNextButton?: boolean;
-};
-export declare function PageNavigation({ showPrevButton, showNextButton, }: PageNavigationProps): JSX.Element | null;
-export {};
+export declare function PageNavigation(): JSX.Element | null;

package/PageNavigation/PageNavigation.js

@@ -13,15 +13,14 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
 var NextPageLink_1 = require("../PageNavigation/NextPageLink");
 var useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
-function PageNavigation(_a) {
-    var _b = _a.showPrevButton, showPrevButton = _b === void 0 ? true : _b, _c = _a.showNextButton, showNextButton = _c === void 0 ? true : _c;
+function PageNavigation() {
     var navigation = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().navigation;
     if (navigation === null || navigation === void 0 ? void 0 : navigation.hide) {
         return null;
     }
     return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
-        showPrevButton && react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
-        showNextButton && react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
+        react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
+        react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
 }
 exports.PageNavigation = PageNavigation;
 var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"])));

package/PageNavigation/PreviousPageLink.js

@@ -17,10 +17,10 @@ function PreviousPageLink() {
     var _a, _b;
     var prevPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).prevPage;
     var navigation = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().navigation;
-    if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
+    if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    var label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousPageLink) === null || _b === void 0 ? void 0 : _b.label) || "Back to ".concat(prevPage.label);
+    var label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _b === void 0 ? void 0 : _b.label) || "Back to ".concat(prevPage.label);
     return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
 }
 exports.PreviousPageLink = PreviousPageLink;

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/mocks/hooks/index.js

@@ -6,7 +6,7 @@ function useThemeSettings(_) {
         toc: { header: 'header', hide: false },
         navigation: {
             nextPageLink: { label: 'next page theme settings label' },
-            previousPageLink: { label: 'prev page theme settings label' },
+            prevPageLink: { label: 'prev page theme settings label' },
         },
         colorMode: {
             modes: ['light', 'dark'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "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/Markdown/MarkdownLayout.tsx

@@ -10,8 +10,6 @@ import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
   markdownWrapper: React.ReactNode;
-  showPrevButton?: boolean;
-  showNextButton?: boolean;
   editPage?: {
     to: string;
     text: string;
@@ -23,8 +21,6 @@ type MarkdownLayoutProps = {
 export function MarkdownLayout({
   tableOfContent,
   markdownWrapper,
-  showPrevButton,
-  showNextButton,
   editPage,
   lastModified,
 }: MarkdownLayoutProps): JSX.Element {
@@ -38,7 +34,7 @@ export function MarkdownLayout({
           )}
         </LayoutTop>
         {markdownWrapper}
-        <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
+        <PageNavigation />
       </ContainerWrapper>
       {tableOfContent}
     </PageWrapper>

package/src/PageNavigation/PageNavigation.tsx

@@ -5,15 +5,7 @@ import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
 import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
-type PageNavigationProps = {
-  showPrevButton?: boolean;
-  showNextButton?: boolean;
-};
-
-export function PageNavigation({
-  showPrevButton = true,
-  showNextButton = true,
-}: PageNavigationProps): JSX.Element | null {
+export function PageNavigation(): JSX.Element | null {
   const { navigation } = useDefaultThemeSettings();
 
   if (navigation?.hide) {
@@ -22,8 +14,8 @@ export function PageNavigation({
 
   return (
     <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
-      {showPrevButton && <PreviousPageLink />}
-      {showNextButton && <NextPageLink />}
+      <PreviousPageLink />
+      <NextPageLink />
     </PageNavigationWrapper>
   );
 }

package/src/PageNavigation/PreviousPageLink.tsx

@@ -15,11 +15,11 @@ export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
   const { navigation } = useDefaultThemeSettings();
 
-  if (!prevPage || navigation?.hide || navigation?.previousPageLink?.hide) {
+  if (!prevPage || navigation?.hide || navigation?.prevPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = navigation?.previousPageLink?.label || `Back to ${prevPage.label}`;
+  const label = navigation?.prevPageLink?.label || `Back to ${prevPage.label}`;
 
   return (
     <StyledButton

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 }>`

package/src/mocks/hooks/index.ts

@@ -14,7 +14,7 @@ export function useThemeSettings(_: string): RawTheme['settings'] {
     toc: { header: 'header', hide: false },
     navigation: {
       nextPageLink: { label: 'next page theme settings label' },
-      previousPageLink: { label: 'prev page theme settings label' },
+      prevPageLink: { label: 'prev page theme settings label' },
     },
     colorMode: {
       modes: ['light', 'dark'],