react-component · li-jia-nan · Sep 28, 2025 · Sep 28, 2025
diff --git a/package.json b/package.json
@@ -42,19 +42,16 @@
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.2.1",
+    "clsx": "^2.1.1",
     "rc-overflow": "^1.3.2"
   },
-  "engines": {
-    "node": ">=8.x"
-  },
-  "devDependencies": {
+    "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
-    "@rc-component/np":"^1.0.3",
+    "@rc-component/np": "^1.0.3",
     "@testing-library/react": "^16.0.0",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.4.0",
     "@types/luxon": "^3.2.0",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.8",
     "coveralls": "^3.0.6",
@@ -103,5 +100,8 @@
     "moment": {
       "optional": true
     }
+  },
+  "engines": {
+    "node": ">=8.x"
   }
 }
diff --git a/src/PickerInput/Popup/Footer.tsx b/src/PickerInput/Popup/Footer.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { GenerateConfig } from '../../generate';
 import useTimeInfo from '../../hooks/useTimeInfo';
@@ -76,7 +76,7 @@ export default function Footer(props: FooterProps) {
   const presetNode = showNow && (
     <li className={nowPrefixCls}>
       <a
-        className={cls(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
+        className={clsx(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
         aria-disabled={nowDisabled}
         onClick={onInternalNow}
       >
@@ -108,7 +108,7 @@ export default function Footer(props: FooterProps) {
 
   return (
     <div
-      className={cls(`${prefixCls}-footer`, classNames.popup.footer)}
+      className={clsx(`${prefixCls}-footer`, classNames.popup.footer)}
       style={styles.popup.footer}
     >
       {extraNode && <div className={`${prefixCls}-footer-extra`}>{extraNode}</div>}

diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import ResizeObserver, { type ResizeObserverProps } from '@rc-component/resize-observer';
 import * as React from 'react';
 import type {
@@ -213,7 +213,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     <div
       onMouseDown={onPanelMouseDown}
       tabIndex={-1}
-      className={classNames(
+      className={clsx(
         containerPrefixCls,
         // Used for Today Button style, safe to remove if no need
         `${prefixCls}-${internalMode}-panel-container`,
@@ -238,7 +238,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
       <div
         onMouseDown={onPanelMouseDown}
         ref={wrapperRef}
-        className={classNames(`${prefixCls}-range-wrapper`, `${prefixCls}-${picker}-range-wrapper`)}
+        className={clsx(`${prefixCls}-range-wrapper`, `${prefixCls}-${picker}-range-wrapper`)}
       >
         <div ref={arrowRef} className={`${prefixCls}-range-arrow`} style={{ left: arrowOffset }} />
 

diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx
@@ -1,5 +1,5 @@
 import { useEvent, useControlledState } from '@rc-component/util';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import omit from '@rc-component/util/lib/omit';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -777,7 +777,7 @@ function RangePicker<DateType extends object = any>(
         {...pickTriggerProps(filledProps)}
         popupElement={panel}
         popupStyle={mergedStyles.popup.root}
-        popupClassName={cls(rootClassName, mergedClassNames.popup.root)}
+        popupClassName={clsx(rootClassName, mergedClassNames.popup.root)}
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}
@@ -790,11 +790,8 @@ function RangePicker<DateType extends object = any>(
           // Ref
           ref={selectorRef}
           // Style
-          className={cls(filledProps.className, rootClassName, mergedClassNames.root)}
-          style={{
-            ...mergedStyles.root,
-            ...filledProps.style,
-          }}
+          className={clsx(filledProps.className, rootClassName, mergedClassNames.root)}
+          style={{ ...mergedStyles.root, ...filledProps.style }}
           // Icon
           suffixIcon={suffixIcon}
           // Active

diff --git a/src/PickerInput/Selector/Icon.tsx b/src/PickerInput/Selector/Icon.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PickerContext from '../context';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 
 export interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {
   icon?: React.ReactNode;
@@ -13,7 +13,7 @@ export default function Icon(props: IconProps) {
 
   return icon ? (
     <span
-      className={cls(`${prefixCls}-${type}`, classNames.suffix)}
+      className={clsx(`${prefixCls}-${type}`, classNames.suffix)}
       style={styles.suffix}
       {...restProps}
     >

diff --git a/src/PickerInput/Selector/Input.tsx b/src/PickerInput/Selector/Input.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import { useEvent } from '@rc-component/util';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import raf from '@rc-component/util/lib/raf';
@@ -95,8 +95,8 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   }, [value]);
 
   // ========================= Refs =========================
-  const holderRef = React.useRef<HTMLDivElement>();
-  const inputRef = React.useRef<HTMLInputElement>();
+  const holderRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   React.useImperativeHandle(ref, () => ({
     nativeElement: holderRef.current,
@@ -383,7 +383,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   return (
     <div
       ref={holderRef}
-      className={cls(
+      className={clsx(
         inputPrefixCls,
         {
           [`${inputPrefixCls}-active`]: active && showActiveCls,

diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import ResizeObserver from '@rc-component/resize-observer';
 import { useEvent } from '@rc-component/util';
 import * as React from 'react';
@@ -211,7 +211,7 @@ function RangeSelector<DateType extends object = any>(
     <ResizeObserver onResize={syncActiveOffset}>
       <div
         {...rootProps}
-        className={cls(
+        className={clsx(
           prefixCls,
           `${prefixCls}-range`,
           {
@@ -239,7 +239,7 @@ function RangeSelector<DateType extends object = any>(
         }}
       >
         {prefix && (
-          <div className={cls(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
+          <div className={clsx(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
             {prefix}
           </div>
         )}

diff --git a/src/PickerInput/Selector/SingleSelector/MultipleDates.tsx b/src/PickerInput/Selector/SingleSelector/MultipleDates.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Overflow from 'rc-overflow';
 import * as React from 'react';
 import type { PickerProps } from '../../SinglePicker';
@@ -36,7 +36,7 @@ export default function MultipleDates<DateType extends object = any>(
   function renderSelector(content: React.ReactNode, onClose?: React.MouseEventHandler) {
     return (
       <span
-        className={classNames(`${selectionCls}-item`)}
+        className={clsx(`${selectionCls}-item`)}
         title={typeof content === 'string' ? content : null}
       >
         <span className={`${selectionCls}-item-content`}>{content}</span>

diff --git a/src/PickerInput/Selector/SingleSelector/index.tsx b/src/PickerInput/Selector/SingleSelector/index.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { InternalMode, PickerRef, SelectorProps } from '../../../interface';
 import { isSame } from '../../../utils/dateUtil';
@@ -201,7 +201,7 @@ function SingleSelector<DateType extends object = any>(
   return (
     <div
       {...rootProps}
-      className={cls(
+      className={clsx(
         prefixCls,
         {
           [`${prefixCls}-multiple`]: multiple,
@@ -226,7 +226,7 @@ function SingleSelector<DateType extends object = any>(
       }}
     >
       {prefix && (
-        <div className={cls(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
+        <div className={clsx(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
           {prefix}
         </div>
       )}

diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx
@@ -1,5 +1,5 @@
 import { useEvent, useControlledState } from '@rc-component/util';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import omit from '@rc-component/util/lib/omit';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -638,7 +638,7 @@ function Picker<DateType extends object = any>(
         {...pickTriggerProps(filledProps)}
         popupElement={panel}
         popupStyle={mergedStyles.popup.root}
-        popupClassName={cls(rootClassName, mergedClassNames.popup.root)}
+        popupClassName={clsx(rootClassName, mergedClassNames.popup.root)}
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}
@@ -649,11 +649,8 @@ function Picker<DateType extends object = any>(
           // Ref
           ref={selectorRef}
           // Style
-          className={cls(filledProps.className, rootClassName, mergedClassNames.root)}
-          style={{
-            ...mergedStyles.root,
-            ...filledProps.style,
-          }}
+          className={clsx(filledProps.className, rootClassName, mergedClassNames.root)}
+          style={{ ...mergedStyles.root, ...filledProps.style }}
           // Icon
           suffixIcon={suffixIcon}
           removeIcon={removeIcon}

diff --git a/src/PickerPanel/DatePanel/index.tsx b/src/PickerPanel/DatePanel/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { PanelMode, SharedPanelProps } from '../../interface';
 import {
@@ -60,7 +60,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
         return (
           <td
             key="week"
-            className={classNames(cellPrefixCls, `${cellPrefixCls}-week`, {
+            className={clsx(cellPrefixCls, `${cellPrefixCls}-week`, {
               [`${cellPrefixCls}-disabled`]: disabled,
             })}
             // Operation: Same as code in PanelBody
@@ -183,7 +183,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
   // ========================= Render =========================
   return (
     <PanelContext.Provider value={info}>
-      <div className={classNames(panelPrefixCls, showWeek && `${panelPrefixCls}-show-week`)}>
+      <div className={clsx(panelPrefixCls, showWeek && `${panelPrefixCls}-show-week`)}>
         {/* Header */}
         <PanelHeader<DateType>
           offset={(distance) => generateConfig.addMonth(pickerValue, distance)}

diff --git a/src/PickerPanel/PanelBody.tsx b/src/PickerPanel/PanelBody.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { DisabledDate } from '../interface';
 import { formatValue, isInRange, isSame } from '../utils/dateUtil';
@@ -125,7 +125,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
         <td
           key={col}
           title={title}
-          className={cls(cellPrefixCls, classNames.item, {
+          className={clsx(cellPrefixCls, classNames.item, {
             [`${cellPrefixCls}-disabled`]: disabled,
             [`${cellPrefixCls}-hover`]: (hoverValue || []).some((date) =>
               isSame(generateConfig, locale, currentDate, date, type),
@@ -184,8 +184,8 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
 
   // ============================== Render ==============================
   return (
-    <div className={cls(`${prefixCls}-body`, classNames.body)} style={styles.body}>
-      <table className={cls(`${prefixCls}-content`, classNames.content)} style={styles.content}>
+    <div className={clsx(`${prefixCls}-body`, classNames.body)} style={styles.body}>
+      <table className={clsx(`${prefixCls}-content`, classNames.content)} style={styles.content}>
         {headerCells && (
           <thead>
             <tr>{headerCells}</tr>

diff --git a/src/PickerPanel/PanelHeader.tsx b/src/PickerPanel/PanelHeader.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { isSameOrAfter } from '../utils/dateUtil';
 import { PickerHackContext, usePanelContext } from './context';
@@ -120,14 +120,17 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
   const superNextBtnCls = `${headerPrefixCls}-super-next-btn`;
 
   return (
-    <div className={cls(headerPrefixCls, classNames.header)} style={styles.header}>
+    <div className={clsx(headerPrefixCls, classNames.header)} style={styles.header}>
       {superOffset && (
         <button
           type="button"
           aria-label={locale.previousYear}
           onClick={() => onSuperOffset(-1)}
           tabIndex={-1}
-          className={cls(superPrevBtnCls, disabledSuperOffsetPrev && `${superPrevBtnCls}-disabled`)}
+          className={clsx(
+            superPrevBtnCls,
+            disabledSuperOffsetPrev && `${superPrevBtnCls}-disabled`,
+          )}
           disabled={disabledSuperOffsetPrev}
           style={hidePrev ? HIDDEN_STYLE : {}}
         >
@@ -140,7 +143,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           aria-label={locale.previousMonth}
           onClick={() => onOffset(-1)}
           tabIndex={-1}
-          className={cls(prevBtnCls, disabledOffsetPrev && `${prevBtnCls}-disabled`)}
+          className={clsx(prevBtnCls, disabledOffsetPrev && `${prevBtnCls}-disabled`)}
           disabled={disabledOffsetPrev}
           style={hidePrev ? HIDDEN_STYLE : {}}
         >
@@ -154,7 +157,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           aria-label={locale.nextMonth}
           onClick={() => onOffset(1)}
           tabIndex={-1}
-          className={cls(nextBtnCls, disabledOffsetNext && `${nextBtnCls}-disabled`)}
+          className={clsx(nextBtnCls, disabledOffsetNext && `${nextBtnCls}-disabled`)}
           disabled={disabledOffsetNext}
           style={hideNext ? HIDDEN_STYLE : {}}
         >
@@ -167,7 +170,10 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
           aria-label={locale.nextYear}
           onClick={() => onSuperOffset(1)}
           tabIndex={-1}
-          className={cls(superNextBtnCls, disabledSuperOffsetNext && `${superNextBtnCls}-disabled`)}
+          className={clsx(
+            superNextBtnCls,
+            disabledSuperOffsetNext && `${superNextBtnCls}-disabled`,
+          )}
           disabled={disabledSuperOffsetNext}
           style={hideNext ? HIDDEN_STYLE : {}}
         >

diff --git a/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import * as React from 'react';
 import { usePanelContext } from '../../context';
@@ -104,7 +104,7 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
           <li
             key={unitValue}
             style={styles.item}
-            className={cls(cellPrefixCls, classNames.item, {
+            className={clsx(cellPrefixCls, classNames.item, {
               [`${cellPrefixCls}-selected`]: value === unitValue,
               [`${cellPrefixCls}-disabled`]: disabled,
             })}

diff --git a/src/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/PickerPanel/TimePanel/TimePanelBody/index.tsx
@@ -4,7 +4,7 @@ import type { SharedPanelProps, SharedTimeProps } from '../../../interface';
 import { formatValue } from '../../../utils/dateUtil';
 import { PickerHackContext, usePanelContext } from '../../context';
 import TimeColumn, { type Unit } from './TimeColumn';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 
 function isAM(hour: number) {
   return hour < 12;
@@ -271,7 +271,7 @@ export default function TimePanelBody<DateType extends object = any>(
   };
 
   return (
-    <div className={cls(`${prefixCls}-content`, classNames.content)} style={styles.content}>
+    <div className={clsx(`${prefixCls}-content`, classNames.content)} style={styles.content}>
       {showHour && (
         <TimeColumn
           units={hourUnits}