@redocly/theme 0.20.0 → 0.21.1

package/lib/components/Menu/MenuItemSwitch.js

@@ -16,10 +16,7 @@ const MenuItem_1 = require("../../components/Menu/MenuItem");
 function MenuItemSwitch(props) {
     var _a;
     const type = (0, getMenuType_1.getMenuType)(props.item);
-    const { Drilldown, handleBack, handleExpand, isExpanded: drilldownIsExpanded, prevActiveItem, } = (0, useDrilldown_1.useDrilldown)({
-        item: props.item,
-        activeItem: props.activeItem,
-    });
+    const { Drilldown, handleBack, handleExpand, isExpanded: drilldownIsExpanded, prevActiveItem, } = (0, useDrilldown_1.useDrilldown)(props);
     const { MenuGroup, handleGroupClick, isExpanded } = (0, useMenuGroup_1.useMenuGroup)(props.item);
     switch (type) {
         case types_1.MenuType.Separator:

package/lib/components/Sidebar/BackButton.js

@@ -9,7 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const ArrowBack_1 = require("../../ui/ArrowBack");
 function BackButton({ children, back, className, }) {
     return (react_1.default.createElement(Button, { onClick: back, "data-component-name": "Sidebar/BackButton", className: className },
-        react_1.default.createElement(ArrowBack_1.ArrowBack, { dataComponentName: "Sidebar/ArrowBack" }),
+        react_1.default.createElement(ArrowBack, { dataComponentName: "Sidebar/ArrowBack" }),
         children));
 }
 exports.BackButton = BackButton;
@@ -36,4 +36,7 @@ const Button = styled_components_1.default.button `
     background: var(--sidebar-back-button-hover-background-color);
   }
 `;
+const ArrowBack = (0, styled_components_1.default)(ArrowBack_1.ArrowBack) `
+  margin-right: var(--spacing-sm);
+`;
 //# sourceMappingURL=BackButton.js.map

package/lib/components/Sidebar/Drilldown.js

@@ -21,11 +21,13 @@ const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const DrilldownMenuItem_1 = require("../../components/Sidebar/DrilldownMenuItem");
 const DrilldownMenu_1 = require("../../components/Sidebar/DrilldownMenu");
+const Menu_1 = require("../../components/Menu");
 function Drilldown(_a) {
     var { isExpanded, item, expand, className } = _a, props = __rest(_a, ["isExpanded", "item", "expand", "className"]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Drilldown", className: className },
-        react_1.default.createElement(DrilldownLabel, { onClick: expand },
-            react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item })),
+        react_1.default.createElement(Menu_1.MenuLinkItem, { item: item },
+            react_1.default.createElement(DrilldownLabel, { onClick: expand },
+                react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item }))),
         isExpanded ? react_1.default.createElement(DrilldownMenu_1.DrilldownMenu, Object.assign({ item: item }, props)) : null,
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }

package/lib/components/Sidebar/DrilldownMenu.js

@@ -32,16 +32,21 @@ const styled_components_1 = __importStar(require("styled-components"));
 const BackButton_1 = require("../../components/Sidebar/BackButton");
 const DrilldownMenuItem_1 = require("../../components/Sidebar/DrilldownMenuItem");
 const hooks_1 = require("../../mocks/hooks");
+const Menu_1 = require("../../components/Menu");
 function DrilldownMenu({ item, back, prevActiveItem, children, className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         backLabel: 'theme.sidebar.menu.backLabel',
     };
+    const label = item.label === (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || !(prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label)
+        ? translate(translationKeys.backLabel, 'Back')
+        : prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label;
     return (react_1.default.createElement(MenuContainer, { "data-component-name": "Sidebar/DrilldownMenu", className: className },
         react_1.default.createElement(MenuContent, null,
             react_1.default.createElement(MenuWrapper, null,
-                react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": translationKeys.backLabel }, (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || translate(translationKeys.backLabel, 'Back')),
-                react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item })),
+                react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": translationKeys.backLabel }, label),
+                react_1.default.createElement(Menu_1.MenuLinkItem, { item: item },
+                    react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item }))),
             children)));
 }
 exports.DrilldownMenu = DrilldownMenu;
@@ -52,6 +57,7 @@ const MenuContainer = styled_components_1.default.div `
   width: 100%;
   z-index: var(--z-index-raised);
   background-color: var(--sidebar-item-drilldown-background-color);
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
 `;
 const slideInAnimation = (0, styled_components_1.keyframes) `
   0% {
@@ -70,7 +76,6 @@ const MenuContent = styled_components_1.default.div `
 `;
 const MenuWrapper = styled_components_1.default.div `
   padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
