perf: uninstall classnames, install clsx (#794)

* perf: uninstall classnames, install clsx

* perf: uninstall classnames, install clsx

Author: li-jia-nan

package.json

@@ -47,7 +47,7 @@
     "@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.3.1"
   },
   "devDependencies": {

src/Divider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { MenuContext } from './context/MenuContext';
 import { useMeasure } from './context/PathContext';
 import type { MenuDividerType } from './interface';
@@ -15,10 +15,6 @@ export default function Divider({ className, style }: DividerProps) {
   }
 
   return (
-    <li
-      role="separator"
-      className={classNames(`${prefixCls}-item-divider`, className)}
-      style={style}
-    />
+    <li role="separator" className={clsx(`${prefixCls}-item-divider`, className)} style={style} />
   );
 }

src/Menu.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import Overflow from 'rc-overflow';
 import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
@@ -563,7 +563,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
       prefixCls={`${prefixCls}-overflow`}
       component="ul"
       itemComponent={MenuItem}
-      className={classNames(
+      className={clsx(
         prefixCls,
         `${prefixCls}-root`,
         `${prefixCls}-${internalMode}`,

src/MenuItem.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Overflow from 'rc-overflow';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import omit from '@rc-component/util/lib/omit';
@@ -214,7 +214,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
         ...directionStyle,
         ...style,
       }}
-      className={classNames(
+      className={clsx(
         itemCls,
         {
           [`${itemCls}-active`]: active,

src/MenuItemGroup.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import omit from '@rc-component/util/lib/omit';
 import * as React from 'react';
 import { MenuContext } from './context/MenuContext';
@@ -30,19 +30,19 @@ const InternalMenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps
       role="presentation"
       {...restProps}
       onClick={e => e.stopPropagation()}
-      className={classNames(groupPrefixCls, className)}
+      className={clsx(groupPrefixCls, className)}
     >
       <div
         role="presentation"
-        className={classNames(`${groupPrefixCls}-title`, menuClassNames?.listTitle)}
+        className={clsx(`${groupPrefixCls}-title`, menuClassNames?.listTitle)}
         style={styles?.listTitle}
         title={typeof title === 'string' ? title : undefined}
       >
         {title}
       </div>
       <ul
         role="group"
-        className={classNames(`${groupPrefixCls}-list`, menuClassNames?.list)}
+        className={clsx(`${groupPrefixCls}-list`, menuClassNames?.list)}
         style={styles?.list}
       >
         {children}

src/SubMenu/PopupTrigger.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Trigger from '@rc-component/trigger';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import raf from '@rc-component/util/lib/raf';
 import type { CSSMotionProps } from '@rc-component/motion';
 import { MenuContext } from '../context/MenuContext';
@@ -96,11 +96,9 @@ export default function PopupTrigger({
   return (
     <Trigger
       prefixCls={prefixCls}
-      popupClassName={classNames(
+      popupClassName={clsx(
         `${prefixCls}-popup`,
-        {
-          [`${prefixCls}-rtl`]: rtl,
-        },
+        { [`${prefixCls}-rtl`]: rtl },
         popupClassName,
         rootClassName,
       )}

src/SubMenu/SubMenuList.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { MenuContext } from '../context/MenuContext';
 
-export interface SubMenuListProps
-  extends React.HTMLAttributes<HTMLUListElement> {
+export interface SubMenuListProps extends React.HTMLAttributes<HTMLUListElement> {
   children?: React.ReactNode;
 }
 
@@ -15,7 +14,7 @@ const InternalSubMenuList = (
 
   return (
     <ul
-      className={classNames(
+      className={clsx(
         prefixCls,
         rtl && `${prefixCls}-rtl`,
         `${prefixCls}-sub`,
@@ -33,6 +32,9 @@ const InternalSubMenuList = (
 };
 
 const SubMenuList = React.forwardRef(InternalSubMenuList);
-SubMenuList.displayName = 'SubMenuList';
+
+if (process.env.NODE_ENV !== 'production') {
+  SubMenuList.displayName = 'SubMenuList';
+}
 
 export default SubMenuList;

src/SubMenu/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Overflow from 'rc-overflow';
 import warning from '@rc-component/util/lib/warning';
 import SubMenuList from './SubMenuList';
@@ -339,7 +339,7 @@ const InternalSubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, re
       {...restProps}
       component="li"
       style={style}
-      className={classNames(subMenuPrefixCls, `${subMenuPrefixCls}-${mode}`, className, {
+      className={clsx(subMenuPrefixCls, `${subMenuPrefixCls}-${mode}`, className, {
         [`${subMenuPrefixCls}-open`]: open,
         [`${subMenuPrefixCls}-active`]: mergedActive,
         [`${subMenuPrefixCls}-selected`]: childrenSelected,

tests/Private.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 import { render } from '@testing-library/react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import Menu, { MenuItem, SubMenu } from '../src';
 
@@ -9,9 +9,7 @@ describe('Private Props', () => {
     const { container } = render(
       <Menu
         _internalRenderMenuItem={node =>
-          React.cloneElement(node, {
-            className: classnames(node.props.className, 'inject-cls'),
-          })
+          React.cloneElement(node, { className: clsx(node.props.className, 'inject-cls') })
         }
       >
         <MenuItem key="1">1</MenuItem>
@@ -27,9 +25,7 @@ describe('Private Props', () => {
         mode="inline"
         openKeys={['1']}
         _internalRenderSubMenuItem={node =>
-          React.cloneElement(node, {
-            className: classnames(node.props.className, 'inject-cls'),
-          })
+          React.cloneElement(node, { className: clsx(node.props.className, 'inject-cls') })
         }
       >
         <SubMenu key="1" title="1">