fix: Tabs press Enter/Space on active tab should not trigger onChange

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

docs/examples/animated.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Tabs from '../../src';
-import type { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from '@rc-component/motion';
 import '../../assets/index.less';
 import './animated.less';
 

docs/examples/basic.tsx

@@ -38,14 +38,19 @@ export default () => {
   }
 
   const onTabClick = (key: string) => {
-    console.log('key', key);
+    console.log('onTabClick', key);
+  };
+
+  const onChange = (key: string) => {
+    console.log('onChange', key);
   };
 
   return (
     <React.StrictMode>
       <Tabs
         tabBarExtraContent="extra"
         onTabClick={onTabClick}
+        onChange={onChange}
         direction={direction}
         items={items}
       />

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-tabs",
-  "version": "15.5.1",
+  "name": "@rc-component/tabs",
+  "version": "1.3.0",
   "description": "tabs ui component for react",
   "keywords": [
     "react",
@@ -32,59 +32,59 @@
     "docs:deploy": "gh-pages -d .doc",
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "now-build": "npm run build",
-    "prepublishOnly": "npm run lint && npm run test && npm run compile && np --yolo --no-publish",
+    "prepublishOnly": "npm run lint && npm run test && npm run compile && rc-np",
     "start": "dumi dev",
-    "test": "rc-test"
+    "test": "rc-test",
+    "prepare": "husky && dumi setup"
   },
   "dependencies": {
-    "@babel/runtime": "^7.11.2",
+    "@rc-component/resize-observer": "^1.0.0",
+    "@rc-component/util": "^1.2.0",
+    "@rc-component/motion": "^1.1.3",
     "classnames": "2.x",
-    "rc-dropdown": "~4.2.0",
-    "rc-menu": "~9.16.0",
-    "rc-motion": "^2.6.2",
-    "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.34.1"
+    "@rc-component/dropdown": "~1.0.0",
+    "@rc-component/menu": "~1.0.0"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
-    "@rc-component/trigger": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "@rc-component/father-plugin": "^2.0.0",
+    "@rc-component/np": "^1.0.3",
+    "@rc-component/trigger": "^3.0.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^29.4.0",
-    "@types/keyv": "4.2.0",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.0.11",
     "@umijs/fabric": "^4.0.1",
-    "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",
     "dumi": "^2.0.0",
     "eslint": "^8.54.0",
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-unicorn": "^56.0.1",
-    "fastclick": "~1.0.6",
     "father": "^4.0.0",
     "gh-pages": "^6.1.0",
-    "history": "^5.3.0",
-    "immutability-helper": "^3.0.1",
     "less": "^4.1.3",
-    "np": "^10.0.2",
-    "preact-compat": "^3.16.0",
+    "lint-staged": "^15.5.0",
+    "prettier": "^3.5.3",
     "rc-test": "^7.0.14",
     "react": "^18.0.0",
     "react-dnd": "^10.0.0",
     "react-dnd-html5-backend": "^10.0.0",
     "react-dom": "^18.0.0",
     "react-sticky": "^6.0.3",
-    "sortablejs": "^1.7.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
+  },
   "engines": {
     "node": ">=8.x"
   }

src/TabNavList/OperationNode.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import Dropdown from 'rc-dropdown';
-import Menu, { MenuItem } from 'rc-menu';
+import Dropdown from '@rc-component/dropdown';
+import Menu, { MenuItem } from '@rc-component/menu';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
@@ -26,6 +26,7 @@ export interface OperationNodeProps {
   tabMoving?: boolean;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
   popupClassName?: string;
+  popupStyle?: React.CSSProperties;
 }
 
 const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((props, ref) => {
@@ -45,6 +46,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     onTabClick,
     getPopupContainer,
     popupClassName,
+    popupStyle,
   } = props;
   // ======================== Dropdown ========================
   const [open, setOpen] = useState(false);
@@ -182,7 +184,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     moreStyle.order = 1;
   }
 
-  const overlayClassName = classNames({
+  const overlayClassName = classNames(popupClassName, {
     [`${dropdownPrefix}-rtl`]: rtl,
   });
 
@@ -192,7 +194,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
       overlay={menu}
       visible={tabs.length ? open : false}
       onVisibleChange={setOpen}
-      overlayClassName={classNames(overlayClassName, popupClassName)}
+      overlayClassName={overlayClassName}
+      overlayStyle={popupStyle}
       mouseEnterDelay={0.1}
       mouseLeaveDelay={0.1}
       getPopupContainer={getPopupContainer}

src/TabNavList/TabNode.tsx

@@ -24,6 +24,7 @@ export interface TabNodeProps {
   onFocus: React.FocusEventHandler;
   onBlur: React.FocusEventHandler;
   style?: React.CSSProperties;
+  className?: string;
 }
 
 const TabNode: React.FC<TabNodeProps> = props => {
@@ -44,6 +45,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
     onMouseDown,
     onMouseUp,
     style,
+    className,
     tabCount,
     currentPosition,
   } = props;
@@ -81,7 +83,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
     <div
       key={key}
       data-node-key={genDataNodeKey(key)}
-      className={classNames(tabPrefix, {
+      className={classNames(tabPrefix, className, {
         [`${tabPrefix}-with-remove`]: removable,
         [`${tabPrefix}-active`]: active,
         [`${tabPrefix}-disabled`]: disabled,

src/TabNavList/Wrapper.tsx

@@ -3,25 +3,14 @@
 import * as React from 'react';
 import type { TabNavListProps } from '.';
 import TabNavList from '.';
-import TabContext from '../TabContext';
-import TabPane from '../TabPanelList/TabPane';
-
+
 export type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' | 'className'>> &
   TabNavListProps;
 
 // We have to create a TabNavList components.
 const TabNavListWrapper: React.FC<TabNavListWrapperProps> = ({ renderTabBar, ...restProps }) => {
-  const { tabs } = React.useContext(TabContext);
   if (renderTabBar) {
-    const tabNavBarProps = {
-      ...restProps,
-      // Legacy support. We do not use this actually
-      panes: tabs.map<React.ReactNode>(({ label, key, ...restTabProps }) => (
-        <TabPane tab={label} key={key} tabKey={key} {...restTabProps} />
-      )),
-    };
-
-    return renderTabBar(tabNavBarProps, TabNavList);
+    return renderTabBar(restProps, TabNavList);
   }
 
   return <TabNavList {...restProps} />;

src/TabNavList/index.tsx

@@ -30,6 +30,7 @@ import AddButton from './AddButton';
 import ExtraContent from './ExtraContent';
 import OperationNode from './OperationNode';
 import TabNode from './TabNode';
+import type { SemanticName } from '../Tabs';
 
 export interface TabNavListProps {
   id: string;
@@ -55,6 +56,8 @@ export interface TabNavListProps {
     size?: GetIndicatorSize;
     align?: 'start' | 'center' | 'end';
   };
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 const getTabSize = (tab: HTMLElement, containerRect: { left: number; top: number }) => {
@@ -109,6 +112,8 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
     onTabClick,
     onTabScroll,
     indicator,
+    classNames: tabsClassNames,
+    styles,
   } = props;
 
   const { prefixCls, tabs } = React.useContext(TabContext);
@@ -370,8 +375,9 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
       // Enter & Space
       case 'Enter':
       case 'Space': {
+        console.log('press', code);
         e.preventDefault();
-        onTabClick(focusKey, e);
+        onTabClick(activeKey, e);
         break;
       }
       // Backspace
@@ -417,8 +423,9 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
         prefixCls={prefixCls}
         key={key}
         tab={tab}
+        className={tabsClassNames?.item}
         /* first node should not have margin left */
-        style={i === 0 ? undefined : tabNodeStyle}
+        style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }}
         closable={tab.closable}
         editable={editable}
         active={key === activeKey}
@@ -567,8 +574,8 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
         ref={useComposeRef(ref, containerRef)}
         role="tablist"
         aria-orientation={tabPositionTopOrBottom ? 'horizontal' : 'vertical'}
-        className={classNames(`${prefixCls}-nav`, className)}
-        style={style}
+        className={classNames(`${prefixCls}-nav`, className, tabsClassNames?.header)}
+        style={{ ...styles?.header, ...style }}
         onKeyDown={() => {
           // No need animation when use keyboard
           doLockAnimation();
@@ -607,10 +614,10 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
                   }}
                 />
                 <div
-                  className={classNames(`${prefixCls}-ink-bar`, {
+                  className={classNames(`${prefixCls}-ink-bar`, tabsClassNames?.indicator, {
                     [`${prefixCls}-ink-bar-animated`]: animated.inkBar,
                   })}
-                  style={indicatorStyle}
+                  style={{ ...indicatorStyle, ...styles?.indicator }}
                 />
               </div>
             </ResizeObserver>
@@ -624,6 +631,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
           prefixCls={prefixCls}
           tabs={hiddenTabs}
           className={!hasDropdown && operationsHiddenClassName}
+          popupStyle={styles?.popup}
           tabMoving={!!lockAnimation}
         />
 

src/TabPanelList/TabPane.tsx

@@ -23,11 +23,13 @@ export interface TabPaneProps {
 
 const TabPane = React.forwardRef<HTMLDivElement, TabPaneProps>((props, ref) => {
   const { prefixCls, className, style, id, active, tabKey, children } = props;
+  const hasContent = React.Children.count(children) > 0;
+
   return (
     <div
       id={id && `${id}-panel-${tabKey}`}
       role="tabpanel"
-      tabIndex={active ? 0 : -1}
+      tabIndex={active && hasContent ? 0 : -1}
       aria-labelledby={id && `${id}-tab-${tabKey}`}
       aria-hidden={!active}
       style={style}