version 1.12.0

2026-06-13 01:22:27 +03:00 · 2020-04-05 16:21:56 +02:00
parent 8a9f312f12
commit a01273a3d3
43 changed files with 3796 additions and 3155 deletions
@@ -42,6 +42,7 @@ class OverlayScrollbarsComponent extends Component {
    }
    componentDidMount() {
        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
+        mergeHostClassNames(this._osInstance, this.props.className);
    }
    componentWillUnmount() {
        if (OverlayScrollbars.valid(this._osInstance)) {
@@ -52,11 +53,14 @@ class OverlayScrollbarsComponent extends Component {
    componentDidUpdate(prevProps) {
        if (OverlayScrollbars.valid(this._osInstance)) {
            this._osInstance.options(this.props.options);
+            if (prevProps.className !== this.props.className) {
+                mergeHostClassNames(this._osInstance, this.props.className);
+            }
        }
    }
    render() {
-        let _a = this.props, { options, extensions, children, className } = _a, divProps = __rest(_a, ["options", "extensions", "children", "className"]);
-        return (React.createElement("div", Object.assign({ className: `${className} os-host` }, divProps, { ref: this._osTargetRef }),
+        const _a = this.props, divProps = __rest(_a, ["options", "extensions", "children", "className"]);
+        return (React.createElement("div", Object.assign({ className: "os-host" }, divProps, { ref: this._osTargetRef }),
            React.createElement("div", { className: "os-resize-observer-host" }),
            React.createElement("div", { className: "os-padding" },
                React.createElement("div", { className: "os-viewport" },
@@ -70,6 +74,16 @@ class OverlayScrollbarsComponent extends Component {
            React.createElement("div", { className: "os-scrollbar-corner" })));
    }
 }
+function mergeHostClassNames(osInstance, className) {
+    if (OverlayScrollbars.valid(osInstance)) {
+        const { host } = osInstance.getElements();
+        const regex = new RegExp(`(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, "$|")}$`, 'g');
+        const osClassNames = host.className.split(' ')
+            .filter(name => name.match(regex))
+            .join(' ');
+        host.className = `${osClassNames} ${className || ''}`;
+    }
+}

 export { OverlayScrollbarsComponent };
 //# sourceMappingURL=overlayscrollbars-react.esm.js.map
@@ -2,10 +2,10 @@
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('overlayscrollbars')) :
    typeof define === 'function' && define.amd ? define(['exports', 'react', 'overlayscrollbars'], factory) :
    (global = global || self, factory(global.OverlayScrollbarsReact = {}, global.React, global.OverlayScrollbars));
-}(this, function (exports, React, OverlayScrollbars) { 'use strict';
+}(this, (function (exports, React, OverlayScrollbars) { 'use strict';

    var React__default = 'default' in React ? React['default'] : React;
-    OverlayScrollbars = OverlayScrollbars && OverlayScrollbars.hasOwnProperty('default') ? OverlayScrollbars['default'] : OverlayScrollbars;
+    OverlayScrollbars = OverlayScrollbars && Object.prototype.hasOwnProperty.call(OverlayScrollbars, 'default') ? OverlayScrollbars['default'] : OverlayScrollbars;

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
@@ -75,6 +75,7 @@
        };
        OverlayScrollbarsComponent.prototype.componentDidMount = function () {
            this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
+            mergeHostClassNames(this._osInstance, this.props.className);
        };
        OverlayScrollbarsComponent.prototype.componentWillUnmount = function () {
            if (OverlayScrollbars.valid(this._osInstance)) {
@@ -85,11 +86,14 @@
        OverlayScrollbarsComponent.prototype.componentDidUpdate = function (prevProps) {
            if (OverlayScrollbars.valid(this._osInstance)) {
                this._osInstance.options(this.props.options);
+                if (prevProps.className !== this.props.className) {
+                    mergeHostClassNames(this._osInstance, this.props.className);
+                }
            }
        };
        OverlayScrollbarsComponent.prototype.render = function () {
            var _a = this.props, options = _a.options, extensions = _a.extensions, children = _a.children, className = _a.className, divProps = __rest(_a, ["options", "extensions", "children", "className"]);
-            return (React__default.createElement("div", __assign({ className: className + " os-host" }, divProps, { ref: this._osTargetRef }),
+            return (React__default.createElement("div", __assign({ className: "os-host" }, divProps, { ref: this._osTargetRef }),
                React__default.createElement("div", { className: "os-resize-observer-host" }),
                React__default.createElement("div", { className: "os-padding" },
                    React__default.createElement("div", { className: "os-viewport" },
@@ -104,10 +108,20 @@
        };
        return OverlayScrollbarsComponent;
    }(React.Component));
+    function mergeHostClassNames(osInstance, className) {
+        if (OverlayScrollbars.valid(osInstance)) {
+            var host = osInstance.getElements().host;
+            var regex_1 = new RegExp("(^os-host([-_].+|)$)|" + osInstance.options().className.replace(/\s/g, "$|") + "$", 'g');
+            var osClassNames = host.className.split(' ')
+                .filter(function (name) { return name.match(regex_1); })
+                .join(' ');
+            host.className = osClassNames + " " + (className || '');
+        }
+    }

    exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;

    Object.defineProperty(exports, '__esModule', { value: true });

-}));
+})));
 //# sourceMappingURL=overlayscrollbars-react.js.map
@@ -8610,9 +8610,9 @@
      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
    },
    "overlayscrollbars": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.10.2.tgz",
-      "integrity": "sha512-xlT6CT9NziK8VegHjJRw9O2QrMDi7HTrmPD1ZGYCG0ukJwdsR5l6JnRBAr5NBfsRjnsJpxvGPraRKR17zeGEBg=="
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.11.0.tgz",
+      "integrity": "sha512-Wdzzfdta5/5Tc77FoibH14Cr34r7op0jh3eI9z1zvz9K4YiRIzNxvNIh3Rbezr8cs4Bn7NTNKzT8OHsJB58CxQ=="
    },
    "overlayscrollbars-react": {
      "version": "0.1.0",
@@ -9990,14 +9990,13 @@
      }
    },
    "react": {
-      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
-      "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.13.6"
+        "prop-types": "^15.6.2"
      }
    },
    "react-app-polyfill": {
@@ -10106,14 +10105,14 @@
      }
    },
    "react-dom": {
-      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
-      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2",
-        "scheduler": "^0.13.6"
+        "scheduler": "^0.19.1"
      }
    },
    "react-error-overlay": {
@@ -10676,9 +10675,9 @@
      }
    },
    "scheduler": {
-      "version": "0.13.6",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
-      "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
@@ -9,10 +9,10 @@
    "@types/overlayscrollbars": "^1.9.0",
    "@types/react": "16.8.23",
    "@types/react-dom": "16.8.5",
-    "overlayscrollbars": "^1.10.2",
+    "overlayscrollbars": "^1.11.0",
    "overlayscrollbars-react": "^0.1.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
    "react-scripts": "3.0.1",
    "typescript": ">=3.2.1 <3.5.0"
  },
