perf: uninstall classnames, install clsx

Author: li-jia-nan

.gitignore

@@ -27,6 +27,7 @@ es
 coverage
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 bun.lockb
 .vscode
 

package.json

@@ -45,14 +45,13 @@
     "@rc-component/portal": "^2.0.0",
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.3.2"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.0",
     "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^16.0.0",
-    "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.2",

src/Popup/Arrow.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
 
@@ -57,7 +57,7 @@ export default function Arrow(props: ArrowProps) {
   return (
     <div
       ref={arrowRef}
-      className={classNames(`${prefixCls}-arrow`, className)}
+      className={clsx(`${prefixCls}-arrow`, className)}
       style={{ ...alignStyle, ...style }}
     >
       {content}

src/Popup/Mask.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import CSSMotion from '@rc-component/motion';
 import * as React from 'react';
@@ -36,7 +36,7 @@ export default function Mask(props: MaskProps) {
       {({ className }) => (
         <div
           style={{ zIndex }}
-          className={classNames(
+          className={clsx(
             `${prefixCls}-mask`,
             mobile && `${prefixCls}-mobile-mask`,
             className,

src/Popup/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import CSSMotion from '@rc-component/motion';
 import ResizeObserver, {
@@ -266,7 +266,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                 { className: motionClassName, style: motionStyle },
                 motionRef,
               ) => {
-                const cls = classNames(prefixCls, motionClassName, className, {
+                const cls = clsx(prefixCls, motionClassName, className, {
                   [`${prefixCls}-mobile`]: isMobile,
                 });
 

src/index.tsx

@@ -1,5 +1,5 @@
 import Portal from '@rc-component/portal';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import ResizeObserver from '@rc-component/resize-observer';
 import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
@@ -511,7 +511,7 @@ export function generateTrigger(
         alignPoint,
       );
 
-      return classNames(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
+      return clsx(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
     }, [
       alignInfo,
       getPopupClassNameFromAlign,
@@ -804,10 +804,7 @@ export function generateTrigger(
               ref={setPopupRef}
               prefixCls={prefixCls}
               popup={popup}
-              className={classNames(
-                popupClassName,
-                !isMobile && alignedClassName,
-              )}
+              className={clsx(popupClassName, !isMobile && alignedClassName)}
               style={popupStyle}
               target={targetEle}
               onMouseEnter={onPopupMouseEnter}