@redocly/theme 0.55.0-next.3 → 0.55.0-next.4

package/lib/components/Menu/MenuItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { JSX } from 'react';
 import type { MenuItemProps } from '../../core/types';
+import type { JSX } from 'react';
 export declare function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element;

package/lib/components/Menu/MenuItem.js

@@ -66,9 +66,14 @@ function MenuItem(props) {
             handleExpand();
         }
     };
+    const handleExpandOnEnter = (event) => {
+        if (event.key === 'Enter') {
+            handleOnClick();
+        }
+    };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
@@ -80,7 +85,7 @@ function MenuItem(props) {
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
         hasHttpTag ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
-        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive }, label)) : (label),
+        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive, onKeyDown: handleExpandOnEnter }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
         item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { depth: depth, linePosition: item.linePosition })) : null));
 }
@@ -128,7 +133,6 @@ const MenuItemWrapper = styled_components_1.default.div `
   }
 `;
 const MenuItemNestedWrapper = styled_components_1.default.div `
-  overflow: hidden;
   order: 1;
   position: relative;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.55.0-next.3",
+  "version": "0.55.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Menu/MenuItem.tsx

@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { JSX } from 'react';
 import type { ItemState, MenuItemProps } from '@redocly/theme/core/types';
+import type { JSX, KeyboardEvent } from 'react';
 
 import { useNestedMenu, useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
@@ -49,6 +49,12 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     }
   };
 
+  const handleExpandOnEnter = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleOnClick();
+    }
+  };
+
   const chevron = hasChevron ? (
     isExpanded ? (
       <ChevronDownIcon
@@ -64,6 +70,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   ) : null;
 
   const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+
   const label = item.label && (
     <MenuItemLabelWrapper
       active={item.active}
@@ -72,8 +79,10 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       withChevron={hasChevron}
       isSeparator={isSeparator}
       onClick={handleOnClick}
+      onKeyDown={handleExpandOnEnter}
       ref={labelRef}
       role={item.link ? 'none' : 'link'}
+      tabIndex={!item.link ? 0 : undefined}
       data-testid="menu-item-label"
     >
       {hasChevron ? <ChevronWrapper>{chevron}</ChevronWrapper> : null}
@@ -115,6 +124,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
           external={item.external}
           target={item.target}
           languageInsensitive={item.languageInsensitive}
+          onKeyDown={handleExpandOnEnter}
         >
           {label}
         </MenuItemLink>
@@ -194,7 +204,6 @@ const MenuItemNestedWrapper = styled.div<{
   isExpanded?: boolean;
   depth?: number;
 }>`
-  overflow: hidden;
   order: 1;
   position: relative;