Replace classnames with clsx

docs/utils/CodeSnippet.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import prism from 'prismjs';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-bash';

package.json

@@ -97,7 +97,7 @@
     "react-dom": "^16.8.0"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
     "lodash.assignwith": "^4.2.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",

src/MUIDataTable.js

@@ -1,7 +1,7 @@
 import Paper from '@material-ui/core/Paper';
 import { withStyles } from '@material-ui/core/styles';
 import MuiTable from '@material-ui/core/Table';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import assignwith from 'lodash.assignwith';
 import cloneDeep from 'lodash.clonedeep';
 import find from 'lodash.find';
@@ -1163,7 +1163,7 @@ class MUIDataTable extends React.Component {
     const { classes } = this.props;
     const tableProps = this.options.setTableProps() || {};
 
-    tableProps.className = classnames(classes.tableRoot, tableProps.className);
+    tableProps.className = clsx(classes.tableRoot, tableProps.className);
 
     return tableProps;
   }
@@ -1826,11 +1826,11 @@ class MUIDataTable extends React.Component {
       tableHeightVal.height = this.options.tableBodyHeight;
     }
 
-    let tableProps = this.options.setTableProps ? this.options.setTableProps() || {} : {};
-    let tableClassNames = classnames(classes.tableRoot, tableProps.className);
+    const tableProps = this.options.setTableProps ? this.options.setTableProps() || {} : {};
+    const tableClassNames = clsx(classes.tableRoot, tableProps.className);
     delete tableProps.className; // remove className from props to avoid the className being applied twice
 
-    let dndProps = {};
+    const dndProps = {};
     if (typeof window !== 'undefined') {
       dndProps.context = window;
     }

