Replace merge-class-names with clsx

Author: wojtekmaj

package.json

@@ -29,9 +29,9 @@
   "license": "MIT",
   "dependencies": {
     "@wojtekmaj/date-utils": "^1.0.0",
+    "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-clock": "^3.1.0",
     "react-fit": "^1.4.0",

src/TimeInput/AmPm.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import mergeClassNames from 'merge-class-names';
+import clsx from 'clsx';
 import { getHours } from '@wojtekmaj/date-utils';
 
 import { convert24to12 } from '../shared/dates';
@@ -29,7 +29,7 @@ export default function AmPm({
   return (
     <select
       aria-label={ariaLabel}
-      className={mergeClassNames(`${className}__input`, `${className}__${name}`)}
+      className={clsx(`${className}__input`, `${className}__${name}`)}
       data-input="true"
       data-select="true"
       disabled={disabled}

src/TimeInput/Input.jsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import mergeClassNames from 'merge-class-names';
+import clsx from 'clsx';
 import updateInputWidth, { getFontShorthand } from 'update-input-width';
 
 import { isRef } from '../shared/propTypes';
@@ -141,7 +141,7 @@ export default function Input({
       aria-label={ariaLabel}
       autoComplete="off"
       autoFocus={autoFocus}
-      className={mergeClassNames(
+      className={clsx(
         `${className}__input`,
         `${className}__${nameForClass || name}`,
         hasLeadingZero && `${className}__input--hasLeadingZero`,

src/TimePicker.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 Fit from 'react-fit';
 
 import Clock from 'react-clock';
@@ -254,7 +254,7 @@ export default class TimePicker extends PureComponent {
     } = this.props;
 
     const className = `${baseClassName}__clock`;
-    const classNames = mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`);
+    const classNames = clsx(className, `${className}--${isOpen ? 'open' : 'closed'}`);
 
     const [valueFrom] = [].concat(value);
 
@@ -302,7 +302,7 @@ export default class TimePicker extends PureComponent {
 
     return (
       <div
-        className={mergeClassNames(
+        className={clsx(
           baseClassName,
           `${baseClassName}--${isOpen ? 'open' : 'closed'}`,
           `${baseClassName}--${disabled ? 'disabled' : 'enabled'}`,

yarn.lock

@@ -2728,6 +2728,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"
@@ -6023,6 +6030,7 @@ __metadata:
     "@testing-library/jest-dom": ^5.15.0
     "@testing-library/react": ^13.4.0
     "@wojtekmaj/date-utils": ^1.0.0
+    clsx: ^1.2.1
     eslint: ^8.26.0
     eslint-config-wojtekmaj: ^0.7.1
     get-user-locale: ^1.2.0
@@ -6031,7 +6039,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