Control background color with css instead of class

README.md

@@ -75,18 +75,6 @@ ReactDOM.render(
           <th>vertical</th>
           <td>one of ["horizontal","inline","vertical-left","vertical-right"]</td>
         </tr>
-        <tr>
-            <td>activeKey</td>
-            <td>String</td>
-            <th></th>
-            <td>initial and current active menu item's key.</td>
-        </tr>
-        <tr>
-            <td>defaultActiveFirst</td>
-            <td>Boolean</td>
-            <th>false</th>
-            <td>whether active first menu item when show if activeKey is not set or invalid</td>
-        </tr>
         <tr>
             <td>multiple</td>
             <td>Boolean</td>

assets/index.less

@@ -53,11 +53,6 @@
     border-bottom: 1px solid #dedede;
   }
 
-  &-item-active,
-  &-submenu-active > &-submenu-title {
-    background-color: #eaf8fe;
-  }
-
   &-item-selected {
     background-color: #eaf8fe;
     // fix chrome render bug
@@ -80,6 +75,38 @@
     margin-top: 0;
   }
 
+  .active-effect(@background-color) {
+    &:focus,
+    &:hover {
+      background-color: @background-color;
+    }
+  }
+
+  &-submenu {
+    &-title {
+      .active-effect(#eaf8fe);
+    }
+
+    &-open {
+      background-color: #eaf8fe;
+    }
+
+    &-disabled {
+      &-open {
+        background-color: transparent;
+      }
+      .active-effect(transparent);
+    }
+  }
+
+  &-item {
+    .active-effect(#eaf8fe);
+
+    &-disabled {
+      .active-effect(transparent);
+    }
+  }
+
   &-item,
   &-submenu-title {
     margin: 0;

docs/demo/performance.md

@@ -0,0 +1,3 @@
+## performance
+
+<code src="../examples/performance.tsx">

docs/examples/performance.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import Menu from '../../src/Menu'
+import SubMenu from '../../src/SubMenu'
+import MenuItem from '../../src/MenuItem'
+import type { MenuMode } from '../../src/interface'
+
+const count = 50
+
+const Performance = () => {
+  const [mode, setMode] = React.useState<MenuMode>('vertical')
+
+  return (
+    <div>
+      <div>
+        mode: <select
+          style={{ marginRight: 20 }}
+          value={mode}
+          onChange={e => setMode(e.target.value as MenuMode)}
+        >
+          <option value="inline">inline</option>
+          <option value="vertical">vertical</option>
+          <option value="horizontal">horizontal</option>
+        </select>
+      </div>
+
+      <div style={{ width: 200 }}>
+        <Menu
+          mode={mode}
+          defaultSelectedKeys={['0', '0 - 0']}
+        >
+          {new Array(count).fill(0).map((m, i) => {
+            const title = 'item - ' + i
+
+            return (
+              <SubMenu key={i} title={title}>
+                {new Array(count).fill(0).map((n, index) => {
+                  const key = i + ' - ' + index
+                  const subTitle = title + ' - ' + index
+
+                  return (
+                    <MenuItem key={key}>{subTitle}</MenuItem>
+                  )
+                })}
+              </SubMenu>
+            )
+          })}
+        </Menu>
+      </div>
+    </div>
+  )
+}
+
+export default Performance

src/Menu.tsx

@@ -69,10 +69,6 @@ export interface MenuProps
   defaultOpenKeys?: string[];
   openKeys?: string[];
 
-  // Active control
-  activeKey?: string;
-  defaultActiveFirst?: boolean;
-
   // Selection
   selectable?: boolean;
   multiple?: boolean;
@@ -135,7 +131,6 @@ export interface MenuProps
     stateProps: {
       selected: boolean;
       open: boolean;
-      active: boolean;
       disabled: boolean;
     },
   ) => React.ReactElement;
@@ -172,10 +167,6 @@ const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
     defaultOpenKeys,
     openKeys,
 
-    // Active
-    activeKey,
-    defaultActiveFirst,
-
     // Selection
     selectable = true,
     multiple = false,
@@ -328,22 +319,6 @@ const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
     );
   }, [lastVisibleIndex, allVisible]);
 
