MenuItem in any level

packages/react-ui-testing/SeleniumTesting/Controls/Autocomplete.cs

@@ -53,4 +53,4 @@ public void SelectByIndex(int index)
         private readonly Menu menu;
         private readonly Portal portal;
     }
-}
+}

packages/react-ui/components/MenuHeader/MenuHeader.tsx

@@ -3,11 +3,11 @@ import React, { ReactNode, useContext } from 'react';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
 import { cx } from '../../lib/theming/Emotion';
+import { MenuContext } from '../../internal/Menu/MenuContext';
 
 import { styles } from './MenuHeader.styles';
 
 export interface MenuHeaderProps extends CommonProps {
-  _enableIconPadding?: boolean;
   children: ReactNode;
 }
 
@@ -18,15 +18,16 @@ export interface MenuHeaderProps extends CommonProps {
  *
  * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
-function MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeaderProps) {
+function MenuHeader({ children, ...rest }: MenuHeaderProps) {
   const theme = useContext(ThemeContext);
+  const menuContext = useContext(MenuContext);
 
   return (
     <CommonWrapper {...rest}>
       <div
         className={cx({
           [styles.root(theme)]: true,
-          [styles.withLeftPadding(theme)]: _enableIconPadding,
+          [styles.withLeftPadding(theme)]: menuContext.enableIconPadding,
         })}
       >
         {children}

packages/react-ui/components/MenuItem/MenuItem.tsx

@@ -1,22 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { isFunction, isReactUIComponent } from '../../lib/utils';
+import { getRandomID, isFunction, isReactUIComponent } from '../../lib/utils';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { Theme } from '../../lib/theming/Theme';
 import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';
 import { cx } from '../../lib/theming/Emotion';
 import { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';
+import { MenuContext, MenuContextType } from '../../internal/Menu/MenuContext';
 
 import { styles } from './MenuItem.styles';
 
 export type MenuItemState = null | 'hover' | 'selected' | void;
 
 export interface MenuItemProps extends CommonProps {
-  /**
-   * @ignore
-   */
-  _enableIconPadding?: boolean;
   /**
    * Добавляет описание для элемента меню.
    */
@@ -108,6 +105,21 @@ export class MenuItem extends React.Component<MenuItemProps> {
   private theme!: Theme;
   private mouseEntered = false;
   private setRootNode!: TSetRootNode;
+  private commonRef = React.createRef();
+  private _key = getRandomID();
+
+  public static contextType = MenuContext;
+  public context: MenuContextType = this.context;
+
+  public componentDidMount() {
+    if (!this.props.disabled) {
+      this.context.addMenuItem?.({ key: this._key, item: this });
+    }
+  }
+
+  public componentWillUnmount() {
+    this.context.deleteMenuItem?.(this._key);
+  }
 
   public render() {
     return (
@@ -125,21 +137,9 @@ export class MenuItem extends React.Component<MenuItemProps> {
   }
 
   private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {
-    const {
-      link,
-      comment,
-      icon,
-      loose,
-      state,
-      _enableIconPadding,
-      component,
-      onMouseEnter,
-      onMouseLeave,
-      isMobile,
-      ...rest
-    } = props;
-
-    const hover = state === 'hover' && !this.props.disabled;
+    const { link, comment, icon, loose, state, component, onMouseEnter, onMouseLeave, isMobile, ...rest } = props;
+
+    const hover = (state === 'hover' || this._key === this.context.highlightedKey) && !this.props.disabled;
 
     let iconElement = null;
     if (icon) {
@@ -153,7 +153,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
       [styles.hover(this.theme)]: hover,
       [styles.selected(this.theme)]: state === 'selected',
       [styles.link(this.theme)]: !!link,
-      [styles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,
+      [styles.withIcon(this.theme)]: Boolean(iconElement) || this.context.enableIconPadding,
       [styles.disabled(this.theme)]: !!this.props.disabled,
     });
 
@@ -174,6 +174,8 @@ export class MenuItem extends React.Component<MenuItemProps> {
         onMouseLeave={this.handleMouseLeave}
         className={className}
         tabIndex={-1}
+        ref={this.commonRef}
+        onClick={this.onClick}
       >
         {iconElement}
         {content}
@@ -192,20 +194,30 @@ export class MenuItem extends React.Component<MenuItemProps> {
     );
   };
 
+  public getRef = () => {
+    return this.commonRef.current;
+  };
+
+  private onClick = (event: React.MouseEvent<HTMLElement>) => {
+    this.context.onClick?.(this._key, false, event);
+  };
+
   // https://github.com/facebook/react/issues/10109
   // Mouseenter event not triggered when cursor moves from disabled button
-  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {
-    if (!this.mouseEntered && this.props.onMouseEnter) {
+  private handleMouseEnterFix = (event: React.MouseEvent<HTMLElement>) => {
+    if (!this.mouseEntered) {
       this.mouseEntered = true;
-      this.props.onMouseEnter(e);
+      this.context.setHighlightedKey?.(this._key);
+      this.props.onMouseEnter?.(event);
+      this.context.onMouseEnter?.(event);
     }
   };
 
-  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
+  private handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
     this.mouseEntered = false;
-    if (this.props.onMouseLeave) {
-      this.props.onMouseLeave(e);
-    }
+    this.props.onMouseLeave?.(event);
+    this.context.setHighlightedKey?.();
+    this.context.onMouseLeave?.(event);
   };
 
   private getComponent = () => {

packages/react-ui/components/Select/Select.tsx

@@ -586,7 +586,7 @@ export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps
 
   private handleSearch = (value: string) => {
     this.setState({ searchPattern: value });
-    this.menu?.highlightItem(1);
+    this.menu?.highlightItemByIndex(0);
   };
 
   private select(value: TValue) {

packages/react-ui/components/TokenInput/TokenInput.tsx

@@ -637,9 +637,7 @@ export class TokenInput<T = string> extends React.PureComponent<TokenInputProps<
       const selectItemIndex = autocompleteItemsUnique.findIndex(
         (item) => this.props.valueToString(item).toLowerCase() === this.state.inputValue.toLowerCase(),
       );
-      if (this.menuRef) {
-        this.menuRef.highlightItem(selectItemIndex < 0 ? 0 : selectItemIndex);
-      }
+      this.menuRef?.highlightItemByIndex(selectItemIndex < 0 ? 0 : selectItemIndex);
     }
   };
 
@@ -933,7 +931,7 @@ export class TokenInput<T = string> extends React.PureComponent<TokenInputProps<
       this.state.autocompleteItems.length > 0 &&
       this.type !== TokenInputType.Combined
     ) {
-      this.menuRef.highlightItem(0);
+      this.menuRef.highlightItemByIndex(0);
     }
   };
 

packages/react-ui/internal/CustomComboBox/CustomComboBoxReducer.tsx

@@ -6,6 +6,7 @@ import { isNonNullable } from '../../lib/utils';
 import { isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape } from '../../lib/events/keyboard/identifiers';
 import * as LayoutEvents from '../../lib/LayoutEvents';
 import { Nullable } from '../../typings/utility-types';
+import { MenuItemContextType } from '../Menu/MenuContext';
 
 import { CustomComboBox, CustomComboBoxProps, CustomComboBoxState, DefaultState } from './CustomComboBox';
 import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
@@ -153,17 +154,12 @@ export const Effect: EffectFactory = {
       return;
     }
 
-    let index = -1;
     if (items && items.length && isNonNullable(value)) {
-      index = items.findIndex((x) => itemToValue(x) === itemToValue(value));
-    }
-    menu.highlightItem(index);
-
-    if (index >= 0) {
-      // FIXME: accessing private props
-      // @ts-ignore
-      requestAnimationFrame(() => menu && menu.scrollToSelected());
-      return;
+      const index = items.findIndex((x: MenuItemContextType) => itemToValue(x) === itemToValue(value));
+      const item = menu.getMenuItems()[index];
+      if (index >= 0 && item !== undefined) {
+        menu.highlightItem(item.key);
+      }
     }
 
     if (textValue !== valueString || requestStatus === ComboBoxRequestStatus.Failed) {