feat: #3798 Replaced classnames with clsx

package.json

@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.2",
-    "classnames": "^2.2.6",
+    "clsx": "^2.1.0",
     "date-fns": "^3.3.1",
     "prop-types": "^15.7.2",
     "react-onclickoutside": "^6.13.0"

rollup.config.mjs

@@ -46,7 +46,6 @@ const globals = {
   react: "React",
   "prop-types": "PropTypes",
   "react-onclickoutside": "onClickOutside",
-  classnames: "classNames",
 };
 
 // NOTE:https://rollupjs.org/migration/#changed-defaults

src/calendar.jsx

@@ -7,7 +7,7 @@ import Year from "./year";
 import InputTime from "./inputTime";
 import React from "react";
 import PropTypes from "prop-types";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import CalendarContainer from "./calendar_container";
 import {
   newDate,
@@ -441,10 +441,7 @@ export default class Calendar extends React.Component {
         return (
           <div
             key={offset}
-            className={classnames(
-              "react-datepicker__day-name",
-              weekDayClassName,
-            )}
+            className={clsx("react-datepicker__day-name", weekDayClassName)}
           >
             {weekDayName}
           </div>
@@ -1098,7 +1095,7 @@ export default class Calendar extends React.Component {
     return (
       <div style={{ display: "contents" }} ref={this.containerRef}>
         <Container
-          className={classnames("react-datepicker", this.props.className, {
+          className={clsx("react-datepicker", this.props.className, {
             "react-datepicker--time-only": this.props.showTimeSelectOnly,
           })}
           showTime={this.props.showTimeSelect || this.props.showTimeInput}

src/day.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import {
   getDay,
   getMonth,
@@ -305,7 +305,7 @@ export default class Day extends React.Component {
     const dayClassName = this.props.dayClassName
       ? this.props.dayClassName(date)
       : undefined;
-    return classnames(
+    return clsx(
       "react-datepicker__day",
       dayClassName,
       "react-datepicker__day--" + getDayOfWeekCode(this.props.day),

src/index.jsx

@@ -5,7 +5,7 @@ import CalendarIcon from "./calendar_icon";
 import Portal from "./portal";
 import PopperComponent from "./popper_component";
 import { popperPlacementPositions } from "./with_floating";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import { set } from "date-fns/set";
 import { startOfDay } from "date-fns/startOfDay";
 import { endOfDay } from "date-fns/endOfDay";
@@ -1226,7 +1226,7 @@ export default class DatePicker extends React.Component {
   };
 
   renderDateInput = () => {
-    const className = classnames(this.props.className, {
+    const className = clsx(this.props.className, {
       [outsideClickIgnoreClass]: this.state.open,
     });
 
@@ -1264,7 +1264,7 @@ export default class DatePicker extends React.Component {
       placeholder: this.props.placeholderText,
       disabled: this.props.disabled,
       autoComplete: this.props.autoComplete,
-      className: classnames(customInput.props.className, className),
+      className: clsx(customInput.props.className, className),
       title: this.props.title,
       readOnly: this.props.readOnly,
       required: this.props.required,
@@ -1298,7 +1298,7 @@ export default class DatePicker extends React.Component {
       return (
         <button
           type="button"
-          className={classnames(
+          className={clsx(
             "react-datepicker__close-icon",
             clearButtonClassName,
             { "react-datepicker__close-icon--disabled": disabled },

src/month.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import Week from "./week";
 import * as utils from "./date_utils";
 
@@ -562,7 +562,7 @@ export default class Month extends React.Component {
       ? monthClassName(utils.setMonth(day, m))
       : undefined;
     const labelDate = utils.setMonth(day, m);
-    return classnames(
+    return clsx(
       "react-datepicker__month-text",
       `react-datepicker__month-${m}`,
       _monthClassName,
@@ -644,7 +644,7 @@ export default class Month extends React.Component {
       preSelection,
       disabledKeyboardNavigation,
     } = this.props;
-    return classnames(
+    return clsx(
       "react-datepicker__quarter-text",
       `react-datepicker__quarter-${q}`,
       {
@@ -797,7 +797,7 @@ export default class Month extends React.Component {
       showWeekPicker,
     } = this.props;
 
-    return classnames(
+    return clsx(
       "react-datepicker__month",
       {
         "react-datepicker__month--selecting-range":

src/month_year_dropdown_options.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
+import { clsx } from "clsx";
 import {
   addMonths,
   formatDate,
@@ -87,7 +87,7 @@ export default class MonthYearDropdownOptions extends React.Component {
   };
 
   render() {
-    let dropdownClass = classNames({
+    let dropdownClass = clsx({
       "react-datepicker__month-year-dropdown": true,
       "react-datepicker__month-year-dropdown--scrollable":
         this.props.scrollableMonthYearDropdown,

src/popper_component.jsx

@@ -1,4 +1,4 @@
-import classnames from "classnames";
+import { clsx } from "clsx";
 import React from "react";
 import PropTypes from "prop-types";
 import { FloatingArrow } from "@floating-ui/react";
@@ -47,7 +47,7 @@ export class PopperComponent extends React.Component {
     let popper;
 
     if (!hidePopper) {
-      const classes = classnames("react-datepicker-popper", className);
+      const classes = clsx("react-datepicker-popper", className);
       popper = (
         <TabLoop enableTabLoop={enableTabLoop}>
           <div
@@ -87,10 +87,7 @@ export class PopperComponent extends React.Component {
       );
     }
 
-    const wrapperClasses = classnames(
-      "react-datepicker-wrapper",
-      wrapperClassName,
-    );
+    const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
 
     return (
       <React.Fragment>

src/week.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Day from "./day";
 import WeekNumber from "./week_number";
-import classnames from "classnames";
+import { clsx } from "clsx";
 
 import { addDays, getWeek, getStartOfWeek, isSameDay } from "./date_utils";
 
@@ -214,8 +214,6 @@ export default class Week extends React.Component {
       ),
       "react-datepicker__week--keyboard-selected": this.isKeyboardSelected(),
     };
-    return (
-      <div className={classnames(weekNumberClasses)}>{this.renderDays()}</div>
-    );
+    return <div className={clsx(weekNumberClasses)}>{this.renderDays()}</div>;
   }
 }

src/week_number.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classnames from "classnames";
+import { clsx } from "clsx";
 import { isSameDay } from "./date_utils";
 
 export default class WeekNumber extends React.Component {
@@ -124,7 +124,7 @@ export default class WeekNumber extends React.Component {
     return (
       <div
         ref={this.weekNumberEl}
-        className={classnames(weekNumberClasses)}
+        className={clsx(weekNumberClasses)}
         aria-label={`${ariaLabelPrefix} ${this.props.weekNumber}`}
         onClick={this.handleClick}
         onKeyDown={this.handleOnKeyDown}

src/year.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { getYear, newDate } from "./date_utils";
 import * as utils from "./date_utils";
-import classnames from "classnames";
+import { clsx } from "clsx";
 
 export default class Year extends React.Component {
   static propTypes = {
@@ -202,7 +202,7 @@ export default class Year extends React.Component {
       includeDates,
       filterDate,
     } = this.props;
-    return classnames("react-datepicker__year-text", {
+    return clsx("react-datepicker__year-text", {
       "react-datepicker__year-text--selected": y === getYear(selected),
       "react-datepicker__year-text--disabled":
         (minDate || maxDate || excludeDates || includeDates || filterDate) &&
@@ -232,7 +232,7 @@ export default class Year extends React.Component {
   getYearContainerClassNames = () => {
     const { selectingDate, selectsStart, selectsEnd, selectsRange } =
       this.props;
-    return classnames("react-datepicker__year", {
+    return clsx("react-datepicker__year", {
       "react-datepicker__year--selecting-range":
         selectingDate && (selectsStart || selectsEnd || selectsRange),
     });

src/year_dropdown_options.jsx

@@ -1,6 +1,6 @@
 import React, { createRef } from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
+import { clsx } from "clsx";
 import { getYear } from "./date_utils";
 
 function generateYears(year, noOfYear, minDate, maxDate) {
@@ -151,7 +151,7 @@ export default class YearDropdownOptions extends React.Component {
   };
 
   render() {
-    let dropdownClass = classNames({
+    let dropdownClass = clsx({
       "react-datepicker__year-dropdown": true,
       "react-datepicker__year-dropdown--scrollable":
         this.props.scrollableYearDropdown,

test/test_wrapper.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
+import { clsx } from "clsx";
 
 const TestWrapper = ({ className, children }) => (
-  <div className={classNames("test-wrapper", className)}>{children}</div>
+  <div className={clsx("test-wrapper", className)}>{children}</div>
 );
 
 TestWrapper.propTypes = {

yarn.lock

@@ -2623,11 +2623,6 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
-classnames@^2.2.6:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
-  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -2662,6 +2657,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"