@rescui/menu 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.14.0

package/lib/menu.js

@@ -1,65 +1,149 @@
 "use client";
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { MenuProvider } from './parts/menu-context.js';
 import styles from './menu.p.module.css.js';
 import { useMenuKeyboardNavigation } from './parts/use-menu-keyboard-navigation.js';
 
-const Menu = _ref => {
+const MenuListbox = _ref => {
   let {
-    tag = 'ul',
+    activateFirstItem,
+    tag: Tag,
     itemTag,
     iconPlacement,
     disabled,
-    size = 'm',
+    size,
     mode,
-    disableCursor = false,
     theme,
-    enableKeyboardNavigation = false,
-    activateFirstItem = false,
     className,
     wrapItemsWithLi,
-    returnFocusOnUnmount = false,
-    resizeIcons = false,
-    ...restProps
+    resizeIcons,
+    role,
+    onKeyDown,
+    onMouseLeave,
+    tabIndex,
+    ...props
   } = _ref;
-  const Tag = tag;
+  const menuRef = useRef(null);
   const {
-    activeItemRef,
+    currentActiveItemEl,
+    setCurrentActiveItemEl,
     registerItem,
     unregisterItem,
-    isKeyboardNavigating
+    handleItemFocus,
+    handleItemKeyDown,
+    handleItemMouseEnter
   } = useMenuKeyboardNavigation({
-    enableKeyboardNavigation,
-    activateFirstItem,
-    returnFocusOnUnmount
+    activateFirstItem
   });
+
+  const handleMenuKeyDown = e => {
+    onKeyDown?.(e);
+
+    if (e.defaultPrevented || e.target !== e.currentTarget) {
+      return;
+    }
+
+    handleItemKeyDown(e, currentActiveItemEl ?? undefined);
+  };
+
+  const handleMenuMouseLeave = e => {
+    onMouseLeave?.(e);
+
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    setCurrentActiveItemEl(null);
+    menuRef.current?.focus({
+      preventScroll: true
+    });
+  };
+
   return /*#__PURE__*/React.createElement(MenuProvider, {
     itemTag: itemTag,
     iconPlacement: iconPlacement,
     disabled: disabled,
     size: size,
-    disableCursor: disableCursor || isKeyboardNavigating,
     mode: mode,
     theme: theme,
+    wrapWithLi: wrapItemsWithLi ?? Tag === 'ul',
+    resizeIcons: resizeIcons,
+    keyboardNavigationEnabled: true,
+    currentActiveItemEl: currentActiveItemEl,
     registerItem: registerItem,
     unregisterItem: unregisterItem,
-    activeItemRef: activeItemRef.current,
-    isKeyboardNavigating: isKeyboardNavigating,
-    wrapWithLi: wrapItemsWithLi ?? tag === 'ul',
-    resizeIcons: resizeIcons
+    onItemFocus: handleItemFocus,
+    onItemKeyDown: handleItemKeyDown,
+    onItemMouseEnter: handleItemMouseEnter
+  }, /*#__PURE__*/React.createElement(Tag, { ...props,
+    className: cn(styles.keyboardNavigationEnabled, styles.menu, className),
+    onKeyDown: handleMenuKeyDown,
+    onMouseLeave: handleMenuMouseLeave,
+    role: role ?? 'listbox',
+    tabIndex: currentActiveItemEl ? -1 : tabIndex ?? 0,
+    ref: menuRef
+  }));
+};
+
+const MenuRegular = _ref2 => {
+  let {
+    tag: Tag,
+    itemTag,
+    iconPlacement,
+    disabled,
+    size,
+    mode,
+    theme,
+    className,
+    wrapItemsWithLi,
+    resizeIcons,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(MenuProvider, {
+    itemTag: itemTag,
+    iconPlacement: iconPlacement,
+    disabled: disabled,
+    size: size,
+    mode: mode,
+    theme: theme,
+    wrapWithLi: wrapItemsWithLi ?? Tag === 'ul',
+    resizeIcons: resizeIcons,
+    keyboardNavigationEnabled: false,
+    currentActiveItemEl: null,
+    registerItem: null,
+    unregisterItem: null,
+    onItemFocus: null,
+    onItemKeyDown: null,
+    onItemMouseEnter: null
   }, /*#__PURE__*/React.createElement(Tag, {
-    className: cn(!enableKeyboardNavigation && styles.keyboardNavigationDisabled, className),
-    ...restProps
+    className: cn(styles.keyboardNavigationDisabled, styles.menu, className),
+    ...props
   }));
 };
 
+const Menu = _ref3 => {
+  let {
+    enableKeyboardNavigation = false,
+    activateFirstItem = false,
+    tag = 'ul',
+    ...props
+  } = _ref3;
+  return enableKeyboardNavigation ? /*#__PURE__*/React.createElement(MenuListbox, {
+    activateFirstItem: activateFirstItem,
+    tag: tag,
+    ...props
+  }) : /*#__PURE__*/React.createElement(MenuRegular, {
+    tag: tag,
+    ...props
+  });
+};
+
 Menu.propTypes = {
   size: PropTypes.oneOf(['l', 'm', 's']),
   mode: PropTypes.oneOf(['clear', 'classic', 'rock']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  disableCursor: PropTypes.bool,
   disabled: PropTypes.bool,
   resizeIcons: PropTypes.bool,
   iconPlacement: PropTypes.oneOf(['left', 'right']),

package/lib/menu.p.module.css.js

@@ -1,30 +1,37 @@
 var styles = {
-  "themeLight": "_themeLight_1be69r7_8",
-  "themeDark": "_themeDark_1be69r7_11",
-  "sizeS": "_sizeS_1be69r7_15",
-  "sizeM": "_sizeM_1be69r7_18",
-  "sizeL": "_sizeL_1be69r7_21",
-  "modeClassic": "_modeClassic_1be69r7_25",
-  "modeRock": "_modeRock_1be69r7_28",
-  "modeClear": "_modeClear_1be69r7_31",
-  "iconPlacementLeft": "_iconPlacementLeft_1be69r7_35",
-  "iconPlacementRight": "_iconPlacementRight_1be69r7_39",
-  "wrapper": "_wrapper_1be69r7_43",
-  "menuItem": "_menuItem_1be69r7_50",
-  "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1be69r7_85",
-  "selected": "_selected_1be69r7_99",
-  "highlighted": "_highlighted_1be69r7_106",
-  "disableCursor": "_disableCursor_1be69r7_107",
-  "disabled": "_disabled_1be69r7_120",
-  "content": "_content_1be69r7_131",
-  "icon": "_icon_1be69r7_35",
-  "resizedIcon": "_resizedIcon_1be69r7_141",
-  "divider": "_divider_1be69r7_149",
-  "groupHeaderThemeLight": "_groupHeaderThemeLight_1be69r7_163",
-  "groupHeaderThemeDark": "_groupHeaderThemeDark_1be69r7_166",
-  "groupHeaderSizeL": "_groupHeaderSizeL_1be69r7_170",
-  "groupHeaderSizeM": "_groupHeaderSizeM_1be69r7_173",
-  "groupHeaderSizeS": "_groupHeaderSizeS_1be69r7_176",
-  "groupHeader": "_groupHeader_1be69r7_163"
+  "themeLight": "_themeLight_1t76rai_8",
+  "themeDark": "_themeDark_1t76rai_11",
+  "menu": "_menu_1t76rai_15",
+  "sizeS": "_sizeS_1t76rai_21",
+  "sizeM": "_sizeM_1t76rai_24",
+  "sizeL": "_sizeL_1t76rai_27",
+  "modeClassic": "_modeClassic_1t76rai_31",
+  "modeRock": "_modeRock_1t76rai_34",
+  "modeClear": "_modeClear_1t76rai_37",
+  "iconPlacementLeft": "_iconPlacementLeft_1t76rai_41",
+  "iconPlacementRight": "_iconPlacementRight_1t76rai_45",
+  "wrapper": "_wrapper_1t76rai_49",
+  "hoverIcon": "_hoverIcon_1t76rai_53",
+  "hoverIconNoReserve": "_hoverIconNoReserve_1t76rai_56",
+  "menuItem": "_menuItem_1t76rai_61",
+  "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1t76rai_98",
+  "selected": "_selected_1t76rai_112",
+  "keyboardNavigationEnabled": "_keyboardNavigationEnabled_1t76rai_119",
+  "hideCustomIconOnHover": "_hideCustomIconOnHover_1t76rai_130",
+  "customIcon": "_customIcon_1t76rai_132",
+  "hideSelectedIconOnHover": "_hideSelectedIconOnHover_1t76rai_137",
+  "selectedIcon": "_selectedIcon_1t76rai_139",
+  "disabled": "_disabled_1t76rai_144",
+  "contentWrapper": "_contentWrapper_1t76rai_151",
+  "content": "_content_1t76rai_151",
+  "icon": "_icon_1t76rai_41",
+  "resizedIcon": "_resizedIcon_1t76rai_169",
+  "divider": "_divider_1t76rai_177",
+  "groupHeaderThemeLight": "_groupHeaderThemeLight_1t76rai_191",
+  "groupHeaderThemeDark": "_groupHeaderThemeDark_1t76rai_194",
+  "groupHeaderSizeL": "_groupHeaderSizeL_1t76rai_198",
+  "groupHeaderSizeM": "_groupHeaderSizeM_1t76rai_201",
+  "groupHeaderSizeS": "_groupHeaderSizeS_1t76rai_204",
+  "groupHeader": "_groupHeader_1t76rai_191"
 };
 export { styles as default };

package/lib/parts/divider.d.ts

@@ -1,10 +1,7 @@
-import React, { HTMLAttributes } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Theme } from '@rescui/ui-contexts';
-export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
-    theme?: Theme;
-    className?: string;
-}
+import type { DividerProps } from '../types';
+export type { DividerProps } from '../types';
 declare const Divider: {
     ({ className, theme, ...restProps }: DividerProps): React.JSX.Element;
     propTypes: {

package/lib/parts/divider.js

@@ -20,6 +20,7 @@ const Divider = _ref => {
   const actualTheme = useThemeWithUndefined(menuContext.theme ?? theme);
   return /*#__PURE__*/React.createElement("hr", {
     className: cn(styles.divider, THEME_CLASS[actualTheme], className),
+    role: menuContext.keyboardNavigationEnabled ? 'presentation' : undefined,
     ...restProps
   });
 };

package/lib/parts/group-header.d.ts

@@ -1,13 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Theme } from '@rescui/ui-contexts';
-import { MenuItemSize } from './menu-context';
-export interface GroupHeaderProps {
-    theme?: Theme;
-    size?: MenuItemSize;
-    text?: React.ReactNode;
-    className?: string;
-}
+import type { GroupHeaderProps } from '../types';
+export type { GroupHeaderProps } from '../types';
 declare function GroupHeader({ className, text, size: propsSize, theme: propsTheme }: GroupHeaderProps): React.JSX.Element;
 declare namespace GroupHeader {
     var propTypes: {

package/lib/parts/group-header.js

@@ -27,7 +27,8 @@ function GroupHeader(_ref) {
   const actualTheme = useThemeWithUndefined(menuContext.theme ?? propsTheme);
   return /*#__PURE__*/React.createElement(Tag, {
     className: cn(styles.groupHeader, SIZE_CLASS[menuContext.size ?? propsSize], THEME_CLASS[actualTheme], className),
-    "data-rs-internal": 'menu__group-header'
+    "data-rs-internal": 'menu__group-header',
+    role: menuContext.keyboardNavigationEnabled ? 'presentation' : undefined
   }, text);
 }
 

package/lib/parts/menu-context.d.ts

@@ -1,23 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { Theme } from '@rescui/ui-contexts';
-export type MenuItemSize = 's' | 'm' | 'l';
-export type MenuItemIconPlacement = 'left' | 'right';
-export type MenuItemMode = 'clear' | 'classic' | 'rock';
-export interface MenuContextValue {
-    iconPlacement?: MenuItemIconPlacement;
-    disabled?: boolean;
-    disableCursor?: boolean;
-    size?: MenuItemSize;
-    mode?: MenuItemMode;
-    theme?: Theme;
-    itemTag?: React.ElementType;
-    wrapWithLi: boolean;
-    registerItem?: (ref: HTMLElement) => void;
-    unregisterItem?: (ref: HTMLElement) => void;
-    activeItemRef?: HTMLElement;
-    isKeyboardNavigating: boolean;
-    resizeIcons?: boolean;
-}
+import type { MenuContextValue } from '../types';
+export type { MenuContextValue, MenuItemMode, MenuItemIconPlacement, MenuItemSize } from '../types';
 export declare const DEFAULT_MENU_CONTEXT: MenuContextValue;
 export declare const MenuContext: React.Context<MenuContextValue>;
 export declare const useMenuContext: () => MenuContextValue;

package/lib/parts/menu-context.js

@@ -3,12 +3,14 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 const DEFAULT_MENU_CONTEXT = {
   disabled: false,
-  isKeyboardNavigating: false,
+  keyboardNavigationEnabled: false,
   wrapWithLi: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  registerItem: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  unregisterItem: () => {}
+  registerItem: null,
+  unregisterItem: null,
+  currentActiveItemEl: null,
+  onItemFocus: null,
+  onItemKeyDown: null,
+  onItemMouseEnter: null
 };
 const MenuContext = /*#__PURE__*/React.createContext(DEFAULT_MENU_CONTEXT);
 
@@ -18,7 +20,6 @@ const MenuProvider = _ref => {
   let {
     children,
     disabled = DEFAULT_MENU_CONTEXT.disabled,
-    isKeyboardNavigating = DEFAULT_MENU_CONTEXT.isKeyboardNavigating,
     wrapWithLi = DEFAULT_MENU_CONTEXT.wrapWithLi,
     registerItem = DEFAULT_MENU_CONTEXT.registerItem,
     unregisterItem = DEFAULT_MENU_CONTEXT.unregisterItem,
@@ -27,7 +28,6 @@ const MenuProvider = _ref => {
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: {
       disabled,
-      isKeyboardNavigating,
       wrapWithLi,
       registerItem,
       unregisterItem,
@@ -40,7 +40,6 @@ MenuProvider.propTypes = {
   size: PropTypes.oneOf(['l', 'm', 's']),
   mode: PropTypes.oneOf(['clear', 'classic', 'rock']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  disableCursor: PropTypes.bool,
   disabled: PropTypes.bool,
   iconPlacement: PropTypes.oneOf(['left', 'right']),
   itemTag: PropTypes.elementType

package/lib/parts/menu-item.d.ts

@@ -1,21 +1,33 @@
 import React from 'react';
-import type { JSX, AllHTMLAttributes, ReactNode } from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { MenuItemSize, MenuItemMode, MenuItemIconPlacement } from './menu-context';
-export interface MenuItemProps extends Omit<AllHTMLAttributes<Element>, 'size'> {
+import type { JSX } from 'react';
+export type { MenuItemProps } from '../types';
+export declare const MenuItem: React.ForwardRefExoticComponent<{
     className?: string;
     tag?: React.ElementType;
     icon?: JSX.Element;
-    size?: MenuItemSize;
-    mode?: MenuItemMode;
-    theme?: Theme;
+    size?: import("./menu-context").MenuItemSize;
+    mode?: import("./menu-context").MenuItemMode;
+    theme?: import("@rescui/ui-contexts").Theme;
     disabled?: boolean;
-    disableCursor?: boolean;
     selected?: boolean;
-    highlighted?: boolean;
-    iconPlacement?: MenuItemIconPlacement;
-    children?: ReactNode;
+    iconPlacement?: import("./menu-context").MenuItemIconPlacement;
+    children?: React.ReactNode;
     key?: string;
-}
-export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLElement>>;
+    'data-test'?: string;
+    hoverIcon?: JSX.Element;
+} & Omit<React.AllHTMLAttributes<Element>, keyof {
+    className?: string;
+    tag?: React.ElementType;
+    icon?: JSX.Element;
+    size?: import("./menu-context").MenuItemSize;
+    mode?: import("./menu-context").MenuItemMode;
+    theme?: import("@rescui/ui-contexts").Theme;
+    disabled?: boolean;
+    selected?: boolean;
+    iconPlacement?: import("./menu-context").MenuItemIconPlacement;
+    children?: React.ReactNode;
+    key?: string;
+    'data-test'?: string;
+    hoverIcon?: JSX.Element;
+}> & React.RefAttributes<HTMLElement>>;
 export default MenuItem;

package/lib/parts/menu-item.js

@@ -1,8 +1,9 @@
 "use client";
-import React, { useState, useEffect, cloneElement } from 'react';
+import React, { useState, cloneElement, useEffect } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import CheckOutlineIcon from '../_virtual/check-outline.js';
 import styles from '../menu.p.module.css.js';
 import { useMenuContext } from './menu-context.js';
 const ICON_PLACEMENT_STYLES = {
@@ -22,6 +23,11 @@ const SIZE_STYLES = {
 const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
+};
+const HOVER_ICON_WILL_REPLACE_STYLES = {
+  custom: styles.hideCustomIconOnHover,
+  selected: styles.hideSelectedIconOnHover,
+  none: ''
 }; // eslint-disable-next-line complexity
 
 const MenuItemInner = (_ref, ref) => {
@@ -34,27 +40,29 @@ const MenuItemInner = (_ref, ref) => {
     mode = 'classic',
     theme,
     disabled,
-    disableCursor,
     selected,
-
-    /* @private */
-    highlighted,
     iconPlacement = 'left',
+    onFocus,
+    onKeyDown,
+    onMouseEnter,
+    role,
+    tabIndex,
+    hoverIcon,
     ...restProps
   } = _ref;
   const {
     unregisterItem,
     registerItem,
-    activeItemRef,
-    isKeyboardNavigating,
+    currentActiveItemEl,
+    keyboardNavigationEnabled,
+    onItemFocus,
+    onItemKeyDown,
+    onItemMouseEnter,
     wrapWithLi,
     ...menuContext
   } = useMenuContext();
   const actualTheme = useThemeWithUndefined(menuContext.theme ?? theme);
   const [thisRef, setThisRef] = useState(null);
-  useEffect(() => {
-    return () => unregisterItem(thisRef);
-  }, [unregisterItem, thisRef]);
   let autoTag = 'span';
 
   if (restProps.href) {
@@ -67,17 +75,37 @@ const MenuItemInner = (_ref, ref) => {
   const actualIconPlacement = menuContext.iconPlacement ?? iconPlacement ?? 'left';
   const actualMode = menuContext.mode ?? mode;
   const actualSize = menuContext.size ?? size;
-  const actualDisableCursor = menuContext.disableCursor ?? disableCursor;
   const resizeIcons = menuContext.resizeIcons ?? false;
-  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon, resizeIcons && styles.resizedIcon),
+  const actualDisabled = menuContext.disabled || disabled;
+  const iconElement = /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/cloneElement(icon, {
+    className: cn(icon.props.className, styles.icon, styles.customIcon, resizeIcons && styles.resizedIcon),
     'data-render-all-sizes': true
   }) : null;
-  const actualHighlighted = highlighted || activeItemRef === thisRef && isKeyboardNavigating;
+  const hasHoverIcon = /*#__PURE__*/React.isValidElement(hoverIcon);
+  const rovingTabIndex = currentActiveItemEl === thisRef ? 0 : -1;
+  let resolvedTabIndex = tabIndex ?? 0;
+
+  if (keyboardNavigationEnabled) {
+    resolvedTabIndex = rovingTabIndex;
+  }
+
+  if (actualDisabled) {
+    resolvedTabIndex = -1;
+  }
+
+  useEffect(() => {
+    if (!thisRef || actualDisabled || !registerItem) {
+      return undefined;
+    }
+
+    registerItem(thisRef);
+    return () => unregisterItem?.(thisRef);
+  }, [actualDisabled, registerItem, thisRef, unregisterItem]);
 
   const handleRef = r => {
-    registerItem(r);
-    setThisRef(r);
+    if (r) {
+      setThisRef(r);
+    }
 
     if (typeof ref === 'function') {
       ref(r);
@@ -87,31 +115,71 @@ const MenuItemInner = (_ref, ref) => {
   };
 
   const handleKeyDown = e => {
-    if (isKeyboardNavigating && (e.key === ' ' || e.key === 'Enter')) {
-      e.preventDefault();
+    onKeyDown?.(e);
+
+    if (e.defaultPrevented || !onItemKeyDown) {
+      return;
+    }
 
-      if (e.target && e.target.click) {
-        e.target.click();
-      }
+    if (thisRef) {
+      onItemKeyDown(e, thisRef);
     }
   };
 
+  const handleFocus = e => {
+    onFocus?.(e);
+
+    if (onItemFocus && thisRef) {
+      onItemFocus(thisRef);
+    }
+  };
+
+  const handleMouseEnter = e => {
+    onMouseEnter?.(e);
+
+    if (onItemMouseEnter && thisRef) {
+      onItemMouseEnter(thisRef);
+    }
+  };
+
+  let hoverIconWillReplace = 'none';
+
+  if (hasHoverIcon && iconElement && actualIconPlacement === 'right') {
+    hoverIconWillReplace = 'custom';
+  } else if (hasHoverIcon && selected) {
+    hoverIconWillReplace = 'selected';
+  }
+
   const Wrapper = wrapWithLi ? 'li' : 'div';
   return /*#__PURE__*/React.createElement(Wrapper, {
     className: cn(styles.wrapper, className, ICON_PLACEMENT_STYLES[actualIconPlacement], MODE_STYLES[actualMode], SIZE_STYLES[actualSize], THEME_STYLES[actualTheme]),
     "data-test": 'menu-item__wrapper',
-    "data-rs-internal": 'menu__menu-item'
-  }, /*#__PURE__*/React.createElement(Tag, {
+    "data-rs-internal": 'menu__menu-item',
+    role: keyboardNavigationEnabled ? 'presentation' : undefined
+  }, /*#__PURE__*/React.createElement(Tag, { ...restProps,
+    onFocus: handleFocus,
     onKeyDown: handleKeyDown,
+    onMouseEnter: handleMouseEnter,
     ref: handleRef,
-    className: cn(styles.menuItem, (menuContext.disabled || disabled) && styles.disabled, selected && styles.selected, actualHighlighted && styles.highlighted, actualDisableCursor && styles.disableCursor),
-    "data-test": 'menu-item',
+    className: cn(styles.menuItem, actualDisabled && styles.disabled, selected && styles.selected, HOVER_ICON_WILL_REPLACE_STYLES[hoverIconWillReplace]),
+    "data-test": restProps['data-test'] ?? 'menu-item',
     "data-rs-internal": 'menu__menu-item__inner',
-    tabIndex: 0,
-    ...restProps
+    role: role ?? (keyboardNavigationEnabled ? 'option' : undefined),
+    "aria-selected": keyboardNavigationEnabled && selected !== undefined ? selected : restProps['aria-selected'],
+    "aria-disabled": keyboardNavigationEnabled && actualDisabled ? true : restProps['aria-disabled'],
+    tabIndex: resolvedTabIndex
   }, iconElement, /*#__PURE__*/React.createElement("span", {
+    className: styles.contentWrapper
+  }, /*#__PURE__*/React.createElement("span", {
     className: styles.content
-  }, children)));
+  }, children), selected && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+    className: cn(styles.icon, styles.selectedIcon, resizeIcons && styles.resizedIcon),
+    "data-test": 'menu-item__selected-icon',
+    "data-render-all-sizes": true
+  }), hasHoverIcon && /*#__PURE__*/React.cloneElement(hoverIcon, {
+    className: cn(hoverIcon.props.className, styles.icon, styles.hoverIcon, resizeIcons && styles.resizedIcon, hoverIconWillReplace !== 'none' && styles.hoverIconNoReserve),
+    'data-render-all-sizes': true
+  }))));
 };
 
 const MenuItem = /*#__PURE__*/React.forwardRef(MenuItemInner);
@@ -119,15 +187,11 @@ MenuItem.propTypes = {
   size: PropTypes.oneOf(['l', 'm', 's']),
   mode: PropTypes.oneOf(['clear', 'classic', 'rock']),
   theme: PropTypes.oneOf(['light', 'dark']),
-  onClick: PropTypes.func,
   disabled: PropTypes.bool,
-  disableCursor: PropTypes.bool,
   selected: PropTypes.bool,
-
-  /** @ignore */
-  highlighted: PropTypes.bool,
   icon: PropTypes.element,
   iconPlacement: PropTypes.oneOf(['left', 'right']),
-  tag: PropTypes.elementType
+  tag: PropTypes.elementType,
+  hoverIcon: PropTypes.element
 };
 export { MenuItem, MenuItem as default };

package/lib/parts/navigation-utils.d.ts

@@ -1,5 +1,5 @@
 export declare function getFirstItem(sortedItems: HTMLElement[]): HTMLElement;
 export declare function getLastItem(sortedItems: HTMLElement[]): HTMLElement;
-export declare function getNextItem(sortedItems: HTMLElement[], activeItem: HTMLElement): HTMLElement;
-export declare function getPrevItem(sortedItems: HTMLElement[], activeItem: HTMLElement): HTMLElement;
+export declare function getNextItem(sortedItems: HTMLElement[], activeItem?: HTMLElement): HTMLElement;
+export declare function getPrevItem(sortedItems: HTMLElement[], activeItem?: HTMLElement): HTMLElement;
 export declare function htmlElementsComparator(a: HTMLElement, b: HTMLElement): 0 | 1 | -1;

package/lib/parts/use-menu-keyboard-navigation.d.ts

@@ -1,12 +1,14 @@
+import React from 'react';
 interface UseMenuKeyboardNavigationParams {
-    enableKeyboardNavigation: boolean;
     activateFirstItem: boolean;
-    returnFocusOnUnmount: boolean;
 }
-export declare function useMenuKeyboardNavigation({ enableKeyboardNavigation, activateFirstItem, returnFocusOnUnmount }: UseMenuKeyboardNavigationParams): {
-    activeItemRef: import("react").RefObject<any>;
+export declare function useMenuKeyboardNavigation({ activateFirstItem }: UseMenuKeyboardNavigationParams): {
+    currentActiveItemEl: HTMLElement;
+    setCurrentActiveItemEl: React.Dispatch<React.SetStateAction<HTMLElement>>;
     registerItem: (ref: HTMLElement) => void;
     unregisterItem: (ref: HTMLElement) => void;
-    isKeyboardNavigating: boolean;
+    handleItemFocus: (ref: HTMLElement) => void;
+    handleItemKeyDown: (e: React.KeyboardEvent<HTMLElement>, ref?: HTMLElement) => void;
+    handleItemMouseEnter: (ref: HTMLElement) => void;
 };
 export {};