@@ -303,4 +303,7 @@ img {
 .framework-logo {
  background: transparent url("assets/react.svg") no-repeat center center;
  background-size: 80%;
+}
+.custom-class-name-test {
+  background: rgba(0, 0, 0, 0.03);
 }
@@ -7,10 +7,12 @@ export interface AppState {
    loremList: Array<string>;
    componentContent: string;
    osComponentOptions: OverlayScrollbars.Options;
+    hasCustomClassName: boolean;
 }

 export default class App extends React.Component<any, AppState> {
    framework: string = 'React';
+    customClassName: string = 'custom-class-name-test'
    componentClass: string = 'OverlayScrollbarsComponent';
    loremIpsumLong: string = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
    loremIpsumMedium: string = 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.';
@@ -23,6 +25,7 @@ export default class App extends React.Component<any, AppState> {
        this.osComponentRef1 = React.createRef<OverlayScrollbarsComponent>();
        this.osComponentRef2 = React.createRef<OverlayScrollbarsComponent>();
        this.state = {
+            hasCustomClassName: false,
            componentContent: 'Lorem Ipsum',
            loremList: [],
            osComponentOptions: {
@@ -47,7 +50,7 @@ export default class App extends React.Component<any, AppState> {
        if (refArray) {
            for (let i = 0; i < refArray.length; i++) {
                if (refArray[i] && refArray[i].current) {
-                    let osInstance = refArray[i].current!.osInstance();
+                    const osInstance = refArray[i].current!.osInstance();
                    if (osInstance) {
                        osInstance.scrollStop().scroll({
                            x: Math.floor((Math.random() * osInstance.scroll().max.x) + 0),
@@ -61,6 +64,7 @@ export default class App extends React.Component<any, AppState> {

    onBtnChangeOptions() {
        this.setState({
+            hasCustomClassName: !this.state.hasCustomClassName,
            osComponentOptions: {
                resize: this.state.osComponentOptions.resize === 'both' ? 'none' : 'both',
                scrollbars: {
@@ -92,7 +96,7 @@ export default class App extends React.Component<any, AppState> {
    }

    randomIpsum(): string {
-        let loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
+        const loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
        return loremIpsums[Math.floor(Math.random() * loremIpsums.length)];
    }

@@ -139,7 +143,7 @@ export default class App extends React.Component<any, AppState> {
                            <OverlayScrollbarsComponent ref={this.osComponentRef1}
                                options={this.state.osComponentOptions}
                                style={{ maxHeight: '350px' }}
-                                className={`${this.framework} custom-class-name-test`}
+                                className={`${this.framework} ${this.state.hasCustomClassName ? this.customClassName : ''}`}
                            >
                                <div className="bonus-content">
                                    {this.state.componentContent}
@@ -148,7 +152,7 @@ export default class App extends React.Component<any, AppState> {
                                <OverlayScrollbarsComponent ref={this.osComponentRef2}
                                    options={this.state.osComponentOptions}
                                    style={{ maxHeight: '150px' }}
-                                    className="custom-class-name-test"
+                                    className={this.state.hasCustomClassName ? this.customClassName : ''}
                                >
                                    <div className="bonus-content">
                                        {this.state.componentContent}
@@ -17,7 +17,7 @@
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve",
-        "strict": true
+        "strict": false
    },
    "include": [
        "src"
@@ -5,9 +5,9 @@
    "requires": true,
    "dependencies": {
        "@types/estree": {
-            "version": "0.0.39",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
-            "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+            "version": "0.0.44",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.44.tgz",
+            "integrity": "sha512-iaIVzr+w2ZJ5HkidlZ3EJM8VTZb2MJLCjw3V+505yVts0gRC4UMvjw0d1HPtGqI/HQC/KdsYtayfzl+AXY2R8g==",
            "dev": true
        },
        "@types/node": {
@@ -23,15 +23,15 @@
            "dev": true
        },
        "@types/prop-types": {
-            "version": "15.7.1",
-            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
-            "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==",
+            "version": "15.7.3",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+            "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
            "dev": true
        },
        "@types/react": {
-            "version": "16.8.24",
-            "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.24.tgz",
-            "integrity": "sha512-VpFHUoD37YNY2+lr/+c7qL/tZsIU/bKuskUF3tmGUArbxIcQdb5j3zvo4cuuzu2A6UaVmVn7sJ4PgWYNFEBGzg==",
+            "version": "16.9.27",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.27.tgz",
+            "integrity": "sha512-j+RvQb9w7a2kZFBOgTh+s/elCwtqWUMN6RJNdmz0ntmwpeoMHKnyhUcmYBu7Yw94Rtj9938D+TJSn6WGcq2+OA==",
            "dev": true,
            "requires": {
                "@types/prop-types": "*",
@@ -54,9 +54,9 @@
            "dev": true
        },
        "acorn": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz",
-            "integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==",
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+            "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
            "dev": true
        },
        "ansi-colors": {
@@ -585,9 +585,9 @@
            "dev": true
        },
        "commander": {
-            "version": "2.20.0",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-            "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
+            "version": "2.20.3",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
            "dev": true
        },
        "component-emitter": {
@@ -656,9 +656,9 @@
            "dev": true
        },
        "csstype": {
-            "version": "2.6.6",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
-            "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==",
+            "version": "2.6.10",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
+            "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==",
            "dev": true
        },
        "d": {
@@ -693,9 +693,9 @@
            "dev": true
        },
        "deepmerge": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.0.0.tgz",
-            "integrity": "sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww==",
+            "version": "4.2.2",
+            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+            "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
            "dev": true
        },
        "default-compare": {
@@ -1858,14 +1858,14 @@
            }
        },
        "gulp-json-editor": {
-            "version": "2.5.3",
-            "resolved": "https://registry.npmjs.org/gulp-json-editor/-/gulp-json-editor-2.5.3.tgz",
-            "integrity": "sha512-lggh9luuj3x6TBQX+OLeGE1+QPvCKa0/p0oEEdHcmgRsQgqnp1iMlc29FIcLGWMOacRL/O6PPyY7pvywuKAWuQ==",
+            "version": "2.5.4",
+            "resolved": "https://registry.npmjs.org/gulp-json-editor/-/gulp-json-editor-2.5.4.tgz",
+            "integrity": "sha512-3IdMYsSACfLFYipet9Rmpag7PEU059KnR6TWgfuAfz+ftyzN8yaEvf9vXAD5b9K9v711Ymcpqe6vWGQYfQJ/uQ==",
            "dev": true,
            "requires": {
-                "deepmerge": "^4.0.0",
+                "deepmerge": "^4.2.1",
                "detect-indent": "^6.0.0",
-                "js-beautify": "^1.10.1",
+                "js-beautify": "^1.10.2",
                "plugin-error": "^1.0.1",
                "through2": "^3.0.1"
            },
@@ -2145,12 +2145,20 @@
            }
        },
        "is-reference": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.3.tgz",
-            "integrity": "sha512-W1iHHv/oyBb2pPxkBxtaewxa1BC58Pn5J0hogyCdefwUIvb6R+TGbAcIa4qPNYLqLhb3EnOgUf2MQkkF76BcKw==",
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.4.tgz",
+            "integrity": "sha512-uJA/CDPO3Tao3GTrxYn6AwkM4nUPJiGGYu5+cB8qbC7WGFlrKZbiRo7SFKxUAEpFUfiHofWCXBUNhvYJMh+6zw==",
            "dev": true,
            "requires": {
                "@types/estree": "0.0.39"
+            },
+            "dependencies": {
+                "@types/estree": {
+                    "version": "0.0.39",
+                    "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+                    "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+                    "dev": true
+                }
            }
        },
        "is-relative": {
@@ -2208,9 +2216,9 @@
            "dev": true
        },
        "js-beautify": {
-            "version": "1.10.1",
-            "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.1.tgz",
-            "integrity": "sha512-4y8SHOIRC+/YQ2gs3zJEKBUraQerq49FJYyXRpdzUGYQzCq8q9xtIh0YXial1S5KmonVui4aiUb6XaGyjE51XA==",
+            "version": "1.10.3",
+            "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.3.tgz",
+            "integrity": "sha512-wfk/IAWobz1TfApSdivH5PJ0miIHgDoYb1ugSqHcODPmaYu46rYe5FVuIEkhjg8IQiv6rDNPyhsqbsohI/C2vQ==",
            "dev": true,
            "requires": {
                "config-chain": "^1.1.12",
@@ -2339,9 +2347,9 @@
            }
        },
        "magic-string": {
-            "version": "0.25.3",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
-            "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==",
+            "version": "0.25.7",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+            "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
            "dev": true,
            "requires": {
                "sourcemap-codec": "^1.4.4"
@@ -2437,9 +2445,9 @@
            }
        },
        "minimist": {
-            "version": "0.0.8",
-            "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-            "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+            "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
            "dev": true
        },
        "mixin-deep": {
@@ -2464,12 +2472,12 @@
            }
        },
        "mkdirp": {
-            "version": "0.5.1",
-            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-            "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+            "version": "0.5.4",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
+            "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
            "dev": true,
            "requires": {
-                "minimist": "0.0.8"
+                "minimist": "^1.2.5"
            }
        },
        "ms": {
@@ -2517,9 +2525,9 @@
            "dev": true
        },
        "nopt": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
-            "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+            "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
            "dev": true,
            "requires": {
                "abbrev": "1",
@@ -2717,9 +2725,9 @@
            }
        },
        "overlayscrollbars": {
-            "version": "1.9.0",
-            "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.9.0.tgz",
-            "integrity": "sha512-KV4ms57rku5ZjZdjoVc4psEEDT7ntU8jIC08t1ZNO5DOkvcaiVNjb8IsKdbG2vPMHGFXtTE3bP2zaho+aiivUA==",
+            "version": "1.11.0",
+            "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.11.0.tgz",
+            "integrity": "sha512-Wdzzfdta5/5Tc77FoibH14Cr34r7op0jh3eI9z1zvz9K4YiRIzNxvNIh3Rbezr8cs4Bn7NTNKzT8OHsJB58CxQ==",
            "dev": true
        },
        "parse-filepath": {
@@ -2909,21 +2917,20 @@
            }
        },
        "react": {
-            "version": "16.8.6",
-            "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
-            "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+            "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
            "dev": true,
            "requires": {
                "loose-envify": "^1.1.0",
                "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2",
-                "scheduler": "^0.13.6"
+                "prop-types": "^15.6.2"
            }
        },
        "react-is": {
-            "version": "16.8.6",
-            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
-            "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==",
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
            "dev": true
        },
        "read-pkg": {
@@ -3101,20 +3108,20 @@
            "dev": true
        },
        "rollup": {
-            "version": "1.18.0",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.18.0.tgz",
-            "integrity": "sha512-MBAWr6ectF948gW/bs/yfi0jW7DzwI8n0tEYG/ZMQutmK+blF/Oazyhg3oPqtScCGV8bzCtL9KzlzPtTriEOJA==",
+            "version": "1.32.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz",
+            "integrity": "sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==",
            "dev": true,
            "requires": {
-                "@types/estree": "0.0.39",
-                "@types/node": "^12.6.3",
-                "acorn": "^6.2.0"
+                "@types/estree": "*",
+                "@types/node": "*",
+                "acorn": "^7.1.0"
            }
        },
        "rollup-plugin-commonjs": {
-            "version": "10.0.1",
-            "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.0.1.tgz",
-            "integrity": "sha512-x0PcCVdEc4J8igv1qe2vttz8JKAKcTs3wfIA3L8xEty3VzxgORLrzZrNWaVMc+pBC4U3aDOb9BnWLAQ8J11vkA==",
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz",
+            "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==",
            "dev": true,
            "requires": {
                "estree-walker": "^0.6.1",
@@ -3184,16 +3191,6 @@
                "ret": "~0.1.10"
            }
        },
-        "scheduler": {
-            "version": "0.13.6",
-            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
-            "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
-            "dev": true,
-            "requires": {
-                "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1"
-            }
-        },
        "semver": {
            "version": "5.7.0",
            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
@@ -3388,9 +3385,9 @@
            "dev": true
        },
        "sourcemap-codec": {
-            "version": "1.4.6",
-            "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz",
-            "integrity": "sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==",
+            "version": "1.4.8",
+            "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
            "dev": true
        },
        "sparkles": {
@@ -3642,9 +3639,9 @@
            "dev": true
        },
        "typescript": {
-            "version": "3.5.3",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz",
-            "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==",
+            "version": "3.8.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+            "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
            "dev": true
        },
        "unc-path-regex": {
@@ -18,7 +18,6 @@
    "bugs": {
        "url": "https://github.com/KingSora/OverlayScrollbars/issues"
    },
-    "browser": "./dist/overlayscrollbars-react.js",
    "main": "./dist/overlayscrollbars-react.js",
    "module": "./dist/overlayscrollbars-react.esm.js",
    "typings": "./dist/types/index.d.ts",
@@ -26,18 +25,18 @@
    "license": "MIT",
    "devDependencies": {
        "@types/overlayscrollbars": "^1.9.0",
-        "@types/react": "^16.4.0",
+        "@types/react": "^16.9.27",
        "chalk": "^2.4.2",
        "gulp": "^4.0.2",
-        "gulp-json-editor": "^2.5.2",
-        "overlayscrollbars": "^1.9.0",
-        "react": "^16.4.0",
-        "rollup": "^1.17.0",
-        "rollup-plugin-commonjs": "^10.0.1",
+        "gulp-json-editor": "^2.5.4",
+        "overlayscrollbars": "^1.11.0",
+        "react": "^16.13.1",
+        "rollup": "^1.32.1",
+        "rollup-plugin-commonjs": "^10.1.0",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-typescript2": "^0.22.0",
        "shelljs": "^0.8.3",
-        "typescript": "^3.0.3"
+        "typescript": "^3.8.3"
    },
    "peerDependencies": {
        "react": "^16.4.0",
@@ -27,6 +27,7 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo

    componentDidMount() {
        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);
+        mergeHostClassNames(this._osInstance, this.props.className);
    }

    componentWillUnmount() {
@@ -39,11 +40,15 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo
    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {
        if (OverlayScrollbars.valid(this._osInstance)) {
            this._osInstance.options(this.props.options);
+
+            if (prevProps.className !== this.props.className) {
+                mergeHostClassNames(this._osInstance, this.props.className);
+            }
        }
    }

    render() {
-        let {
+        const {
            options,
            extensions,
            children,
@@ -52,12 +57,12 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo
        } = this.props;

        return (
-            <div className={`${className} os-host`} {...divProps} ref={this._osTargetRef}>
+            <div className="os-host" {...divProps} ref={this._osTargetRef}>
                <div className="os-resize-observer-host"></div>
                <div className="os-padding">
                    <div className="os-viewport">
                        <div className="os-content">
-                            {...this.props.children}
+                            {this.props.children}
                        </div>
                    </div>
                </div>
@@ -75,4 +80,16 @@ export class OverlayScrollbarsComponent extends Component<OverlayScrollbarsCompo
            </div>
        );
    }
+}
+
+function mergeHostClassNames(osInstance: OverlayScrollbars, className: string) {
+    if (OverlayScrollbars.valid(osInstance)) {
+        const { host } = osInstance.getElements();
+        const regex = new RegExp(`(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, "$|")}$`, 'g');
+        const osClassNames = host.className.split(' ')
+            .filter(name => name.match(regex))
+            .join(' ');
+
+        host.className = `${osClassNames} ${className || ''}`;
+    }
 }