perf: uninstall classnames, install clsx (#11)

Author: li-jia-nan

.gitignore

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

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@rc-component/trigger",
-  "version": "3.5.2",
-  "description": "base abstract trigger component for react",
+  "name": "@rc-component/listy",
+  "version": "1.0.0",
+  "description": "base abstract listy component for react",
   "engines": {
     "node": ">=8.x"
   },
@@ -44,15 +44,14 @@
     "@rc-component/motion": "^1.1.4",
     "@rc-component/portal": "^2.0.0",
     "@rc-component/resize-observer": "^1.0.0",
-    "@rc-component/util": "^1.2.1",
-    "classnames": "^2.3.2"
+    "@rc-component/util": "^1.3.0",
+    "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": "^30.0.0",
     "@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}
     >
       {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 from '@rc-component/resize-observer';
@@ -270,7 +270,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';
@@ -198,6 +198,7 @@ export function generateTrigger(
     const subPopupElements = React.useRef<Record<string, HTMLElement>>({});
 
     const parentContext = React.useContext(TriggerContext);
+
     const context = React.useMemo<TriggerContextProps>(() => {
       return {
         registerSubPopup: (id, subPopupEle) => {
@@ -427,7 +428,7 @@ export function generateTrigger(
         alignPoint,
       );
 
-      return classNames(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
+      return clsx(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
     }, [
       alignInfo,
       getPopupClassNameFromAlign,
@@ -727,10 +728,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}