From 29ef53f520f879b05ec60d69a58a3d30a89c8a79 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 28 Sep 2025 13:12:13 +0800
Subject: [PATCH 1/2] perf: uninstall classnames, install clsx

---
 .gitignore                        | 1 +
 package.json                      | 5 +++--
 src/OptionList.tsx                | 7 ++++---
 src/SelectTrigger.tsx             | 6 ++----
 src/Selector/MultipleSelector.tsx | 4 ++--
 src/Selector/index.tsx            | 4 ++--
 src/TransBtn.tsx                  | 6 ++----
 tests/Tags.test.tsx               | 4 ++--
 8 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/.gitignore b/.gitignore
index 90ae753cd..88a192abe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,6 +31,7 @@ coverage
 yarn.lock
 es/
 package-lock.json
+pnpm-lock.yaml
 src/*.js
 src/*.map
 tslint.json
diff --git a/package.json b/package.json
index f555ecece..6ee869df0 100644
--- a/package.json
+++ b/package.json
@@ -49,10 +49,10 @@
     "react-dom": "*"
   },
   "dependencies": {
-    "@rc-component/trigger": "^3.0.0",
     "@rc-component/motion": "^1.1.4",
+    "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.3.0",
-    "classnames": "2.x",
+    "clsx": "^2.1.1",
     "rc-overflow": "^1.4.0",
     "rc-virtual-list": "^3.5.2"
   },
@@ -62,6 +62,7 @@
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.6",
     "@types/jest": "^29.5.12",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "babel-jest": "^29.6.1",
diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index 056c714c7..d2e8b2212 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import useMemo from '@rc-component/util/lib/hooks/useMemo';
 import omit from '@rc-component/util/lib/omit';
@@ -351,7 +351,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
 
             return (
               <div
-                className={classNames(itemPrefixCls, `${itemPrefixCls}-group`, data.className)}
+                className={clsx(itemPrefixCls, `${itemPrefixCls}-group`, data.className)}
                 title={groupTitle}
               >
                 {label !== undefined ? label : key}
@@ -368,7 +368,8 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
           const mergedDisabled = disabled || (!selected && overMaxCount);
 
           const optionPrefixCls = `${itemPrefixCls}-option`;
-          const optionClassName = classNames(
+
+          const optionClassName = clsx(
             itemPrefixCls,
             optionPrefixCls,
             className,
diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx
index bcfc6dc16..f5c4a90e6 100644
--- a/src/SelectTrigger.tsx
+++ b/src/SelectTrigger.tsx
@@ -1,6 +1,6 @@
 import Trigger, { type TriggerRef } from '@rc-component/trigger';
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { Placement, RenderDOMFunc } from './BaseSelect';
 
@@ -168,9 +168,7 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
       popupAlign={popupAlign}
       popupVisible={visible}
       getPopupContainer={getPopupContainer}
-      popupClassName={classNames(popupClassName, {
-        [`${popupPrefixCls}-empty`]: empty,
-      })}
+      popupClassName={clsx(popupClassName, { [`${popupPrefixCls}-empty`]: empty })}
       popupStyle={mergedPopupStyle}
       onPopupVisibleChange={onPopupVisibleChange}
     >
diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx
index 37a4a305e..a17b3ae8c 100644
--- a/src/Selector/MultipleSelector.tsx
+++ b/src/Selector/MultipleSelector.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import Overflow from 'rc-overflow';
 import TransBtn from '../TransBtn';
@@ -107,7 +107,7 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
   ) => (
     <span
       title={getTitle(item)}
-      className={classNames(`${selectionPrefixCls}-item`, {
+      className={clsx(`${selectionPrefixCls}-item`, {
         [`${selectionPrefixCls}-item-disabled`]: itemDisabled,
       })}
     >
diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx
index 878b9672c..20543a149 100644
--- a/src/Selector/index.tsx
+++ b/src/Selector/index.tsx
@@ -17,7 +17,7 @@ import useLock from '../hooks/useLock';
 import { isValidateOpenKey } from '../utils/keyUtil';
 import MultipleSelector from './MultipleSelector';
 import SingleSelector from './SingleSelector';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface InnerSelectorProps {
   prefixCls: string;
@@ -293,7 +293,7 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
       onMouseDown={onMouseDown}
     >
       {prefix && (
-        <div className={classNames(`${prefixCls}-prefix`, prefixClassName)} style={prefixStyle}>
+        <div className={clsx(`${prefixCls}-prefix`, prefixClassName)} style={prefixStyle}>
           {prefix}
         </div>
       )}
diff --git a/src/TransBtn.tsx b/src/TransBtn.tsx
index 33d43a335..e9240c365 100644
--- a/src/TransBtn.tsx
+++ b/src/TransBtn.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { RenderNode } from './BaseSelect';
 
 export interface TransBtnProps {
@@ -34,9 +34,7 @@ const TransBtn: React.FC<TransBtnProps> = (props) => {
       {icon !== undefined ? (
         icon
       ) : (
-        <span className={classNames(className.split(/\s+/).map((cls) => `${cls}-icon`))}>
-          {children}
-        </span>
+        <span className={clsx(className.split(/\s+/).map((cls) => `${cls}-icon`))}>{children}</span>
       )}
     </span>
   );
diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx
index 6d44f5c4c..d045146e5 100644
--- a/tests/Tags.test.tsx
+++ b/tests/Tags.test.tsx
@@ -1,6 +1,6 @@
 import { createEvent, fireEvent, render } from '@testing-library/react';
 import KeyCode from '@rc-component/util/lib/KeyCode';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import Select, { BaseSelect, OptGroup, Option } from '../src';
 import allowClearTest from './shared/allowClearTest';
@@ -279,7 +279,7 @@ describe('Select.Tags', () => {
         const { label } = props;
         onTagRender(label);
         return (
-          <span className={classNames(label, 'customize-tag')}>
+          <span className={clsx(label, 'customize-tag')}>
             {label}
             {label}
           </span>

From 09a6e57d1fdee2fa75726de5b46bd465cdcdb773 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 28 Sep 2025 13:17:14 +0800
Subject: [PATCH 2/2] perf: uninstall classnames, install clsx

---
 src/BaseSelect/index.tsx | 6 +++---
 src/Selector/Input.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx
index f2c6a9c1d..286f2a078 100644
--- a/src/BaseSelect/index.tsx
+++ b/src/BaseSelect/index.tsx
@@ -1,5 +1,5 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import isMobile from '@rc-component/util/lib/isMobile';
@@ -732,7 +732,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   if (showSuffixIcon) {
     arrowNode = (
       <TransBtn
-        className={cls(`${prefixCls}-arrow`, classNames?.suffix, {
+        className={clsx(`${prefixCls}-arrow`, classNames?.suffix, {
           [`${prefixCls}-arrow-loading`]: loading,
         })}
         style={styles?.suffix}
@@ -776,7 +776,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   const optionList = <OptionList ref={listRef} />;
 
   // ============================= Select =============================
-  const mergedClassName = cls(prefixCls, className, {
+  const mergedClassName = clsx(prefixCls, className, {
     [`${prefixCls}-focused`]: mockFocused,
     [`${prefixCls}-multiple`]: multiple,
     [`${prefixCls}-single`]: !multiple,
diff --git a/src/Selector/Input.tsx b/src/Selector/Input.tsx
index 39a7bb58d..e03e22499 100644
--- a/src/Selector/Input.tsx
+++ b/src/Selector/Input.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { composeRef } from '@rc-component/util/lib/ref';
 import { warning } from '@rc-component/util/lib/warning';
 import composeProps from '@rc-component/util/lib/composeProps';
@@ -70,7 +70,7 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
     ref: composeRef(ref, originRef as any),
     autoComplete: autoComplete || 'off',
 
-    className: classNames(
+    className: clsx(
       `${prefixCls}-selection-search-input`,
       originProps.className,
       contextClassNames?.input,