Replace classList with clsx library (#2760)

framework/core/js/package-lock.json

@@ -9,7 +9,7 @@
         "@babel/preset-typescript": "^7.10.1",
         "@types/mithril": "^2.0.3",
         "bootstrap": "^3.4.1",
-        "classnames": "^2.2.5",
+        "clsx": "^1.1.1",
         "color-thief-browser": "^2.0.2",
         "dayjs": "^1.8.28",
         "expose-loader": "^0.7.5",
@@ -2034,11 +2034,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-    },
     "node_modules/cliui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -2049,6 +2044,14 @@
         "wrap-ansi": "^5.1.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -8064,11 +8067,6 @@
         }
       }
     },
-    "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-    },
     "cliui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -8079,6 +8077,11 @@
         "wrap-ansi": "^5.1.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",

framework/core/js/package.json

@@ -5,7 +5,7 @@
     "@babel/preset-typescript": "^7.10.1",
     "@types/mithril": "^2.0.3",
     "bootstrap": "^3.4.1",
-    "classnames": "^2.2.5",
+    "clsx": "^1.1.1",
     "color-thief-browser": "^2.0.2",
     "dayjs": "^1.8.28",
     "expose-loader": "^0.7.5",

framework/core/js/src/common/utils/classList.js

@@ -1,26 +0,0 @@
-/**
- * The `classList` utility creates a list of class names by joining an object's
- * keys, but only for values which are truthy.
- *
- * @example
- * classList({ foo: true, bar: false, qux: 'qaz' });
- * // "foo qux"
- *
- * @param {Object} classes
- * @return {String}
- */
-export default function classList(classes) {
-  let classNames;
-
-  if (classes instanceof Array) {
-    classNames = classes.filter((name) => name);
-  } else {
-    classNames = [];
-
-    for (const i in classes) {
-      if (classes[i]) classNames.push(i);
-    }
-  }
-
-  return classNames.join(' ');
-}

framework/core/js/src/common/utils/classList.ts

@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+
+/**
+ * This util exposes `clsx` to core and extensions as a re-usable utility.
+ *
+ * For full documentation, see `clsx` on GitHub.
+ *
+ * @see https://github.com/lukeed/clsx
+ */
+const classList = clsx;
+
+export default classList;