improve public api and type exports

local/rollup/src/defaultOptions.js

@@ -18,7 +18,7 @@ module.exports = {
   rollup: {
     input: './src/index',
     output: {
-      sourcemap: true,
+      sourcemap: false,
       exports: 'auto',
     },
   },

local/rollup/src/pipeline.build.js

@@ -70,7 +70,7 @@ module.exports = (resolve, options, esm) => {
     ...rollupOptions,
     plugins: [
       rollupAlias(alias),
-      rollupScss(extractStyles, false),
+      rollupScss(extractStyles, false, sourcemap),
       rollupTs(srcPath),
       rollupResolve(srcPath, resolve),
       rollupCommonjs(sourcemap, resolve),

local/rollup/src/pipeline.common.plugins.js

@@ -28,11 +28,12 @@ module.exports = {
       moduleDirectories: resolve.directories,
       extensions: resolve.extensions,
     }),
-  rollupScss: (extractStyleOption, output) => {
+  rollupScss: (extractStyleOption, output, sourceMap) => {
     if (extractStyleOption) {
       return output
         ? rollupPluginScss({
             output,
+            sourceMap,
             processor: () => postcss([autoprefixer()]),
           })
         : rollupPluginIgnoreImport({
@@ -83,6 +84,7 @@ module.exports = {
         compilerOptions: {
           declaration,
           emitDeclarationOnly: declaration,
+          declarationMap: declaration,
         },
         // files to include / exclude from typescript .d.ts generation
         include: [`${srcPath}/**/*`],

local/rollup/src/pipeline.dev.js

@@ -28,7 +28,7 @@ module.exports = (resolve, options) => {
     ...rollupOptions,
     plugins: [
       rollupAlias(alias),
-      rollupScss(extractStyles, false),
+      rollupScss(extractStyles, false, sourcemap),
       rollupEsBuild(),
       rollupResolve(srcPath, resolve),
       rollupCommonjs(sourcemap, resolve),

local/rollup/src/pipeline.styles.js

@@ -4,7 +4,7 @@ const { rollupResolve, rollupScss, rollupEsBuild } = require('./pipeline.common.
 module.exports = (resolve, options) => {
   const { rollup, paths } = options;
   const { output: rollupOutput, input } = rollup;
-  const { file } = rollupOutput;
+  const { file, sourcemap } = rollupOutput;
   const { src: srcPath, styles: stylesPath } = paths;
   const ogWrite = process.stdout.write;
 
@@ -12,7 +12,7 @@ module.exports = (resolve, options) => {
     input,
     plugins: [
       rollupResolve(srcPath, resolve),
-      rollupScss(true, path.resolve(stylesPath, `${file}.css`)),
+      rollupScss(true, path.resolve(stylesPath, `${file}.css`), sourcemap),
       rollupEsBuild(),
       {
         generateBundle() {

package.json

@@ -68,7 +68,6 @@
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-summary": "^1.4.3",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-ts": "^3.0.2",
     "should": "^13.2.3",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -666,89 +666,6 @@ const createEventListenerHub = t => {
   return [ addEvent, removeEvent, triggerEvent ];
 };
 
-const getPropByPath = (t, n) => t ? n.split(".").reduce(((t, n) => t && hasOwnProperty(t, n) ? t[n] : void 0), t) : void 0;
-
-const createOptionCheck = (t, n, o) => s => [ getPropByPath(t, s), o || void 0 !== getPropByPath(n, s) ];
-
-const createState = t => {
-  let n = t;
-  return [ () => n, t => {
-    n = assignDeep({}, n, t);
-  } ];
-};
-
-const m = "os-environment";
-
-const S = `${m}-flexbox-glue`;
-
-const x = `${S}-max`;
-
-const $ = "data-overlayscrollbars";
-
-const C = `${$}-overflow-x`;
-
-const O = `${$}-overflow-y`;
-
-const E = "overflowVisible";
-
-const A = "scrollbarHidden";
-
-const T = "updating";
-
-const z = "os-padding";
-
-const I = "os-viewport";
-
-const L = `${I}-arrange`;
-
-const H = "os-content";
-
-const P = `${I}-scrollbar-hidden`;
-
-const D = `os-overflow-visible`;
-
-const M = "os-size-observer";
-
-const R = `${M}-appear`;
-
-const k = `${M}-listener`;
-
-const B = `${k}-scroll`;
-
-const V = `${k}-item`;
-
-const j = `${V}-final`;
-
-const Y = "os-trinsic-observer";
-
-const q = "os-scrollbar";
-
-const F = `${q}-rtl`;
-
-const G = `${q}-horizontal`;
-
-const N = `${q}-vertical`;
-
-const U = `${q}-track`;
-
-const W = `${q}-handle`;
-
-const X = `${q}-visible`;
-
-const J = `${q}-cornerless`;
-
-const K = `${q}-transitionless`;
-
-const Z = `${q}-interaction`;
-
-const Q = `${q}-unusable`;
-
-const tt = `${q}-auto-hidden`;
-
-const nt = `${U}-interactive`;
-
-const ot = `${W}-interactive`;
-
 const opsStringify = t => JSON.stringify(t, ((t, n) => {
   if (isFunction(n)) {
     throw new Error;
@@ -756,7 +673,7 @@ const opsStringify = t => JSON.stringify(t, ((t, n) => {
   return n;
 }));
 
-const st = {
+const m = {
   paddingAbsolute: false,
   showNativeOverlaidScrollbars: false,
   updating: {
@@ -805,6 +722,78 @@ const getOptionsDiff = (t, n) => {
   return o;
 };
 
+const S = "os-environment";
+
+const x = `${S}-flexbox-glue`;
+
+const $ = `${x}-max`;
+
+const C = "data-overlayscrollbars";
+
+const O = `${C}-overflow-x`;
+
+const E = `${C}-overflow-y`;
+
+const A = "overflowVisible";
+
+const T = "scrollbarHidden";
+
+const z = "updating";
+
+const I = "os-padding";
+
+const L = "os-viewport";
+
+const H = `${L}-arrange`;
+
+const P = "os-content";
+
+const D = `${L}-scrollbar-hidden`;
+
+const M = `os-overflow-visible`;
+
+const R = "os-size-observer";
+
+const k = `${R}-appear`;
+
+const B = `${R}-listener`;
+
+const V = `${B}-scroll`;
+
+const j = `${B}-item`;
+
+const Y = `${j}-final`;
+
+const q = "os-trinsic-observer";
+
+const F = "os-scrollbar";
+
+const G = `${F}-rtl`;
+
+const N = `${F}-horizontal`;
+
+const U = `${F}-vertical`;
+
+const W = `${F}-track`;
+
+const X = `${F}-handle`;
+
+const J = `${F}-visible`;
+
+const K = `${F}-cornerless`;
+
+const Z = `${F}-transitionless`;
+
+const Q = `${F}-interaction`;
+
+const tt = `${F}-unusable`;
+
+const nt = `${F}-auto-hidden`;
+
+const ot = `${W}-interactive`;
+
+const st = `${X}-interactive`;
+
 const et = {};
 
 const getPlugins = () => et;
@@ -873,9 +862,9 @@ const gt = "__osSizeObserverPlugin";
 const vt = {
   [gt]: {
     O: (t, n, o) => {
-      const s = createDOM(`<div class="${V}" dir="ltr"><div class="${V}"><div class="${j}"></div></div><div class="${V}"><div class="${j}" style="width: 200%; height: 200%"></div></div></div>`);
+      const s = createDOM(`<div class="${j}" dir="ltr"><div class="${j}"><div class="${Y}"></div></div><div class="${j}"><div class="${Y}" style="width: 200%; height: 200%"></div></div></div>`);
       appendChildren(t, s);
-      addClass(t, B);
+      addClass(t, V);
       const e = s[0];
       const c = e.lastChild;
       const r = e.firstChild;
@@ -947,7 +936,7 @@ const mt = {
       const e = !s && !n && (o.x || o.y);
       const c = e ? document.createElement("style") : false;
       if (c) {
-        attr(c, "id", `${L}-${wt}`);
+        attr(c, "id", `${H}-${wt}`);
         wt++;
       }
       return c;
@@ -974,7 +963,7 @@ const mt = {
               const {cssRules: n} = t;
               if (n) {
                 if (!n.length) {
-                  t.insertRule(`#${attr(s, "id")} + .${L}::before {}`, 0);
+                  t.insertRule(`#${attr(s, "id")} + .${H}::before {}`, 0);
                 }
                 const o = n[0].style;
                 o.width = b.w;
@@ -1007,7 +996,7 @@ const mt = {
             assignProps("marginLeft marginRight paddingLeft paddingRight");
           }
           const g = style(o, keys(h));
-          removeClass(o, L);
+          removeClass(o, H);
           if (!n) {
             h.height = "";
           }
@@ -1015,7 +1004,7 @@ const mt = {
           return [ () => {
             r(a, l, t, g);
             style(o, g);
-            addClass(o, L);
+            addClass(o, H);
           }, a ];
         }
         return [ noop ];
@@ -1080,7 +1069,7 @@ const getNativeScrollbarSize = (t, n, o, s) => {
 
 const getNativeScrollbarsHiding = t => {
   let n = false;
-  const o = addClass(t, P);
+  const o = addClass(t, D);
   try {
     n = "none" === style(t, cssProperty("scrollbar-width")) || "none" === window.getComputedStyle(t, "::-webkit-scrollbar").getPropertyValue("display");
   } catch (s) {}
@@ -1107,11 +1096,11 @@ const getRtlScrollBehavior = (t, n) => {
 };
 
 const getFlexboxGlue = (t, n) => {
-  const o = addClass(t, S);
+  const o = addClass(t, x);
   const s = getBoundingClientRect(t);
   const e = getBoundingClientRect(n);
   const c = equalBCRWH(e, s, true);
-  const r = addClass(t, x);
+  const r = addClass(t, $);
   const l = getBoundingClientRect(t);
   const i = getBoundingClientRect(n);
   const a = equalBCRWH(i, l, true);
@@ -1122,7 +1111,7 @@ const getFlexboxGlue = (t, n) => {
 
 const createEnvironment = () => {
   const {body: t} = document;
-  const n = createDOM(`<div class="${m}"><div></div></div>`);
+  const n = createDOM(`<div class="${S}"><div></div></div>`);
   const o = n[0];
   const s = o.firstChild;
   const [e, , c] = createEventListenerHub();
@@ -1147,7 +1136,7 @@ const createEnvironment = () => {
       body: null
     }
   };
-  const f = assignDeep({}, st);
+  const f = assignDeep({}, m);
   const _ = {
     k: i,
     I: u,
@@ -1213,7 +1202,30 @@ const cancelInitialization = (t, n) => {
   return !!f || !!_;
 };
 
-const xt = createDiv.bind(0, "");
+const xt = new WeakMap;
+
+const addInstance = (t, n) => {
+  xt.set(t, n);
+};
+
+const removeInstance = t => {
+  xt.delete(t);
+};
+
+const getInstance = t => xt.get(t);
+
+const getPropByPath = (t, n) => t ? n.split(".").reduce(((t, n) => t && hasOwnProperty(t, n) ? t[n] : void 0), t) : void 0;
+
+const createOptionCheck = (t, n, o) => s => [ getPropByPath(t, s), o || void 0 !== getPropByPath(n, s) ];
+
+const createState = t => {
+  let n = t;
+  return [ () => n, t => {
+    n = assignDeep({}, n, t);
+  } ];
+};
+
+const $t = createDiv.bind(0, "");
 
 const unwrap = t => {
   appendChildren(parent(t), contents(t));
@@ -1221,8 +1233,8 @@ const unwrap = t => {
 };
 
 const addDataAttrHost = (t, n) => {
-  attr(t, $, n);
-  return removeAttr.bind(0, t, $);
+  attr(t, C, n);
+  return removeAttr.bind(0, t, C);
 };
 
 const createStructureSetupElements = t => {
@@ -1241,16 +1253,16 @@ const createStructureSetupElements = t => {
   const y = p.defaultView;
   const m = staticInitializationElement.bind(0, [ v ]);
   const S = dynamicInitializationElement.bind(0, [ v ]);
-  const x = m(xt, l, h);
-  const E = x === v;
-  const A = E && b;
+  const x = m($t, l, h);
+  const $ = x === v;
+  const A = $ && b;
   const T = {
     J: v,
-    K: w ? m(xt, r, f) : v,
+    K: w ? m($t, r, f) : v,
     Z: x,
-    tt: !E && S(xt, i, _),
-    nt: !E && S(xt, a, g),
-    ot: !E && !s && c && c(n),
+    tt: !$ && S($t, i, _),
+    nt: !$ && S($t, a, g),
+    ot: !$ && !s && c && c(n),
     st: A ? p.documentElement : x,
     et: A ? p : x,
     ct: y,
@@ -1258,42 +1270,42 @@ const createStructureSetupElements = t => {
     lt: w,
     W: b,
     it: u,
-    X: E,
-    ut: (t, n) => E ? hasAttrClass(x, $, n) : hasClass(x, t),
-    dt: (t, n, o) => E ? attrClass(x, $, n, o) : (o ? addClass : removeClass)(x, t)
+    X: $,
+    ut: (t, n) => $ ? hasAttrClass(x, C, n) : hasClass(x, t),
+    dt: (t, n, o) => $ ? attrClass(x, C, n, o) : (o ? addClass : removeClass)(x, t)
   };
-  const L = keys(T).reduce(((t, n) => {
+  const z = keys(T).reduce(((t, n) => {
     const o = T[n];
     return push(t, o && !parent(o) ? o : false);
   }), []);
-  const elementIsGenerated = t => t ? indexOf(L, t) > -1 : null;
-  const {J: D, K: M, tt: R, Z: k, nt: B, ot: V} = T;
+  const elementIsGenerated = t => t ? indexOf(z, t) > -1 : null;
+  const {J: H, K: M, tt: R, Z: k, nt: B, ot: V} = T;
   const j = [];
   const Y = w && elementIsGenerated(M);
-  let q = w ? D : contents([ B, k, R, M, D ].find((t => false === elementIsGenerated(t))));
+  let q = w ? H : contents([ B, k, R, M, H ].find((t => false === elementIsGenerated(t))));
   const F = B || k;
   const appendElements = () => {
-    const t = addDataAttrHost(M, E ? "viewport" : "host");
-    const n = addClass(R, z);
-    const o = addClass(k, !E && I);
-    const e = addClass(B, H);
-    const c = A ? addClass(parent(v), P) : noop;
+    const t = addDataAttrHost(M, $ ? "viewport" : "host");
+    const n = addClass(R, I);
+    const o = addClass(k, !$ && L);
+    const e = addClass(B, P);
+    const c = A ? addClass(parent(v), D) : noop;
     if (Y) {
-      insertAfter(D, M);
+      insertAfter(H, M);
       push(j, (() => {
-        insertAfter(M, D);
+        insertAfter(M, H);
         removeElements(M);
       }));
     }
     appendChildren(F, q);
     appendChildren(M, R);
-    appendChildren(R || M, !E && k);
+    appendChildren(R || M, !$ && k);
     appendChildren(k, B);
     push(j, (() => {
       c();
       t();
-      removeAttr(k, C);
       removeAttr(k, O);
+      removeAttr(k, E);
       if (elementIsGenerated(B)) {
         unwrap(B);
       }
@@ -1307,8 +1319,8 @@ const createStructureSetupElements = t => {
       o();
       e();
     }));
-    if (s && !E) {
-      push(j, removeClass.bind(0, k, P));
+    if (s && !$) {
+      push(j, removeClass.bind(0, k, D));
     }
     if (V) {
       insertBefore(k, V);
@@ -1390,17 +1402,17 @@ const createPaddingUpdateSegment = (t, n) => {
   };
 };
 
-const {max: $t} = Math;
+const {max: Ct} = Math;
 
-const Ct = $t.bind(0, 0);
+const Ot = Ct.bind(0, 0);
 
-const Ot = "visible";
+const Et = "visible";
 
-const Et = "hidden";
+const At = "hidden";
 
-const At = 42;
+const Tt = 42;
 
-const Tt = {
+const zt = {
   u: equalWH,
   o: {
     w: 0,
@@ -1408,19 +1420,19 @@ const Tt = {
   }
 };
 
-const zt = {
+const It = {
   u: equalXY,
   o: {
-    x: Et,
-    y: Et
+    x: At,
+    y: At
   }
 };
 
 const getOverflowAmount = (t, n) => {
   const o = window.devicePixelRatio % 1 !== 0 ? 1 : 0;
   const s = {
-    w: Ct(t.w - n.w),
-    h: Ct(t.h - n.h)
+    w: Ot(t.w - n.w),
+    h: Ot(t.h - n.h)
   };
   return {
     w: s.w > o ? s.w : 0,
@@ -1430,7 +1442,7 @@ const getOverflowAmount = (t, n) => {
 
 const conditionalClass = (t, n, o) => o ? addClass(t, n) : removeClass(t, n);
 
-const overflowIsVisible = t => 0 === t.indexOf(Ot);
+const overflowIsVisible = t => 0 === t.indexOf(Et);
 
 const createOverflowUpdateSegment = (t, n) => {
   const [o, s] = n;
@@ -1439,11 +1451,11 @@ const createOverflowUpdateSegment = (t, n) => {
   const v = getPlugins()[yt];
   const w = !i && !h && (g.x || g.y);
   const p = u && i;
-  const [b, y] = createCache(Tt, fractionalSize.bind(0, r));
-  const [m, S] = createCache(Tt, scrollSize.bind(0, r));
-  const [x, T] = createCache(Tt);
-  const [z, I] = createCache(Tt);
-  const [L] = createCache(zt);
+  const [b, y] = createCache(zt, fractionalSize.bind(0, r));
+  const [m, S] = createCache(zt, scrollSize.bind(0, r));
+  const [x, $] = createCache(zt);
+  const [z, I] = createCache(zt);
+  const [L] = createCache(It);
   const fixFlexboxGlue = (t, n) => {
     style(r, {
       height: ""
@@ -1462,7 +1474,7 @@ const createOverflowUpdateSegment = (t, n) => {
     }
   };
   const getViewportOverflowState = (t, n) => {
-    const o = !h && !t ? At : 0;
+    const o = !h && !t ? Tt : 0;
     const getStatePerAxis = (t, s, e) => {
       const c = style(r, t);
       const l = n ? n[t] : c;
@@ -1496,7 +1508,7 @@ const createOverflowUpdateSegment = (t, n) => {
   const setViewportOverflowState = (t, n, o, s) => {
     const setAxisOverflowStyle = (t, n) => {
       const o = overflowIsVisible(t);
-      const s = n && o && t.replace(`${Ot}-`, "") || "";
+      const s = n && o && t.replace(`${Et}-`, "") || "";
       return [ n && !o ? t : "", overflowIsVisible(s) ? "hidden" : s ];
     };
     const [e, c] = setAxisOverflowStyle(o.x, n.x);
@@ -1524,7 +1536,7 @@ const createOverflowUpdateSegment = (t, n) => {
       e.paddingBottom = w + (l ? a : 0);
     }
   };
-  const [H, M] = v ? v.H(w, _, r, l, o, getViewportOverflowState, hideNativeScrollbars) : [ () => w, () => [ noop ] ];
+  const [H, P] = v ? v.H(w, _, r, l, o, getViewportOverflowState, hideNativeScrollbars) : [ () => w, () => [ noop ] ];
   return (t, n, l) => {
     const {ht: u, $t: f, gt: v, yt: w, _t: R, wt: k} = t;
     const {ft: B, vt: V} = o();
@@ -1537,11 +1549,11 @@ const createOverflowUpdateSegment = (t, n) => {
     const X = U || W;
     let J = y(l);
     let K = S(l);
-    let Z = T(l);
+    let Z = $(l);
     let Q = I(l);
     let tt;
     if (Y && h) {
-      a(P, A, !G);
+      a(D, T, !G);
     }
     if (N) {
       tt = getViewportOverflowState(G);
@@ -1549,9 +1561,9 @@ const createOverflowUpdateSegment = (t, n) => {
     }
     if (u || w || v || k || Y) {
       if (X) {
-        a(D, E, false);
+        a(M, A, false);
       }
-      const [t, n] = M(G, V, tt);
+      const [t, n] = P(G, V, tt);
       const [o, s] = J = b(l);
       const [e, c] = K = m(l);
       const i = clientSize(r);
@@ -1563,12 +1575,12 @@ const createOverflowUpdateSegment = (t, n) => {
         u = scrollSize(r);
       }
       const _ = {
-        w: Ct($t(e.w, u.w) + o.w),
-        h: Ct($t(e.h, u.h) + o.h)
+        w: Ot(Ct(e.w, u.w) + o.w),
+        h: Ot(Ct(e.h, u.h) + o.h)
       };
       const h = {
-        w: Ct(p ? d.innerWidth : f.w + Ct(i.w - e.w) + o.w),
-        h: Ct(p ? d.innerHeight : f.h + Ct(i.h - e.h) + o.h)
+        w: Ot(p ? d.innerWidth : f.w + Ot(i.w - e.w) + o.w),
+        h: Ot(p ? d.innerHeight : f.h + Ot(i.h - e.h) + o.h)
       };
       Q = z(h);
       Z = x(getOverflowAmount(_, h), l);
@@ -1600,15 +1612,15 @@ const createOverflowUpdateSegment = (t, n) => {
         fixFlexboxGlue(n, B);
       }
       if (i) {
-        attr(e, C, t.overflowX);
-        attr(e, O, t.overflowY);
+        attr(e, O, t.overflowX);
+        attr(e, E, t.overflowY);
       } else {
         style(r, t);
       }
     }
-    attrClass(e, $, E, ut);
-    conditionalClass(c, D, ut);
-    !i && conditionalClass(r, D, X);
+    attrClass(e, C, A, ut);
+    conditionalClass(c, M, ut);
+    !i && conditionalClass(r, M, X);
     const [dt, ft] = L(getViewportOverflowState(G).xt);
     s({
       xt: dt,
@@ -1662,19 +1674,19 @@ const createStructureSetupUpdate = (t, n) => {
     const a = l || !r;
     const u = a && scrollLeft(o);
     const d = a && scrollTop(o);
-    s("", T, true);
+    s("", z, true);
     let f = c;
     each(i, (n => {
       f = prepareUpdateHints(f, n(f, t, !!e) || {}, e);
     }));
     scrollLeft(o, u);
     scrollTop(o, d);
-    s("", T);
+    s("", z);
     return f;
   };
 };
 
-const It = 3333333;
+const Lt = 3333333;
 
 const domRectHasDimensions = t => t && (t.height || t.width);
 
@@ -1682,7 +1694,7 @@ const createSizeObserver = (t, n, o) => {
   const {It: s = false, Lt: e = false} = o || {};
   const c = getPlugins()[gt];
   const {B: r} = getEnvironment();
-  const l = createDOM(`<div class="${M}"><div class="${k}"></div></div>`);
+  const l = createDOM(`<div class="${R}"><div class="${B}"></div></div>`);
   const i = l[0];
   const a = i.firstChild;
   const d = directionIsRTL.bind(0, t);
@@ -1711,8 +1723,8 @@ const createSizeObserver = (t, n, o) => {
     }
     if (s && a) {
       const n = e ? t[0] : directionIsRTL(i);
-      scrollLeft(i, n ? r.n ? -It : r.i ? 0 : It : It);
-      scrollTop(i, It);
+      scrollLeft(i, n ? r.n ? -Lt : r.i ? 0 : Lt : Lt);
+      scrollTop(i, Lt);
     }
     if (!c) {
       n({
@@ -1759,7 +1771,7 @@ const createSizeObserver = (t, n, o) => {
       })));
     }
     if (h) {
-      addClass(i, R);
+      addClass(i, k);
       push(_, on(i, "animationstart", h, {
         C: !!u
       }));
@@ -1772,7 +1784,7 @@ const isHeightIntrinsic = t => 0 === t.h || t.isIntersecting || t.intersectionRa
 
 const createTrinsicObserver = (t, n) => {
   let o;
-  const s = createDiv(Y);
+  const s = createDiv(q);
   const e = [];
   const [c] = createCache({
     o: false
@@ -1956,15 +1968,15 @@ const createDOMObserver = (t, n, o, s) => {
   } ];
 };
 
-const Lt = `[${$}]`;
+const Ht = `[${C}]`;
 
-const Ht = `.${I}`;
+const Pt = `.${L}`;
 
-const Pt = [ "tabindex" ];
+const Dt = [ "tabindex" ];
 
-const Dt = [ "wrap", "cols", "rows" ];
+const Mt = [ "wrap", "cols", "rows" ];
 
-const Mt = [ "id", "class", "style", "open" ];
+const Rt = [ "id", "class", "style", "open" ];
 
 const createStructureSetupObservers = (t, n, o) => {
   let s;
@@ -1980,19 +1992,19 @@ const createStructureSetupObservers = (t, n, o) => {
       h: 0
     }
   }, (() => {
-    const t = _(D, E);
-    const n = _(L, "");
+    const t = _(M, A);
+    const n = _(H, "");
     const o = n && scrollLeft(i);
     const s = n && scrollTop(i);
-    h(D, E);
-    h(L, "");
-    h("", T, true);
+    h(M, A);
+    h(H, "");
+    h("", z, true);
     const e = scrollSize(a);
     const c = scrollSize(i);
     const r = fractionalSize(i);
-    h(D, E, t);
-    h(L, "", n);
-    h("", T);
+    h(M, A, t);
+    h(H, "", n);
+    h("", z);
     scrollLeft(i, o);
     scrollTop(i, s);
     return {
@@ -2000,7 +2012,7 @@ const createStructureSetupObservers = (t, n, o) => {
       h: c.h + e.h + r.h
     };
   }));
-  const w = d ? Dt : Mt.concat(Dt);
+  const w = d ? Mt : Rt.concat(Mt);
   const p = debounce(o, {
     g: () => s,
     v: () => e,
@@ -2014,8 +2026,8 @@ const createStructureSetupObservers = (t, n, o) => {
     }
   });
   const updateViewportAttrsFromHost = t => {
-    each(t || Pt, (t => {
-      if (indexOf(Pt, t) > -1) {
+    each(t || Dt, (t => {
+      if (indexOf(Dt, t) > -1) {
         const n = attr(l, t);
         if (isString(n)) {
           attr(i, t, n);
@@ -2079,8 +2091,8 @@ const createStructureSetupObservers = (t, n, o) => {
     It: true
   }) : [ noop, noop ];
   const [$, C] = createDOMObserver(l, false, onHostMutation, {
-    Dt: Mt,
-    Pt: Mt.concat(Pt)
+    Dt: Rt,
+    Pt: Rt.concat(Dt)
   });
   const O = f && u && new u(onSizeChanged.bind(0, {
     ht: true
@@ -2127,11 +2139,11 @@ const createStructureSetupObservers = (t, n, o) => {
         Dt: w.concat(o || []),
         Pt: w.concat(o || []),
         Mt: l,
-        Rt: Lt,
+        Rt: Ht,
         Bt: (t, n) => {
           const {target: o, attributeName: s} = t;
-          const e = !n && s && !f ? liesBetween(o, Lt, Ht) : false;
-          return e || !!closest(o, `.${q}`) || !!ignoreMutationFromOptions(t);
+          const e = !n && s && !f ? liesBetween(o, Ht, Pt) : false;
+          return e || !!closest(o, `.${F}`) || !!ignoreMutationFromOptions(t);
         }
       });
     }
@@ -2153,12 +2165,12 @@ const createStructureSetupObservers = (t, n, o) => {
   } ];
 };
 
-const Rt = {
+const kt = {
   x: 0,
   y: 0
 };
 
-const kt = {
+const Bt = {
   tt: {
     t: 0,
     r: 0,
@@ -2175,8 +2187,8 @@ const kt = {
     paddingBottom: 0,
     paddingLeft: 0
   },
-  Ct: Rt,
-  Ot: Rt,
+  Ct: kt,
+  Ot: kt,
   xt: {
     x: "hidden",
     y: "hidden"
@@ -2191,7 +2203,7 @@ const kt = {
 
 const createStructureSetup = (t, n) => {
   const o = createOptionCheck(n, {});
-  const s = createState(kt);
+  const s = createState(Bt);
   const [e, c, r] = createEventListenerHub();
   const [l] = s;
   const [i, a, u] = createStructureSetupElements(t);
@@ -2225,7 +2237,7 @@ const createStructureSetup = (t, n) => {
   } ];
 };
 
-const {round: Bt} = Math;
+const {round: Vt} = Math;
 
 const getClientOffset = t => ({
   x: t.clientX,
@@ -2236,8 +2248,8 @@ const getScale = t => {
   const {width: n, height: o} = getBoundingClientRect(t);
   const {w: s, h: e} = offsetSize(t);
   return {
-    x: Bt(n) / s || 1,
-    y: Bt(o) / e || 1
+    x: Vt(n) / s || 1,
+    y: Vt(o) / e || 1
   };
 };
 
@@ -2292,13 +2304,13 @@ const createDragScrollingEvents = (t, n, o, s, e, c) => {
 const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r) => {
   const {Gt: l} = o;
   return runEachAndClear.bind(0, [ on(l, "pointerenter", (() => {
-    s(Z, true);
+    s(Q, true);
   })), on(l, "pointerleave pointercancel", (() => {
-    s(Z);
+    s(Q);
   })), createRootClickStopPropagationEvents(l, e), createDragScrollingEvents(t, e, o, c, n, r) ]);
 };
 
-const {min: Vt, max: jt, abs: Yt, round: qt} = Math;
+const {min: jt, max: Yt, abs: qt, round: Ft} = Math;
 
 const getScrollbarHandleLengthRatio = (t, n, o, s) => {
   if (s) {
@@ -2306,12 +2318,12 @@ const getScrollbarHandleLengthRatio = (t, n, o, s) => {
     const {Ot: n, Ct: e} = s;
     const c = e[t];
     const r = n[t];
-    return jt(0, Vt(1, c / (c + r)));
+    return Yt(0, jt(1, c / (c + r)));
   }
   const e = o ? "w" : "h";
   const c = offsetSize(t)[e];
   const r = offsetSize(n)[e];
-  return jt(0, Vt(1, c / r));
+  return Yt(0, jt(1, c / r));
 };
 
 const getScrollbarHandleOffsetRatio = (t, n, o, s, e, c) => {
@@ -2319,12 +2331,12 @@ const getScrollbarHandleOffsetRatio = (t, n, o, s, e, c) => {
   const l = c ? "x" : "y";
   const i = c ? "Left" : "Top";
   const {Ot: a} = s;
-  const u = qt(a[l]);
-  const d = Yt(o[`scroll${i}`]);
+  const u = Ft(a[l]);
+  const d = qt(o[`scroll${i}`]);
   const f = c && e;
   const _ = r.i ? d : u - d;
   const h = f ? _ : d;
-  const g = Vt(1, h / u);
+  const g = jt(1, h / u);
   const v = getScrollbarHandleLengthRatio(t, n, c);
   return 1 / v * (1 - v) * g;
 };
@@ -2385,12 +2397,12 @@ const createScrollbarsSetupElements = (t, n, o) => {
     scrollbarStructureRefreshHandleOffset(v, t);
   };
   const generateScrollbarDOM = t => {
-    const n = t ? G : N;
+    const n = t ? N : U;
     const s = t ? g : v;
-    const e = isEmptyArray(s) ? K : "";
-    const r = createDiv(`${q} ${n} ${e}`);
-    const l = createDiv(U);
-    const i = createDiv(W);
+    const e = isEmptyArray(s) ? Z : "";
+    const r = createDiv(`${F} ${n} ${e}`);
+    const l = createDiv(W);
+    const i = createDiv(X);
     const a = {
       Gt: r,
       Ft: l,
@@ -2408,7 +2420,7 @@ const createScrollbarsSetupElements = (t, n, o) => {
     appendChildren(f, g[0].Gt);
     appendChildren(f, v[0].Gt);
     _((() => {
-      scrollbarsAddRemoveClass(K);
+      scrollbarsAddRemoveClass(Z);
     }), 300);
   };
   w();
@@ -2469,9 +2481,9 @@ const createScrollbarsSetup = (t, n, o) => {
   const manageScrollbarsAutoHide = (t, n) => {
     y();
     if (t) {
-      L(tt);
+      L(nt);
     } else {
-      const hide = () => L(tt, true);
+      const hide = () => L(nt, true);
       if (i > 0 && !n) {
         b(hide);
       } else {
@@ -2525,7 +2537,7 @@ const createScrollbarsSetup = (t, n, o) => {
     const D = f || S || r;
     const setScrollbarVisibility = (t, n) => {
       const o = "visible" === m || "auto" === m && "scroll" === t;
-      L(X, o, n);
+      L(J, o, n);
       return o;
     };
     i = C;
@@ -2541,39 +2553,27 @@ const createScrollbarsSetup = (t, n, o) => {
       manageScrollbarsAutoHide(!c, true);
     }
     if (E) {
-      L(ot, O);
+      L(st, O);
     }
     if (z) {
-      L(nt, A);
+      L(ot, A);
     }
     if (D) {
       const t = setScrollbarVisibility(w.x, true);
       const n = setScrollbarVisibility(w.y, false);
       const o = t && n;
-      L(J, !o);
+      L(K, !o);
     }
     if (I) {
       H(g);
       P(g);
-      L(Q, !v.x, true);
-      L(Q, !v.y, false);
-      L(F, p && !T);
+      L(tt, !v.x, true);
+      L(tt, !v.y, false);
+      L(G, p && !T);
     }
   }, k, runEachAndClear.bind(0, R) ];
 };
 
-const Ft = new WeakMap;
-
-const addInstance = (t, n) => {
-  Ft.set(t, n);
-};
-
-const removeInstance = t => {
-  Ft.delete(t);
-};
-
-const getInstance = t => Ft.get(t);
-
 const OverlayScrollbars = (t, n, o) => {
   const {F: s, j: e} = getEnvironment();
   const c = getPlugins();

packages/overlayscrollbars/package.json

@@ -1,8 +1,27 @@
 {
-  "name": "overlayscrollbars",
   "private": true,
-  "description": "OverlayScrollbars version 2",
-  "version": "0.0.1",
+  "name": "overlayscrollbars",
+  "version": "2.0.0-beta.0",
+  "description": "A scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",
+  "author": "Rene Haas | KingSora",
+  "license": "MIT",
+  "homepage": "https://kingsora.github.io/OverlayScrollbars",
+  "bugs": "https://github.com/KingSora/OverlayScrollbars/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KingSora/OverlayScrollbars.git",
+    "directory": "packages/overlayscrollbars"
+  },
+  "keywords": [
+    "overlayscrollbars",
+    "custom",
+    "styleable",
+    "scrollbar",
+    "scrollbars",
+    "scroll",
+    "frontend",
+    "browser"
+  ],
   "files": [
     "src",
     "dist",

packages/overlayscrollbars/rollup.config.js

@@ -12,6 +12,7 @@ module.exports = createRollupConfig({
     external: Object.keys(devDependencies || {}).concat(Object.keys(peerDependencies || {})),
     output: {
       exports: 'auto',
+      sourcemap: true,
       plugins: [
         rollupTerser({
           safari10: true,

packages/overlayscrollbars/src/eventListeners.ts

@@ -0,0 +1,44 @@
+import type { OverlayScrollbars } from 'overlayscrollbars';
+import type { DeepPartial } from 'typings';
+import type { Options } from 'options';
+import type {
+  InitialEventListeners as GeneralInitialEventListeners,
+  EventListener as GeneralEventListener,
+} from 'support/eventListeners';
+
+export interface OnUpdatedEventListenerArgs {
+  updateHints: {
+    sizeChanged: boolean;
+    directionChanged: boolean;
+    heightIntrinsicChanged: boolean;
+    overflowEdgeChanged: boolean;
+    overflowAmountChanged: boolean;
+    overflowStyleChanged: boolean;
+    hostMutation: boolean;
+    contentMutation: boolean;
+  };
+  changedOptions: DeepPartial<Options>;
+  force: boolean;
+}
+
+export type EventListenerMap = {
+  /**
+   * Triggered after all elements are initialized and appended.
+   */
+  initialized: [instance: OverlayScrollbars];
+  /**
+   * Triggered after an update.
+   */
+  updated: [instance: OverlayScrollbars, onUpdatedArgs: OnUpdatedEventListenerArgs];
+  /**
+   * Triggered after all elements, observers and events are destroyed.
+   */
+  destroyed: [instance: OverlayScrollbars, canceled: boolean];
+};
+
+export type InitialEventListeners = GeneralInitialEventListeners<EventListenerMap>;
+
+export type EventListener<N extends keyof EventListenerMap> = GeneralEventListener<
+  EventListenerMap,
+  N
+>;

packages/overlayscrollbars/src/index.scss

@@ -1,4 +1,4 @@
 @import './styles/sizeobserver.scss';
 @import './styles/trinsicobserver.scss';
-@import './styles/scrollbars.scss';
 @import './styles/structure.scss';
+@import './styles/scrollbars.scss';

packages/overlayscrollbars/src/index.ts

@@ -2,3 +2,25 @@ import 'index.scss';
 
 export { OverlayScrollbars } from 'overlayscrollbars';
 export { scrollbarsHidingPlugin, sizeObserverPlugin } from 'plugins';
+
+export type {
+  Options,
+  OverflowBehavior,
+  ScrollbarVisibilityBehavior,
+  ScrollbarAutoHideBehavior,
+} from 'options';
+export type {
+  EventListenerMap,
+  EventListener,
+  InitialEventListeners,
+  OnUpdatedEventListenerArgs,
+} from 'eventListeners';
+export type {
+  Initialization,
+  InitializationTarget,
+  InitializationTargetElement,
+  InitializationTargetObject,
+  StaticInitializationElement,
+  DynamicInitializationElement,
+} from 'initialization';
+export type { Plugin, PluginInstance } from 'plugins';

packages/overlayscrollbars/src/initialization.ts

@@ -8,9 +8,7 @@ import { StructureSetupElementsObj } from 'setups/structureSetup/structureSetup.
 type StaticInitialization = HTMLElement | false | null;
 type DynamicInitialization = HTMLElement | boolean | null;
 
-export type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
-
-export type Initialization = Omit<StructureInitialization, 'target'> &
+export type Initialization = StructureInitialization &
   ScrollbarsInitialization & {
     cancel: {
       nativeScrollbarsOverlaid: boolean;
@@ -18,8 +16,11 @@ export type Initialization = Omit<StructureInitialization, 'target'> &
     };
   };
 
-export type InitializationTargetObject = DeepPartial<Initialization> &
-  Pick<StructureInitialization, 'target'>;
+export type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
+
+export type InitializationTargetObject = DeepPartial<Initialization> & {
+  target: InitializationTargetElement;
+};
 
 export type InitializationTarget = InitializationTargetElement | InitializationTargetObject;
 
@@ -50,7 +51,7 @@ export type FallbackInitializtationElement<
 const resolveInitialization = <T>(value: any, args: any): T =>
   isFunction(value) ? value.apply(0, args) : value;
 
-const staticInitializationElement = <T extends StaticInitializationElement<any>>(
+export const staticInitializationElement = <T extends StaticInitializationElement<any>>(
   args: Parameters<Extract<T, (...initializationFnArgs: any[]) => any>>,
   fallbackStaticInitializationElement: FallbackInitializtationElement<T>,
   defaultStaticInitializationElementStrategy: T,
@@ -66,7 +67,7 @@ const staticInitializationElement = <T extends StaticInitializationElement<any>>
   return resolvedInitialization || fallbackStaticInitializationElement();
 };
 
-const dynamicInitializationElement = <T extends DynamicInitializationElement<any>>(
+export const dynamicInitializationElement = <T extends DynamicInitializationElement<any>>(
   args: Parameters<Extract<T, (...initializationFnArgs: any[]) => any>>,
   fallbackDynamicInitializationElement: FallbackInitializtationElement<T>,
   defaultDynamicInitializationElementStrategy: T,
@@ -87,7 +88,7 @@ const dynamicInitializationElement = <T extends DynamicInitializationElement<any
   );
 };
 
-const cancelInitialization = (
+export const cancelInitialization = (
   cancelInitializationValue: DeepPartial<Initialization['cancel']> | false | null | undefined,
   structureSetupElements: StructureSetupElementsObj
 ): boolean => {
@@ -112,5 +113,3 @@ const cancelInitialization = (
 
   return !!finalNativeScrollbarsOverlaid || !!finalDocumentScrollingElement;
 };
-
-export { staticInitializationElement, dynamicInitializationElement, cancelInitialization };

packages/overlayscrollbars/src/options.ts

@@ -9,8 +9,6 @@ const opsStringify = (value: any) =>
     return val;
   });
 
-export type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
-
 export type OverflowBehavior =
   | 'hidden'
   | 'scroll'
@@ -22,22 +20,6 @@ export type ScrollbarVisibilityBehavior = 'visible' | 'hidden' | 'auto';
 
 export type ScrollbarAutoHideBehavior = '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 {
   paddingAbsolute: boolean;
   showNativeOverlaidScrollbars: boolean;
@@ -64,33 +46,6 @@ export interface Options {
 
 export type ReadonlyOptions = DeepReadonly<Options>;
 
-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 const defaultOptions: Options = {
   // resize: 'none', // none || both  || horizontal || vertical || n || b || h || v
   paddingAbsolute: false, // true || false

packages/overlayscrollbars/src/overlayscrollbars.ts

@@ -5,29 +5,22 @@ import {
   isFunction,
   keys,
   isHTMLElement,
-  XY,
-  TRBL,
   createEventListenerHub,
   isPlainObject,
 } from 'support';
-import { createStructureSetup, createScrollbarsSetup } from 'setups';
-import { getOptionsDiff, Options, ReadonlyOptions } from 'options';
+import { getOptionsDiff } from 'options';
 import { getEnvironment } from 'environment';
-import {
-  getPlugins,
-  addPlugin,
-  optionsValidationPluginName,
-  Plugin,
-  OptionsValidationPluginInstance,
-} from 'plugins';
+import { cancelInitialization } from 'initialization';
 import { addInstance, getInstance, removeInstance } from 'instances';
+import { createStructureSetup, createScrollbarsSetup } from 'setups';
+import { getPlugins, addPlugin, optionsValidationPluginName } from 'plugins';
+import type { XY, TRBL } from 'support';
+import type { Options, ReadonlyOptions } from 'options';
+import type { Plugin, OptionsValidationPluginInstance } from 'plugins';
+import type { InitializationTarget, Initialization } from 'initialization';
 import type { DeepPartial, OverflowStyle } from 'typings';
-import { InitializationTarget, Initialization, cancelInitialization } from 'initialization';
+import type { EventListenerMap, EventListener, InitialEventListeners } from 'eventListeners';
 import type {
-  InitialEventListeners as GeneralInitialEventListeners,
-  EventListener as GeneralEventListener,
-} from 'support/eventListeners';
-import {
   ScrollbarsSetupElement,
   ScrollbarStructure,
 } from 'setups/scrollbarsSetup/scrollbarsSetup.elements';
@@ -40,7 +33,7 @@ export interface OverlayScrollbarsStatic {
   (
     target: InitializationTarget,
     options: DeepPartial<Options>,
-    eventListeners?: GeneralInitialEventListeners<EventListenerMap>
+    eventListeners?: InitialEventListeners
   ): OverlayScrollbars;
 
   plugin(plugin: Plugin | Plugin[]): void;
@@ -97,43 +90,6 @@ export interface Elements {
   scrollbarVertical: CloneableScrollbarElements;
 }
 
-export interface OnUpdatedEventListenerArgs {
-  updateHints: {
-    sizeChanged: boolean;
-    directionChanged: boolean;
-    heightIntrinsicChanged: boolean;
-    overflowEdgeChanged: boolean;
-    overflowAmountChanged: boolean;
-    overflowStyleChanged: boolean;
-    hostMutation: boolean;
-    contentMutation: boolean;
-  };
-  changedOptions: DeepPartial<Options>;
-  force: boolean;
-}
-
-export type EventListenerMap = {
-  /**
-   * Triggered after all elements are initialized and appended.
-   */
-  initialized: [instance: OverlayScrollbars];
-  /**
-   * Triggered after an update.
-   */
-  updated: [instance: OverlayScrollbars, onUpdatedArgs: OnUpdatedEventListenerArgs];
-  /**
-   * Triggered after all elements, observers and events are destroyed.
-   */
-  destroyed: [instance: OverlayScrollbars, canceled: boolean];
-};
-
-export type InitialEventListeners = GeneralInitialEventListeners<EventListenerMap>;
-
-export type EventListener<Name extends keyof EventListenerMap> = GeneralEventListener<
-  EventListenerMap,
-  Name
->;
-
 export interface OverlayScrollbars {
   options(): Options;
   options(newOptions?: DeepPartial<Options>): Options;
@@ -146,18 +102,18 @@ export interface OverlayScrollbars {
 
   elements(): Elements;
 
-  on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>): () => void;
-  on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>[]): () => void;
+  on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): () => void;
+  on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): () => void;
 
-  off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>): void;
-  off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>[]): void;
+  off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): void;
+  off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): void;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const OverlayScrollbars: OverlayScrollbarsStatic = (
   target: InitializationTarget,
   options?: DeepPartial<Options>,
-  eventListeners?: GeneralInitialEventListeners<EventListenerMap>
+  eventListeners?: InitialEventListeners
 ) => {
   const { _getDefaultOptions, _addListener: addEnvListener } = getEnvironment();
   const plugins = getPlugins();

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.initialization.ts

@@ -23,7 +23,6 @@ export type StructureDynamicInitializationElement = DynamicInitializationElement
  * undefined means that the default initialization strategy is used.
  */
 export interface StructureInitialization {
-  target: InitializationTargetElement;
   host: StructureStaticInitializationElement; // only relevant for textarea
   viewport: StructureStaticInitializationElement;
   padding: StructureDynamicInitializationElement;

packages/overlayscrollbars/src/styles/scrollbars.scss

@@ -76,10 +76,6 @@ body > .os-scrollbar {
   bottom: 0;
 }
 
-/*
-THEMES:
-*/
-
 /* NONE THEME: */
 .os-theme-none.os-scrollbar {
   display: none !important;

packages/overlayscrollbars/src/support/eventListeners.ts

@@ -4,8 +4,8 @@ import { each, from, isEmptyArray } from 'support/utils/array';
 
 export type EventListener<
   EventMap extends Record<string, any[]>,
-  Name extends keyof EventMap = keyof EventMap
-> = (...args: EventMap[Name]) => void;
+  N extends keyof EventMap = keyof EventMap
+> = (...args: EventMap[N]) => void;
 
 export type InitialEventListeners<EventMap extends Record<string, any[]>> = {
   [K in keyof EventMap]?: EventListener<EventMap> | EventListener<EventMap>[];
@@ -22,34 +22,29 @@ export const createEventListenerHub = <EventMap extends Record<string, any[]>>(
   initialEventListeners?: InitialEventListeners<EventMap>
 ) => {
   // eslint-disable-next-line @typescript-eslint/no-shadow
-  type EventListener<Name extends keyof EventMap = keyof EventMap> = (
-    ...args: EventMap[Name]
-  ) => void;
+  type EventListener<N extends keyof EventMap = keyof EventMap> = (...args: EventMap[N]) => void;
   type RemoveEvent = {
-    <Name extends keyof EventMap>(name?: Name, listener?: EventListener<Name>): void;
-    <Name extends keyof EventMap>(name?: Name, listener?: EventListener<Name>[]): void;
-    <Name extends keyof EventMap>(
-      name?: Name,
-      listener?: EventListener<Name> | EventListener<Name>[]
-    ): void;
+    <N extends keyof EventMap>(name?: N, listener?: EventListener<N>): void;
+    <N extends keyof EventMap>(name?: N, listener?: EventListener<N>[]): void;
+    <N extends keyof EventMap>(name?: N, listener?: EventListener<N> | EventListener<N>[]): void;
   };
   type AddEvent = {
-    <Name extends keyof EventMap>(name: Name, listener: EventListener<Name>): () => void;
-    <Name extends keyof EventMap>(name: Name, listener: EventListener<Name>[]): () => void;
-    <Name extends keyof EventMap>(
-      name: Name,
-      listener: EventListener<Name> | EventListener<Name>[]
+    <N extends keyof EventMap>(name: N, listener: EventListener<N>): () => void;
+    <N extends keyof EventMap>(name: N, listener: EventListener<N>[]): () => void;
+    <N extends keyof EventMap>(
+      name: N,
+      listener: EventListener<N> | EventListener<N>[]
     ): () => void;
   };
   type TriggerEvent = {
-    <Name extends keyof EventMap>(name: Name, args?: EventMap[Name]): void;
+    <N extends keyof EventMap>(name: N, args?: EventMap[N]): void;
   };
 
   const events = new Map<keyof EventMap, Set<EventListener>>();
 
-  const removeEvent: RemoveEvent = <Name extends keyof EventMap>(
-    name?: Name,
-    listener?: EventListener<Name> | EventListener<Name>[]
+  const removeEvent: RemoveEvent = <N extends keyof EventMap>(
+    name?: N,
+    listener?: EventListener<N> | EventListener<N>[]
   ): void => {
     if (name) {
       const eventSet = events.get(name);
@@ -66,9 +61,9 @@ export const createEventListenerHub = <EventMap extends Record<string, any[]>>(
     }
   };
 
-  const addEvent: AddEvent = <Name extends keyof EventMap>(
-    name: Name,
-    listener: EventListener<Name> | EventListener<Name>[]
+  const addEvent: AddEvent = <N extends keyof EventMap>(
+    name: N,
+    listener: EventListener<N> | EventListener<N>[]
   ): (() => void) => {
     const eventSet = events.get(name) || new Set();
     events.set(name, eventSet);
@@ -80,9 +75,9 @@ export const createEventListenerHub = <EventMap extends Record<string, any[]>>(
     return removeEvent.bind(0, name as any, listener as any);
   };
 
-  const triggerEvent: TriggerEvent = <Name extends keyof EventMap>(
-    name: Name,
-    args?: EventMap[Name]
+  const triggerEvent: TriggerEvent = <N extends keyof EventMap>(
+    name: N,
+    args?: EventMap[N]
   ): void => {
     const eventSet = events.get(name);
 

packages/overlayscrollbars/styles/overlayscrollbars.css

@@ -118,186 +118,6 @@
       min-height: 1px;
       min-width: 1px; }
 
-[data-overlayscrollbars~='updating'] > .os-scrollbar {
-  display: none !important; }
-
-.os-scrollbar {
-  contain: strict;
-  transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
-  pointer-events: none;
-  position: absolute;
-  z-index: 99999;
-  opacity: 0;
-  visibility: hidden; }
-
-body > .os-scrollbar {
-  position: fixed; }
-
-.os-scrollbar-transitionless {
-  transition: none; }
-
-.os-scrollbar-track {
-  position: relative;
-  direction: ltr !important;
-  padding: 0 !important;
-  border: none !important; }
-
-.os-scrollbar-handle {
-  position: absolute; }
-
-.os-scrollbar-track,
-.os-scrollbar-handle {
-  pointer-events: none;
-  width: 100%;
-  height: 100%; }
-
-.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
-.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
-  pointer-events: auto;
-  touch-action: none; }
-
-.os-scrollbar-horizontal {
-  bottom: 0;
-  left: 0; }
-
-.os-scrollbar-vertical {
-  top: 0;
-  right: 0; }
-
-.os-scrollbar-rtl.os-scrollbar-horizontal {
-  right: 0; }
-
-.os-scrollbar-rtl.os-scrollbar-vertical {
-  right: auto;
-  left: 0; }
-
-.os-scrollbar-visible,
-.os-scrollbar-interaction.os-scrollbar-visible {
-  opacity: 1;
-  visibility: visible; }
-
-.os-scrollbar-auto-hidden {
-  opacity: 0;
-  visibility: hidden; }
-
-.os-scrollbar-unusable,
-.os-scrollbar-unusable * {
-  pointer-events: none !important; }
-
-.os-scrollbar-unusable .os-scrollbar-handle {
-  opacity: 0 !important; }
-
-.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless {
-  left: 0;
-  right: 0; }
-
-.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless {
-  top: 0;
-  bottom: 0; }
-
-/*
-THEMES:
-*/
-/* NONE THEME: */
-.os-theme-none.os-scrollbar {
-  display: none !important; }
-
-/* DARK & LIGHT THEME: */
-.os-theme-dark.os-scrollbar-horizontal,
-.os-theme-light.os-scrollbar-horizontal {
-  right: 10px;
-  height: 10px; }
-
-.os-theme-dark.os-scrollbar-vertical,
-.os-theme-light.os-scrollbar-vertical {
-  bottom: 10px;
-  width: 10px; }
-
-.os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,
-.os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal {
-  left: 10px;
-  right: 0; }
-
-.os-theme-dark.os-scrollbar,
-.os-theme-light.os-scrollbar {
-  padding: 2px;
-  box-sizing: border-box;
-  background: transparent; }
-
-.os-theme-dark.os-scrollbar-unusable,
-.os-theme-light.os-scrollbar-unusable {
-  background: transparent; }
-
-.os-theme-dark.os-scrollbar > .os-scrollbar-track,
-.os-theme-light.os-scrollbar > .os-scrollbar-track {
-  background: transparent; }
-
-.os-theme-dark.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
-.os-theme-light.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
-  min-width: 30px; }
-
-.os-theme-dark.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
-.os-theme-light.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
-  min-height: 30px; }
-
-.os-theme-dark.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle,
-.os-theme-light.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle {
-  transition: background-color 0.3s; }
-
-.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
-.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
-.os-theme-dark.os-scrollbar > .os-scrollbar-track,
-.os-theme-light.os-scrollbar > .os-scrollbar-track {
-  border-radius: 10px; }
-
-.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-  background: rgba(0, 0, 0, 0.4); }
-
-.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-  background: rgba(255, 255, 255, 0.4); }
-
-.os-theme-dark.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
-  background: rgba(0, 0, 0, 0.55); }
-
-.os-theme-light.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
-  background: rgba(255, 255, 255, 0.55); }
-
-.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
-  background: rgba(0, 0, 0, 0.7); }
-
-.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
-  background: rgba(255, 255, 255, 0.7); }
-
-.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
-.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
-.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before,
-.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: block; }
-
-.os-theme-dark.os-host-scrollbar-hidden > .os-scrollbar-handle:before {
-  display: none; }
-
-.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
-.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before {
-  top: -6px;
-  bottom: -2px; }
-
-.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
-.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
-  left: -6px;
-  right: -2px; }
-
-.os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,
-.os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before {
-  right: -6px;
-  left: -2px; }
-
 .os-environment {
   --os-custom-prop: -1;
   position: fixed;
@@ -431,3 +251,181 @@ html.os-viewport-scrollbar-hidden > body[data-overlayscrollbars] {
 
 .os-content {
   box-sizing: inherit; }
+
+[data-overlayscrollbars~='updating'] > .os-scrollbar {
+  display: none !important; }
+
+.os-scrollbar {
+  contain: strict;
+  transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
+  pointer-events: none;
+  position: absolute;
+  z-index: 99999;
+  opacity: 0;
+  visibility: hidden; }
+
+body > .os-scrollbar {
+  position: fixed; }
+
+.os-scrollbar-transitionless {
+  transition: none; }
+
+.os-scrollbar-track {
+  position: relative;
+  direction: ltr !important;
+  padding: 0 !important;
+  border: none !important; }
+
+.os-scrollbar-handle {
+  position: absolute; }
+
+.os-scrollbar-track,
+.os-scrollbar-handle {
+  pointer-events: none;
+  width: 100%;
+  height: 100%; }
+
+.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
+.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
+  pointer-events: auto;
+  touch-action: none; }
+
+.os-scrollbar-horizontal {
+  bottom: 0;
+  left: 0; }
+
+.os-scrollbar-vertical {
+  top: 0;
+  right: 0; }
+
+.os-scrollbar-rtl.os-scrollbar-horizontal {
+  right: 0; }
+
+.os-scrollbar-rtl.os-scrollbar-vertical {
+  right: auto;
+  left: 0; }
+
+.os-scrollbar-visible,
+.os-scrollbar-interaction.os-scrollbar-visible {
+  opacity: 1;
+  visibility: visible; }
+
+.os-scrollbar-auto-hidden {
+  opacity: 0;
+  visibility: hidden; }
+
+.os-scrollbar-unusable,
+.os-scrollbar-unusable * {
+  pointer-events: none !important; }
+
+.os-scrollbar-unusable .os-scrollbar-handle {
+  opacity: 0 !important; }
+
+.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless {
+  left: 0;
+  right: 0; }
+
+.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless {
+  top: 0;
+  bottom: 0; }
+
+/* NONE THEME: */
+.os-theme-none.os-scrollbar {
+  display: none !important; }
+
+/* DARK & LIGHT THEME: */
+.os-theme-dark.os-scrollbar-horizontal,
+.os-theme-light.os-scrollbar-horizontal {
+  right: 10px;
+  height: 10px; }
+
+.os-theme-dark.os-scrollbar-vertical,
+.os-theme-light.os-scrollbar-vertical {
+  bottom: 10px;
+  width: 10px; }
+
+.os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal,
+.os-theme-light.os-scrollbar-rtl.os-scrollbar-horizontal {
+  left: 10px;
+  right: 0; }
+
+.os-theme-dark.os-scrollbar,
+.os-theme-light.os-scrollbar {
+  padding: 2px;
+  box-sizing: border-box;
+  background: transparent; }
+
+.os-theme-dark.os-scrollbar-unusable,
+.os-theme-light.os-scrollbar-unusable {
+  background: transparent; }
+
+.os-theme-dark.os-scrollbar > .os-scrollbar-track,
+.os-theme-light.os-scrollbar > .os-scrollbar-track {
+  background: transparent; }
+
+.os-theme-dark.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
+  min-width: 30px; }
+
+.os-theme-dark.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
+  min-height: 30px; }
+
+.os-theme-dark.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle {
+  transition: background-color 0.3s; }
+
+.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-dark.os-scrollbar > .os-scrollbar-track,
+.os-theme-light.os-scrollbar > .os-scrollbar-track {
+  border-radius: 10px; }
+
+.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(0, 0, 0, 0.4); }
+
+.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.4); }
+
+.os-theme-dark.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(0, 0, 0, 0.55); }
+
+.os-theme-light.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
+  background: rgba(255, 255, 255, 0.55); }
+
+.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
+  background: rgba(0, 0, 0, 0.7); }
+
+.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
+  background: rgba(255, 255, 255, 0.7); }
+
+.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
+.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: block; }
+
+.os-theme-dark.os-host-scrollbar-hidden > .os-scrollbar-handle:before {
+  display: none; }
+
+.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before {
+  top: -6px;
+  bottom: -2px; }
+
+.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
+  left: -6px;
+  right: -2px; }
+
+.os-theme-dark.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before,
+.os-theme-light.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle:before {
+  right: -6px;
+  left: -2px; }
+/*# sourceMappingURL=overlayscrollbars.css.map */

packages/overlayscrollbars/styles/overlayscrollbars.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles/sizeobserver.scss","../../src/styles/trinsicobserver.scss","../../src/styles/structure.scss","../overlayscrollbars.css","../../src/styles/scrollbars.scss"],"names":[],"mappings":"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","file":"overlayscrollbars.css"}

packages/overlayscrollbars/types/overlayscrollbars.d.ts

@@ -26,8 +26,8 @@ interface XY<T = number> {
     y: T;
 }
 
-declare type EventListener$1<EventMap extends Record<string, any[]>, Name extends keyof EventMap = keyof EventMap> = (...args: EventMap[Name]) => void;
-declare type InitialEventListeners<EventMap extends Record<string, any[]>> = {
+declare type EventListener$1<EventMap extends Record<string, any[]>, N extends keyof EventMap = keyof EventMap> = (...args: EventMap[N]) => void;
+declare type InitialEventListeners$1<EventMap extends Record<string, any[]>> = {
     [K in keyof EventMap]?: EventListener$1<EventMap> | EventListener$1<EventMap>[];
 };
 
@@ -70,14 +70,16 @@ declare const sizeObserverPlugin: Plugin<SizeObserverPluginInstance>;
 
 declare type StaticInitialization = HTMLElement | false | null;
 declare type DynamicInitialization = HTMLElement | boolean | null;
-declare type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
-declare type Initialization = Omit<StructureInitialization, 'target'> & ScrollbarsInitialization & {
+declare type Initialization = StructureInitialization & ScrollbarsInitialization & {
     cancel: {
         nativeScrollbarsOverlaid: boolean;
         body: boolean | null;
     };
 };
-declare type InitializationTargetObject = DeepPartial<Initialization> & Pick<StructureInitialization, 'target'>;
+declare type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
+declare type InitializationTargetObject = DeepPartial<Initialization> & {
+    target: InitializationTargetElement;
+};
 declare type InitializationTarget = InitializationTargetElement | InitializationTargetObject;
 /**
  * Static elements MUST be present.
@@ -138,7 +140,6 @@ declare type StructureDynamicInitializationElement = DynamicInitializationElemen
  * undefined means that the default initialization strategy is used.
  */
 interface StructureInitialization {
-    target: InitializationTargetElement;
     host: StructureStaticInitializationElement;
     viewport: StructureStaticInitializationElement;
     padding: StructureDynamicInitializationElement;
@@ -189,9 +190,40 @@ declare type ScrollbarsHidingPluginInstance = {
 };
 declare const scrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance>;
 
+interface OnUpdatedEventListenerArgs {
+    updateHints: {
+        sizeChanged: boolean;
+        directionChanged: boolean;
+        heightIntrinsicChanged: boolean;
+        overflowEdgeChanged: boolean;
+        overflowAmountChanged: boolean;
+        overflowStyleChanged: boolean;
+        hostMutation: boolean;
+        contentMutation: boolean;
+    };
+    changedOptions: DeepPartial<Options>;
+    force: boolean;
+}
+declare type EventListenerMap = {
+    /**
+     * Triggered after all elements are initialized and appended.
+     */
+    initialized: [instance: OverlayScrollbars];
+    /**
+     * Triggered after an update.
+     */
+    updated: [instance: OverlayScrollbars, onUpdatedArgs: OnUpdatedEventListenerArgs];
+    /**
+     * Triggered after all elements, observers and events are destroyed.
+     */
+    destroyed: [instance: OverlayScrollbars, canceled: boolean];
+};
+declare type InitialEventListeners = InitialEventListeners$1<EventListenerMap>;
+declare type EventListener<N extends keyof EventListenerMap> = EventListener$1<EventListenerMap, N>;
+
 interface OverlayScrollbarsStatic {
     (target: InitializationTarget): OverlayScrollbars | undefined;
-    (target: InitializationTarget, options: DeepPartial<Options>, eventListeners?: InitialEventListeners<EventListenerMap>): OverlayScrollbars;
+    (target: InitializationTarget, options: DeepPartial<Options>, eventListeners?: InitialEventListeners): OverlayScrollbars;
     plugin(plugin: Plugin | Plugin[]): void;
     valid(osInstance: any): boolean;
     env(): Environment;
@@ -242,35 +274,6 @@ interface Elements {
     scrollbarHorizontal: CloneableScrollbarElements;
     scrollbarVertical: CloneableScrollbarElements;
 }
-interface OnUpdatedEventListenerArgs {
-    updateHints: {
-        sizeChanged: boolean;
-        directionChanged: boolean;
-        heightIntrinsicChanged: boolean;
-        overflowEdgeChanged: boolean;
-        overflowAmountChanged: boolean;
-        overflowStyleChanged: boolean;
-        hostMutation: boolean;
-        contentMutation: boolean;
-    };
-    changedOptions: DeepPartial<Options>;
-    force: boolean;
-}
-declare type EventListenerMap = {
-    /**
-     * Triggered after all elements are initialized and appended.
-     */
-    initialized: [instance: OverlayScrollbars];
-    /**
-     * Triggered after an update.
-     */
-    updated: [instance: OverlayScrollbars, onUpdatedArgs: OnUpdatedEventListenerArgs];
-    /**
-     * Triggered after all elements, observers and events are destroyed.
-     */
-    destroyed: [instance: OverlayScrollbars, canceled: boolean];
-};
-declare type EventListener<Name extends keyof EventListenerMap> = EventListener$1<EventListenerMap, Name>;
 interface OverlayScrollbars {
     options(): Options;
     options(newOptions?: DeepPartial<Options>): Options;
@@ -278,11 +281,11 @@ interface OverlayScrollbars {
     destroy(): void;
     state(): State;
     elements(): Elements;
-    on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>): () => void;
-    on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>[]): () => void;
-    off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>): void;
-    off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>[]): void;
+    on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): () => void;
+    on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): () => void;
+    off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): void;
+    off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): void;
 }
 declare const OverlayScrollbars: OverlayScrollbarsStatic;
 
-export { OverlayScrollbars, scrollbarsHidingPlugin, sizeObserverPlugin };
+export { DynamicInitializationElement, EventListener, EventListenerMap, InitialEventListeners, Initialization, InitializationTarget, InitializationTargetElement, InitializationTargetObject, OnUpdatedEventListenerArgs, Options, OverflowBehavior, OverlayScrollbars, Plugin, PluginInstance, ScrollbarAutoHideBehavior, ScrollbarVisibilityBehavior, StaticInitializationElement, scrollbarsHidingPlugin, sizeObserverPlugin };