Replace classnames with clsx (react-grid-layout#1543)

* Update react-draggable

* Replace classnames with clsx

Follow up after react-grid-layout/react-draggable#599

clsx is fully compatible with classnames API, is quickly gaining traction and is about 1/3rd smaller than classnames.

flow-typed/npm/clsx_v1.x.x.js

@@ -0,0 +1,12 @@
+declare module 'clsx' {
+  declare type Classes =
+    | Array<Classes>
+    | { [className: string]: *, ... }
+    | string
+    | number
+    | boolean
+    | void
+    | null;
+
+  declare module.exports: (...classes: Array<Classes>) => string;
+}

lib/GridItem.jsx

@@ -16,7 +16,7 @@ import {
   resizeHandleAxesType,
   resizeHandleType
 } from "./ReactGridLayoutPropTypes";
-import classNames from "classnames";
+import clsx from "clsx";
 import type { Element as ReactElement, Node as ReactNode } from "react";
 
 import type {
@@ -634,7 +634,7 @@ export default class GridItem extends React.Component<Props, State> {
     // Create the child element. We clone the existing element but modify its className and style.
     let newChild = React.cloneElement(child, {
       ref: this.elementRef,
-      className: classNames(
+      className: clsx(
         "react-grid-item",
         child.props.className,
         this.props.className,

lib/ReactGridLayout.jsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 
 import isEqual from "lodash.isequal";
-import classNames from "classnames";
+import clsx from "clsx";
 import {
   bottom,
   childrenEqual,
@@ -756,7 +756,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   render(): React.Element<"div"> {
     const { className, style, isDroppable, innerRef } = this.props;
 
-    const mergedClassName = classNames(layoutClassName, className);
+    const mergedClassName = clsx(layoutClassName, className);
     const mergedStyle = {
       height: this.containerHeight(),
       ...style

lib/components/WidthProvider.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
+import clsx from "clsx";
 import type { ReactRef } from "../ReactGridLayoutPropTypes";
 
 type WPDefaultProps = {|
@@ -88,7 +88,7 @@ export default function WidthProvideRGL<Config>(
       if (measureBeforeMount && !this.mounted) {
         return (
           <div
-            className={classNames(this.props.className, layoutClassName)}
+            className={clsx(this.props.className, layoutClassName)}
             style={this.props.style}
             // $FlowIgnore ref types
             ref={this.elementRef}

package.json

@@ -35,7 +35,7 @@
   },
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
-    "classnames": "2.3.1",
+    "clsx": "^1.1.1",
     "lodash.isequal": "^4.0.0",
     "prop-types": "^15.0.0",
     "react-draggable": "^4.0.0",
@@ -108,4 +108,4 @@
       "prettier --write"
     ]
   }
-}
+}

yarn.lock

@@ -2270,11 +2270,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-[email protected], classnames@^2.2.5:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -2313,6 +2308,11 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -5899,11 +5899,11 @@ react-dom@^16.13.1:
     scheduler "^0.19.1"
 
 react-draggable@^4.0.0, react-draggable@^4.0.3:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
-  integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.4.tgz#5b26d9996be63d32d285a426f41055de87e59b2f"
+  integrity sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==
   dependencies:
-    classnames "^2.2.5"
+    clsx "^1.1.1"
     prop-types "^15.6.0"
 
 react-hot-loader@^4.13.0: