feat: add overflow trigger props

src/TabNavList/OperationNode.tsx

@@ -4,7 +4,7 @@ import Menu, { MenuItem } from 'rc-menu';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import type { EditableConfig, Tab, TabsLocale } from '../interface';
+import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';
 import { getRemovable } from '../util';
 import AddButton from './AddButton';
 
@@ -18,8 +18,7 @@ export interface OperationNodeProps {
   tabBarGutter?: number;
   activeKey: string;
   mobile: boolean;
-  moreIcon?: React.ReactNode;
-  moreTransitionName?: string;
+  more?: MoreProps;
   editable?: EditableConfig;
   locale?: TabsLocale;
   removeAriaLabel?: string;
@@ -36,8 +35,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     tabs,
     locale,
     mobile,
-    moreIcon = 'More',
-    moreTransitionName,
+    more: moreProps = {},
     style,
     className,
     editable,
@@ -52,6 +50,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
   const [open, setOpen] = useState(false);
   const [selectedKey, setSelectedKey] = useState<string>(null);
 
+  const { icon: moreIcon = 'More' } = moreProps;
+
   const popupId = `${id}-more-popup`;
   const dropdownPrefix = `${prefixCls}-dropdown`;
   const selectedItemId = selectedKey !== null ? `${popupId}-${selectedKey}` : null;
@@ -190,14 +190,13 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     <Dropdown
       prefixCls={dropdownPrefix}
       overlay={menu}
-      trigger={['hover']}
       visible={tabs.length ? open : false}
-      transitionName={moreTransitionName}
       onVisibleChange={setOpen}
       overlayClassName={classNames(overlayClassName, popupClassName)}
       mouseEnterDelay={0.1}
       mouseLeaveDelay={0.1}
       getPopupContainer={getPopupContainer}
+      {...moreProps}
     >
       <button
         type="button"

src/TabNavList/index.tsx

@@ -16,6 +16,7 @@ import useVisibleRange from '../hooks/useVisibleRange';
 import type {
   AnimatedConfig,
   EditableConfig,
+  MoreProps,
   OnTabScroll,
   RenderTabBar,
   SizeInfo,
@@ -38,8 +39,7 @@ export interface TabNavListProps {
   animated?: AnimatedConfig;
   extra?: TabBarExtraContent;
   editable?: EditableConfig;
-  moreIcon?: React.ReactNode;
-  moreTransitionName?: string;
+  more?: MoreProps;
   mobile: boolean;
   tabBarGutter?: number;
   renderTabBar?: RenderTabBar;

src/Tabs.tsx

@@ -12,6 +12,7 @@ import type { GetIndicatorSize } from './hooks/useIndicator';
 import type {
   AnimatedConfig,
   EditableConfig,
+  MoreProps,
   OnTabScroll,
   RenderTabBar,
   Tab,
@@ -64,9 +65,8 @@ export interface TabsProps
   locale?: TabsLocale;
 
   // Icons
-  moreIcon?: React.ReactNode;
+  more?: MoreProps;
   /** @private Internal usage. Not promise will rename in future */
-  moreTransitionName?: string;
   popupClassName?: string;
   indicator?: {
     size?: GetIndicatorSize;
@@ -90,8 +90,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     tabBarStyle,
     tabBarExtraContent,
     locale,
-    moreIcon,
-    moreTransitionName,
+    more,
     destroyInactiveTabPane,
     renderTabBar,
     onChange,
@@ -173,8 +172,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     ...sharedProps,
     editable,
     locale,
-    moreIcon,
-    moreTransitionName,
+    more,
     tabBarGutter,
     onTabClick: onInternalTabClick,
     onTabScroll,

src/interface.ts

@@ -2,6 +2,15 @@ import type { CSSMotionProps } from 'rc-motion';
 import type React from 'react';
 import type { TabNavListProps } from './TabNavList';
 import type { TabPaneProps } from './TabPanelList/TabPane';
+import { DropdownProps } from 'rc-dropdown/lib/Dropdown';
+
+export type TriggerProps = {
+  trigger?: 'hover' | 'click';
+}
+export type moreIcon = React.ReactNode;
+export type MoreProps = {
+  icon?: moreIcon,
+} & Omit<DropdownProps, 'children'>;
 
 export type SizeInfo = [width: number, height: number];
 
@@ -36,8 +45,7 @@ type RenderTabBarProps = {
   mobile: boolean;
   editable: EditableConfig;
   locale: TabsLocale;
-  moreIcon: React.ReactNode;
-  moreTransitionName: string;
+  more: MoreProps,
   tabBarGutter: number;
   onTabClick: (key: string, e: React.MouseEvent | React.KeyboardEvent) => void;
   onTabScroll: OnTabScroll;

tests/overflow.test.tsx

@@ -92,6 +92,24 @@ describe('Tabs.Overflow', () => {
     jest.useRealTimers();
   });
 
+  it('should open dropdown on click when moreTrigger is set to click', () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const { container, unmount } = render(getTabs({ onChange, more: {icon: '...', trigger: 'click'} }));
+    triggerResize(container);
+    act(() => {
+      jest.runAllTimers();
+    });
+    const button = container.querySelector('.rc-tabs-nav-more')
+    fireEvent.click(button);
+    act(() => {
+      jest.runAllTimers();
+    });
+    const dropdownOpen = container.querySelector('.rc-tabs-dropdown-open');
+    expect(dropdownOpen).not.toBeNull();
+    unmount();
+  });
+
   [KeyCode.SPACE, KeyCode.ENTER].forEach(code => {
     it(`keyboard with select keycode: ${code}`, () => {
       jest.useFakeTimers();