upgrade perfect-scrollbar

- update CDN url
- simplify CSS import path
- update class names
- fix references to utility functions in Tabs component

assets/components/tabs/_tabs.css

@@ -183,13 +183,14 @@
       z-index: 1;
     }
 
-    .ps-scrollbar-x-rail {
+    .ps__scrollbar-x-rail {
       z-index: 5;
     }
 
     /* show scrollbar when focused */
-    .ps-focus .ps-scrollbar-x-rail {
-      opacity: 1;
+    .ps--focus {
+      .ps__scrollbar-x-rail { opacity: 1; }
+      .ps__scrollbar-x { outline-offset: 1px; }
     }
 
     /* left/right arrows when screen size is too small to fit all the tabs */

assets/components/tabs/index.css

@@ -1,2 +1,2 @@
-@import 'perfect-scrollbar/dist/css/perfect-scrollbar';
+@import 'perfect-scrollbar';
 @import '_tabs';

assets/components/tabs/index.js

@@ -129,7 +129,7 @@ Tabs.prototype.handleResize = function() {
         if (!this.props.isLoadingPs) {
           // Load the 'perfect-scrollbar' library then setup the overflow behaviour
           this.props.isLoadingPs = true;
-          window.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/js/min/perfect-scrollbar.min.js')
+          utils.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.7.0/js/perfect-scrollbar.min.js')
             .then(this.setupOverflow.bind(this));
         }
       } else {
@@ -142,7 +142,7 @@ Tabs.prototype.handleResize = function() {
     }
   } else if (isOverflowing && this.props.isOverflowSetup) {
     // If initialised and still overflowing, only update the horizontal scrollbar and scroll to the selected tab
-    Ps.update(this.props.inner);
+    window.Ps.update(this.props.inner);
     this.scrollToTab(this.el.querySelector('[data-current]'), true);
   }
 };
@@ -202,7 +202,7 @@ Tabs.prototype.activateOverflow = function(smooth) {
   this.props.navParent.classList.add('overflow');
 
   // Initialise the scrollbar
-  Ps.initialize(this.props.inner, {
+  window.Ps.initialize(this.props.inner, {
     useBothWheelAxes: true,
     wheelPropagation: true
   });
@@ -216,7 +216,7 @@ Tabs.prototype.activateOverflow = function(smooth) {
  */
 Tabs.prototype.destroyOverflow = function() {
   this.props.navParent.classList.remove('overflow');
-  Ps.destroy(this.props.inner);
+  window.Ps.destroy(this.props.inner);
 };
 
 /**
@@ -395,20 +395,20 @@ Tabs.prototype.scrollTabs = function(to, smooth) {
     this.animateTabsScroll(0, start, change, duration, increment);
   } else {
     this.props.inner.scrollLeft = to;
-    Ps.update(this.props.inner);
+    window.Ps.update(this.props.inner);
   }
 };
 
 Tabs.prototype.animateTabsScroll = function(curr, start, change, duration, increment) {
   curr += increment;
-  this.props.inner.scrollLeft = Math.easeInOutQuad(curr, start, change, duration);
+  this.props.inner.scrollLeft = utils.easeInOutQuad(curr, start, change, duration);
 
   if (curr < duration) {
     setTimeout(this.animateTabsScroll.bind(this, curr, start, change, duration, increment), increment);
   } else {
     // If the tabs are still overflowing when the scrolling ends, update the scrollbars
     if (this.props.isOverflowing) {
-      Ps.update(this.props.inner);
+      window.Ps.update(this.props.inner);
     }
   }
 };

package.json

@@ -23,7 +23,7 @@
     "just-debounce": "^1.0.0",
     "locale-compare-polyfill": "~0.0.2",
     "normalize.css": "^5.0.0",
-    "perfect-scrollbar": "^0.6.10",
+    "perfect-scrollbar": "^0.7.0",
     "photoswipe": "^4.1.1",
     "string-hash": "^1.1.3",
     "webfontloader": "~1.6.3"

yarn.lock

@@ -2595,9 +2595,9 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-perfect-scrollbar@^0.6.10:
-  version "0.6.16"
-  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-0.6.16.tgz#b1d61a5245cf3962bb9a8407a3fc669d923212fc"
+perfect-scrollbar@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-0.7.0.tgz#85280682cb61ee90f8c0786c9ca5b704471ece1a"
 
 performance-now@^0.2.0:
   version "0.2.0"