perf: uninstall classnames, install clsx (#1164)

* perf: uninstall classnames, install clsx

* perf: uninstall classnames, install clsx

Author: li-jia-nan

.gitignore

@@ -31,6 +31,7 @@ coverage
 yarn.lock
 es/
 package-lock.json
+pnpm-lock.yaml
 src/*.js
 src/*.map
 tslint.json

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",

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,

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,

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}
     >

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,

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,
       })}
     >

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>
       )}

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>
   );

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>