[Tabs] use inlined ScrollbarSize implementation (#18)

* [Tabs] use inlined ScrollbarSize implementation

* [Tabs] fix linter errs

* [docs] apply babel-preset-env to SVG imports

* [Tabs] fix unit test

Author: petermikitsh

package-lock.json

@@ -38,8 +38,9 @@
   "dependencies": {
     "@babel/runtime": "7.0.0",
     "classnames": "2.2.6",
+    "debounce": "1.2.0",
     "material-design-icons": "3.0.1",
-    "react-scrollbar-size": "2.1.0",
+    "react-event-listener": "0.6.4",
     "react-transition-group": "1.2.1",
     "tinycolor2": "1.4.1"
   },

package.json

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import EventListener from 'react-event-listener';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
+
+const styles = {
+  width: 100,
+  height: 100,
+  position: 'absolute',
+  top: -10000,
+  overflow: 'scroll',
+  msOverflowStyle: 'scrollbar'
+};
+
+/**
+ * @ignore - internal component.
+ * The component is originates from https://github.com/STORIS/react-scrollbar-size.
+ * It has been moved into the core in order to minimize the bundle size.
+ */
+class ScrollbarSize extends React.Component {
+  handleResize = debounce(() => {
+    const {onChange} = this.props;
+
+    const prevHeight = this.scrollbarHeight;
+    const prevWidth = this.scrollbarWidth;
+    this.setMeasurements();
+    if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) {
+      onChange({scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth});
+    }
+  }, 166); // Corresponds to 10 frames at 60 Hz.
+
+  componentDidMount() {
+    this.setMeasurements();
+    this.props.onLoad({
+      scrollbarHeight: this.scrollbarHeight,
+      scrollbarWidth: this.scrollbarWidth
+    });
+  }
+
+  componentWillUnmount() {
+    this.handleResize.clear();
+  }
+
+  setMeasurements = () => {
+    const {nodeRef} = this;
+
+    if (!nodeRef) {
+      return;
+    }
+
+    this.scrollbarHeight = nodeRef.offsetHeight - nodeRef.clientHeight;
+    this.scrollbarWidth = nodeRef.offsetWidth - nodeRef.clientWidth;
+  };
+
+  render() {
+    const {onChange} = this.props;
+
+    return (
+      <div>
+        {onChange ? <EventListener target="window" onResize={this.handleResize}/> : null}
+        <div
+          style={styles}
+          ref={ref => {
+            this.nodeRef = ref;
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+ScrollbarSize.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onLoad: PropTypes.func.isRequired
+};
+
+export default ScrollbarSize;