Replace classnames (#3910)

package.json

@@ -65,7 +65,7 @@
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "classnames": "^2.2.5",
+    "clsx": "^2.0.0",
     "eventemitter3": "^4.0.1",
     "lodash": "^4.17.19",
     "react-is": "^16.10.2",
@@ -99,7 +99,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.3.0",
-    "@types/classnames": "^2.2.9",
     "@types/d3-interpolate": "^3.0.1",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",

src/cartesian/Area.tsx

@@ -2,7 +2,7 @@
  * @fileOverview Area
  */
 import React, { PureComponent, ReactElement, SVGProps } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Animate from 'react-smooth';
 import _ from 'lodash';
 import { Curve, CurveType, Point as CurvePoint } from '../shape/Curve';
@@ -545,7 +545,7 @@ export class Area extends PureComponent<Props, State> {
 
     const { isAnimationFinished } = this.state;
     const hasSinglePoint = points.length === 1;
-    const layerClass = classNames('recharts-area', className);
+    const layerClass = clsx('recharts-area', className);
     const needClipX = xAxis && xAxis.allowDataOverflow;
     const needClipY = yAxis && yAxis.allowDataOverflow;
     const needClip = needClipX || needClipY;

src/cartesian/Bar.tsx

@@ -2,7 +2,7 @@
  * @fileOverview Render a group of bar
  */
 import React, { Key, PureComponent, ReactElement } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Animate from 'react-smooth';
 import _ from 'lodash';
 import { Props as RectangleProps } from '../shape/Rectangle';
@@ -471,7 +471,7 @@ export class Bar extends PureComponent<Props, State> {
     }
 
     const { isAnimationFinished } = this.state;
-    const layerClass = classNames('recharts-bar', className);
+    const layerClass = clsx('recharts-bar', className);
     const needClipX = xAxis && xAxis.allowDataOverflow;
     const needClipY = yAxis && yAxis.allowDataOverflow;
     const needClip = needClipX || needClipY;

src/cartesian/Brush.tsx

@@ -2,7 +2,7 @@
  * @fileOverview Brush
  */
 import React, { PureComponent, Children, ReactText, ReactElement, TouchEvent, SVGProps } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { scalePoint, ScalePoint } from 'victory-vendor/d3-scale';
 import _ from 'lodash';
 import { Layer } from '../container/Layer';
@@ -600,7 +600,7 @@ export class Brush extends PureComponent<Props, State> {
       return null;
     }
 
-    const layerClass = classNames('recharts-brush', className);
+    const layerClass = clsx('recharts-brush', className);
     const isPanoramic = React.Children.count(children) === 1;
     const style = generatePrefixStyle('userSelect', 'none');
 

src/cartesian/CartesianAxis.tsx

@@ -3,7 +3,7 @@
  */
 import React, { ReactElement, ReactNode, Component, SVGProps } from 'react';
 import _ from 'lodash';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { shallowEqual } from '../util/ShallowEqual';
 import { Layer } from '../container/Layer';
 import { Text } from '../component/Text';
@@ -232,7 +232,7 @@ export class CartesianAxis extends Component<Props, IState> {
       };
     }
 
-    return <line {...props} className={classNames('recharts-cartesian-axis-line', _.get(axisLine, 'className'))} />;
+    return <line {...props} className={clsx('recharts-cartesian-axis-line', _.get(axisLine, 'className'))} />;
   }
 
   static renderTickItem(option: Props['tick'], props: any, value: ReactNode) {
@@ -298,7 +298,7 @@ export class CartesianAxis extends Component<Props, IState> {
             <line
               {...tickLineProps}
               {...lineCoord}
-              className={classNames('recharts-cartesian-axis-tick-line', _.get(tickLine, 'className'))}
+              className={clsx('recharts-cartesian-axis-tick-line', _.get(tickLine, 'className'))}
             />
           )}
           {tick &&
@@ -334,7 +334,7 @@ export class CartesianAxis extends Component<Props, IState> {
 
     return (
       <Layer
-        className={classNames('recharts-cartesian-axis', className)}
+        className={clsx('recharts-cartesian-axis', className)}
         ref={ref => {
           this.layerReference = ref;
         }}

src/cartesian/Line.tsx

@@ -3,7 +3,7 @@
  */
 import React, { PureComponent, ReactElement } from 'react';
 import Animate from 'react-smooth';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import _ from 'lodash';
 import { Curve, CurveType, Props as CurveProps, Point as CurvePoint } from '../shape/Curve';
 import { Dot, Props as DotProps } from '../shape/Dot';
@@ -320,7 +320,7 @@ export class Line extends PureComponent<Props, State> {
     } else if (_.isFunction(option)) {
       dotItem = option(props);
     } else {
-      const className = classNames('recharts-line-dot', option ? (option as DotProps).className : '');
+      const className = clsx('recharts-line-dot', option ? (option as DotProps).className : '');
       dotItem = <Dot {...props} className={className} />;
     }
 
@@ -479,7 +479,7 @@ export class Line extends PureComponent<Props, State> {
 
     const { isAnimationFinished } = this.state;
     const hasSinglePoint = points.length === 1;
-    const layerClass = classNames('recharts-line', className);
+    const layerClass = clsx('recharts-line', className);
     const needClipX = xAxis && xAxis.allowDataOverflow;
     const needClipY = yAxis && yAxis.allowDataOverflow;
     const needClip = needClipX || needClipY;

src/cartesian/ReferenceArea.tsx

@@ -3,7 +3,7 @@
  */
 import React, { ReactElement } from 'react';
 import _ from 'lodash';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Layer } from '../container/Layer';
 import { ImplicitLabelType, Label } from '../component/Label';
 import { createLabeledScales, rectWithPoints } from '../util/CartesianUtils';
@@ -92,7 +92,7 @@ export function ReferenceArea(props: Props) {
   const clipPath = ifOverflowMatches(props, 'hidden') ? `url(#${clipPathId})` : undefined;
 
   return (
-    <Layer className={classNames('recharts-reference-area', className)}>
+    <Layer className={clsx('recharts-reference-area', className)}>
       {ReferenceArea.renderRect(shape, { clipPath, ...filterProps(props, true), ...rect })}
       {Label.renderCallByParent(props, rect)}
     </Layer>

src/cartesian/ReferenceDot.tsx

@@ -3,7 +3,7 @@
  */
 import React, { ReactElement } from 'react';
 import _ from 'lodash';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Layer } from '../container/Layer';
 import { Dot, Props as DotProps } from '../shape/Dot';
 import { ImplicitLabelType, Label } from '../component/Label';
@@ -85,7 +85,7 @@ export function ReferenceDot(props: Props) {
   };
 
   return (
-    <Layer className={classNames('recharts-reference-dot', className)}>
+    <Layer className={clsx('recharts-reference-dot', className)}>
       {ReferenceDot.renderDot(shape, dotProps)}
       {Label.renderCallByParent(props, {
         x: cx - r,

src/cartesian/ReferenceLine.tsx

@@ -3,7 +3,7 @@
  */
 import React, { ReactElement, SVGProps } from 'react';
 import _ from 'lodash';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Layer } from '../container/Layer';
 import { ImplicitLabelType, Label } from '../component/Label';
 import { IfOverflow, ifOverflowMatches } from '../util/IfOverflowMatches';
@@ -147,7 +147,7 @@ export function ReferenceLine(props: Props) {
   };
 
   return (
-    <Layer className={classNames('recharts-reference-line', className)}>
+    <Layer className={clsx('recharts-reference-line', className)}>
       {renderLine(shape, lineProps)}
       {Label.renderCallByParent(props, rectWithCoords({ x1, y1, x2, y2 }))}
     </Layer>

src/cartesian/Scatter.tsx

@@ -3,7 +3,7 @@
  */
 import React, { PureComponent, ReactElement } from 'react';
 import Animate from 'react-smooth';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import _ from 'lodash';
 import { Layer } from '../container/Layer';
 import { ImplicitLabelListType, LabelList } from '../component/LabelList';
@@ -418,7 +418,7 @@ export class Scatter extends PureComponent<Props, State> {
       return null;
     }
     const { isAnimationFinished } = this.state;
-    const layerClass = classNames('recharts-scatter', className);
+    const layerClass = clsx('recharts-scatter', className);
     const needClipX = xAxis && xAxis.allowDataOverflow;
     const needClipY = yAxis && yAxis.allowDataOverflow;
     const needClip = needClipX || needClipY;

src/chart/Sankey.tsx

@@ -2,7 +2,7 @@
  * @file TreemapChart
  */
 import React, { PureComponent, ReactElement, SVGProps } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import _ from 'lodash';
 import { Surface } from '../container/Surface';
 import { Layer } from '../container/Layer';
@@ -702,7 +702,7 @@ export class Sankey extends PureComponent<Props, State> {
 
     return (
       <div
-        className={classNames('recharts-wrapper', className)}
+        className={clsx('recharts-wrapper', className)}
         style={{ ...style, position: 'relative', cursor: 'default', width, height }}
         role="region"
       >

src/chart/Treemap.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import _ from 'lodash';
 /**
  * @fileOverview TreemapChart
@@ -731,7 +731,7 @@ export class Treemap extends PureComponent<Props, State> {
 
     return (
       <div
-        className={classNames('recharts-wrapper', className)}
+        className={clsx('recharts-wrapper', className)}
         style={{ ...style, position: 'relative', cursor: 'default', width, height }}
         role="region"
       >

src/chart/generateCategoricalChart.tsx

@@ -1,5 +1,5 @@
 import React, { cloneElement, Component, createElement, isValidElement, ReactElement } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { DebouncedFunc } from 'lodash';
 import _ from 'lodash';
 import invariant from 'tiny-invariant';
@@ -1832,7 +1832,7 @@ export const generateCategoricalChart = ({
       return (
         <CartesianAxis
           {...(axisOptions as any)}
-          className={classNames(`recharts-${axisOptions.axisType} ${axisOptions.axisType}`, axisOptions.className)}
+          className={clsx(`recharts-${axisOptions.axisType} ${axisOptions.axisType}`, axisOptions.className)}
           key={element.key || `${displayName}-${index}`}
           viewBox={{ x: 0, y: 0, width, height } as any}
           ticksGenerator={this.axesTicksGenerator}
@@ -2304,7 +2304,7 @@ export const generateCategoricalChart = ({
       const events = this.parseEventsOfWrapper();
       return (
         <div
-          className={classNames('recharts-wrapper', className)}
+          className={clsx('recharts-wrapper', className)}
           style={{ position: 'relative', cursor: 'default', width, height, ...style }}
           {...events}
           ref={(node: HTMLDivElement) => {

src/component/DefaultLegendContent.tsx

@@ -2,7 +2,7 @@
  * @fileOverview Default Legend Content
  */
 import React, { PureComponent, ReactNode, MouseEvent, ReactText, ReactElement } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import _ from 'lodash';
 import { warn } from '../util/LogUtils';
 import { Surface } from '../container/Surface';
@@ -161,7 +161,7 @@ export class DefaultLegendContent extends PureComponent<Props> {
 
     return payload.map((entry, i) => {
       const finalFormatter = entry.formatter || formatter;
-      const className = classNames({
+      const className = clsx({
         'recharts-legend-item': true,
         [`legend-item-${i}`]: true,
         inactive: entry.inactive,

src/component/DefaultTooltipContent.tsx

@@ -3,7 +3,7 @@
  */
 import _ from 'lodash';
 import React, { CSSProperties, ReactNode } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { isNumOrStr } from '../util/DataUtils';
 
 function defaultFormatter<TValue extends ValueType>(value: TValue) {
@@ -131,8 +131,8 @@ export const DefaultTooltipContent = <TValue extends ValueType, TName extends Na
   };
   const hasLabel = !_.isNil(label);
   let finalLabel = hasLabel ? label : '';
-  const wrapperCN = classNames('recharts-default-tooltip', wrapperClassName);
-  const labelCN = classNames('recharts-tooltip-label', labelClassName);
+  const wrapperCN = clsx('recharts-default-tooltip', wrapperClassName);
+  const labelCN = clsx('recharts-tooltip-label', labelClassName);
 
   if (hasLabel && labelFormatter && payload !== undefined && payload !== null) {
     finalLabel = labelFormatter(label, payload);

src/component/Label.tsx

@@ -1,6 +1,6 @@
 import React, { cloneElement, isValidElement, ReactNode, ReactElement, createElement, SVGProps } from 'react';
 import _ from 'lodash';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Text } from './Text';
 import { findAllByType, filterProps } from '../util/ReactUtils';
 import { isNumOrStr, isNumber, isPercent, getPercentValue, uniqueId, mathSign } from '../util/DataUtils';
@@ -105,7 +105,7 @@ const renderRadialLabel = (labelProps: Props, label: ReactNode, attrs: SVGProps<
   const id = _.isNil(labelProps.id) ? uniqueId('recharts-radial-line-') : labelProps.id;
 
   return (
-    <text {...attrs} dominantBaseline="central" className={classNames('recharts-radial-bar-label', className)}>
+    <text {...attrs} dominantBaseline="central" className={clsx('recharts-radial-bar-label', className)}>
       <defs>
         <path id={id} d={path} />
       </defs>
@@ -406,12 +406,7 @@ export function Label({ offset = 5, ...restProps }: Props) {
   const positionAttrs = isPolarLabel ? getAttrsOfPolarLabel(props) : getAttrsOfCartesianLabel(props);
 
   return (
-    <Text
-      className={classNames('recharts-label', className)}
-      {...attrs}
-      {...(positionAttrs as any)}
-      breakAll={textBreakAll}
-    >
+    <Text className={clsx('recharts-label', className)} {...attrs} {...(positionAttrs as any)} breakAll={textBreakAll}>
       {label}
     </Text>
   );