-  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);
   word-break: break-word;
 `;
 //# sourceMappingURL=DrilldownMenu.js.map

package/lib/utils/highlight.d.ts

@@ -20,6 +20,7 @@ import 'prismjs/components/prism-scala.js';
 import 'prismjs/components/prism-sql.js';
 import 'prismjs/components/prism-swift.js';
 import 'prismjs/components/prism-graphql.js';
+import 'prismjs/plugins/treeview/prism-treeview.js';
 /**
  * map language names to Prism.js names
  */

package/lib/utils/highlight.js

@@ -47,6 +47,7 @@ require("prismjs/components/prism-scala.js");
 require("prismjs/components/prism-sql.js");
 require("prismjs/components/prism-swift.js");
 require("prismjs/components/prism-graphql.js");
+require("prismjs/plugins/treeview/prism-treeview.js");
 const DEFAULT_LANG = 'clike';
 const NEW_LINE_EXP = /\n(?!$)/g;
 Prism.languages.insertBefore('javascript', 'string', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Menu/MenuItemSwitch.tsx

@@ -20,10 +20,7 @@ export function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>) {
     handleExpand,
     isExpanded: drilldownIsExpanded,
     prevActiveItem,
-  } = useDrilldown({
-    item: props.item,
-    activeItem: props.activeItem,
-  });
+  } = useDrilldown(props);
 
   const { MenuGroup, handleGroupClick, isExpanded } = useMenuGroup(props.item);
   switch (type) {

package/src/components/Sidebar/BackButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { ArrowBack } from '@theme/ui/ArrowBack';
+import { ArrowBack as ThemeArrowBack } from '@theme/ui/ArrowBack';
 
 interface BackButtonProps {
   back: () => void;
@@ -44,3 +44,7 @@ const Button = styled.button`
     background: var(--sidebar-back-button-hover-background-color);
   }
 `;
+
+const ArrowBack = styled(ThemeArrowBack)`
+  margin-right: var(--spacing-sm);
+`;

package/src/components/Sidebar/Drilldown.tsx

@@ -6,6 +6,7 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { DrilldownMenuItem } from '@theme/components/Sidebar/DrilldownMenuItem';
 import { DrilldownMenu } from '@theme/components/Sidebar/DrilldownMenu';
 import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
+import { MenuLinkItem } from '@theme/components/Menu';
 
 interface DrilldownProps extends DrilldownMenuProps {
   isExpanded: boolean;
@@ -22,9 +23,11 @@ export function Drilldown({
 }: React.PropsWithChildren<DrilldownProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/Drilldown" className={className}>
-      <DrilldownLabel onClick={expand}>
-        <DrilldownMenuItem item={item} />
-      </DrilldownLabel>
+      <MenuLinkItem item={item}>
+        <DrilldownLabel onClick={expand}>
+          <DrilldownMenuItem item={item} />
+        </DrilldownLabel>
+      </MenuLinkItem>
 
       {isExpanded ? <DrilldownMenu item={item} {...props} /> : null}
 

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -5,6 +5,7 @@ import { BackButton } from '@theme/components/Sidebar/BackButton';
 import { DrilldownMenuItem } from '@theme/components/Sidebar/DrilldownMenuItem';
 import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
+import { MenuLinkItem } from '@theme/components/Menu';
 
 export function DrilldownMenu({
   item,
@@ -17,16 +18,22 @@ export function DrilldownMenu({
   const translationKeys = {
     backLabel: 'theme.sidebar.menu.backLabel',
   };
+  const label =
+    item.label === prevActiveItem?.label || !prevActiveItem?.label
+      ? translate(translationKeys.backLabel, 'Back')
+      : prevActiveItem?.label;
+
   return (
     <MenuContainer data-component-name="Sidebar/DrilldownMenu" className={className}>
       <MenuContent>
         <MenuWrapper>
           <BackButton back={back} data-translation-key={translationKeys.backLabel}>
-            {prevActiveItem?.label || translate(translationKeys.backLabel, 'Back')}
+            {label}
           </BackButton>
-          <DrilldownMenuItem item={item} />
+          <MenuLinkItem item={item}>
+            <DrilldownMenuItem item={item} />
+          </MenuLinkItem>
         </MenuWrapper>
-
         {children}
       </MenuContent>
     </MenuContainer>
@@ -40,6 +47,7 @@ const MenuContainer = styled.div`
   width: 100%;
   z-index: var(--z-index-raised);
   background-color: var(--sidebar-item-drilldown-background-color);
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
 `;
 
 const slideInAnimation = keyframes`
@@ -61,6 +69,5 @@ const MenuContent = styled.div`
 
 const MenuWrapper = styled.div`
   padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
-  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);
   word-break: break-word;
 `;

package/src/utils/highlight.ts

@@ -21,6 +21,7 @@ import 'prismjs/components/prism-scala.js';
 import 'prismjs/components/prism-sql.js';
 import 'prismjs/components/prism-swift.js';
 import 'prismjs/components/prism-graphql.js';
+import 'prismjs/plugins/treeview/prism-treeview.js';
 
 const DEFAULT_LANG = 'clike';
 const NEW_LINE_EXP = /\n(?!$)/g;