feat: add popupRender for more popup customization

- Add PopupRender type with tabs, activeKey, and onClose
- Implement popupRender in OperationNode
- Add demo example for search in overflow menu
- Remove old showSearch implementation and tests

Co-Authored-By: Claude <noreply@anthropic.com>

Author: 刘欢

docs/demo/search-dropdown.md

@@ -0,0 +1,8 @@
+---
+title: Search Overflow
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/search-overflow.tsx"></code>

docs/demo/search-overflow.md

@@ -0,0 +1,71 @@
+import React, { useState, useMemo } from 'react';
+import Tabs from '../../src';
+import type { TabsProps, PopupRender } from '../../src';
+import Menu, { MenuItem as MenuItemNode } from '@rc-component/menu';
+
+const items: TabsProps['items'] = [];
+
+for (let i = 0; i < 15; i += 1) {
+  items.push({ key: String(i), label: `Tab ${i + 1}`, children: `Content of ${i}` });
+}
+
+export default () => {
+  const [activeKey, setActiveKey] = useState('0');
+  const [searchValue, setSearchValue] = useState('');
+
+  const popupRender: PopupRender = (menu, { tabs, onClose }) => {
+    const filteredTabs = useMemo(() => {
+      if (!searchValue) return tabs;
+      return tabs.filter(tab =>
+        String(tab.label).toLowerCase().includes(searchValue.toLowerCase()),
+      );
+    }, [tabs, searchValue]);
+
+    return (
+      <div style={{ padding: '8px' }}>
+        <input
+          placeholder="搜索 Tab..."
+          value={searchValue}
+          onChange={e => setSearchValue(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '4px 8px',
+            marginBottom: '8px',
+            border: '1px solid #d9d9d9',
+            borderRadius: '4px',
+            outline: 'none',
+            boxSizing: 'border-box',
+          }}
+          onClick={e => e.stopPropagation()}
+        />
+        <Menu
+          activeKey={activeKey}
+          onClick={({ key }) => {
+            setActiveKey(key);
+            onClose();
+          }}
+        >
+          {filteredTabs.map(tab => (
+            <MenuItemNode key={tab.key} disabled={tab.disabled}>
+              {tab.label}
+            </MenuItemNode>
+          ))}
+        </Menu>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ maxWidth: 550 }}>
+      <Tabs
+        activeKey={activeKey}
+        onChange={setActiveKey}
+        items={items}
+        more={{
+          trigger: 'click',
+          popupRender,
+        }}
+      />
+    </div>
+  );
+};

docs/examples/search-dropdown.tsx

@@ -3,7 +3,7 @@ import Dropdown from '@rc-component/dropdown';
 import Menu, { MenuItem } from '@rc-component/menu';
 import { KeyCode } from '@rc-component/util';
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';
 import { getRemovable } from '../util';
 import AddButton from './AddButton';
@@ -39,7 +39,6 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     tabs,
     locale,
     mobile,
-    activeKey,
     more: moreProps = {},
     style,
     className,
@@ -57,36 +56,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
   // ======================== Dropdown ========================
   const [open, setOpen] = useState(false);
   const [selectedKey, setSelectedKey] = useState<string>(null);
-  const [searchValue, setSearchValue] = useState('');
-  const searchInputRef = useRef<HTMLInputElement>(null);
 
-  const { icon: moreIcon = 'More', showSearch } = moreProps;
-
-  const isSearchable = !!showSearch;
-  const showSearchConfig = typeof showSearch === 'object' ? showSearch : {};
-  const {
-    placeholder = 'Search',
-    onSearch,
-    searchValue: controlledSearchValue,
-    autoClearSearchValue = true,
-    filter: filterOption,
-  } = showSearchConfig;
-
-  const mergedSearchValue =
-    controlledSearchValue !== undefined ? controlledSearchValue : searchValue;
-  const setSearchValueFn = controlledSearchValue !== undefined ? () => {} : setSearchValue;
-
-  const filteredTabs = mergedSearchValue
-    ? tabs.filter(tab => {
-        if (filterOption) {
-          return filterOption(tab, mergedSearchValue);
-        }
-        if (typeof tab.label === 'string') {
-          return tab.label.toLowerCase().includes(mergedSearchValue.toLowerCase());
-        }
-        return false;
-      })
-    : tabs;
+  const { icon: moreIcon = 'More' } = moreProps;
 
   const popupId = `${id}-more-popup`;
   const dropdownPrefix = `${prefixCls}-dropdown`;
@@ -114,7 +85,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
       selectedKeys={[selectedKey]}
       aria-label={dropdownAriaLabel !== undefined ? dropdownAriaLabel : 'expanded dropdown'}
     >
