chore

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

@@ -3,6 +3,7 @@ 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';
 
@@ -20,13 +21,14 @@ export interface MenuHeaderProps extends CommonProps {
  */
 function MenuHeader({ _enableIconPadding = false, 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)]: _enableIconPadding || menuContext._enableIconPadding,
         })}
       >
         {children}

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { isFunction } from '../../lib/utils';
+import { getRandomID, isFunction } 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';
 
@@ -108,6 +109,19 @@ 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() {
+    !this.props.disabled && this.context.addMenuItem?.(this._key, this);
+  }
+
+  public componentWillUnmount() {
+    this.context.deleteMenuItem?.(this._key);
+  }
 
   public render() {
     return (
@@ -139,7 +153,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
       ...rest
     } = props;
 
-    const hover = state === 'hover' && !this.props.disabled;
+    const hover = this._key === this.context.highlightedKey && !this.props.disabled;
 
     let iconElement = null;
     if (icon) {
@@ -153,7 +167,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) || !!_enableIconPadding || this.context._enableIconPadding,
       [styles.disabled(this.theme)]: !!this.props.disabled,
     });
 
@@ -174,6 +188,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 +208,37 @@ export class MenuItem extends React.Component<MenuItemProps> {
     );
   };
 
+  public getRef = () => {
+    return this.commonRef.current;
+  };
+
+  private onClick = (e: React.MouseEvent<HTMLElement>) => {
+    this.props.onClick?.(e);
+    this.context.onClick?.(this._key);
+  };
+
   // https://github.com/facebook/react/issues/10109
   // Mouseenter event not triggered when cursor moves from disabled button
   private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {
+    this.context.setHighlightedKey?.(this._key);
     if (!this.mouseEntered && this.props.onMouseEnter) {
       this.mouseEntered = true;
       this.props.onMouseEnter(e);
     }
+
+    if (!this.mouseEntered && this.context.onMouseEnter) {
+      this.mouseEntered = true;
+      this.context.onMouseEnter(e);
+    }
   };
 
   private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
+    this.context.setHighlightedKey?.(undefined);
     this.mouseEntered = false;
     if (this.props.onMouseLeave) {
       this.props.onMouseLeave(e);
     }
+    this.context.onMouseLeave?.(e);
   };
 
   private getComponent = () => {
@@ -229,5 +262,5 @@ export class MenuItem extends React.Component<MenuItemProps> {
 
 export const isMenuItem = (child: React.ReactNode): child is React.ReactElement<MenuItemProps> => {
   // @ts-ignore
-  return child?.type?.__KONTUR_REACT_UI__ === 'MenuItem';
+  return child?.type?.__KONTUR_REACT_UI__ === 'MenuItem' || child?.__KONTUR_REACT_UI__ === 'MenuItem';
 };

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

@@ -583,7 +583,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(1);
   };
 
   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

@@ -141,31 +141,40 @@ export const Effect: EffectFactory = {
   },
   HighlightMenuItem: (dispatch, getState, getProps, getInstance) => {
     const { value, itemToValue, valueToString } = getProps();
-    const { items, focused, textValue, requestStatus } = getState();
+    const {
+      items,
+      // focused,
+      textValue,
+      requestStatus,
+    } = getState();
     const { menu } = getInstance();
     const valueString = getValueString(value, valueToString);
-
+    //
     if (!menu) {
       return;
     }
-
-    if (!focused) {
-      return;
-    }
-
+    //
+    // if (!focused) {
+    //   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;
+    if (items && items.length && isNonNullable(value)) {
+      index = items.findIndex((x: any) => itemToValue(x) === itemToValue(value));
+      const item = menu.getMenuItems()[index];
+      if (index >= 0 && item !== undefined) {
+        menu.highlightItem(item.key);
+      }
     }
-
+    //
+    // if (index >= 0) {
+    //   // FIXME: accessing private props
+    //   // @ts-ignore
+    //   requestAnimationFrame(() => menu && menu.scrollToSelected());
+    //   return;
+    // }
+    //
     if (textValue !== valueString || requestStatus === ComboBoxRequestStatus.Failed) {
       requestAnimationFrame(() => menu && menu.down());
     }