Merge pull request #4632 from yuki0410-dev/feat/3798

feat: #3798 Replaced classnames with clsx

Author: martijnrusschen

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}