improvements

.eslintrc.js

@@ -31,12 +31,15 @@ module.exports = {
     'no-continue': 'off',
     'no-param-reassign': 'off',
     'no-nested-ternary': 'off',
+    'no-underscore-dangle': 'off',
+    'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
     'no-console': ['error', { allow: ['warn', 'error'] }],
     'no-empty': ['error', { allowEmptyCatch: true }],
     'no-cond-assign': ['error', 'except-parens'],
     camelcase: ['error', { allow: ['^__', '^UNSAFE_'] }],
     'consistent-return': 'off',
     'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',

.prettierrc

@@ -6,6 +6,7 @@
   "jsxBracketSameLine": true,
   "arrowParens": "always",
   "endOfLine": "lf",
+  "parser": "babel",
   "overrides": [
     {
       "files": "*.vue",

jest.config.js

@@ -3,7 +3,7 @@ const resolve = require('./resolve.config');
 // For a detailed explanation regarding each configuration property, visit:
 // https://jestjs.io/docs/en/configuration.html
 
-module.exports = {
+const base = {
   clearMocks: true,
   collectCoverage: true,
   coverageDirectory: 'coverage',
@@ -12,3 +12,32 @@ module.exports = {
   testPathIgnorePatterns: ['\\\\node_modules\\\\'],
   verbose: true,
 };
+
+module.exports = {
+  projects: [
+    {
+      ...base,
+      displayName: 'jsdom',
+    },
+    // {
+    //   ...base,
+    //   displayName: 'puppeteer',
+    //   globalSetup: './puppeteer.setup.js',
+    //   globalTeardown: './puppeteer.teardown.js',
+    //   testEnvironment: './puppeteer.env.js',
+    //   testMatch: ['**/tests/puppeteer/**/*.[jt]s?(x)'],
+    //   transform: {
+    //     '^.+\\.[jt]sx?$': 'babel-jest',
+    //     '^.+\\.html?$': './jest.html.loader.js',
+    //   },
+    //   globals: {
+    //     async createPage(glob, html, funcs) {
+    //       const page = await glob.__BROWSER__.newPage();
+    //       await page.exposeFunction('evalVar', funcs);
+    //       await page.setContent(fs.readFileSync('./puppeteer.html', 'utf8').replace('{{content}}', html));
+    //       return page;
+    //     },
+    //   },
+    // },
+  ],
+};

package.json

@@ -13,9 +13,12 @@
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-typescript": "^5.0.2",
     "@types/jest": "^25.2.3",
+    "@types/puppeteer": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
     "babel-jest": "^26.0.1",
+    "bufferutil": "^4.0.1",
+    "canvas": "^2.6.1",
     "del": "^5.1.0",
     "eslint": "^7.5.0",
     "eslint-config-airbnb": "^18.2.0",
@@ -28,15 +31,20 @@
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
     "jest": "^26.0.1",
+    "mkdirp": "^1.0.4",
+    "prettier": "^2.0.5",
     "prettier-eslint": "^11.0.0",
+    "puppeteer": "^5.2.1",
     "rollup": "^2.22.1",
+    "rollup-plugin-prettier": "^2.1.0",
     "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-typescript2": "^0.27.1",
     "tslib": "^2.0.0",
-    "typescript": "^3.9.7"
+    "typescript": "^3.9.7",
+    "utf-8-validate": "^5.0.2"
   },
   "scripts": {
-    "test": "jest --coverage",
+    "test": "jest --coverage --runInBand --detectOpenHandles",
     "build": "npx rollup -c --config-project='overlayscrollbars' && npx rollup -c --config-project='overlayscrollbars-jquery'",
     "lint": "npx eslint --fix ."
   }

packages/overlayscrollbars-jquery/dist/overlayscrollbars-jquery.esm.js

@@ -3,7 +3,7 @@ import j from 'jquery';
 var abc = 'abc';
 const a = 1 + 1;
 var file = {
-  a
+  a,
 };
 const a$1 = 'a';
 const b = 'b';

packages/overlayscrollbars-jquery/dist/overlayscrollbars-jquery.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayscrollbars-jquery.esm.js","sources":["../src/dir/abc.js","../src/file.js","../src/test.js","../src/index.js"],"sourcesContent":["export default 'abc';\n","const a = 1 + 1;\nexport default {\n  a,\n};\n","export const a = 'a';\nexport const b = 'b';\nexport const c = 'c';\n","import abc from 'dir/abc';\nimport not from 'dir/not.png';\nimport file from 'file';\nimport j from 'jquery';\nimport { a, b, c } from 'test';\n\nexport default j('div');\nexport { a, b, c, file, abc, not };\n"],"names":["a","b","c","j"],"mappings":";;AAAA,UAAe,KAAf;ACAA,MAAMA,CAAC,GAAG,IAAI,CAAd;AACA,WAAe;AACbA,EAAAA;AADa,CAAf;ACDY,MAACA,GAAC,GAAG,GAAL;AACA,MAACC,CAAC,GAAG,GAAL;AACA,MAACC,CAAC,GAAG,GAAL;ACIZ,YAAeC,CAAC,CAAC,KAAD,CAAhB;;"}
+{"version":3,"file":"overlayscrollbars-jquery.esm.js","sources":["../src/dir/abc.js","../src/file.js","../src/test.js","../src/index.js"],"sourcesContent":["export default 'abc';\r\n","const a = 1 + 1;\r\nexport default {\r\n  a,\r\n};\r\n","export const a = 'a';\r\nexport const b = 'b';\r\nexport const c = 'c';\r\n","import abc from 'dir/abc';\r\nimport not from 'dir/not.png';\r\nimport file from 'file';\r\nimport j from 'jquery';\r\nimport { a, b, c } from 'test';\r\n\r\nexport default j('div');\r\nexport { a, b, c, file, abc, not };\r\n"],"names":["a","b","c","j"],"mappings":";;AAAA,UAAe,KAAf;ACAA,MAAMA,CAAC,GAAG,IAAI,CAAd;AACA,WAAe;AACbA,EAAAA;AADa,CAAf;ACDY,MAACA,GAAC,GAAG,GAAL;AACA,MAACC,CAAC,GAAG,GAAL;AACA,MAACC,CAAC,GAAG,GAAL;ACIZ,YAAeC,CAAC,CAAC,KAAD,CAAhB;;;"}

packages/overlayscrollbars-jquery/dist/overlayscrollbars-jquery.js

@@ -1,48 +1,32 @@
 (function (global, factory) {
-  if (typeof define === "function" && define.amd) {
+  typeof exports === 'object' && typeof module !== 'undefined'
-    define("OverlayScrollbars", ["exports", "dir/not.png", "jquery"], factory);
+    ? factory(exports, require('dir/not.png'), require('jquery'))
-  } else if (typeof exports !== "undefined") {
+    : typeof define === 'function' && define.amd
-    factory(exports, require("dir/not.png"), require("jquery"));
+    ? define(['exports', 'dir/not.png', 'jquery'], factory)
-  } else {
+    : ((global = global || self), factory((global.OverlayScrollbars = {}), global.not_png, global.jQuery));
-    var mod = {
+})(this, function (exports, not_png, j) {
-      exports: {}
+  'use strict';
-    };
-    factory(mod.exports, global.not, global.jQuery);
-    global.OverlayScrollbars = mod.exports;
-  }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _not, _jquery) {
-  "use strict";
-
-  Object.defineProperty(_exports, "__esModule", {
-    value: true
-  });
-  Object.defineProperty(_exports, "not", {
-    enumerable: true,
-    get: function get() {
-      return _not.default;
-    }
-  });
-  _exports.file = _exports.c = _exports.b = _exports.abc = _exports.a = _exports.default = void 0;
-  _not = _interopRequireDefault(_not);
-  _jquery = _interopRequireDefault(_jquery);
-
-  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+  not_png = not_png && Object.prototype.hasOwnProperty.call(not_png, 'default') ? not_png['default'] : not_png;
+  j = j && Object.prototype.hasOwnProperty.call(j, 'default') ? j['default'] : j;
   var abc = 'abc';
-  _exports.abc = abc;
   var a = 1 + 1;
   var file = {
-    a: a
+    a: a,
   };
-  _exports.file = file;
   var a$1 = 'a';
-  _exports.a = a$1;
   var b = 'b';
-  _exports.b = b;
   var c = 'c';
-  _exports.c = c;
+  var index = j('div');
-  var index = (0, _jquery.default)('div');
+  exports.not = not_png;
-  var _default = index;
+  exports.a = a$1;
-  _exports.default = _default;
+  exports.abc = abc;
+  exports.b = b;
+  exports.c = c;
+  exports.default = index;
+  exports.file = file;
+  Object.defineProperty(exports, '__esModule', {
+    value: true,
+  });
 });
 //# sourceMappingURL=overlayscrollbars-jquery.js.map

packages/overlayscrollbars-jquery/dist/overlayscrollbars-jquery.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayscrollbars-jquery.js","sources":["../src/dir/abc.js","../src/file.js","../src/test.js","../src/index.js"],"sourcesContent":["export default 'abc';\n","const a = 1 + 1;\nexport default {\n  a,\n};\n","export const a = 'a';\nexport const b = 'b';\nexport const c = 'c';\n","import abc from 'dir/abc';\nimport not from 'dir/not.png';\nimport file from 'file';\nimport j from 'jquery';\nimport { a, b, c } from 'test';\n\nexport default j('div');\nexport { a, b, c, file, abc, not };\n"],"names":["a","b","c"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAe,KAAf;;ACAA,MAAMA,CAAC,GAAG,IAAI,CAAd;AACA,aAAe;AACbA,IAAAA,CAAC,EAADA;AADa,GAAf;;ACDY,MAACA,GAAC,GAAG,GAAL;;AACA,MAACC,CAAC,GAAG,GAAL;;AACA,MAACC,CAAC,GAAG,GAAL;;ACIZ,cAAe,qBAAE,KAAF,CAAf;"}
+{"version":3,"file":"overlayscrollbars-jquery.js","sources":["../src/dir/abc.js","../src/file.js","../src/test.js","../src/index.js"],"sourcesContent":["export default 'abc';\r\n","const a = 1 + 1;\r\nexport default {\r\n  a,\r\n};\r\n","export const a = 'a';\r\nexport const b = 'b';\r\nexport const c = 'c';\r\n","import abc from 'dir/abc';\r\nimport not from 'dir/not.png';\r\nimport file from 'file';\r\nimport j from 'jquery';\r\nimport { a, b, c } from 'test';\r\n\r\nexport default j('div');\r\nexport { a, b, c, file, abc, not };\r\n"],"names":["a","b","c","j"],"mappings":";;;;;;;;;;;YAAe;ACAf,MAAMA,CAAC,GAAG,IAAI,CAAd;aACe;AACbA,IAAAA,CAAC,EAADA;AADa;MCDFA,GAAC,GAAG;MACJC,CAAC,GAAG;MACJC,CAAC,GAAG;cCIFC,CAAC,CAAC,KAAD;;;;;;;;;;;;"}

packages/overlayscrollbars-jquery/dist/overlayscrollbars-jquery.min.js

@@ -1 +1 @@
-!function(e,r){if("function"==typeof define&&define.amd)define("OverlayScrollbars",["exports","dir/not.png","jquery"],r);else if("undefined"!=typeof exports)r(exports,require("dir/not.png"),require("jquery"));else{var t={exports:{}};r(t.exports,e.not,e.jQuery),e.OverlayScrollbars=t.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(e,r,t){function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"not",{enumerable:!0,get:function(){return r.default}}),e.file=e.c=e.b=e.abc=e.a=e.default=void 0,r=n(r),t=n(t);e.abc="abc";var f={a:2};e.file=f;e.a="a";e.b="b";e.c="c";var o=(0,t.default)("div");e.default=o}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("dir/not.png"),require("jquery")):"function"==typeof define&&define.amd?define(["exports","dir/not.png","jquery"],t):t((e=e||self).OverlayScrollbars={},e.not_png,e.jQuery)}(this,(function(e,t,r){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var o={a:2},n=(r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r)("div");e.not=t,e.a="a",e.abc="abc",e.b="b",e.c="c",e.default=n,e.file=o,Object.defineProperty(e,"__esModule",{value:!0})}));

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -12,10 +12,10 @@ function isArray(obj) {
 
 function isArrayLike(obj) {
   const length = !!obj && obj.length;
-  return isArray(obj) || !isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0;
+  return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
 }
 
-const keys = obj => obj ? Object.keys(obj) : [];
+const keys = (obj) => (obj ? Object.keys(obj) : []);
 
 function each(source, callback) {
   if (isArrayLike(source)) {
@@ -25,21 +25,19 @@ function each(source, callback) {
       }
     }
   } else if (source) {
-    each(keys(source), key => callback(source[key], key, source));
+    each(keys(source), (key) => callback(source[key], key, source));
   }
 
   return source;
 }
 
-const contents = elm => elm ? Array.from(elm.childNodes) : [];
+const contents = (elm) => (elm ? Array.from(elm.childNodes) : []);
 
-const removeElements = nodes => {
+const removeElements = (nodes) => {
   if (isArrayLike(nodes)) {
-    each(Array.from(nodes), e => removeElements(e));
+    each(Array.from(nodes), (e) => removeElements(e));
   } else if (nodes) {
-    const {
+    const { parentNode } = nodes;
-      parentNode
-    } = nodes;
 
     if (parentNode) {
       parentNode.removeChild(nodes);
@@ -49,25 +47,23 @@ const removeElements = nodes => {
 
 const createDiv = () => document.createElement('div');
 
-const createDOM = html => {
+const createDOM = (html) => {
   const createdDiv = createDiv();
   createdDiv.innerHTML = html.trim();
-  return each(contents(createdDiv), elm => removeElements(elm));
+  return each(contents(createdDiv), (elm) => removeElements(elm));
 };
 
 const abc = {
   a: 1,
   b: 1,
-  c: 1
+  c: 1,
 };
 
 var index = () => {
-  const {
+  const { a, b, c } = abc;
-    a,
+  return [
-    b,
+    createDOM(
-    c
+      '\
-  } = abc;
-  return [createDOM('\
     <div class="os-host">\
         <div class="os-resize-observer-host"></div>\
         <div class="os-padding">\
@@ -88,7 +84,12 @@ var index = () => {
             </div>\
         </div>\
         <div class="os-scrollbar-corner"></div>\
-    </div>'), a, b, c];
+    </div>'
+    ),
+    a,
+    b,
+    c,
+  ];
 };
 
 export default index;

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -1,22 +1,11 @@
 (function (global, factory) {
-  if (typeof define === "function" && define.amd) {
+  typeof exports === 'object' && typeof module !== 'undefined'
-    define("OverlayScrollbars", ["exports"], factory);
+    ? (module.exports = factory())
-  } else if (typeof exports !== "undefined") {
+    : typeof define === 'function' && define.amd
-    factory(exports);
+    ? define(factory)
-  } else {
+    : ((global = global || self), (global.OverlayScrollbars = factory()));
-    var mod = {
+})(this, function () {
-      exports: {}
+  'use strict';
-    };
-    factory(mod.exports);
-    global.OverlayScrollbars = mod.exports;
-  }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
-  "use strict";
-
-  Object.defineProperty(_exports, "__esModule", {
-    value: true
-  });
-  _exports.default = void 0;
 
   function isNumber(obj) {
     return typeof obj === 'number';
@@ -32,7 +21,7 @@
 
   function isArrayLike(obj) {
     var length = !!obj && obj.length;
-    return isArray(obj) || !isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0;
+    return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
   }
 
   var keys = function keys(obj) {
@@ -88,14 +77,16 @@
   var abc = {
     a: 1,
     b: 1,
-    c: 1
+    c: 1,
   };
 
   var index = function index() {
     var a = abc.a,
-        b = abc.b,
+      b = abc.b,
-        c = abc.c;
+      c = abc.c;
-    return [createDOM('\
+    return [
+      createDOM(
+        '\
     <div class="os-host">\
         <div class="os-resize-observer-host"></div>\
         <div class="os-padding">\
@@ -116,10 +107,14 @@
             </div>\
         </div>\
         <div class="os-scrollbar-corner"></div>\
-    </div>'), a, b, c];
+    </div>'
+      ),
+      a,
+      b,
+      c,
+    ];
   };
 
-  var _default = index;
+  return index;
-  _exports.default = _default;
 });
 //# sourceMappingURL=overlayscrollbars.js.map

packages/overlayscrollbars/dist/overlayscrollbars.min.js

@@ -1 +1 @@
-!function(r,e){if("function"==typeof define&&define.amd)define("OverlayScrollbars",["exports"],e);else if("undefined"!=typeof exports)e(exports);else{var o={exports:{}};e(o.exports),r.OverlayScrollbars=o.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(r){function e(r){var e=!!r&&r.length;return function(r){return Array.isArray(r)}(r)||!function(r){return"function"==typeof r}(r)&&function(r){return"number"==typeof r}(e)&&e>-1&&e%1==0}Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;function o(r,s){if(e(r))for(var i=0;i<r.length&&!1!==s(r[i],i,r);i++);else r&&o((n=r)?Object.keys(n):[],(function(e){return s(r[e],e,r)}));var n;return r}var s=function(r){var s,i=document.createElement("div");return i.innerHTML=r.trim(),o((s=i)?Array.from(s.childNodes):[],(function(r){return function r(s){if(e(s))o(Array.from(s),(function(e){return r(e)}));else if(s){var i=s.parentNode;i&&i.removeChild(s)}}(r)}))},i=1,n=1,l=1,t=function(){var r=i,e=n,o=l;return[s('    <div class="os-host">        <div class="os-resize-observer-host"></div>        <div class="os-padding">            <div class="os-viewport">                <div class="os-content">                    fdfhdfgh                </div>            </div>        </div>        <div class="os-scrollbar os-scrollbar-horizontal">            <div class="os-scrollbar-track">                <div class="os-scrollbar-handle"></div>            </div>        </div>        <div class="os-scrollbar os-scrollbar-vertical">            <div class="os-scrollbar-track">                <div class="os-scrollbar-handle"></div>            </div>        </div>        <div class="os-scrollbar-corner"></div>    </div>'),r,e,o]};r.default=t}));
+!function(r,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):(r=r||self).OverlayScrollbars=o()}(this,(function(){"use strict";function r(r){var o=!!r&&r.length;return function(r){return Array.isArray(r)}(r)||!function(r){return"function"==typeof r}(r)&&function(r){return"number"==typeof r}(o)&&o>-1&&o%1==0}function o(s,e){if(r(s))for(var n=0;n<s.length&&!1!==e(s[n],n,s);n++);else s&&o((i=s)?Object.keys(i):[],(function(r){return e(s[r],r,s)}));var i;return s}var s=function(s){var e,n=document.createElement("div");return n.innerHTML=s.trim(),o((e=n)?Array.from(e.childNodes):[],(function(s){return function s(e){if(r(e))o(Array.from(e),(function(r){return s(r)}));else if(e){var n=e.parentNode;n&&n.removeChild(e)}}(s)}))},e=1,n=1,i=1;return function(){var r=e,o=n,t=i;return[s('    <div class="os-host">        <div class="os-resize-observer-host"></div>        <div class="os-padding">            <div class="os-viewport">                <div class="os-content">                    fdfhdfgh                </div>            </div>        </div>        <div class="os-scrollbar os-scrollbar-horizontal">            <div class="os-scrollbar-track">                <div class="os-scrollbar-handle"></div>            </div>        </div>        <div class="os-scrollbar os-scrollbar-vertical">            <div class="os-scrollbar-track">                <div class="os-scrollbar-handle"></div>            </div>        </div>        <div class="os-scrollbar-corner"></div>    </div>'),r,o,t]}}));

packages/overlayscrollbars/src/core/compatibility/index.ts

@@ -1,3 +0,0 @@
-export * from 'core/compatibility/vendors';
-export * from 'core/compatibility/apis';
-export * from 'core/compatibility/events';

packages/overlayscrollbars/src/core/dom/attribute.ts

@@ -1,58 +0,0 @@
-/**
- * Gets or sets a attribute with the given attribute of the given element depending whether the value attribute is given.
- * Returns null if the element has no attribute with the given name.
- * @param elm The element of which the attribute shall be get or set.
- * @param attrName The attribute name which shall be get or set.
- * @param value The value of the attribute which shall be set.
- */
-export const attr = (elm: Element, attrName: string, value?: string): string | null | void => {
-  if (value === undefined) {
-    return elm.getAttribute(attrName);
-  }
-  elm.setAttribute(attrName, value);
-};
-
-/**
- * Removes the given attribute from the given element.
- * @param elm The element of which the attribute shall be removed.
- * @param attrName The attribute name.
- */
-export const removeAttr = (elm: Element, attrName: string): void => {
-  elm.removeAttribute(attrName);
-};
-
-/**
- * Gets or sets the scrollLeft value of the given element depending whether the value attribute is given.
- * @param elm The element of which the scrollLeft value shall be get or set.
- * @param value The scrollLeft value which shall be set.
- */
-export const scrollLeft = (elm: HTMLElement, value?: number): number | void => {
-  if (value === undefined) {
-    return elm.scrollLeft;
-  }
-  elm.scrollLeft = value;
-};
-
-/**
- * Gets or sets the scrollTop value of the given element depending whether the value attribute is given.
- * @param elm The element of which the scrollTop value shall be get or set.
- * @param value The scrollTop value which shall be set.
- */
-export const scrollTop = (elm: HTMLElement, value?: number): number | void => {
-  if (value === undefined) {
-    return elm.scrollTop;
-  }
-  elm.scrollTop = value;
-};
-
-/**
- * Gets or sets the value of the given input element depending whether the value attribute is given.
- * @param elm The input element of which the value shall be get or set.
- * @param value The value which shall be set.
- */
-export const val = (elm: HTMLInputElement, value?: string): string | void => {
-  if (value === undefined) {
-    return elm.value;
-  }
-  elm.value = value;
-};

packages/overlayscrollbars/src/core/dom/class.ts

@@ -1,58 +0,0 @@
-import { isString } from 'core/utils/types';
-
-const rnothtmlwhite = /[^\x20\t\r\n\f]+/g;
-
-/**
- * Check whether the given element has the given class name.
- * @param elm The element.
- * @param className The class name.
- */
-export const hasClass = (elm: Element, className: string): boolean => elm.classList.contains(className);
-
-/**
- * Adds the given class name(s) to the given element.
- * @param elm The element.
- * @param className The class name(s) which shall be added. (separated by spaces)
- */
-export const addClass = (elm: Element, className: string): void => {
-  let clazz: string;
-  let i = 0;
-
-  if (isString(className)) {
-    const classes: Array<string> = className.match(rnothtmlwhite) || [];
-    while ((clazz = classes[i++])) {
-      elm.classList.add(clazz);
-    }
-  }
-};
-
-/**
- * Removes the given class name(s) from the given element.
- * @param elm The element.
- * @param className The class name(s) which shall be removed. (separated by spaces)
- */
-export const removeClass = (elm: Element, className: string): void => {
-  let clazz: string;
-  let i = 0;
-
-  if (isString(className)) {
-    const classes: Array<string> = className.match(rnothtmlwhite) || [];
-    while ((clazz = classes[i++])) {
-      elm.classList.remove(clazz);
-    }
-  }
-};
-
-/**
- * Adds or removes the given class name(s) from the given element depending on the given condition.
- * Condition true means add class name(s), false means remove class name(s).
- * @param elm The element.
- * @param className The class name(s) which shall be added or removed. (separated by spaces)
- */
-export const conditionalClass = (elm: Element, className: string, condition: boolean): void => {
-  if (condition) {
-    addClass(elm, className);
-  } else {
-    removeClass(elm, className);
-  }
-};

packages/overlayscrollbars/src/core/dom/index.ts

@@ -1,7 +0,0 @@
-export * from 'core/dom/attribute';
-export * from 'core/dom/class';
-export * from 'core/dom/create';
-export * from 'core/dom/style';
-export * from 'core/dom/manipulation';
-export * from 'core/dom/offset';
-export * from 'core/dom/traversal';

packages/overlayscrollbars/src/core/dom/offset.ts

@@ -1,12 +0,0 @@
-export const offset = (elm: HTMLElement) => {
-  const rect = elm.getBoundingClientRect();
-  return {
-    top: rect.top + window.pageXOffset,
-    left: rect.left + window.pageYOffset,
-  };
-};
-
-export const position = (elm: HTMLElement) => ({
-  top: elm.offsetTop,
-  left: elm.offsetLeft,
-});

packages/overlayscrollbars/src/core/dom/style.ts

@@ -1,57 +0,0 @@
-import { each, keys } from 'core/utils';
-import { isString, isNumber, isUndefined } from 'core/utils/types';
-
-type cssStyleObj = { [key: string]: string | number };
-
-const cssNumber = {
-  animationIterationCount: true,
-  columnCount: true,
-  fillOpacity: true,
-  flexGrow: true,
-  flexShrink: true,
-  fontWeight: true,
-  lineHeight: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
-};
-
-const parseCSSVal = (prop: string, val: string | number): string | number =>
-  !cssNumber[prop.toLowerCase()] && isNumber(val) ? `${val}px` : val;
-
-const setCSSVal = (elm: HTMLElement, prop: string, val: string | number): void => {
-  try {
-    if (elm.style[prop] !== undefined) {
-      elm.style[prop] = parseCSSVal(prop, val);
-    }
-  } catch (e) {}
-};
-
-export function style(elm: HTMLElement, styles: string | cssStyleObj): string;
-export function style(elm: HTMLElement, styles: string | cssStyleObj, val: string | number): void;
-export function style(elm: HTMLElement, styles: string | cssStyleObj, val?: string | number): string | void {
-  const getCptStyle = window.getComputedStyle;
-
-  if (isString(styles)) {
-    if (isUndefined(val)) {
-      const cptStyle: CSSStyleDeclaration = getCptStyle(elm, null);
-
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=548397 can be null sometimes if iframe with display: none (firefox only!)
-      return cptStyle != null ? cptStyle.getPropertyValue(styles) : elm.style[styles];
-    }
-    setCSSVal(elm, styles, val);
-  } else {
-    each(keys(styles), (key) => setCSSVal(elm, key, styles[key]));
-  }
-}
-
-export const hide = (elm: HTMLElement): void => {
-  elm.style.display = 'none';
-};
-
-export const show = (elm: HTMLElement): void => {
-  elm.style.display = 'block';
-};

packages/overlayscrollbars/src/core/options/index.ts

@@ -1,2 +0,0 @@
-export * from 'core/options/validation';
-export * from 'core/options/transformation';

packages/overlayscrollbars/src/core/utils/index.ts

@@ -1,4 +0,0 @@
-export * from 'core/utils/array';
-export * from 'core/utils/object';
-export * from 'core/utils/extend';
-export * from 'core/utils/types';

packages/overlayscrollbars/src/index.ts

@@ -1,12 +1,4 @@
-import { createDOM } from 'core/dom';
+import { createDOM } from 'support/dom';
-
-/*
-export * from 'core/compatibility';
-export * from 'core/utils';
-export * from 'core/dom';
-export * from 'core/options';
-export * from 'instances';
-*/
 
 const abc = {
   a: 1,

packages/overlayscrollbars/src/options/index.ts

@@ -0,0 +1,100 @@
+export * from 'options/options';
+
+export type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
+
+export type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
+
+export type VisibilityBehavior = 'visible' | 'hidden' | 'auto';
+
+export type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
+
+export type ScrollBehavior = 'always' | 'ifneeded' | 'never';
+
+export type BasicEventCallback = (this: any) => void;
+
+export type ScrollEventCallback = (this: any, args?: UIEvent) => void;
+
+export type OverflowChangedCallback = (this: any, args?: OverflowChangedArgs) => void;
+
+export type OverflowAmountChangedCallback = (this: any, args?: OverflowAmountChangedArgs) => void;
+
+export type DirectionChangedCallback = (this: any, args?: DirectionChangedArgs) => void;
+
+export type SizeChangedCallback = (this: any, args?: SizeChangedArgs) => void;
+
+export type UpdatedCallback = (this: any, args?: UpdatedArgs) => void;
+
+export interface Options {
+  className?: string | null;
+  resize?: ResizeBehavior;
+  sizeAutoCapable?: boolean;
+  clipAlways?: boolean;
+  normalizeRTL?: boolean;
+  paddingAbsolute?: boolean;
+  autoUpdate?: boolean | null;
+  autoUpdateInterval?: number;
+  updateOnLoad?: string | ReadonlyArray<string> | null;
+  nativeScrollbarsOverlaid?: {
+    showNativeScrollbars?: boolean;
+    initialize?: boolean;
+  };
+  overflowBehavior?: {
+    x?: OverflowBehavior;
+    y?: OverflowBehavior;
+  };
+  scrollbars?: {
+    visibility?: VisibilityBehavior;
+    autoHide?: AutoHideBehavior;
+    autoHideDelay?: number;
+    dragScrolling?: boolean;
+    clickScrolling?: boolean;
+    touchSupport?: boolean;
+    snapHandle?: boolean;
+  };
+  textarea?: {
+    dynWidth?: boolean;
+    dynHeight?: boolean;
+    inheritedAttrs?: string | ReadonlyArray<string> | null;
+  };
+  callbacks?: {
+    onInitialized?: BasicEventCallback | null;
+    onInitializationWithdrawn?: BasicEventCallback | null;
+    onDestroyed?: BasicEventCallback | null;
+    onScrollStart?: ScrollEventCallback | null;
+    onScroll?: ScrollEventCallback | null;
+    onScrollStop?: ScrollEventCallback | null;
+    onOverflowChanged?: OverflowChangedCallback | null;
+    onOverflowAmountChanged?: OverflowAmountChangedCallback | null;
+    onDirectionChanged?: DirectionChangedCallback | null;
+    onContentSizeChanged?: SizeChangedCallback | null;
+    onHostSizeChanged?: SizeChangedCallback | null;
+    onUpdated?: UpdatedCallback | null;
+  };
+}
+
+export interface OverflowChangedArgs {
+  x: boolean;
+  y: boolean;
+  xScrollable: boolean;
+  yScrollable: boolean;
+  clipped: boolean;
+}
+
+export interface OverflowAmountChangedArgs {
+  x: number;
+  y: number;
+}
+
+export interface DirectionChangedArgs {
+  isRTL: number;
+  dir: string;
+}
+
+export interface SizeChangedArgs {
+  width: number;
+  height: number;
+}
+
+export interface UpdatedArgs {
+  forced: boolean;
+}

packages/overlayscrollbars/src/options/options.ts

@@ -1,6 +1,13 @@
-import { OptionsTemplate, OptionsTemplateValue, OptionsAndOptionsTemplateValue, OptionsAndOptionsTemplate, Func } from 'core/typings';
+import {
-import { optionsTemplateTypes as oTypes, transform } from 'core/options';
+  optionsTemplateTypes as oTypes,
-import { ResizeBehavior, OverflowBehavior, VisibilityBehavior, AutoHideBehavior, Options } from 'typings';
+  transform,
+  OptionsTemplate,
+  OptionsTemplateValue,
+  OptionsAndOptionsTemplateValue,
+  OptionsAndOptionsTemplate,
+  Func,
+} from 'support/options';
+import { ResizeBehavior, OverflowBehavior, VisibilityBehavior, AutoHideBehavior, Options } from 'options';
 
 const classNameAllowedValues: OptionsTemplateValue<string | null> = [oTypes.string, oTypes.null];
 const numberAllowedValues: OptionsTemplateValue<number> = oTypes.number;

packages/overlayscrollbars/src/support/compatibility/apis.ts

@@ -1,3 +1,3 @@
-import { jsAPI } from 'core/compatibility/vendors';
+import { jsAPI } from 'support/compatibility/vendors';
 
 export const resizeObserver: any | undefined = jsAPI('ResizeObserver');

packages/overlayscrollbars/src/support/compatibility/index.ts

@@ -0,0 +1,3 @@
+export * from 'support/compatibility/vendors';
+export * from 'support/compatibility/apis';
+export * from 'support/compatibility/events';

packages/overlayscrollbars/src/support/compatibility/vendors.ts

@@ -1,5 +1,5 @@
-import { each, hasOwnProperty } from 'core/utils';
+import { each, hasOwnProperty } from 'support/utils';
-import { createDiv } from 'core/dom';
+import { createDiv } from 'support/dom';
 
 const firstLetterToUpper = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1);
 const getDummyStyle = (): CSSStyleDeclaration => createDiv().style;

packages/overlayscrollbars/src/support/dom/attribute.ts

@@ -0,0 +1,73 @@
+import { isUndefined } from 'support/utils/types';
+
+type GetSetPropName = 'scrollLeft' | 'scrollTop' | 'value';
+
+function getSetProp(
+  topLeft: GetSetPropName,
+  fallback: number | string,
+  elm: HTMLElement | HTMLInputElement | null,
+  value?: number | string
+): number | string | void {
+  if (isUndefined(value)) {
+    return elm ? elm[topLeft] : fallback;
+  }
+  elm && (elm[topLeft] = value);
+}
+
+/**
+ * Gets or sets a attribute with the given attribute of the given element depending whether the value attribute is given.
+ * Returns null if the element has no attribute with the given name.
+ * @param elm The element of which the attribute shall be get or set.
+ * @param attrName The attribute name which shall be get or set.
+ * @param value The value of the attribute which shall be set.
+ */
+export function attr(elm: HTMLElement | null, attrName: string): string | null;
+export function attr(elm: HTMLElement | null, attrName: string, value: string): void;
+export function attr(elm: HTMLElement | null, attrName: string, value?: string): string | null | void {
+  if (isUndefined(value)) {
+    return elm ? elm.getAttribute(attrName) : null;
+  }
+  elm && elm.setAttribute(attrName, value);
+}
+
+/**
+ * Removes the given attribute from the given element.
+ * @param elm The element of which the attribute shall be removed.
+ * @param attrName The attribute name.
+ */
+export const removeAttr = (elm: Element | null, attrName: string): void => {
+  elm?.removeAttribute(attrName);
+};
+
+/**
+ * Gets or sets the scrollLeft value of the given element depending whether the value attribute is given.
+ * @param elm The element of which the scrollLeft value shall be get or set.
+ * @param value The scrollLeft value which shall be set.
+ */
+export function scrollLeft(elm: HTMLElement | null): number;
+export function scrollLeft(elm: HTMLElement | null, value: number): void;
+export function scrollLeft(elm: HTMLElement | null, value?: number): number | void {
+  return getSetProp('scrollLeft', 0, elm, value) as number;
+}
+
+/**
+ * Gets or sets the scrollTop value of the given element depending whether the value attribute is given.
+ * @param elm The element of which the scrollTop value shall be get or set.
+ * @param value The scrollTop value which shall be set.
+ */
+export function scrollTop(elm: HTMLElement | null): number;
+export function scrollTop(elm: HTMLElement | null, value: number): void;
+export function scrollTop(elm: HTMLElement | null, value?: number): number | void {
+  return getSetProp('scrollTop', 0, elm, value) as number;
+}
+
+/**
+ * Gets or sets the value of the given input element depending whether the value attribute is given.
+ * @param elm The input element of which the value shall be get or set.
+ * @param value The value which shall be set.
+ */
+export function val(elm: HTMLInputElement | null): string;
+export function val(elm: HTMLInputElement | null, value: string): void;
+export function val(elm: HTMLInputElement | null, value?: string): string | void {
+  return getSetProp('value', '', elm, value) as string;
+}

packages/overlayscrollbars/src/support/dom/class.ts

@@ -0,0 +1,43 @@
+import { isString } from 'support/utils/types';
+
+const rnothtmlwhite = /[^\x20\t\r\n\f]+/g;
+const classListAction = (elm: Element | null, className: string, action: (elmClassList: DOMTokenList, clazz: string) => boolean | void): boolean => {
+  let clazz: string;
+  let i = 0;
+  let result = false;
+
+  if (elm && isString(className)) {
+    const classes: Array<string> = className.match(rnothtmlwhite) || [];
+    result = classes.length > 0;
+    while ((clazz = classes[i++])) {
+      result = (action(elm.classList, clazz) as boolean) && result;
+    }
+  }
+  return result;
+};
+
+/**
+ * Check whether the given element has the given class name(s).
+ * @param elm The element.
+ * @param className The class name(s).
+ */
+export const hasClass = (elm: Element | null, className: string): boolean =>
+  classListAction(elm, className, (classList, clazz) => classList.contains(clazz));
+
+/**
+ * Adds the given class name(s) to the given element.
+ * @param elm The element.
+ * @param className The class name(s) which shall be added. (separated by spaces)
+ */
+export const addClass = (elm: Element | null, className: string): void => {
+  classListAction(elm, className, (classList, clazz) => classList.add(clazz));
+};
+
+/**
+ * Removes the given class name(s) from the given element.
+ * @param elm The element.
+ * @param className The class name(s) which shall be removed. (separated by spaces)
+ */
+export const removeClass = (elm: Element | null, className: string): void => {
+  classListAction(elm, className, (classList, clazz) => classList.remove(clazz));
+};

packages/overlayscrollbars/src/support/dom/create.ts

@@ -1,6 +1,6 @@
-import { each } from 'core/utils/array';
+import { each } from 'support/utils/array';
-import { contents } from 'core/dom/traversal';
+import { contents } from 'support/dom/traversal';
-import { removeElements } from 'core/dom/manipulation';
+import { removeElements } from 'support/dom/manipulation';
 
 export const createDiv = (): HTMLDivElement => document.createElement('div');
 

packages/overlayscrollbars/src/support/dom/events.ts

@@ -0,0 +1,6 @@
+export const on = (target: EventTarget, type: string, listener: EventListenerOrEventListenerObject | null, options: AddEventListenerOptions): void => {
+
+    
+
+    target.addEventListener(type, listener, options);
+};

packages/overlayscrollbars/src/support/dom/index.ts

@@ -0,0 +1,7 @@
+export * from 'support/dom/attribute';
+export * from 'support/dom/class';
+export * from 'support/dom/create';
+export * from 'support/dom/style';
+export * from 'support/dom/manipulation';
+export * from 'support/dom/offset';
+export * from 'support/dom/traversal';

packages/overlayscrollbars/src/support/dom/manipulation.ts

@@ -1,6 +1,6 @@
-import { isArrayLike } from 'core/utils/types';
+import { isArrayLike } from 'support/utils/types';
-import { each } from 'core/utils/array';
+import { each } from 'support/utils/array';
-import { parent } from 'core/dom/traversal';
+import { parent } from 'support/dom/traversal';
 
 type NodeCollection = ArrayLike<Node> | Node | undefined | null;
 

packages/overlayscrollbars/src/support/dom/offset.ts

@@ -0,0 +1,22 @@
+const zeroObj = {
+  left: 0,
+  top: 0,
+};
+
+export const offset = (elm: HTMLElement | null) => {
+  const rect = elm ? elm.getBoundingClientRect() : 0;
+  return rect
+    ? {
+        left: rect.left + window.pageYOffset,
+        top: rect.top + window.pageXOffset,
+      }
+    : zeroObj;
+};
+
+export const position = (elm: HTMLElement | null) =>
+  elm
+    ? {
+        left: elm.offsetLeft,
+        top: elm.offsetTop,
+      }
+    : zeroObj;

packages/overlayscrollbars/src/support/dom/style.ts

@@ -0,0 +1,63 @@
+import { each, keys } from 'support/utils';
+import { isString, isNumber, isArray } from 'support/utils/types';
+import { PlainObject } from 'typings';
+
+type CssStyles = { [key: string]: string | number };
+const cssNumber = {
+  animationiterationcount: 1,
+  columncount: 1,
+  fillopacity: 1,
+  flexgrow: 1,
+  flexshrink: 1,
+  fontweight: 1,
+  lineheight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  widows: 1,
+  zindex: 1,
+  zoom: 1,
+};
+
+const adaptCSSVal = (prop: string, val: string | number): string | number => (!cssNumber[prop.toLowerCase()] && isNumber(val) ? `${val}px` : val);
+const getCSSVal = (elm: HTMLElement, computedStyle: CSSStyleDeclaration, prop: string): string =>
+  /* istanbul ignore next */
+  computedStyle != null ? computedStyle.getPropertyValue(prop) : elm.style[prop];
+const setCSSVal = (elm: HTMLElement | null, prop: string, val: string | number): void => {
+  try {
+    if (elm && elm.style[prop] !== undefined) {
+      elm.style[prop] = adaptCSSVal(prop, val);
+    }
+  } catch (e) {}
+};
+
+export function style(elm: HTMLElement | null, styles: CssStyles): void;
+export function style(elm: HTMLElement | null, styles: string): string;
+export function style(elm: HTMLElement | null, styles: Array<string> | string): { [key: string]: string };
+export function style(elm: HTMLElement | null, styles: CssStyles | Array<string> | string): { [key: string]: string } | string | void {
+  const getSingleStyle = isString(styles);
+  const getStyles = isArray(styles) || getSingleStyle;
+
+  if (getStyles) {
+    let getStylesResult: string | PlainObject = getSingleStyle ? '' : {};
+    if (elm) {
+      const computedStyle: CSSStyleDeclaration = window.getComputedStyle(elm, null);
+      getStylesResult = getSingleStyle
+        ? getCSSVal(elm, computedStyle, styles as string)
+        : (styles as Array<string>).reduce((result, key) => {
+            result[key] = getCSSVal(elm, computedStyle, key as string);
+            return result;
+          }, getStylesResult);
+    }
+    return getStylesResult;
+  }
+  each(keys(styles), (key) => setCSSVal(elm, key, styles[key]));
+}
+
+export const hide = (elm: HTMLElement | null): void => {
+  style(elm, { display: 'none' });
+};
+
+export const show = (elm: HTMLElement | null): void => {
+  style(elm, { display: 'block' });
+};

packages/overlayscrollbars/src/support/dom/traversal.ts

@@ -1,4 +1,4 @@
-import { each } from 'core/utils/array';
+import { each } from 'support/utils/array';
 
 const elementIsVisible = (elm: HTMLElement): boolean => !!(elm.offsetWidth || elm.offsetHeight || elm.getClientRects().length);
 

packages/overlayscrollbars/src/support/index.ts

@@ -0,0 +1,4 @@
+export * from 'support/compatibility';
+export * from 'support/dom';
+export * from 'support/options';
+export * from 'support/utils';

packages/overlayscrollbars/src/support/options/index.ts

@@ -1,6 +1,8 @@
-export type PlainObject<T = any> = { [name: string]: T };
+import { PlainObject } from 'typings';
+
+export * from 'support/options/validation';
+export * from 'support/options/transformation';
 
-// Options Template Typings:
 export type Func = (this: any, ...args: any[]) => any;
 export type OptionsTemplateType<T extends OptionsTemplateNativeTypes> = ExtractPropsKey<OptionsTemplateTypeMap, T>;
 export type OptionsTemplateTypes = keyof OptionsTemplateTypeMap;
@@ -42,9 +44,9 @@ type OptionsTemplateTypeMap = {
   __TPL_null_TYPE__: null;
   __TPL_object_TYPE__: object; // eslint-disable-line @typescript-eslint/ban-types
 };
-type ExtractPropsKey<T, TProps extends T[keyof T]> = {
-  [P in keyof T]: TProps extends T[P] ? P : never;
-}[keyof T];
 type OptionsTemplateValueNonEnum<T extends OptionsTemplateNativeTypes> =
   | OptionsTemplateType<T>
   | [OptionsTemplateType<T>, ...Array<OptionsTemplateTypes>];
+type ExtractPropsKey<T, TProps extends T[keyof T]> = {
+    [P in keyof T]: TProps extends T[P] ? P : never;
+}[keyof T];

packages/overlayscrollbars/src/support/options/transformation.ts

@@ -1,6 +1,7 @@
-import { OptionsTemplate, OptionsAndOptionsTemplate, PlainObject, OptionsTemplateTypes } from 'core/typings';
+import { OptionsTemplate, OptionsAndOptionsTemplate, OptionsTemplateTypes } from 'support/options';
-import { isArray, isObject } from 'core/utils/types';
+import { PlainObject } from 'typings';
-import { each, keys } from 'core/utils';
+import { isArray, isObject } from 'support/utils/types';
+import { each, keys } from 'support/utils';
 
 /**
  * Transforms the given OptionsAndOptionsTemplate<T> object to its corresponding generic (T) Object or its corresponding Template object.
@@ -10,11 +11,11 @@ import { each, keys } from 'core/utils';
 export function transform<T extends Required<T>>(optionsWithOptionsTemplate: OptionsAndOptionsTemplate<T>): T;
 export function transform<T extends Required<T>>(
   optionsWithOptionsTemplate: OptionsAndOptionsTemplate<T>,
-  toTemplate: true | void,
+  toTemplate: true | void
 ): OptionsTemplate<T>;
 export function transform<T extends Required<T>>(
   optionsWithOptionsTemplate: OptionsAndOptionsTemplate<T>,
-  toTemplate?: true | void,
+  toTemplate?: true | void
 ): OptionsTemplate<T> | T {
   const result: any = {};
 

packages/overlayscrollbars/src/support/options/validation.ts

@@ -1,14 +1,7 @@
-import { each, indexOf, hasOwnProperty, keys } from 'core/utils';
+import { each, indexOf, hasOwnProperty, keys } from 'support/utils';
-import { type, isArray, isUndefined, isEmptyObject, isPlainObject, isString } from 'core/utils/types';
+import { type, isArray, isUndefined, isEmptyObject, isPlainObject, isString } from 'support/utils/types';
-import {
+import { OptionsTemplate, OptionsTemplateTypes, OptionsTemplateType, OptionsValidated, Func, OptionsValidatedResult } from 'support/options';
-  PlainObject,
+import { PlainObject } from 'typings';
-  OptionsTemplate,
-  OptionsTemplateTypes,
-  OptionsTemplateType,
-  OptionsValidated,
-  Func,
-  OptionsValidatedResult,
-} from 'core/typings';
 
 const { stringify } = JSON;
 
@@ -26,7 +19,7 @@ const optionsTemplateTypes: OptionsTemplateTypesDictionary = ['boolean', 'number
     result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];
     return result;
   },
-  {} as OptionsTemplateTypesDictionary,
+  {} as OptionsTemplateTypesDictionary
 );
 
 /**
@@ -52,7 +45,7 @@ const validateRecursive = <T extends PlainObject>(
   template: OptionsTemplate<Required<T>>,
   optionsDiff: OptionsValidated<T>,
   doWriteErrors?: boolean,
-  propPath?: string,
+  propPath?: string
 ): OptionsValidatedResult<T> => {
   const validatedOptions: OptionsValidated<T> = {};
   const optionsCopy: T = { ...options };
@@ -116,7 +109,7 @@ const validateRecursive = <T extends PlainObject>(
           `${
             `The option "${propPrefix}${prop}" wasn't set, because it doesn't accept the type [ ${optionsValueType.toUpperCase()} ] with the value of "${optionsValue}".\r\n` +
             `Accepted types are: [ ${errorPossibleTypes.join(', ').toUpperCase()} ].\r\n`
-          }${errorEnumStrings.length > 0 ? `\r\nValid strings are: [ ${errorEnumStrings.join(', ')} ].` : ''}`,
+          }${errorEnumStrings.length > 0 ? `\r\nValid strings are: [ ${errorEnumStrings.join(', ')} ].` : ''}`
         );
       }
 
@@ -151,7 +144,7 @@ const validate = <T extends PlainObject>(
   options: T,
   template: OptionsTemplate<Required<T>>,
   optionsDiff?: OptionsValidated<T>,
-  doWriteErrors?: boolean,
+  doWriteErrors?: boolean
 ): OptionsValidatedResult<T> => {
   /*
     if (!isEmptyObject(foreign) && doWriteErrors)

packages/overlayscrollbars/src/support/utils/array.ts

@@ -1,6 +1,6 @@
-import { keys } from 'core/utils/object';
+import { keys } from 'support/utils/object';
-import { isArrayLike } from 'core/utils/types';
+import { isArrayLike } from 'support/utils/types';
-import { PlainObject } from 'core/typings';
+import { PlainObject } from 'typings';
 
 /**
  * Iterates through a array or object

packages/overlayscrollbars/src/support/utils/extend.ts

@@ -1,6 +1,6 @@
-import { isArray, isFunction, isPlainObject, isNull } from 'core/utils/types';
+import { isArray, isFunction, isPlainObject, isNull } from 'support/utils/types';
-import { each } from 'core/utils/array';
+import { each } from 'support/utils/array';
-import { keys } from 'core/utils/object';
+import { keys } from 'support/utils/object';
 
 // https://github.com/jquery/jquery/blob/master/src/core.js#L116
 export function extend<T, U>(target: T, object1: U): T & U;

packages/overlayscrollbars/src/support/utils/index.ts

@@ -0,0 +1,4 @@
+export * from 'support/utils/array';
+export * from 'support/utils/object';
+export * from 'support/utils/extend';
+export * from 'support/utils/types';

packages/overlayscrollbars/src/support/utils/types.ts

@@ -1,4 +1,4 @@
-import { PlainObject } from 'core/typings';
+import { PlainObject } from 'typings';
 
 export const type: (obj: any) => string = (obj) => {
   if (obj === undefined) return `${obj}`;

packages/overlayscrollbars/src/typings.ts

@@ -1,101 +1,4 @@
-export type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
+export type PlainObject<T = any> = { [name: string]: T };
-
-export type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
-
-export type VisibilityBehavior = 'visible' | 'hidden' | 'auto';
-
-export type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
-
-export type ScrollBehavior = 'always' | 'ifneeded' | 'never';
-
-export type BasicEventCallback = (this: any) => void;
-
-export type ScrollEventCallback = (this: any, args?: UIEvent) => void;
-
-export type OverflowChangedCallback = (this: any, args?: OverflowChangedArgs) => void;
-
-export type OverflowAmountChangedCallback = (this: any, args?: OverflowAmountChangedArgs) => void;
-
-export type DirectionChangedCallback = (this: any, args?: DirectionChangedArgs) => void;
-
-export type SizeChangedCallback = (this: any, args?: SizeChangedArgs) => void;
-
-export type UpdatedCallback = (this: any, args?: UpdatedArgs) => void;
-
-export interface Options {
-  className?: string | null;
-  resize?: ResizeBehavior;
-  sizeAutoCapable?: boolean;
-  clipAlways?: boolean;
-  normalizeRTL?: boolean;
-  paddingAbsolute?: boolean;
-  autoUpdate?: boolean | null;
-  autoUpdateInterval?: number;
-  updateOnLoad?: string | ReadonlyArray<string> | null;
-  nativeScrollbarsOverlaid?: {
-    showNativeScrollbars?: boolean;
-    initialize?: boolean;
-  };
-  overflowBehavior?: {
-    x?: OverflowBehavior;
-    y?: OverflowBehavior;
-  };
-  scrollbars?: {
-    visibility?: VisibilityBehavior;
-    autoHide?: AutoHideBehavior;
-    autoHideDelay?: number;
-    dragScrolling?: boolean;
-    clickScrolling?: boolean;
-    touchSupport?: boolean;
-    snapHandle?: boolean;
-  };
-  textarea?: {
-    dynWidth?: boolean;
-    dynHeight?: boolean;
-    inheritedAttrs?: string | ReadonlyArray<string> | null;
-  };
-  callbacks?: {
-    onInitialized?: BasicEventCallback | null;
-    onInitializationWithdrawn?: BasicEventCallback | null;
-    onDestroyed?: BasicEventCallback | null;
-    onScrollStart?: ScrollEventCallback | null;
-    onScroll?: ScrollEventCallback | null;
-    onScrollStop?: ScrollEventCallback | null;
-    onOverflowChanged?: OverflowChangedCallback | null;
-    onOverflowAmountChanged?: OverflowAmountChangedCallback | null;
-    onDirectionChanged?: DirectionChangedCallback | null;
-    onContentSizeChanged?: SizeChangedCallback | null;
-    onHostSizeChanged?: SizeChangedCallback | null;
-    onUpdated?: UpdatedCallback | null;
-  };
-}
-
-export interface OverflowChangedArgs {
-  x: boolean;
-  y: boolean;
-  xScrollable: boolean;
-  yScrollable: boolean;
-  clipped: boolean;
-}
-
-export interface OverflowAmountChangedArgs {
-  x: number;
-  y: number;
-}
-
-export interface DirectionChangedArgs {
-  isRTL: number;
-  dir: string;
-}
-
-export interface SizeChangedArgs {
-  width: number;
-  height: number;
-}
-
-export interface UpdatedArgs {
-  forced: boolean;
-}
 
 /*
 export namespace OverlayScrollbars {

packages/overlayscrollbars/tests/core/dom/classes.test.ts

@@ -1,83 +0,0 @@
-import { addClass, removeClass, hasClass, conditionalClass } from 'core/dom/class';
-
-const testElm = document.body;
-const removeAllClassNames = () => {
-  while (testElm.classList.length > 0) {
-    const classToRemove = testElm.classList.item(0);
-    if (classToRemove) {
-      testElm.classList.remove(classToRemove);
-    }
-  }
-};
-const hasClassName = (className: string) => testElm.classList.contains(className);
-
-describe('dom class names', () => {
-  afterEach(() => {
-    removeAllClassNames();
-  });
-
-  test('add none', () => {
-    addClass(testElm, '');
-    // @ts-ignore
-    addClass(testElm, null);
-    // @ts-ignore
-    addClass(testElm, 2);
-    expect(testElm.classList.length).toBe(0);
-  });
-
-  test('add single', () => {
-    addClass(testElm, 'test-class');
-    expect(hasClassName('test-class')).toBe(true);
-  });
-
-  test('add multiple', () => {
-    addClass(testElm, 'test-class test-class2');
-    expect(hasClassName('test-class')).toBe(true);
-    expect(hasClassName('test-class2')).toBe(true);
-  });
-
-  test('remove none', () => {
-    addClass(testElm, 'test-class');
-    removeClass(testElm, '');
-    // @ts-ignore
-    removeClass(testElm, null);
-    // @ts-ignore
-    removeClass(testElm, 2);
-    expect(testElm.classList.length).toBe(1);
-  });
-
-  test('remove single', () => {
-    addClass(testElm, 'test-class');
-    expect(hasClassName('test-class')).toBe(true);
-    removeClass(testElm, 'test-class');
-    expect(hasClassName('test-class')).toBe(false);
-  });
-
-  test('remove multiple', () => {
-    addClass(testElm, 'test-class test-class2');
-    removeClass(testElm, 'test-class test-class2');
-    expect(hasClassName('test-class')).toBe(false);
-    expect(hasClassName('test-class2')).toBe(false);
-  });
-
-  test('has', () => {
-    addClass(testElm, 'test-class');
-    expect(hasClass(testElm, 'test-class')).toBe(true);
-  });
-
-  test('conditional single', () => {
-    conditionalClass(testElm, 'test-class', true);
-    expect(hasClass(testElm, 'test-class')).toBe(true);
-    conditionalClass(testElm, 'test-class', false);
-    expect(hasClass(testElm, 'test-class')).toBe(false);
-  });
-
-  test('conditional multiple', () => {
-    conditionalClass(testElm, 'test-class test-class2', true);
-    expect(hasClass(testElm, 'test-class')).toBe(true);
-    expect(hasClass(testElm, 'test-class2')).toBe(true);
-    conditionalClass(testElm, 'test-class test-class2', false);
-    expect(hasClass(testElm, 'test-class')).toBe(false);
-    expect(hasClass(testElm, 'test-class2')).toBe(false);
-  });
-});

packages/overlayscrollbars/tests/options.test.ts

@@ -1,4 +1,4 @@
-import { validate } from 'core/options';
+import { validate } from 'support/options';
 import { defaultOptions, optionsTemplate } from 'options';
 
 describe('options', () => {

packages/overlayscrollbars/tests/support/compatibility/vendors.test.ts

@@ -1,4 +1,4 @@
-import { jsAPI, cssProperty, cssPropertyValue } from 'core/compatibility/vendors';
+import { jsAPI, cssProperty, cssPropertyValue } from 'support/compatibility/vendors';
 
 describe('vendors', () => {
   describe('jsAPI', () => {

packages/overlayscrollbars/tests/support/dom/attribute.test.ts

@@ -1,4 +1,4 @@
-import { attr, removeAttr, val, scrollLeft, scrollTop } from 'core/dom/attribute';
+import { attr, removeAttr, val, scrollLeft, scrollTop } from 'support/dom/attribute';
 
 const testElm = document.body;
 const setAttribute = (name: string, value: string) => {
@@ -39,6 +39,11 @@ describe('dom attributes', () => {
 
       removeAttribute(attrName);
     });
+
+    test('null', () => {
+      expect(attr(null, 'hi')).toBe(null);
+      expect(attr(null, 'hi', '123')).toBe(undefined);
+    });
   });
 
   describe('scrollLeft', () => {
@@ -53,6 +58,11 @@ describe('dom attributes', () => {
       expect(scrollLeft(testElm)).toBe(100);
       setScrollLeft(0);
     });
+
+    test('null', () => {
+      expect(scrollLeft(null)).toBe(0);
+      expect(scrollLeft(null, 0)).toBe(undefined);
+    });
   });
 
   describe('scrollTop', () => {
@@ -67,6 +77,11 @@ describe('dom attributes', () => {
       expect(scrollTop(testElm)).toBe(100);
       setScrollTop(0);
     });
+
+    test('null', () => {
+      expect(scrollTop(null)).toBe(0);
+      expect(scrollTop(null, 0)).toBe(undefined);
+    });
   });
 
   describe('val', () => {
@@ -84,14 +99,25 @@ describe('dom attributes', () => {
       val(input, '');
       expect(val(input)).toBe('');
     });
+
+    test('null', () => {
+      expect(val(null)).toBe('');
+      expect(val(null, '123')).toBe(undefined);
+    });
   });
 
-  test('remove attribute', () => {
+  describe('remove attribute', () => {
-    const attrName = 'data-test-remove';
+    test('normal', () => {
+      const attrName = 'data-test-remove';
 
-    setAttribute(attrName, '123');
+      setAttribute(attrName, '123');
-    removeAttr(testElm, attrName);
+      removeAttr(testElm, attrName);
 
-    expect(attr(testElm, attrName)).toBeNull();
+      expect(attr(testElm, attrName)).toBeNull();
+    });
+
+    test('null', () => {
+      expect(removeAttr(null, 'hi')).toBe(undefined);
+    });
   });
 });

packages/overlayscrollbars/tests/support/dom/class.test.ts

@@ -0,0 +1,95 @@
+import { addClass, removeClass, hasClass } from 'support/dom/class';
+
+const testElm = document.body;
+const removeAllClassNames = () => {
+  while (testElm.classList.length > 0) {
+    const classToRemove = testElm.classList.item(0);
+    if (classToRemove) {
+      testElm.classList.remove(classToRemove);
+    }
+  }
+};
+const hasClassName = (className: string) => testElm.classList.contains(className);
+
+describe('dom class names', () => {
+  afterEach(() => {
+    removeAllClassNames();
+  });
+
+  describe('add', () => {
+    test('none', () => {
+      addClass(testElm, '');
+      // @ts-ignore
+      addClass(testElm, null);
+      // @ts-ignore
+      addClass(testElm, 2);
+      expect(testElm.classList.length).toBe(0);
+    });
+
+    test('single', () => {
+      addClass(testElm, 'test-class');
+      expect(hasClassName('test-class')).toBe(true);
+    });
+
+    test('multiple', () => {
+      addClass(testElm, 'test-class test-class2');
+      expect(hasClassName('test-class')).toBe(true);
+      expect(hasClassName('test-class2')).toBe(true);
+    });
+
+    test('null', () => {
+      expect(addClass(null, 'abc')).toBe(undefined);
+    });
+  });
+
+  describe('remove', () => {
+    test('none', () => {
+      addClass(testElm, 'test-class');
+      removeClass(testElm, '');
+      // @ts-ignore
+      removeClass(testElm, null);
+      // @ts-ignore
+      removeClass(testElm, 2);
+      expect(testElm.classList.length).toBe(1);
+    });
+
+    test('single', () => {
+      addClass(testElm, 'test-class');
+      expect(hasClassName('test-class')).toBe(true);
+      removeClass(testElm, 'test-class');
+      expect(hasClassName('test-class')).toBe(false);
+    });
+
+    test('multiple', () => {
+      addClass(testElm, 'test-class test-class2');
+      removeClass(testElm, 'test-class test-class2');
+      expect(hasClassName('test-class')).toBe(false);
+      expect(hasClassName('test-class2')).toBe(false);
+    });
+
+    test('null', () => {
+      expect(removeClass(null, 'abc')).toBe(undefined);
+    });
+  });
+
+  describe('has', () => {
+    test('none', () => {
+      expect(hasClass(testElm, '')).toBe(false);
+    });
+
+    test('single', () => {
+      addClass(testElm, 'test-class');
+      expect(hasClass(testElm, 'test-class')).toBe(true);
+    });
+
+    test('multiple', () => {
+      addClass(testElm, 'test-class test-class2');
+      expect(hasClass(testElm, 'test-class test-class2')).toBe(true);
+      expect(hasClass(testElm, 'test-class test-class2 test-class3')).toBe(false);
+    });
+
+    test('null', () => {
+      expect(hasClass(null, 'abc')).toBe(false);
+    });
+  });
+});

packages/overlayscrollbars/tests/support/dom/create.test.ts

@@ -1,5 +1,5 @@
-import { each } from 'core/utils';
+import { each } from 'support/utils';
-import { createDiv, createDOM } from 'core/dom/create';
+import { createDiv, createDOM } from 'support/dom/create';
 
 const slotElm = document.body;
 const testHTML =

packages/overlayscrollbars/tests/support/dom/manipulation.test.ts

@@ -1,5 +1,5 @@
-import { createDiv, contents, appendChildren, prependChildren, insertBefore, insertAfter, removeElements } from 'core/dom';
+import { createDiv, contents, appendChildren, prependChildren, insertBefore, insertAfter, removeElements } from 'support/dom';
-import { each, isArray, isHTMLElement } from 'core/utils';
+import { each, isArray, isHTMLElement } from 'support/utils';
 
 const slotElm = document.body;
 const fillSlotElm = () => {

packages/overlayscrollbars/tests/support/dom/offset.test.ts

@@ -0,0 +1,36 @@
+import { isNumber, isPlainObject } from 'support/utils/types';
+import { offset, position } from 'support/dom/offset';
+
+describe('dom offset', () => {
+  describe('offset', () => {
+    test('returns correct object with DOM element', () => {
+      const result = offset(document.body);
+      expect(isPlainObject(result)).toBe(true);
+      expect(isNumber(result.left)).toBe(true);
+      expect(isNumber(result.top)).toBe(true);
+    });
+
+    test('returns correct object with null', () => {
+      const result = offset(null);
+      expect(isPlainObject(result)).toBe(true);
+      expect(result.left).toBe(0);
+      expect(result.top).toBe(0);
+    });
+  });
+
+  describe('position', () => {
+    test('returns correct object with DOM element', () => {
+      const result = position(document.body);
+      expect(isPlainObject(result)).toBe(true);
+      expect(isNumber(result.left)).toBe(true);
+      expect(isNumber(result.top)).toBe(true);
+    });
+
+    test('returns correct object with null', () => {
+      const result = position(null);
+      expect(isPlainObject(result)).toBe(true);
+      expect(result.left).toBe(0);
+      expect(result.top).toBe(0);
+    });
+  });
+});

packages/overlayscrollbars/tests/support/dom/style.test.ts

@@ -0,0 +1,93 @@
+import { isString, isPlainObject, isEmptyObject } from 'support/utils/types';
+import { style, hide, show } from 'support/dom/style';
+
+describe('dom style', () => {
+  afterEach(() => {
+    document.body.removeAttribute('style');
+  });
+
+  describe('style', () => {
+    describe('get', () => {
+      test('single', () => {
+        expect(isString(style(document.body, 'width'))).toBe(true);
+      });
+
+      test('multiple', () => {
+        const widthHeight = style(document.body, ['width', 'height']);
+        expect(isPlainObject(widthHeight)).toBe(true);
+        expect(isString(widthHeight.width)).toBe(true);
+        expect(isString(widthHeight.height)).toBe(true);
+      });
+
+      test('null', () => {
+        expect(style(null, 'width')).toBe('');
+
+        const widthHeight = style(null, ['width', 'height']);
+        expect(isPlainObject(widthHeight)).toBe(true);
+        expect(isEmptyObject(widthHeight)).toBe(true);
+      });
+    });
+
+    describe('set', () => {
+      test('single', () => {
+        expect(document.body.style.width).toBe('');
+        style(document.body, { width: '123px' });
+        expect(document.body.style.width).toBe('123px');
+      });
+
+      test('single add px', () => {
+        expect(document.body.style.width).toBe('');
+        style(document.body, { width: 123 });
+        expect(document.body.style.width).toBe('123px');
+      });
+
+      test('single dont add px', () => {
+        expect(document.body.style.opacity).toBe('');
+        style(document.body, { opacity: 0.5 });
+        expect(document.body.style.opacity).toBe('0.5');
+      });
+
+      test('multiple', () => {
+        expect(document.body.style.width).toBe('');
+        expect(document.body.style.height).toBe('');
+        expect(document.body.style.opacity).toBe('');
+        expect(document.body.style.zIndex).toBe('');
+        expect(document.body.style.lineHeight).toBe('');
+        style(document.body, { width: '123px', height: 321, opacity: '0.5', zIndex: 1 });
+        expect(document.body.style.width).toBe('123px');
+        expect(document.body.style.height).toBe('321px');
+        expect(document.body.style.opacity).toBe('0.5');
+        expect(document.body.style.zIndex).toBe('1');
+      });
+
+      test('null', () => {
+        expect(style(null, { width: '123px' })).toBe(undefined);
+        expect(style(null, { width: '123px', height: '321px' })).toBe(undefined);
+      });
+    });
+  });
+
+  describe('hide', () => {
+    test('normal', () => {
+      expect(document.body.style.display).toBe('');
+      hide(document.body);
+      expect(document.body.style.display).toBe('none');
+    });
+
+    test('null', () => {
+      expect(hide(null)).toBe(undefined);
+    });
+  });
+
+  describe('show', () => {
+    test('normal', () => {
+      expect(document.body.style.display).toBe('');
+      show(document.body);
+      expect(document.body.style.display).toBe('block');
+    });
+
+    test('null', () => {
+      expect(show(null)).toBe(undefined);
+    });
+  });
+});

packages/overlayscrollbars/tests/support/dom/traversal.test.ts

@@ -1,4 +1,4 @@
-import { find, findFirst, is, children, contents, parent, createDiv } from 'core/dom';
+import { find, findFirst, is, children, contents, parent, createDiv } from 'support/dom';
 
 const slotElm = document.body;
 const testHTML = '<div id="parent" class="div-class"><div id="child" class="div-class"></div></div><p>2</p><input type="text" value="3"></input>abc';
@@ -39,7 +39,7 @@ describe('dom traversal', () => {
       const allNative = document.querySelector('#parent')?.querySelectorAll('*');
 
       expect(all.length).toBe(allNative?.length);
-      expect(Array.from(all)).toEqual(Array.from(allNative));
+      expect(Array.from(all)).toEqual(Array.from(allNative!));
     });
 
     test('all with null parent', () => {

packages/overlayscrollbars/tests/support/options/transformation.test.ts

@@ -1,5 +1,5 @@
-import { OptionsTemplate, OptionsAndOptionsTemplate, PlainObject } from 'core/typings';
+import { PlainObject } from 'typings';
-import { optionsTemplateTypes as oTypes, transform } from 'core/options';
+import { optionsTemplateTypes as oTypes, transform, OptionsTemplate, OptionsAndOptionsTemplate } from 'support/options';
 
 type TestOptionsObj = { propA: 'propA'; null: null };
 type TestOptionsEnum = 'A' | 'B' | 'C';

packages/overlayscrollbars/tests/support/options/validation.test.ts

@@ -1,6 +1,5 @@
-import { validate, optionsTemplateTypes as oTypes } from 'core/options';
+import { validate, optionsTemplateTypes as oTypes, OptionsTemplate } from 'support/options';
-import { extend, isEmptyObject } from 'core/utils';
+import { extend, isEmptyObject } from 'support/utils';
-import { OptionsTemplate } from 'core/typings';
 
 type TestOptionsObj = { propA: 'propA'; null: null };
 type TestOptionsEnum = 'A' | 'B' | 'C';
@@ -217,7 +216,7 @@ describe('options validation', () => {
           nested: { num: -1293, abc: 'C' },
         },
         foreignObj,
-        { nested: foreignObj },
+        { nested: foreignObj }
       );
       const result = validate(modifiedOptions, template, options);
       const { validated } = result;
@@ -354,7 +353,7 @@ describe('options validation', () => {
           func: {},
         },
         foreignObj,
-        { nested: foreignObj },
+        { nested: foreignObj }
       );
       const result = validate(modifiedOptions, template);
       const { validated, foreign } = result;

packages/overlayscrollbars/tests/support/utils/arrays.test.ts

@@ -1,4 +1,4 @@
-import { each, indexOf } from 'core/utils/array';
+import { each, indexOf } from 'support/utils/array';
 
 describe('array utilities', () => {
   describe('each', () => {

packages/overlayscrollbars/tests/support/utils/extend.test.ts

@@ -1,5 +1,5 @@
-import { extend } from 'core/utils/extend';
+import { extend } from 'support/utils/extend';
-import { isPlainObject } from 'core/utils/types';
+import { isPlainObject } from 'support/utils/types';
 
 // type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } : T
 type Deep = {

packages/overlayscrollbars/tests/support/utils/object.test.ts

@@ -1,4 +1,4 @@
-import { keys, hasOwnProperty } from 'core/utils/object';
+import { keys, hasOwnProperty } from 'support/utils/object';
 
 describe('object utilities', () => {
   describe('keys', () => {

packages/overlayscrollbars/tests/support/utils/types.test.ts

@@ -12,7 +12,7 @@ import {
   isPlainObject,
   isEmptyObject,
   isHTMLElement,
-} from 'core/utils/types';
+} from 'support/utils/types';
 
 const testfn = function () {};
 const testfnAsync = async function () {};

packages/overlayscrollbars/types/core/compatibility/index.d.ts

@@ -1,3 +0,0 @@
-export * from 'core/compatibility/vendors';
-export * from 'core/compatibility/apis';
-export * from 'core/compatibility/events';

packages/overlayscrollbars/types/core/dom/attribute.d.ts

@@ -1,5 +0,0 @@
-export declare const attr: (elm: Element, attrName: string, value?: string) => string | null | void;
-export declare const removeAttr: (elm: Element, attrName: string) => void;
-export declare const scrollLeft: (elm: HTMLElement, value?: number) => number | void;
-export declare const scrollTop: (elm: HTMLElement, value?: number) => number | void;
-export declare const val: (elm: HTMLInputElement, value?: string) => string | void;

packages/overlayscrollbars/types/core/dom/class.d.ts

@@ -1,4 +0,0 @@
-export declare const hasClass: (elm: Element, className: string) => boolean;
-export declare const addClass: (elm: Element, className: string) => void;
-export declare const removeClass: (elm: Element, className: string) => void;
-export declare const conditionalClass: (elm: Element, className: string, condition: boolean) => void;

packages/overlayscrollbars/types/core/dom/index.d.ts

@@ -1,7 +0,0 @@
-export * from 'core/dom/attribute';
-export * from 'core/dom/class';
-export * from 'core/dom/create';
-export * from 'core/dom/style';
-export * from 'core/dom/manipulation';
-export * from 'core/dom/offset';
-export * from 'core/dom/traversal';

packages/overlayscrollbars/types/core/dom/offset.d.ts

@@ -1,8 +0,0 @@
-export declare const offset: (elm: HTMLElement) => {
-    top: number;
-    left: number;
-};
-export declare const position: (elm: HTMLElement) => {
-    top: number;
-    left: number;
-};

packages/overlayscrollbars/types/core/dom/style.d.ts

@@ -1,8 +0,0 @@
-declare type cssStyleObj = {
-    [key: string]: string | number;
-};
-export declare function style(elm: HTMLElement, styles: string | cssStyleObj): string;
-export declare function style(elm: HTMLElement, styles: string | cssStyleObj, val: string | number): void;
-export declare const hide: (elm: HTMLElement) => void;
-export declare const show: (elm: HTMLElement) => void;
-export {};

packages/overlayscrollbars/types/core/options/index.d.ts

@@ -1,2 +0,0 @@
-export * from 'core/options/validation';
-export * from 'core/options/transformation';

packages/overlayscrollbars/types/core/utils/index.d.ts

@@ -1,4 +0,0 @@
-export * from 'core/utils/array';
-export * from 'core/utils/object';
-export * from 'core/utils/extend';
-export * from 'core/utils/types';

packages/overlayscrollbars/types/options/index.d.ts

@@ -0,0 +1,82 @@
+export * from 'options/options';
+export declare type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
+export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
+export declare type VisibilityBehavior = 'visible' | 'hidden' | 'auto';
+export declare type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
+export declare type ScrollBehavior = 'always' | 'ifneeded' | 'never';
+export declare type BasicEventCallback = (this: any) => void;
+export declare type ScrollEventCallback = (this: any, args?: UIEvent) => void;
+export declare type OverflowChangedCallback = (this: any, args?: OverflowChangedArgs) => void;
+export declare type OverflowAmountChangedCallback = (this: any, args?: OverflowAmountChangedArgs) => void;
+export declare type DirectionChangedCallback = (this: any, args?: DirectionChangedArgs) => void;
+export declare type SizeChangedCallback = (this: any, args?: SizeChangedArgs) => void;
+export declare type UpdatedCallback = (this: any, args?: UpdatedArgs) => void;
+export interface Options {
+    className?: string | null;
+    resize?: ResizeBehavior;
+    sizeAutoCapable?: boolean;
+    clipAlways?: boolean;
+    normalizeRTL?: boolean;
+    paddingAbsolute?: boolean;
+    autoUpdate?: boolean | null;
+    autoUpdateInterval?: number;
+    updateOnLoad?: string | ReadonlyArray<string> | null;
+    nativeScrollbarsOverlaid?: {
+        showNativeScrollbars?: boolean;
+        initialize?: boolean;
+    };
+    overflowBehavior?: {
+        x?: OverflowBehavior;
+        y?: OverflowBehavior;
+    };
+    scrollbars?: {
+        visibility?: VisibilityBehavior;
+        autoHide?: AutoHideBehavior;
+        autoHideDelay?: number;
+        dragScrolling?: boolean;
+        clickScrolling?: boolean;
+        touchSupport?: boolean;
+        snapHandle?: boolean;
+    };
+    textarea?: {
+        dynWidth?: boolean;
+        dynHeight?: boolean;
+        inheritedAttrs?: string | ReadonlyArray<string> | null;
+    };
+    callbacks?: {
+        onInitialized?: BasicEventCallback | null;
+        onInitializationWithdrawn?: BasicEventCallback | null;
+        onDestroyed?: BasicEventCallback | null;
+        onScrollStart?: ScrollEventCallback | null;
+        onScroll?: ScrollEventCallback | null;
+        onScrollStop?: ScrollEventCallback | null;
+        onOverflowChanged?: OverflowChangedCallback | null;
+        onOverflowAmountChanged?: OverflowAmountChangedCallback | null;
+        onDirectionChanged?: DirectionChangedCallback | null;
+        onContentSizeChanged?: SizeChangedCallback | null;
+        onHostSizeChanged?: SizeChangedCallback | null;
+        onUpdated?: UpdatedCallback | null;
+    };
+}
+export interface OverflowChangedArgs {
+    x: boolean;
+    y: boolean;
+    xScrollable: boolean;
+    yScrollable: boolean;
+    clipped: boolean;
+}
+export interface OverflowAmountChangedArgs {
+    x: number;
+    y: number;
+}
+export interface DirectionChangedArgs {
+    isRTL: number;
+    dir: string;
+}
+export interface SizeChangedArgs {
+    width: number;
+    height: number;
+}
+export interface UpdatedArgs {
+    forced: boolean;
+}

packages/overlayscrollbars/types/options/options.d.ts

@@ -1,4 +1,4 @@
-import { OptionsTemplate } from 'core/typings';
+import { OptionsTemplate } from 'support/options';
-import { Options } from 'typings';
+import { Options } from 'options';
 export declare const optionsTemplate: OptionsTemplate<Required<Options>>;
 export declare const defaultOptions: Options;

packages/overlayscrollbars/types/support/compatibility/index.d.ts

@@ -0,0 +1,3 @@
+export * from 'support/compatibility/vendors';
+export * from 'support/compatibility/apis';
+export * from 'support/compatibility/events';

packages/overlayscrollbars/types/support/compatibility/vendors.d.ts

@@ -7,5 +7,5 @@ export declare const cssCache: {
     [key: string]: string;
 };
 export declare const cssProperty: (name: string) => string | undefined;
-export declare const cssPropertyValue: (property: string, values: string, suffix?: string) => string | undefined;
+export declare const cssPropertyValue: (property: string, values: string, suffix?: string | undefined) => string | undefined;
 export declare const jsAPI: (name: string) => any;

packages/overlayscrollbars/types/support/dom/attribute.d.ts

@@ -0,0 +1,9 @@
+export declare function attr(elm: HTMLElement | null, attrName: string): string | null;
+export declare function attr(elm: HTMLElement | null, attrName: string, value: string): void;
+export declare const removeAttr: (elm: Element | null, attrName: string) => void;
+export declare function scrollLeft(elm: HTMLElement | null): number;
+export declare function scrollLeft(elm: HTMLElement | null, value: number): void;
+export declare function scrollTop(elm: HTMLElement | null): number;
+export declare function scrollTop(elm: HTMLElement | null, value: number): void;
+export declare function val(elm: HTMLInputElement | null): string;
+export declare function val(elm: HTMLInputElement | null, value: string): void;

packages/overlayscrollbars/types/support/dom/class.d.ts

@@ -0,0 +1,3 @@
+export declare const hasClass: (elm: Element | null, className: string) => boolean;
+export declare const addClass: (elm: Element | null, className: string) => void;
+export declare const removeClass: (elm: Element | null, className: string) => void;

packages/overlayscrollbars/types/support/dom/events.d.ts

@@ -0,0 +1 @@
+export declare const on: (target: EventTarget, type: string, listener: EventListenerOrEventListenerObject | null, options: AddEventListenerOptions) => void;

packages/overlayscrollbars/types/support/dom/index.d.ts

@@ -0,0 +1,7 @@
+export * from 'support/dom/attribute';
+export * from 'support/dom/class';
+export * from 'support/dom/create';
+export * from 'support/dom/style';
+export * from 'support/dom/manipulation';
+export * from 'support/dom/offset';
+export * from 'support/dom/traversal';

packages/overlayscrollbars/types/support/dom/offset.d.ts

@@ -0,0 +1,8 @@
+export declare const offset: (elm: HTMLElement | null) => {
+    left: number;
+    top: number;
+};
+export declare const position: (elm: HTMLElement | null) => {
+    left: number;
+    top: number;
+};

packages/overlayscrollbars/types/support/dom/style.d.ts

@@ -0,0 +1,11 @@
+declare type CssStyles = {
+    [key: string]: string | number;
+};
+export declare function style(elm: HTMLElement | null, styles: CssStyles): void;
+export declare function style(elm: HTMLElement | null, styles: string): string;
+export declare function style(elm: HTMLElement | null, styles: Array<string> | string): {
+    [key: string]: string;
+};
+export declare const hide: (elm: HTMLElement | null) => void;
+export declare const show: (elm: HTMLElement | null) => void;
+export {};

packages/overlayscrollbars/types/support/dom/traversal.d.ts

@@ -1,6 +1,6 @@
-export declare const find: (selector: string, elm?: Element | null) => ReadonlyArray<Element>;
+export declare const find: (selector: string, elm?: Element | null | undefined) => ReadonlyArray<Element>;
-export declare const findFirst: (selector: string, elm?: Element | null) => Element | null;
+export declare const findFirst: (selector: string, elm?: Element | null | undefined) => Element | null;
 export declare const is: (elm: Element | null, selector: string) => boolean;
-export declare const children: (elm: Element | null, selector?: string) => ReadonlyArray<Element>;
+export declare const children: (elm: Element | null, selector?: string | undefined) => ReadonlyArray<Element>;
 export declare const contents: (elm: Element | null) => ReadonlyArray<ChildNode>;
 export declare const parent: (elm: Node | null) => Node | null;

packages/overlayscrollbars/types/support/index.d.ts

@@ -0,0 +1,4 @@
+export * from 'support/compatibility';
+export * from 'support/dom';
+export * from 'support/options';
+export * from 'support/utils';

packages/overlayscrollbars/types/support/options/index.d.ts

@@ -1,6 +1,6 @@
-export declare type PlainObject<T = any> = {
+import { PlainObject } from 'typings';
-    [name: string]: T;
+export * from 'support/options/validation';
-};
+export * from 'support/options/transformation';
 export declare type Func = (this: any, ...args: any[]) => any;
 export declare type OptionsTemplateType<T extends OptionsTemplateNativeTypes> = ExtractPropsKey<OptionsTemplateTypeMap, T>;
 export declare type OptionsTemplateTypes = keyof OptionsTemplateTypeMap;
@@ -29,8 +29,7 @@ declare type OptionsTemplateTypeMap = {
     __TPL_null_TYPE__: null;
     __TPL_object_TYPE__: object;
 };
+declare type OptionsTemplateValueNonEnum<T extends OptionsTemplateNativeTypes> = OptionsTemplateType<T> | [OptionsTemplateType<T>, ...Array<OptionsTemplateTypes>];
 declare type ExtractPropsKey<T, TProps extends T[keyof T]> = {
     [P in keyof T]: TProps extends T[P] ? P : never;
 }[keyof T];
-declare type OptionsTemplateValueNonEnum<T extends OptionsTemplateNativeTypes> = OptionsTemplateType<T> | [OptionsTemplateType<T>, ...Array<OptionsTemplateTypes>];
-export {};

packages/overlayscrollbars/types/support/options/transformation.d.ts

@@ -1,3 +1,3 @@
-import { OptionsTemplate, OptionsAndOptionsTemplate } from 'core/typings';
+import { OptionsTemplate, OptionsAndOptionsTemplate } from 'support/options';
 export declare function transform<T extends Required<T>>(optionsWithOptionsTemplate: OptionsAndOptionsTemplate<T>): T;
 export declare function transform<T extends Required<T>>(optionsWithOptionsTemplate: OptionsAndOptionsTemplate<T>, toTemplate: true | void): OptionsTemplate<T>;

packages/overlayscrollbars/types/support/options/validation.d.ts

@@ -1,4 +1,5 @@
-import { PlainObject, OptionsTemplate, OptionsTemplateType, OptionsValidated, Func, OptionsValidatedResult } from 'core/typings';
+import { OptionsTemplate, OptionsTemplateType, OptionsValidated, Func, OptionsValidatedResult } from 'support/options';
+import { PlainObject } from 'typings';
 declare const optionsTemplateTypes: OptionsTemplateTypesDictionary;
 declare const validate: <T extends PlainObject<any>>(options: T, template: OptionsTemplate<Required<T>>, optionsDiff?: OptionsValidated<T> | undefined, doWriteErrors?: boolean | undefined) => OptionsValidatedResult<T>;
 export { validate, optionsTemplateTypes };

packages/overlayscrollbars/types/support/utils/array.d.ts

@@ -1,8 +1,8 @@
-import { PlainObject } from 'core/typings';
+import { PlainObject } from 'typings';
 export declare function each<T>(array: Array<T> | ReadonlyArray<T>, callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | void): Array<T> | ReadonlyArray<T>;
 export declare function each<T>(array: Array<T> | ReadonlyArray<T> | null, callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | void): Array<T> | ReadonlyArray<T> | null;
 export declare function each<T>(arrayLikeObject: ArrayLike<T>, callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | void): ArrayLike<T>;
 export declare function each<T>(arrayLikeObject: ArrayLike<T> | null, callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | void): ArrayLike<T> | null;
 export declare function each(obj: PlainObject, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject;
 export declare function each(obj: PlainObject | null, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject | null;
-export declare const indexOf: <T = any>(arr: Array<T>, item: T, fromIndex?: number) => number;
+export declare const indexOf: <T = any>(arr: T[], item: T, fromIndex?: number | undefined) => number;

packages/overlayscrollbars/types/support/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from 'support/utils/array';
+export * from 'support/utils/object';
+export * from 'support/utils/extend';
+export * from 'support/utils/types';

packages/overlayscrollbars/types/support/utils/types.d.ts

@@ -1,4 +1,4 @@
-import { PlainObject } from 'core/typings';
+import { PlainObject } from 'typings';
 export declare const type: (obj: any) => string;
 export declare function isNumber(obj: any): obj is number;
 export declare function isString(obj: any): obj is string;

packages/overlayscrollbars/types/typings.d.ts

@@ -1,81 +1,3 @@
-export declare type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
+export declare type PlainObject<T = any> = {
-export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
+    [name: string]: T;
-export declare type VisibilityBehavior = 'visible' | 'hidden' | 'auto';
+};
-export declare type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
-export declare type ScrollBehavior = 'always' | 'ifneeded' | 'never';
-export declare type BasicEventCallback = (this: any) => void;
-export declare type ScrollEventCallback = (this: any, args?: UIEvent) => void;
-export declare type OverflowChangedCallback = (this: any, args?: OverflowChangedArgs) => void;
-export declare type OverflowAmountChangedCallback = (this: any, args?: OverflowAmountChangedArgs) => void;
-export declare type DirectionChangedCallback = (this: any, args?: DirectionChangedArgs) => void;
-export declare type SizeChangedCallback = (this: any, args?: SizeChangedArgs) => void;
-export declare type UpdatedCallback = (this: any, args?: UpdatedArgs) => void;
-export interface Options {
-    className?: string | null;
-    resize?: ResizeBehavior;
-    sizeAutoCapable?: boolean;
-    clipAlways?: boolean;
-    normalizeRTL?: boolean;
-    paddingAbsolute?: boolean;
-    autoUpdate?: boolean | null;
-    autoUpdateInterval?: number;
-    updateOnLoad?: string | ReadonlyArray<string> | null;
-    nativeScrollbarsOverlaid?: {
-        showNativeScrollbars?: boolean;
-        initialize?: boolean;
-    };
-    overflowBehavior?: {
-        x?: OverflowBehavior;
-        y?: OverflowBehavior;
-    };
-    scrollbars?: {
-        visibility?: VisibilityBehavior;
-        autoHide?: AutoHideBehavior;
-        autoHideDelay?: number;
-        dragScrolling?: boolean;
-        clickScrolling?: boolean;
-        touchSupport?: boolean;
-        snapHandle?: boolean;
-    };
-    textarea?: {
-        dynWidth?: boolean;
-        dynHeight?: boolean;
-        inheritedAttrs?: string | ReadonlyArray<string> | null;
-    };
-    callbacks?: {
-        onInitialized?: BasicEventCallback | null;
-        onInitializationWithdrawn?: BasicEventCallback | null;
-        onDestroyed?: BasicEventCallback | null;
-        onScrollStart?: ScrollEventCallback | null;
-        onScroll?: ScrollEventCallback | null;
-        onScrollStop?: ScrollEventCallback | null;
-        onOverflowChanged?: OverflowChangedCallback | null;
-        onOverflowAmountChanged?: OverflowAmountChangedCallback | null;
-        onDirectionChanged?: DirectionChangedCallback | null;
-        onContentSizeChanged?: SizeChangedCallback | null;
-        onHostSizeChanged?: SizeChangedCallback | null;
-        onUpdated?: UpdatedCallback | null;
-    };
-}
-export interface OverflowChangedArgs {
-    x: boolean;
-    y: boolean;
-    xScrollable: boolean;
-    yScrollable: boolean;
-    clipped: boolean;
-}
-export interface OverflowAmountChangedArgs {
-    x: number;
-    y: number;
-}
-export interface DirectionChangedArgs {
-    isRTL: number;
-    dir: string;
-}
-export interface SizeChangedArgs {
-    width: number;
-    height: number;
-}
-export interface UpdatedArgs {
-    forced: boolean;
-}

resolve.config.json

@@ -1,4 +1,4 @@
 {
-  "extensions": [".json", ".js", "jsx", ".ts", ".tsx"],
+  "extensions": [".json", ".js", "jsx", ".ts", ".tsx", ".html"],
   "directories": ["node_modules", "src"]
 }

rollup.config.js

@@ -1,6 +1,7 @@
 import rollupCommonjs from '@rollup/plugin-commonjs';
 import rollupResolve from '@rollup/plugin-node-resolve';
 import rollupTypescript from 'rollup-plugin-typescript2';
+import rollupPrettier from 'rollup-plugin-prettier';
 import { getBabelOutputPlugin as rollupBabelOutputPlugin } from '@rollup/plugin-babel';
 import { terser as rollupTerser } from 'rollup-plugin-terser';
 import del from 'del';
@@ -16,6 +17,7 @@ const legacyOutputBabelConfig = {
     [
       '@babel/preset-env',
       {
+        loose: true,
         targets: {
           ie: '11',
         },
@@ -29,6 +31,7 @@ const esmOutputBabelConfig = {
     [
       '@babel/preset-env',
       {
+        loose: true,
         bugfixes: true,
         targets: {
           esmodules: true,
@@ -70,24 +73,16 @@ export default async (config) => {
 
   const mainOutputArray = [
     {
-      format: 'esm',
+      format: 'umd',
       name,
       globals,
       exports,
       file: path.resolve(distPath, `${project}.js`),
       sourcemap: legacySourceMap,
       plugins: [
-        rollupBabelOutputPlugin({
+        rollupBabelOutputPlugin(legacyOutputBabelConfig),
-          ...legacyOutputBabelConfig,
+        rollupPrettier({
-          plugins: [
+          sourcemap: legacySourceMap && 'silent',
-            [
-              '@babel/plugin-transform-modules-umd',
-              {
-                moduleId: name,
-                globals,
-              },
-            ],
-          ],
         }),
       ],
     },
@@ -95,7 +90,12 @@ export default async (config) => {
       format: 'esm',
       file: path.resolve(distPath, `${project}.esm.js`),
       sourcemap: modulesSourceMap,
-      plugins: [rollupBabelOutputPlugin(esmOutputBabelConfig)],
+      plugins: [
+        rollupBabelOutputPlugin(esmOutputBabelConfig),
+        rollupPrettier({
+          sourcemap: modulesSourceMap && 'silent',
+        }),
+      ],
     },
   ];