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.

Author: wojtekmaj

flow-typed/npm/classnames_v2.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;
+}

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

@@ -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/GridItem.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/ReactGridLayout.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}

lib/components/WidthProvider.jsx

@@ -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"
  ]
  }
-}
+}

package.json

@@ -2270,11 +2270,6 @@ class-utils@^0.3.5:
  isobject "^3.0.0"
  static-extend "^0.1.1"
 
-classnames@2.3.1, 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: