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

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

Author: 刘欢

docs/demo/search-overflow.md

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

docs/examples/search-overflow.tsx

@@ -0,0 +1,76 @@
+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('');
+
+  // popupRender 回调：使用 info.tabs 重新渲染菜单
+  const popupRender: PopupRender = (menu, { tabs, activeKey: selectedKey, onClose }) => {
+    // 过滤 tabs
+    const filteredTabs = useMemo(() => {
+      if (!searchValue) return tabs;
+      return tabs.filter(tab =>
+        String(tab.label).toLowerCase().includes(searchValue.toLowerCase()),
+      );
+    }, [tabs, searchValue]);
+
+    // 检查当前 activeKey 是否在过滤后的列表中
+    const isActiveKeyInFiltered = filteredTabs.some(t => t.key === selectedKey);
+    const selectedKeys = isActiveKeyInFiltered ? [selectedKey] : [];
+
+    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
+          selectedKeys={selectedKeys}
+          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={{
+          popupRender,
+        }}
+      />
+    </div>
+  );
+};

src/TabNavList/OperationNode.tsx

@@ -119,6 +119,17 @@ 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 = tabs.filter(tab => !tab.disabled);
     let selectedIndex = enabledTabs.findIndex(tab => tab.key === selectedKey) || 0;
@@ -196,7 +207,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
   const moreNode: React.ReactNode = mobile ? null : (
     <Dropdown
       prefixCls={dropdownPrefix}
-      overlay={menu}
+      overlay={overlay}
       visible={tabs.length ? open : false}
       onVisibleChange={setOpen}
       overlayClassName={overlayClassName}

src/index.ts

@@ -5,6 +5,7 @@ export type {
   AnimatedConfig,
   EditableConfig,
   MoreProps,
+  PopupRender,
   Tab,
   TabBarExtraContent,
 } from './interface';

src/interface.ts

@@ -8,8 +8,24 @@ export type TriggerProps = {
   trigger?: 'hover' | 'click';
 };
 export type moreIcon = React.ReactNode;
+
+export type Tab = Omit<TabPaneProps, 'tab'> & {
+  key: string;
+  label: React.ReactNode;
+};
+
+export type PopupRender = (
+  menu: React.ReactElement,
+  info: {
+    tabs: Tab[];
+    activeKey?: string;
+    onClose: () => void;
+  },
+) => React.ReactElement;
+
 export type MoreProps = {
   icon?: moreIcon;
+  popupRender?: PopupRender;
 } & Omit<DropdownProps, 'children'>;
 
 export type SizeInfo = [width: number, height: number];
@@ -31,11 +47,6 @@ export type TabOffsetMap = Map<React.Key, TabOffset>;
 
 export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 
-export interface Tab extends Omit<TabPaneProps, 'tab'> {
-  key: string;
-  label: React.ReactNode;
-}
-
 type RenderTabBarProps = {
   id: string;
   activeKey: string;