-  // ======================== Active ========================
-  const [mergedActiveKey, setMergedActiveKey] = useMergedState(
-    activeKey || ((defaultActiveFirst && childList[0]?.key) as string),
-    {
-      value: activeKey,
-    },
-  );
-
-  const onActive = useMemoCallback((key: string) => {
-    setMergedActiveKey(key);
-  });
-
-  const onInactive = useMemoCallback(() => {
-    setMergedActiveKey(undefined);
-  });
-
   // ======================== Select ========================
   // >>>>> Select keys
   const [mergedSelectKeys, setMergedSelectKeys] = useMergedState(
@@ -441,15 +416,13 @@ const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
 
   const onInternalKeyDown = useAccessibility(
     mergedMode,
-    mergedActiveKey,
     isRtl,
     uuid,
 
     containerRef,
     getKeys,
     getKeyPath,
 
-    setMergedActiveKey,
     triggerAccessibilityOpen,
 
     onKeyDown,
@@ -557,10 +530,6 @@ const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
           // Motion
           motion={mounted ? motion : null}
           defaultMotions={mounted ? defaultMotions : null}
-          // Active
-          activeKey={mergedActiveKey}
-          onActive={onActive}
-          onInactive={onInactive}
           // Selection
           selectedKeys={mergedSelectKeys}
           // Level

src/MenuItem.tsx

@@ -11,7 +11,7 @@ import type {
   RenderIconType,
 } from './interface';
 import { MenuContext } from './context/MenuContext';
-import useActive from './hooks/useActive';
+import useMouseEvents from './hooks/useMouseEvents';
 import { warnItemProp } from './utils/warnUtil';
 import Icon from './Icon';
 import useDirectionStyle from './hooks/useDirectionStyle';
@@ -113,9 +113,6 @@ const InternalMenuItem = (props: MenuItemProps) => {
 
     // Select
     selectedKeys,
-
-    // Active
-    onActive,
   } = React.useContext(MenuContext);
 
   const { _internalRenderMenuItem } = React.useContext(PrivateContext);
@@ -150,7 +147,7 @@ const InternalMenuItem = (props: MenuItemProps) => {
   const mergedItemIcon = itemIcon || contextItemIcon;
 
   // ============================ Active ============================
-  const { active, ...activeProps } = useActive(
+  const mouseEvents = useMouseEvents(
     eventKey,
     mergedDisabled,
     onMouseEnter,
@@ -187,15 +184,6 @@ const InternalMenuItem = (props: MenuItemProps) => {
     }
   };
 
-  /**
-   * Used for accessibility. Helper will focus element without key board.
-   * We should manually trigger an active
-   */
-  const onInternalFocus: React.FocusEventHandler<HTMLLIElement> = e => {
-    onActive(eventKey);
-    onFocus?.(e);
-  };
-
   // ============================ Render ============================
   const optionRoleProps: React.HTMLAttributes<HTMLDivElement> = {};
 
@@ -211,7 +199,7 @@ const InternalMenuItem = (props: MenuItemProps) => {
       tabIndex={disabled ? null : -1}
       data-menu-id={overflowDisabled && domDataId ? null : domDataId}
       {...restProps}
-      {...activeProps}
+      {...mouseEvents}
       {...optionRoleProps}
       component="li"
       aria-disabled={disabled}
@@ -222,15 +210,13 @@ const InternalMenuItem = (props: MenuItemProps) => {
       className={classNames(
         itemCls,
         {
-          [`${itemCls}-active`]: active,
           [`${itemCls}-selected`]: selected,
           [`${itemCls}-disabled`]: mergedDisabled,
         },
         className,
       )}
       onClick={onInternalClick}
       onKeyDown={onInternalKeyDown}
-      onFocus={onInternalFocus}
     >
       {children}
       <Icon