-      {filteredTabs.map<React.ReactNode>(tab => {
+      {tabs.map<React.ReactNode>(tab => {
         const { closable, disabled, closeIcon, key, label } = tab;
         const removable = getRemovable(closable, closeIcon, editable, disabled);
         return (
@@ -148,13 +119,22 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     </Menu>
   );
 
+  // Handle popupRender to allow custom popup content
+  const { popupRender } = moreProps;
+  const handleClose = () => setOpen(false);
+  const overlay = popupRender
+    ? popupRender(menu, {
+        tabs,
+        activeKey: props.activeKey,
+        onClose: handleClose,
+      })
+    : menu;
+
   function selectOffset(offset: -1 | 1) {
-    const enabledTabs = filteredTabs.filter(tab => !tab.disabled);
+    const enabledTabs = tabs.filter(tab => !tab.disabled);
     let selectedIndex = enabledTabs.findIndex(tab => tab.key === selectedKey) || 0;
     const len = enabledTabs.length;
 
-    if (len === 0) return;
-
     for (let i = 0; i < len; i += 1) {
       selectedIndex = (selectedIndex + offset + len) % len;
       const tab = enabledTabs[selectedIndex];
@@ -165,9 +145,17 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     }
   }
 
-  function onKeyboardNavigation(e: React.KeyboardEvent) {
+  function onKeyDown(e: React.KeyboardEvent) {
     const { which } = e;
 
+    if (!open) {
+      if ([KeyCode.DOWN, KeyCode.SPACE, KeyCode.ENTER].includes(which)) {
+        setOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+
     switch (which) {
       case KeyCode.UP:
         selectOffset(-1);
@@ -182,72 +170,27 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
         break;
       case KeyCode.SPACE:
       case KeyCode.ENTER:
-        if (selectedKey && filteredTabs.some(t => t.key === selectedKey)) {
+        if (selectedKey !== null) {
           onTabClick(selectedKey, e);
         }
         break;
     }
   }
 
-  function onKeyDown(e: React.KeyboardEvent) {
-    const { which } = e;
-
-    if (!open) {
-      if ([KeyCode.DOWN, KeyCode.SPACE, KeyCode.ENTER].includes(which)) {
-        setOpen(true);
-        e.preventDefault();
-      }
-      return;
-    }
-
-    onKeyboardNavigation(e);
-  }
-
-  // 搜索框
-  const searchInput = isSearchable ? (
-    <div className={`${dropdownPrefix}-search`}>
-      <input
-        ref={searchInputRef}
-        type="text"
-        placeholder={placeholder}
-        value={mergedSearchValue}
-        onChange={e => {
-          const value = e.target.value;
-          setSearchValueFn(value);
-          onSearch?.(value);
-        }}
-        onKeyDown={onKeyboardNavigation}
-      />
-    </div>
-  ) : null;
-
   // ========================= Effect =========================
   useEffect(() => {
     // We use query element here to avoid React strict warning
     const ele = document.getElementById(selectedItemId);
     if (ele?.scrollIntoView) {
-      ele.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      ele.scrollIntoView(false);
     }
   }, [selectedItemId, selectedKey]);
 
   useEffect(() => {
-    if (open) {
-      if (!selectedKey && activeKey) {
-        setSelectedKey(activeKey);
-      }
-
-      if (isSearchable) {
-        requestAnimationFrame(() => {
-          searchInputRef.current?.focus();
-        });
-      }
-    } else {
+    if (!open) {
       setSelectedKey(null);
-      if (autoClearSearchValue && controlledSearchValue === undefined) {
-        setSearchValue('');
-      }
     }
-  }, [open, activeKey, isSearchable, autoClearSearchValue, controlledSearchValue]);
+  }, [open]);
 
   // ========================= Render =========================
   const moreStyle: React.CSSProperties = {
@@ -261,29 +204,18 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
 
   const overlayClassName = clsx(popupClassName, { [`${dropdownPrefix}-rtl`]: rtl });
 
-  const dropdownContent = isSearchable ? (
-    <div className={`${dropdownPrefix}-container`}>
-      {searchInput}
-      {menu}
-    </div>
-  ) : (
-    menu
-  );
-
-  const { showSearch: _s, ...dropdownProps } = moreProps;
-
   const moreNode: React.ReactNode = mobile ? null : (
     <Dropdown
       prefixCls={dropdownPrefix}
-      overlay={dropdownContent}
+      overlay={overlay}
       visible={tabs.length ? open : false}
       onVisibleChange={setOpen}
       overlayClassName={overlayClassName}
       overlayStyle={popupStyle}
       mouseEnterDelay={0.1}
       mouseLeaveDelay={0.1}
       getPopupContainer={getPopupContainer}
-      {...dropdownProps}
+      {...moreProps}
     >
       <button
         type="button"