Merge branch 'next'

.eslintrc.json

@@ -23,11 +23,14 @@
                 "jest/globals": true
             },
             "globals": {
-                "page": true
+                "page": true,
+                "browser": true,
+                "context": true,
+                "jestPuppeteer": true
             },
             "plugins": [
                 "jest"
             ]
         }
     ]
-}
+}

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 .temp
 dist
-yarn-error.log
+yarn-error.log
+.next

examples/nextjs/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nextjs",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "next": "^7.0.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "simplebar-react": "^0.1.4"
+  },
+  "devDependencies": {
+    "terser": "^3.14.1"
+  }
+}

examples/nextjs/pages/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import SimpleBar from "simplebar-react";
+
+const Index = () => (
+  <SimpleBar>
+    <p>Hello Next.js</p>
+  </SimpleBar>
+);
+
+export default Index;

package.json

@@ -23,23 +23,23 @@
     "eslint-plugin-jest": "^21.15.1",
     "eslint-plugin-react": "^7.7.0",
     "husky": "^1.1.4",
-    "jest": "^23.5.0",
-    "jest-cli": "^23.5.0",
-    "jest-puppeteer": "^3.3.1",
+    "jest": "^24.1.0",
+    "jest-cli": "^24.1.0",
+    "jest-puppeteer": "^4.0.0",
     "lerna": "^3.1.1",
     "lint-staged": "^8.0.5",
     "prettier": "^1.11.1",
     "prettier-eslint": "^8.8.1",
     "prettier-eslint-cli": "^4.7.1",
-    "puppeteer": "^1.2.0",
+    "puppeteer": "^1.12.2",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
-    "rollup": "^1.1.0",
-    "rollup-plugin-babel": "^4.3.0",
+    "rollup": "^1.2.1",
+    "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-license": "^0.7.0",
+    "rollup-plugin-license": "^0.8.1",
     "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-uglify": "^6.0.1",
+    "rollup-plugin-terser": "^4.0.4",
     "webpack": "^4.1.1",
     "webpack-cli": "^2.1.3",
     "webpack-dev-server": "^3.1.1"
@@ -50,7 +50,7 @@
   ],
   "husky": {
     "hooks": {
-     "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {

packages/simplebar-react/rollup.config.js

@@ -2,7 +2,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import license from 'rollup-plugin-license';
-import { uglify } from 'rollup-plugin-uglify';
+import { terser } from 'rollup-plugin-terser';
 import pkg from './package.json';
 
 const banner = {
@@ -37,7 +37,7 @@ export default [
       }),
       resolve(), // so Rollup can find dependencies
       commonjs(), // so Rollup can convert dependencies to an ES module
-      uglify(),
+      terser(),
       license(banner)
     ]
   },

packages/simplebar-vue/rollup.config.js

@@ -2,7 +2,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import license from 'rollup-plugin-license';
 import babel from 'rollup-plugin-babel';
-import { uglify } from 'rollup-plugin-uglify';
+import { terser } from 'rollup-plugin-terser';
 import vue from 'rollup-plugin-vue';
 import pkg from './package.json';
 
@@ -21,11 +21,11 @@ const external = [...Object.keys(pkg.dependencies), 'vue'];
 
 export default [
   {
-    input: "index.js",
+    input: 'index.js',
     output: {
-      name: "SimpleBar",
+      name: 'SimpleBar',
       file: pkg.main,
-      format: "umd"
+      format: 'umd'
     },
     external: external,
     plugins: [
@@ -36,16 +36,16 @@ export default [
         runtimeHelpers: true,
         extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue']
       }),
-      uglify(),
+      terser(),
       license(banner)
     ]
   },
   {
-    input: "index.js",
+    input: 'index.js',
     external: external,
     output: {
       file: pkg.module,
-      format: "esm"
+      format: 'esm'
     },
     plugins: [
       vue(),

packages/simplebar/.babelrc

@@ -15,9 +15,13 @@
     "test": {
       "presets": [
         [
-          "@babel/preset-env"
+          "@babel/preset-env", {
+            "targets": {
+              "node": "current"
+            }
+          }
         ]
       ]
     }
   }
-}
+}