src/components/JumpToPage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { InputBase, MenuItem, Select, Toolbar, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { getPageValue } from '../utils.js';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const useStyles = makeStyles(
   theme => ({
@@ -71,7 +71,7 @@ function JumpToPage(props) {
       </Typography>
       <Select
         classes={{ select: classes.select, icon: classes.selectIcon }}
-        input={<InputBase className={classnames(classes.input, classes.selectRoot)} />}
+        input={<InputBase className={clsx(classes.input, classes.selectRoot)} />}
         value={getPageValue(count, rowsPerPage, page)}
         onChange={handlePageChange}
         style={{ marginRight: 0 }}>

src/components/TableBody.js

@@ -8,7 +8,7 @@ import TableSelectCell from './TableSelectCell';
 import { withStyles } from '@material-ui/core/styles';
 import cloneDeep from 'lodash.clonedeep';
 import { getPageValue } from '../utils';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 const defaultBodyStyles = theme => ({
   root: {},
@@ -258,7 +258,7 @@ class TableBody extends React.Component {
                   rowSelected={isRowSelected}
                   isRowSelectable={isRowSelectable}
                   onClick={this.handleRowClick.bind(null, row, { rowIndex, dataIndex })}
-                  className={classNames({
+                  className={clsx({
                     [classes.lastStackedCell]:
                       options.responsive === 'vertical' ||
                       options.responsive === 'stacked' ||

src/components/TableBodyCell.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import TableCell from '@material-ui/core/TableCell';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -105,7 +105,7 @@ function TableBodyCell(props) {
   let cells = [
     <div
       key={1}
-      className={classNames(
+      className={clsx(
         {
           lastColumn: colIndex === 2,
           [classes.root]: true,
@@ -128,7 +128,7 @@ function TableBodyCell(props) {
     </div>,
     <div
       key={2}
-      className={classNames(
+      className={clsx(
         {
           [classes.root]: true,
           [classes.stackedCommon]:
@@ -163,7 +163,7 @@ function TableBodyCell(props) {
       {...methods}
       data-colindex={colIndex}
       data-tableid={tableId}
-      className={classNames(
+      className={clsx(
         {
           [classes.root]: true,
           [classes.stackedParent]:

src/components/TableBodyRow.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import TableRow from '@material-ui/core/TableRow';
 import { withStyles } from '@material-ui/core/styles';
 
@@ -59,7 +59,7 @@ class TableBodyRow extends React.Component {
       <TableRow
         hover={options.rowHover ? true : false}
         {...methods}
-        className={classNames(
+        className={clsx(
           {
             [classes.root]: true,
             [classes.hover]: options.rowHover,

src/components/TableFilter.js

@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Select from '@material-ui/core/Select';
 import Typography from '@material-ui/core/Typography';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import cloneDeep from 'lodash.clonedeep';
 
@@ -361,7 +361,7 @@ class TableFilter extends React.Component {
           <div className={classes.reset}>
             <Typography
               variant="body2"
-              className={classNames({
+              className={clsx({
                 [classes.title]: true,
               })}>
               {textLabels.title}

src/components/TableFilterListItem.js

@@ -1,12 +1,12 @@
 import Chip from '@material-ui/core/Chip';
 import PropTypes from 'prop-types';
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const TableFilterListItem = ({ label, onDelete, className, filterProps }) => {
   filterProps = filterProps || {};
   if (filterProps.className) {
-    className = classnames(className, filterProps.className);
+    className = clsx(className, filterProps.className);
   }
   return <Chip label={label} onDelete={onDelete} className={className} {...filterProps} />;
 };

src/components/TableHead.js

@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
 import MuiTableHead from '@material-ui/core/TableHead';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import TableHeadCell from './TableHeadCell';
 import TableHeadRow from './TableHeadRow';
@@ -96,7 +96,7 @@ const TableHead = ({
 
   return (
     <MuiTableHead
-      className={classNames({
+      className={clsx({
         [classes.responsiveStacked]:
           options.responsive === 'vertical' ||
           options.responsive === 'stacked' ||

src/components/TableHeadCell.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import HelpIcon from '@material-ui/icons/Help';
 import MuiTooltip from '@material-ui/core/Tooltip';
 import PropTypes from 'prop-types';
@@ -159,7 +159,7 @@ const TableHeadCell = ({
     return options.draggableColumns && options.draggableColumns.enabled && column.draggable !== false;
   };
 
-  const cellClass = classNames({
+  const cellClass = clsx({
     [classes.root]: true,
     [classes.fixedHeader]: options.fixedHeader,
     'datatables-noprint': !print,
@@ -218,7 +218,7 @@ const TableHeadCell = ({
             }}>
             <div className={classes.sortAction}>
               <div
-                className={classNames({
+                className={clsx({
                   [classes.data]: true,
                   [classes.sortActive]: sortActive,
                   [classes.dragCursor]: isDraggingEnabled(),

src/components/TableHeadRow.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import TableRow from '@material-ui/core/TableRow';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -16,7 +16,7 @@ const TableHeadRow = ({ children }) => {
 
   return (
     <TableRow
-      className={classNames({
+      className={clsx({
         [classes.root]: true,
       })}>
       {children}

src/components/TableSelectCell.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Checkbox from '@material-ui/core/Checkbox';
 import TableCell from '@material-ui/core/TableCell';
 import IconButton from '@material-ui/core/IconButton';
@@ -97,23 +97,23 @@ class TableSelectCell extends React.Component {
 
     const CheckboxComponent = components.Checkbox || Checkbox;
 
-    const cellClass = classNames({
+    const cellClass = clsx({
       [classes.root]: true,
       [classes.fixedHeader]: fixedHeader && isHeaderCell,
       [classes.fixedLeft]: fixedSelectColumn,
       [classes.headerCell]: isHeaderCell,
     });
 
-    const buttonClass = classNames({
+    const buttonClass = clsx({
       [classes.expandDisabled]: hideExpandButton,
     });
 
-    const iconClass = classNames({
+    const iconClass = clsx({
       [classes.icon]: true,
       [classes.hide]: isHeaderCell && !expandableRowsHeader,
       [classes.expanded]: isRowExpanded || (isHeaderCell && areAllRowsExpanded()),
     });
-    const iconIndeterminateClass = classNames({
+    const iconIndeterminateClass = clsx({
       [classes.icon]: true,
       [classes.hide]: isHeaderCell && !expandableRowsHeader,
     });