perf: uninstall classnames, install clsx (#624)

Author: li-jia-nan

.gitignore

@@ -26,6 +26,7 @@ lib
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 coverage
 # umi
 .umi

package.json

@@ -46,16 +46,16 @@
     "@rc-component/select": "~1.1.0",
     "@rc-component/tree": "~1.0.0",
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.3.1"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.3",
     "@rc-component/trigger": "^3.0.0",
     "@testing-library/react": "^12.1.5",
-    "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.15",
     "@types/jest": "^29.4.0",
+    "@types/node": "^24.5.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/warning": "^3.0.0",

src/OptionList/Checkbox.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CascaderContext from '../context';
 
 export interface CheckboxProps {
@@ -25,7 +25,7 @@ export default function Checkbox({
 
   return (
     <span
-      className={classNames(`${prefixCls}`, {
+      className={clsx(`${prefixCls}`, {
         [`${prefixCls}-checked`]: checked,
         [`${prefixCls}-indeterminate`]: !checked && halfChecked,
         [`${prefixCls}-disabled`]: disabled || disableCheckbox,

src/OptionList/Column.tsx

@@ -1,6 +1,6 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
-import pickAttrs from 'rc-util/lib/pickAttrs';
+import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import type { DefaultOptionType, SingleValueType } from '../Cascader';
 import CascaderContext from '../context';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
@@ -121,7 +121,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
   // ============================ Render ============================
   return (
     <ul
-      className={cls(menuPrefixCls, classNames?.popup?.list)}
+      className={clsx(menuPrefixCls, classNames?.popup?.list)}
       style={styles?.popup?.list}
       ref={menuRef}
       role="menu"
@@ -140,10 +140,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
           fullPathKey,
           disableCheckbox,
         }) => {
-          const ariaProps = pickAttrs(option, {
-            aria: true,
-            data: true
-          });
+          const ariaProps = pickAttrs(option, { aria: true, data: true });
           // >>>>> Open
           const triggerOpenPath = () => {
             if (isOptionDisabled(disabled)) {
@@ -176,7 +173,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
             <li
               key={fullPathKey}
               {...ariaProps}
-              className={cls(menuItemPrefixCls, classNames?.popup?.listItem, {
+              className={clsx(menuItemPrefixCls, classNames?.popup?.listItem, {
                 [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
                 [`${menuItemPrefixCls}-active`]:
                   activeValue === value || activeValue === fullPathKey,

src/OptionList/List.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable default-case */
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { useBaseProps } from '@rc-component/select';
 import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
 import * as React from 'react';
@@ -248,7 +248,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
   return (
     <CacheContent open={open}>
       <div
-        className={classNames(`${mergedPrefixCls}-menus`, {
+        className={clsx(`${mergedPrefixCls}-menus`, {
           [`${mergedPrefixCls}-menu-empty`]: isEmpty,
           [`${mergedPrefixCls}-rtl`]: rtl,
         })}

src/Panel.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useEvent, useControlledState } from '@rc-component/util';
 import * as React from 'react';
 import type {
@@ -184,12 +184,9 @@ export default function Panel<
   return (
     <CascaderContext.Provider value={cascaderContext}>
       <div
-        className={classNames(
+        className={clsx(
           panelPrefixCls,
-          {
-            [`${panelPrefixCls}-rtl`]: direction === 'rtl',
-            [`${panelPrefixCls}-empty`]: isEmpty,
-          },
+          { [`${panelPrefixCls}-rtl`]: direction === 'rtl', [`${panelPrefixCls}-empty`]: isEmpty },
           className,
         )}
         style={style}