Replace merge-class-names with clsx

Author: wojtekmaj

package.json

@@ -34,9 +34,9 @@
   "license": "MIT",
   "dependencies": {
     "@wojtekmaj/date-utils": "^1.0.3",
+    "clsx": "^1.2.1",
     "get-user-locale": "^1.2.0",
     "make-event-props": "^1.1.0",
-    "merge-class-names": "^1.1.1",
     "prop-types": "^15.6.0",
     "react-calendar": "^3.7.0",
     "react-clock": "^3.1.0",

src/DateTimePicker.jsx

@@ -2,7 +2,7 @@ import React, { createRef, PureComponent } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import makeEventProps from 'make-event-props';
-import mergeClassNames from 'merge-class-names';
+import clsx from 'clsx';
 import Calendar from 'react-calendar';
 import Fit from 'react-fit';
 
@@ -334,10 +334,7 @@ export default class DateTimePicker extends PureComponent {
     } = this.props;
 
     const className = `${baseClassName}__calendar`;
-    const classNames = mergeClassNames(
-      className,
-      `${className}--${isCalendarOpen ? 'open' : 'closed'}`,
-    );
+    const classNames = clsx(className, `${className}--${isCalendarOpen ? 'open' : 'closed'}`);
 
     const calendar = (
       <Calendar
@@ -390,10 +387,7 @@ export default class DateTimePicker extends PureComponent {
     } = this.props;
 
     const className = `${baseClassName}__clock`;
-    const classNames = mergeClassNames(
-      className,
-      `${className}--${isClockOpen ? 'open' : 'closed'}`,
-    );
+    const classNames = clsx(className, `${className}--${isClockOpen ? 'open' : 'closed'}`);
 
     const [valueFrom] = [].concat(value);
 
@@ -441,7 +435,7 @@ export default class DateTimePicker extends PureComponent {
 
     return (
       <div
-        className={mergeClassNames(
+        className={clsx(
           baseClassName,
           `${baseClassName}--${isCalendarOpen || isClockOpen ? 'open' : 'closed'}`,
           `${baseClassName}--${disabled ? 'disabled' : 'enabled'}`,

test/yarn.lock

@@ -2508,6 +2508,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "clsx@npm:1.2.1"
+  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -5342,9 +5349,9 @@ __metadata:
   resolution: "react-datetime-picker@portal:../::locator=react-datetime-picker-test-page%40workspace%3A."
   dependencies:
     "@wojtekmaj/date-utils": ^1.0.3
+    clsx: ^1.2.1
     get-user-locale: ^1.2.0
     make-event-props: ^1.1.0
-    merge-class-names: ^1.1.1
     prop-types: ^15.6.0
     react-calendar: ^3.7.0
     react-clock: ^3.1.0

yarn.lock

@@ -2737,6 +2737,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "clsx@npm:1.2.1"
+  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -6020,6 +6027,7 @@ __metadata:
     "@testing-library/jest-dom": ^5.15.0
     "@testing-library/react": ^13.4.0
     "@wojtekmaj/date-utils": ^1.0.3
+    clsx: ^1.2.1
     eslint: ^8.26.0
     eslint-config-wojtekmaj: ^0.7.1
     get-user-locale: ^1.2.0
@@ -6028,7 +6036,6 @@ __metadata:
     jest-environment-jsdom: ^29.0.0
     less: ^4.0.0
     make-event-props: ^1.1.0
-    merge-class-names: ^1.1.1
     prettier: ^2.7.0
     pretty-quick: ^3.1.0
     prop-types: ^15.6.0