packages/simplebar/demo/browser/css/demo.css

@@ -83,6 +83,9 @@ p {
     padding: 10px;
     min-width: 230px;
     }
+    .demo1 p.odd:hover {
+      background: #666;
+    }
     .demo1 p.odd {
       background: #f0f0f0;
       }
@@ -149,6 +152,10 @@ p {
   height: 200px;
 }
 
+.demo-y-axis.simplebar-dragging .simplebar-scrollbar:before {
+  background-color: red;
+}
+
 .demo-both-axis .box,
 .demo-y-axis .box {
   width: 600px;

packages/simplebar/jest-puppeteer.config.js

@@ -1,9 +1,10 @@
 module.exports = {
     launch: {
         headless: process.env.CI === 'true',
+        devtools: process.env.CI === 'false'
     },
     server: {
         command: 'webpack-dev-server --port 8091 --mode=development',
-        port: 8091
+        port: 8091,
     }
-}
+}

packages/simplebar/rollup.config.js

@@ -2,7 +2,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import license from 'rollup-plugin-license';
-import { uglify } from 'rollup-plugin-uglify';
+import { terser } from 'rollup-plugin-terser';
 import pkg from './package.json';
 
 const licence = {
@@ -31,7 +31,7 @@ export default [
       }),
       resolve(), // so Rollup can find dependencies
       commonjs(), // so Rollup can convert dependencies to an ES module
-      uglify(),
+      terser(),
       license(licence)
     ]
   },
@@ -61,7 +61,13 @@ export default [
   // `file` and `format` for each target)
   {
     input: 'src/simplebar.js',
-    external: Object.keys(pkg.dependencies),
+    external: id => {
+      if (Object.keys(pkg.dependencies).find(dep => id === dep) || id.match(/(core-js).+/)) {
+        return true;
+      }
+
+      return false;
+    },
     output: {
       file: pkg.module,
       format: 'es',

packages/simplebar/src/simplebar.css

@@ -110,6 +110,10 @@
     pointer-events: none;
 }
 
+[data-simplebar].simplebar-dragging .simplebar-track {
+  pointer-events: all;
+}
+
 .simplebar-scrollbar {
     position: absolute;
     right: 2px;

packages/simplebar/src/simplebar.js

@@ -121,7 +121,8 @@ export default class SimpleBar {
       visible: 'simplebar-visible',
       horizontal: 'simplebar-horizontal',
       vertical: 'simplebar-vertical',
-      hover: 'simplebar-hover'
+      hover: 'simplebar-hover',
+      dragging: 'simplebar-dragging',
     },
     scrollbarMinSize: 25,
     scrollbarMaxSize: 0,
@@ -746,6 +747,8 @@ export default class SimpleBar {
       scrollbar.getBoundingClientRect()[this.axis[axis].offsetAttr];
     this.draggedAxis = axis;
 
+    this.el.classList.add(this.classNames.dragging);
+
     document.addEventListener('mousemove', this.drag);
     document.addEventListener('mouseup', this.onEndDrag);
   }
@@ -802,6 +805,8 @@ export default class SimpleBar {
     e.preventDefault();
     e.stopPropagation();
 
+    this.el.classList.remove(this.classNames.dragging);
+
     document.removeEventListener('mousemove', this.drag);
     document.removeEventListener('mouseup', this.onEndDrag);
   };

packages/simplebar/test/simplebar.test.e2e.js

@@ -36,4 +36,17 @@ describe('Load', () => {
     expect(isRtl).toBeTruthy();
     expect(transformStyle).toEqual(`translate3d(${ elBoundingBox.width - scrollbarElBoundingBox.width}px, 0px, 0px)`);
   });
+
+  it('should add class "dragging" when dragging', async () => {
+    const el = await expect(page).toMatchElement('#demo2');
+
+    await page.click('#demo2 .simplebar-track.simplebar-vertical .simplebar-scrollbar');
+    await page.mouse.down();
+
+    const isDragging = await page.evaluate(el => el.classList.contains('simplebar-dragging'), el);
+
+    expect(isDragging).toBeTruthy();
+  }, 999999);
 });
+
+// await jestPuppeteer.debug();