Merge branch 'v2.0.0' of https://github.com/KingSora/OverlayScrollbars into v2.0.0

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -1,10 +1,12 @@
+const ElementNodeType = Node.ELEMENT_NODE;
+const { toString, hasOwnProperty } = Object.prototype;
 const type = (obj) => {
-  if (obj === undefined) return `${obj}`;
+  return obj === undefined || obj === null
-  if (obj === null) return `${obj}`;
+    ? `${obj}`
-  return Object.prototype.toString
+    : toString
-    .call(obj)
+        .call(obj)
-    .replace(/^\[object (.+)\]$/, '$1')
+        .replace(/^\[object (.+)\]$/, '$1')
-    .toLowerCase();
+        .toLowerCase();
 };
 function isNumber(obj) {
   return typeof obj === 'number';
@@ -29,17 +31,19 @@ function isObject(obj) {
 }
 function isArrayLike(obj) {
   const length = !!obj && obj.length;
-  return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
+  const lengthCorrectFormat = isNumber(length) && length > -1 && length % 1 == 0;
+  return isArray(obj) || (!isFunction(obj) && lengthCorrectFormat) ? (length > 0 && isObject(obj) ? length - 1 in obj : true) : false;
 }
 function isPlainObject(obj) {
   if (!obj || !isObject(obj) || type(obj) !== 'object') return false;
   let key;
-  const proto = 'prototype';
+  const cstr = 'constructor';
-  const { hasOwnProperty } = Object[proto];
+  const ctor = obj[cstr];
-  const hasOwnConstructor = hasOwnProperty.call(obj, 'constructor');
+  const ctorProto = ctor && ctor.prototype;
-  const hasIsPrototypeOf = obj.constructor && obj.constructor[proto] && hasOwnProperty.call(obj.constructor[proto], 'isPrototypeOf');
+  const hasOwnConstructor = hasOwnProperty.call(obj, cstr);
+  const hasIsPrototypeOf = ctorProto && hasOwnProperty.call(ctorProto, 'isPrototypeOf');
 
-  if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
+  if (ctor && !hasOwnConstructor && !hasIsPrototypeOf) {
     return false;
   }
 
@@ -49,14 +53,12 @@ function isPlainObject(obj) {
   return isUndefined(key) || hasOwnProperty.call(obj, key);
 }
 function isHTMLElement(obj) {
-  const instaceOfRightHandSide = window.HTMLElement;
+  const instanceofObj = window.HTMLElement;
-  const doInstanceOf = isObject(instaceOfRightHandSide) || isFunction(instaceOfRightHandSide);
+  return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;
-  return !!(doInstanceOf ? obj instanceof instaceOfRightHandSide : obj && isObject(obj) && obj.nodeType === 1 && isString(obj.nodeName));
 }
-function isEmptyObject(obj) {
+function isElement(obj) {
-  for (const name in obj) return false;
+  const instanceofObj = window.Element;
-
+  return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;
-  return true;
 }
 
 function getSetProp(topLeft, fallback, elm, value) {
@@ -75,7 +77,7 @@ function attr(elm, attrName, value) {
   elm && elm.setAttribute(attrName, value);
 }
 const removeAttr = (elm, attrName) => {
-  elm == null ? void 0 : elm.removeAttribute(attrName);
+  elm && elm.removeAttribute(attrName);
 };
 function scrollLeft(elm, value) {
   return getSetProp('scrollLeft', 0, elm, value);
@@ -96,7 +98,7 @@ const classListAction = (elm, className, action) => {
     result = classes.length > 0;
 
     while ((clazz = classes[i++])) {
-      result = action(elm.classList, clazz) && result;
+      result = !!action(elm.classList, clazz) && result;
     }
   }
 
@@ -119,6 +121,10 @@ function each(source, callback) {
 
   return source;
 }
+const push = (array, items, arrayIsSingleItem) => {
+  !arrayIsSingleItem && !isString(items) && isArrayLike(items) ? Array.prototype.push.apply(array, items) : array.push(items);
+  return array;
+};
 const from = (arr) => {
   if (Array.from) {
     return Array.from(arr);
@@ -126,22 +132,24 @@ const from = (arr) => {
 
   const result = [];
   each(arr, (elm) => {
-    result.push(elm);
+    push(result, elm);
   });
   return result;
 };
 const runEach = (arr, p1) => {
+  const runFn = (fn) => fn && fn(p1);
+
   if (arr instanceof Set) {
-    arr.forEach((fn) => fn && fn(p1));
+    arr.forEach(runFn);
   } else {
-    each(arr, (fn) => fn && fn(p1));
+    each(arr, runFn);
   }
 };
 
 const elmPrototype = Element.prototype;
 
 const is = (elm, selector) => {
-  if (elm) {
+  if (isElement(elm)) {
     const fn = elmPrototype.matches || elmPrototype.msMatchesSelector;
     return fn.call(elm, selector);
   }
@@ -271,8 +279,10 @@ const supportPassiveEvents = () => {
   return passiveEventsSupport;
 };
 
+const splitEventNames = (eventNames) => eventNames.split(' ');
+
 const off = (target, eventNames, listener, capture) => {
-  each(eventNames.split(' '), (eventName) => {
+  each(splitEventNames(eventNames), (eventName) => {
     target.removeEventListener(eventName, listener, capture);
   });
 };
@@ -288,14 +298,14 @@ const on = (target, eventNames, listener, options) => {
         capture,
       }
     : capture;
-  each(eventNames.split(' '), (eventName) => {
+  each(splitEventNames(eventNames), (eventName) => {
     const finalListener = once
       ? (evt) => {
           target.removeEventListener(eventName, finalListener, capture);
           listener && listener(evt);
         }
       : listener;
-    offListeners.push(off.bind(null, target, eventName, finalListener, capture));
+    push(offListeners, off.bind(null, target, eventName, finalListener, capture));
     target.addEventListener(eventName, finalListener, nativeOptions);
   });
   return runEach.bind(0, offListeners);
@@ -320,7 +330,7 @@ const equalWH = (a, b) => equal(a, b, ['w', 'h']);
 const equalXY = (a, b) => equal(a, b, ['x', 'y']);
 const equalTRBL = (a, b) => equal(a, b, ['t', 'r', 'b', 'l']);
 
-const hasOwnProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+const hasOwnProperty$1 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 const keys = (obj) => (obj ? Object.keys(obj) : []);
 function assignDeep(target, object1, object2, object3, object4, object5, object6) {
   const sources = [object1, object2, object3, object4, object5, object6];
@@ -357,6 +367,11 @@ function assignDeep(target, object1, object2, object3, object4, object5, object6
   });
   return target;
 }
+function isEmptyObject(obj) {
+  for (const name in obj) return false;
+
+  return true;
+}
 
 const cssNumber = {
   animationiterationcount: 1,
@@ -477,7 +492,7 @@ const cssCache = {};
 const cssProperty = (name) => {
   let result = cssCache[name];
 
-  if (hasOwnProperty(cssCache, name)) {
+  if (hasOwnProperty$1(cssCache, name)) {
     return result;
   }
 
@@ -495,7 +510,7 @@ const cssProperty = (name) => {
 const jsAPI = (name) => {
   let result = jsCache[name] || window[name];
 
-  if (hasOwnProperty(jsCache, name)) {
+  if (hasOwnProperty$1(jsCache, name)) {
     return result;
   }
 
@@ -554,7 +569,7 @@ const validateRecursive = (options, template, optionsDiff, doWriteErrors, propPa
 
   const optionsCopy = _extends_1({}, options);
 
-  const props = keys(template).filter((prop) => hasOwnProperty(options, prop));
+  const props = keys(template).filter((prop) => hasOwnProperty$1(options, prop));
   each(props, (prop) => {
     const optionsDiffValue = isUndefined(optionsDiff[prop]) ? {} : optionsDiff[prop];
     const optionsValue = options[prop];
@@ -589,12 +604,12 @@ const validateRecursive = (options, template, optionsDiff, doWriteErrors, propPa
         if (isEnumString && isString(optionsValue)) {
           const enumStringSplit = currTemplateType.split(' ');
           isValid = !!enumStringSplit.find((possibility) => possibility === optionsValue);
-          errorEnumStrings.push(...enumStringSplit);
+          push(errorEnumStrings, enumStringSplit);
         } else {
           isValid = optionsTemplateTypes[optionsValueType] === currTemplateType;
         }
 
-        errorPossibleTypes.push(isEnumString ? optionsTemplateTypes.string : typeString);
+        push(errorPossibleTypes, isEnumString ? optionsTemplateTypes.string : typeString);
         return !isValid;
       });
 
@@ -814,7 +829,7 @@ const getEnvironment = () => {
   return environmentInstance;
 };
 
-const getPropByPath = (obj, path) => obj && path.split('.').reduce((o, prop) => (o && hasOwnProperty(o, prop) ? o[prop] : undefined), obj);
+const getPropByPath = (obj, path) => obj && path.split('.').reduce((o, prop) => (o && hasOwnProperty$1(o, prop) ? o[prop] : undefined), obj);
 
 const createLifecycleBase = (defaultOptionsWithTemplate, initialOptions, updateFunction) => {
   const { _template: optionsTemplate, _options: defaultOptions } = transformOptions(defaultOptionsWithTemplate);
@@ -988,7 +1003,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
   if (ResizeObserverConstructor) {
     const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
     resizeObserverInstance.observe(listenerElement);
-    offListeners.push(() => resizeObserverInstance.disconnect());
+    push(offListeners, () => resizeObserverInstance.disconnect());
   } else {
     const observerElementChildren = createDOM(
       `<div class="${classNameSizeObserverListenerItem}" dir="ltr"><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}"></div></div><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}" style="width: 200%; height: 200%"></div></div></div>`
@@ -1041,8 +1056,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
       return false;
     };
 
-    offListeners.push(on(expandElement, scrollEventName, onScroll));
+    push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]);
-    offListeners.push(on(shrinkElement, scrollEventName, onScroll));
     style(expandElementChild, {
       width: scrollAmount,
       height: scrollAmount,
@@ -1053,7 +1067,8 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
 
   if (direction) {
     const updateDirectionCache = createCache(() => getDirection(sizeObserver));
-    offListeners.push(
+    push(
+      offListeners,
       on(sizeObserver, scrollEventName, (event) => {
         const directionCache = updateDirectionCache();
         const { _value, _changed } = directionCache;
@@ -1083,7 +1098,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
 
   if (appearCallback) {
     addClass(sizeObserver, classNameSizeObserverAppear);
-    offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
+    push(offListeners, on(sizeObserver, animationStartEventName, appearCallback));
   }
 
   prependChildren(target, sizeObserver);
@@ -1123,9 +1138,10 @@ const createTrinsicObserver = (target, onTrinsicChangedCallback) => {
       }
     );
     intersectionObserverInstance.observe(trinsicObserver);
-    offListeners.push(() => intersectionObserverInstance.disconnect());
+    push(offListeners, () => intersectionObserverInstance.disconnect());
   } else {
-    offListeners.push(
+    push(
+      offListeners,
       createSizeObserver(trinsicObserver, () => {
         const newSize = offsetSize(trinsicObserver);
         const heightIntrinsicCache = updateHeightIntrinsicCache(0, newSize);
@@ -1182,7 +1198,7 @@ const OverlayScrollbars = (target, options, extensions) => {
   const osTarget = normalizeTarget(target);
   const lifecycles = [];
   const { host } = osTarget;
-  lifecycles.push(createStructureLifecycle(osTarget));
+  push(lifecycles, createStructureLifecycle(osTarget));
 
   const onSizeChanged = (directionCache) => {
     if (directionCache) {

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -7,13 +7,17 @@
 })(this, function () {
   'use strict';
 
+  var ElementNodeType = Node.ELEMENT_NODE;
+  var _Object$prototype = Object.prototype,
+    toString = _Object$prototype.toString,
+    hasOwnProperty = _Object$prototype.hasOwnProperty;
   var type = function type(obj) {
-    if (obj === undefined) return '' + obj;
+    return obj === undefined || obj === null
-    if (obj === null) return '' + obj;
+      ? '' + obj
-    return Object.prototype.toString
+      : toString
-      .call(obj)
+          .call(obj)
-      .replace(/^\[object (.+)\]$/, '$1')
+          .replace(/^\[object (.+)\]$/, '$1')
-      .toLowerCase();
+          .toLowerCase();
   };
   function isNumber(obj) {
     return typeof obj === 'number';
@@ -38,17 +42,19 @@
   }
   function isArrayLike(obj) {
     var length = !!obj && obj.length;
-    return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
+    var lengthCorrectFormat = isNumber(length) && length > -1 && length % 1 == 0;
+    return isArray(obj) || (!isFunction(obj) && lengthCorrectFormat) ? (length > 0 && isObject(obj) ? length - 1 in obj : true) : false;
   }
   function isPlainObject(obj) {
     if (!obj || !isObject(obj) || type(obj) !== 'object') return false;
     var key;
-    var proto = 'prototype';
+    var cstr = 'constructor';
-    var hasOwnProperty = Object[proto].hasOwnProperty;
+    var ctor = obj[cstr];
-    var hasOwnConstructor = hasOwnProperty.call(obj, 'constructor');
+    var ctorProto = ctor && ctor.prototype;
-    var hasIsPrototypeOf = obj.constructor && obj.constructor[proto] && hasOwnProperty.call(obj.constructor[proto], 'isPrototypeOf');
+    var hasOwnConstructor = hasOwnProperty.call(obj, cstr);
+    var hasIsPrototypeOf = ctorProto && hasOwnProperty.call(ctorProto, 'isPrototypeOf');
 
-    if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
+    if (ctor && !hasOwnConstructor && !hasIsPrototypeOf) {
       return false;
     }
 
@@ -58,16 +64,12 @@
     return isUndefined(key) || hasOwnProperty.call(obj, key);
   }
   function isHTMLElement(obj) {
-    var instaceOfRightHandSide = window.HTMLElement;
+    var instanceofObj = window.HTMLElement;
-    var doInstanceOf = isObject(instaceOfRightHandSide) || isFunction(instaceOfRightHandSide);
+    return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;
-    return !!(doInstanceOf ? obj instanceof instaceOfRightHandSide : obj && isObject(obj) && obj.nodeType === 1 && isString(obj.nodeName));
   }
-  function isEmptyObject(obj) {
+  function isElement(obj) {
-    for (var name in obj) {
+    var instanceofObj = window.Element;
-      return false;
+    return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;
-    }
-
-    return true;
   }
 
   function getSetProp(topLeft, fallback, elm, value) {
@@ -86,7 +88,7 @@
     elm && elm.setAttribute(attrName, value);
   }
   var removeAttr = function removeAttr(elm, attrName) {
-    elm == null ? void 0 : elm.removeAttribute(attrName);
+    elm && elm.removeAttribute(attrName);
   };
   function scrollLeft(elm, value) {
     return getSetProp('scrollLeft', 0, elm, value);
@@ -107,7 +109,7 @@
       result = classes.length > 0;
 
       while ((clazz = classes[i++])) {
-        result = action(elm.classList, clazz) && result;
+        result = !!action(elm.classList, clazz) && result;
       }
     }
 
@@ -134,6 +136,10 @@
 
     return source;
   }
+  var push = function push(array, items, arrayIsSingleItem) {
+    !arrayIsSingleItem && !isString(items) && isArrayLike(items) ? Array.prototype.push.apply(array, items) : array.push(items);
+    return array;
+  };
   var from = function from(arr) {
     if (Array.from) {
       return Array.from(arr);
@@ -141,26 +147,26 @@
 
     var result = [];
     each(arr, function (elm) {
-      result.push(elm);
+      push(result, elm);
     });
     return result;
   };
   var runEach = function runEach(arr, p1) {
+    var runFn = function runFn(fn) {
+      return fn && fn(p1);
+    };
+
     if (arr instanceof Set) {
-      arr.forEach(function (fn) {
+      arr.forEach(runFn);
-        return fn && fn(p1);
-      });
     } else {
-      each(arr, function (fn) {
+      each(arr, runFn);
-        return fn && fn(p1);
-      });
     }
   };
 
   var elmPrototype = Element.prototype;
 
   var is = function is(elm, selector) {
-    if (elm) {
+    if (isElement(elm)) {
       var fn = elmPrototype.matches || elmPrototype.msMatchesSelector;
       return fn.call(elm, selector);
     }
@@ -305,8 +311,12 @@
     return passiveEventsSupport;
   };
 
+  var splitEventNames = function splitEventNames(eventNames) {
+    return eventNames.split(' ');
+  };
+
   var off = function off(target, eventNames, listener, capture) {
-    each(eventNames.split(' '), function (eventName) {
+    each(splitEventNames(eventNames), function (eventName) {
       target.removeEventListener(eventName, listener, capture);
     });
   };
@@ -322,14 +332,14 @@
           capture: capture,
         }
       : capture;
-    each(eventNames.split(' '), function (eventName) {
+    each(splitEventNames(eventNames), function (eventName) {
       var finalListener = once
         ? function (evt) {
             target.removeEventListener(eventName, finalListener, capture);
             listener && listener(evt);
           }
         : listener;
-      offListeners.push(off.bind(null, target, eventName, finalListener, capture));
+      push(offListeners, off.bind(null, target, eventName, finalListener, capture));
       target.addEventListener(eventName, finalListener, nativeOptions);
     });
     return runEach.bind(0, offListeners);
@@ -364,7 +374,7 @@
     return equal(a, b, ['t', 'r', 'b', 'l']);
   };
 
-  var hasOwnProperty = function hasOwnProperty(obj, prop) {
+  var hasOwnProperty$1 = function hasOwnProperty(obj, prop) {
     return Object.prototype.hasOwnProperty.call(obj, prop);
   };
   var keys = function keys(obj) {
@@ -405,6 +415,13 @@
     });
     return target;
   }
+  function isEmptyObject(obj) {
+    for (var name in obj) {
+      return false;
+    }
+
+    return true;
+  }
 
   var cssNumber = {
     animationiterationcount: 1,
@@ -538,7 +555,7 @@
   var cssProperty = function cssProperty(name) {
     var result = cssCache[name];
 
-    if (hasOwnProperty(cssCache, name)) {
+    if (hasOwnProperty$1(cssCache, name)) {
       return result;
     }
 
@@ -558,7 +575,7 @@
   var jsAPI = function jsAPI(name) {
     var result = jsCache[name] || window[name];
 
-    if (hasOwnProperty(jsCache, name)) {
+    if (hasOwnProperty$1(jsCache, name)) {
       return result;
     }
 
@@ -618,7 +635,7 @@
     var optionsCopy = _extends_1({}, options);
 
     var props = keys(template).filter(function (prop) {
-      return hasOwnProperty(options, prop);
+      return hasOwnProperty$1(options, prop);
     });
     each(props, function (prop) {
       var optionsDiffValue = isUndefined(optionsDiff[prop]) ? {} : optionsDiff[prop];
@@ -656,12 +673,12 @@
             isValid = !!enumStringSplit.find(function (possibility) {
               return possibility === optionsValue;
             });
-            errorEnumStrings.push.apply(errorEnumStrings, enumStringSplit);
+            push(errorEnumStrings, enumStringSplit);
           } else {
             isValid = optionsTemplateTypes[optionsValueType] === currTemplateType;
           }
 
-          errorPossibleTypes.push(isEnumString ? optionsTemplateTypes.string : typeString);
+          push(errorPossibleTypes, isEnumString ? optionsTemplateTypes.string : typeString);
           return !isValid;
         });
 
@@ -893,7 +910,7 @@
     return (
       obj &&
       path.split('.').reduce(function (o, prop) {
-        return o && hasOwnProperty(o, prop) ? o[prop] : undefined;
+        return o && hasOwnProperty$1(o, prop) ? o[prop] : undefined;
       }, obj)
     );
   };
@@ -1101,7 +1118,7 @@
     if (ResizeObserverConstructor) {
       var resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
       resizeObserverInstance.observe(listenerElement);
-      offListeners.push(function () {
+      push(offListeners, function () {
         return resizeObserverInstance.disconnect();
       });
     } else {
@@ -1166,8 +1183,7 @@
         return false;
       };
 
-      offListeners.push(on(expandElement, scrollEventName, onScroll));
+      push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]);
-      offListeners.push(on(shrinkElement, scrollEventName, onScroll));
       style(expandElementChild, {
         width: scrollAmount,
         height: scrollAmount,
@@ -1184,7 +1200,8 @@
       var updateDirectionCache = createCache(function () {
         return getDirection(sizeObserver);
       });
-      offListeners.push(
+      push(
+        offListeners,
         on(sizeObserver, scrollEventName, function (event) {
           var directionCache = updateDirectionCache();
           var _value = directionCache._value,
@@ -1215,7 +1232,7 @@
 
     if (appearCallback) {
       addClass(sizeObserver, classNameSizeObserverAppear);
-      offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
+      push(offListeners, on(sizeObserver, animationStartEventName, appearCallback));
     }
 
     prependChildren(target, sizeObserver);
@@ -1257,11 +1274,12 @@
         }
       );
       intersectionObserverInstance.observe(trinsicObserver);
-      offListeners.push(function () {
+      push(offListeners, function () {
         return intersectionObserverInstance.disconnect();
       });
     } else {
-      offListeners.push(
+      push(
+        offListeners,
         createSizeObserver(trinsicObserver, function () {
           var newSize = offsetSize(trinsicObserver);
           var heightIntrinsicCache = updateHeightIntrinsicCache(0, newSize);
@@ -1321,7 +1339,7 @@
     var osTarget = normalizeTarget(target);
     var lifecycles = [];
     var host = osTarget.host;
-    lifecycles.push(createStructureLifecycle(osTarget));
+    push(lifecycles, createStructureLifecycle(osTarget));
 
     var onSizeChanged = function onSizeChanged(directionCache) {
       if (directionCache) {

packages/overlayscrollbars/src/observers/domObserver.ts

@@ -1,4 +1,4 @@
-import { each, indexOf, isString, MutationObserverConstructor, isEmptyArray, on, off, attr, is, find, push } from 'support';
+import { each, debounce, indexOf, isString, MutationObserverConstructor, isEmptyArray, on, off, attr, is, find, push } from 'support';
 
 type StringNullUndefined = string | null | undefined;
 
@@ -32,11 +32,11 @@ export const createDOMObserver = (
 ): DOMObserver => {
   let isConnected = false;
   const { _observeContent, _attributes, _ignoreContentChange, _eventContentChange } = options || {};
-  const eventContentChangeCallback = () => {
+  const eventContentChangeCallback = debounce(() => {
     if (isConnected) {
       callback([], false, true);
     }
-  };
+  });
   const refreshEventContentChange = (getElements: (selector: string) => Node[]) => {
     if (_eventContentChange) {
       const eventContentChanges = _eventContentChange();
@@ -104,10 +104,7 @@ export const createDOMObserver = (
       refreshEventContentChange((selector) =>
         totalAddedNodes.reduce<Node[]>((arr, node) => {
           push(arr, find(selector, node));
-          if (is(node, selector)) {
+          return is(node, selector) ? push(arr, node) : arr;
-            push(arr, node);
-          }
-          return arr;
         }, [])
       );
     }

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

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

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

@@ -36,7 +36,7 @@ export function attr(elm: HTMLElement | null, attrName: string, value?: string):
  * @param attrName The attribute name.
  */
 export const removeAttr = (elm: Element | null, attrName: string): void => {
-  elm?.removeAttribute(attrName);
+  elm && elm.removeAttribute(attrName);
 };
 
 /**

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

@@ -10,7 +10,7 @@ const classListAction = (elm: Element | null, className: string, action: (elmCla
     const classes: Array<string> = className.match(rnothtmlwhite) || [];
     result = classes.length > 0;
     while ((clazz = classes[i++])) {
-      result = (action(elm.classList, clazz) as boolean) && result;
+      result = !!action(elm.classList, clazz) && result;
     }
   }
   return result;

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

@@ -21,6 +21,7 @@ const supportPassiveEvents = (): boolean => {
   }
   return passiveEventsSupport;
 };
+const splitEventNames = (eventNames: string) => eventNames.split(' ');
 
 export interface OnOptions {
   _capture?: boolean;
@@ -36,7 +37,7 @@ export interface OnOptions {
  * @param capture The options of the removed listener.
  */
 export const off = (target: EventTarget, eventNames: string, listener: EventListener, capture?: boolean): void => {
-  each(eventNames.split(' '), (eventName) => {
+  each(splitEventNames(eventNames), (eventName) => {
     target.removeEventListener(eventName, listener, capture);
   });
 };
@@ -61,7 +62,7 @@ export const on = (target: EventTarget, eventNames: string, listener: EventListe
       }
     : capture;
 
-  each(eventNames.split(' '), (eventName) => {
+  each(splitEventNames(eventNames), (eventName) => {
     const finalListener = once
       ? (evt: Event) => {
           target.removeEventListener(eventName, finalListener, capture);

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

@@ -69,7 +69,7 @@ export const prependChildren = (node: Node | null, children: NodeCollection): vo
  * @param insertedNodes The Nodes which shall be inserted.
  */
 export const insertBefore = (node: Node | null, insertedNodes: NodeCollection): void => {
-  before(parent(node as Element), node, insertedNodes);
+  before(parent(node), node, insertedNodes);
 };
 
 /**
@@ -78,7 +78,7 @@ export const insertBefore = (node: Node | null, insertedNodes: NodeCollection):
  * @param insertedNodes The Nodes which shall be inserted.
  */
 export const insertAfter = (node: Node | null, insertedNodes: NodeCollection): void => {
-  before(parent(node as Element), node && node.nextSibling, insertedNodes);
+  before(parent(node), node && node.nextSibling, insertedNodes);
 };
 
 /**
@@ -89,7 +89,7 @@ export const removeElements = (nodes: NodeCollection): void => {
   if (isArrayLike(nodes)) {
     each(from(nodes), (e) => removeElements(e));
   } else if (nodes) {
-    const parentElm = parent(nodes as Element);
+    const parentElm = parent(nodes);
     if (parentElm) {
       parentElm.removeChild(nodes);
     }

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

@@ -75,17 +75,17 @@ const parent = (elm: InputElementType): OutputElementType => (elm ? elm.parentEl
 
 const closest = (elm: InputElementType, selector: string): OutputElementType => {
   if (isElement(elm)) {
-    // eslint-disable-next-line
+    const closestFn = elmPrototype.closest;
-    // @ts-ignore
+    if (closestFn) {
-    if (elmPrototype.closest) {
+      return closestFn.call(elm, selector);
-      return elm.closest(selector);
     }
+
     do {
       if (is(elm, selector)) {
         return elm as Element;
       }
       elm = parent(elm);
-    } while (elm !== null && elm.nodeType === 1);
+    } while (elm);
   }
 
   return null;

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

@@ -42,7 +42,7 @@ type OptionsTemplateTypeMap = {
   __TPL_array_TYPE__: Array<any>;
   __TPL_function_TYPE__: Func;
   __TPL_null_TYPE__: null;
-  __TPL_object_TYPE__: object; // eslint-disable-line @typescript-eslint/ban-types
+  __TPL_object_TYPE__: Record<string, unknown>;
 };
 type OptionsTemplateValueNonEnum<T extends OptionsTemplateNativeTypes> =
   | OptionsTemplateType<T>

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

@@ -171,7 +171,7 @@ type OptionsTemplateTypesDictionary = {
   readonly number: OptionsTemplateType<number>;
   readonly string: OptionsTemplateType<string>;
   readonly array: OptionsTemplateType<Array<any>>;
-  readonly object: OptionsTemplateType<object>; // eslint-disable-line @typescript-eslint/ban-types
+  readonly object: OptionsTemplateType<Record<string, unknown>>;
   readonly function: OptionsTemplateType<Func>;
   readonly null: OptionsTemplateType<null>;
 };

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

@@ -74,9 +74,11 @@ export const from = <T = any>(arr: ArrayLike<T>) => {
     return Array.from(arr);
   }
   const result: Array<T> = [];
+
   each(arr, (elm) => {
     push(result, elm);
   });
+
   return result;
 };
 
@@ -92,9 +94,10 @@ export const isEmptyArray = (array: Array<any> | null | undefined) => array && a
  * @param p1 The first param.
  */
 export const runEach = (arr: ArrayLike<RunEachItem> | Set<RunEachItem>, p1?: unknown): void => {
+  const runFn = (fn: RunEachItem) => fn && fn(p1);
   if (arr instanceof Set) {
-    arr.forEach((fn) => fn && fn(p1));
+    arr.forEach(runFn);
   } else {
-    each(arr, (fn) => fn && fn(p1));
+    each(arr, runFn);
   }
 };

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

@@ -0,0 +1,34 @@
+import { isNumber } from 'support/utils/types';
+import { cAF, rAF } from 'support/compatibility/apis';
+
+/**
+ * Debounces the given function either with a timeout or a animation frame.
+ * @param functionToDebounce The function which shall be debounced.
+ * @param timeout The timeout for debouncing. If 0 or lower animation frame is used for debouncing, a timeout otherwise.
+ * @param maxWait A maximum amount of ms. before the function will be called even with debounce.
+ */
+export const debounce = (functionToDebounce: (...args: any) => any, timeout?: number, maxWait?: number) => {
+  let timeoutId: number | void;
+  let lastCallTime: number;
+  const hasTimeout = isNumber(timeout) && timeout > 0;
+  const hasMaxWait = isNumber(maxWait) && maxWait > 0;
+  const cancel = hasTimeout ? window.clearTimeout : cAF!;
+  const set = hasTimeout ? window.setTimeout : rAF!;
+  const setFn = function (args: IArguments) {
+    lastCallTime = hasMaxWait ? performance.now() : 0;
+    timeoutId && cancel(timeoutId);
+    // eslint-disable-next-line
+    // @ts-ignore
+    functionToDebounce.apply(this, args);
+  };
+
+  return function () {
+    // eslint-disable-next-line
+    // @ts-ignore
+    const boundSetFn = setFn.bind(this, arguments); // eslint-disable-line
+    const forceCall = hasMaxWait ? performance.now() - lastCallTime >= maxWait! : false;
+
+    timeoutId && cancel(timeoutId);
+    timeoutId = forceCall ? boundSetFn() : (set(boundSetFn, timeout!) as number);
+  };
+};

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

@@ -1,5 +1,6 @@
 export * from 'support/utils/array';
 export * from 'support/utils/equal';
+export * from 'support/utils/function';
 export * from 'support/utils/lexicon';
 export * from 'support/utils/object';
 export * from 'support/utils/types';

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

@@ -1,15 +1,15 @@
 import { PlainObject } from 'typings';
-import { hasOwnProperty } from 'support/utils/object';
 
 const ElementNodeType = Node.ELEMENT_NODE;
+const { toString, hasOwnProperty } = Object.prototype;
 
 export const type: (obj: any) => string = (obj) => {
-  if (obj === undefined) return `${obj}`;
+  return obj === undefined || obj === null
-  if (obj === null) return `${obj}`;
+    ? `${obj}`
-  return Object.prototype.toString
+    : toString
-    .call(obj)
+        .call(obj)
-    .replace(/^\[object (.+)\]$/, '$1')
+        .replace(/^\[object (.+)\]$/, '$1')
-    .toLowerCase();
+        .toLowerCase();
 };
 
 export function isNumber(obj: any): obj is number {
@@ -66,8 +66,8 @@ export function isPlainObject<T = any>(obj: any): obj is PlainObject<T> {
   const cstr = 'constructor';
   const ctor = obj[cstr];
   const ctorProto = ctor && ctor.prototype;
-  const hasOwnConstructor = hasOwnProperty(obj, cstr);
+  const hasOwnConstructor = hasOwnProperty.call(obj, cstr);
-  const hasIsPrototypeOf = ctorProto && hasOwnProperty(ctorProto, 'isPrototypeOf');
+  const hasIsPrototypeOf = ctorProto && hasOwnProperty.call(ctorProto, 'isPrototypeOf');
 
   if (ctor && !hasOwnConstructor && !hasIsPrototypeOf) {
     return false;
@@ -79,7 +79,7 @@ export function isPlainObject<T = any>(obj: any): obj is PlainObject<T> {
   }
   /* eslint-enable */
 
-  return isUndefined(key) || hasOwnProperty(obj, key);
+  return isUndefined(key) || hasOwnProperty.call(obj, key);
 }
 
 /**

packages/overlayscrollbars/tests/puppeteer/observers/domObserver/index.browser.ts

@@ -232,9 +232,11 @@ const addRemoveTargetContentBetweenElmsFn = async () => {
   await addRemoveElementsTest(targetContentBetweenElmsSlot, targetElmContentElmObservations);
 };
 const addImgElmsFn = async () => {
+  /*
   const add = async () => {
     const img = new Image(1, 1);
     img.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+
     const { before, after, compare } = changedThrough(targetElmContentElmObservations);
     const imgHolder = createDiv('img');
     appendChildren(imgHolder, img);
@@ -261,6 +263,21 @@ const addImgElmsFn = async () => {
   await add();
   await add();
   await add();
+*/
+  const add = async () => {
+    const img = new Image(1, 1);
+    img.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+
+    //const { before, after, compare } = changedThrough(targetElmContentElmObservations);
+    const imgHolder = createDiv('img');
+    appendChildren(imgHolder, img);
+
+    appendChildren(imgElmsSlot, imgHolder);
+  };
+
+  add();
+  add();
+  add();
 };
 const iterateTargetAttrChange = async () => {
   await iterateAttrChange(setTargetAttr, targetElmObservations, (observation, selected) => {
@@ -340,7 +357,10 @@ createDOMObserver(
   {
     _observeContent: true,
     _eventContentChange: () => {
-      return [['img', 'load']];
+      return [
+        ['img', 'load'],
+        ['iframe', 'load'],
+      ];
     },
     _ignoreContentChange: (mutation) => {
       const { target, attributeName } = mutation;

packages/overlayscrollbars/tests/puppeteer/observers/domObserver/index.scss

@@ -77,9 +77,11 @@ body {
 }
 
 .img {
+  display: inline-block;
   background: lime;
   width: 50px;
   height: 50px;
+  border-radius: 100%;
 
   img {
     opacity: 0;

packages/overlayscrollbars/types/observers/domObserver.d.ts

@@ -1,9 +1,16 @@
+declare type StringNullUndefined = string | null | undefined;
+export declare type DOMOvserverEventContentChangeResult = Array<[StringNullUndefined, StringNullUndefined] | null | undefined>;
+export declare type DOMOvserverEventContentChange = () => DOMOvserverEventContentChangeResult;
+export declare type DOMObserverIgnoreContentChange = (mutation: MutationRecord, domObserverTarget: HTMLElement, domObserverOptions: DOMObserverOptions | undefined) => boolean | null | undefined;
 export interface DOMObserverOptions {
     _observeContent?: boolean;
     _attributes?: string[];
+    _ignoreContentChange?: DOMObserverIgnoreContentChange;
+    _eventContentChange?: DOMOvserverEventContentChange;
 }
 export interface DOMObserver {
     _disconnect: () => void;
     _update: () => void;
 }
-export declare const createDOMObserver: (target: HTMLElement, callback: (changedTargetAttrs: string[], styleChanged: boolean, contentChanged: boolean) => any, options?: DOMObserverOptions | undefined) => DOMObserver;
+export declare const createDOMObserver: (target: HTMLElement, callback: (targetChangedAttrs: string[], targetStyleChanged: boolean, contentChanged: boolean) => any, options?: DOMObserverOptions | undefined) => DOMObserver;
+export {};

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

@@ -1,6 +1,6 @@
-declare type InputElementType = Element | null | undefined;
+declare type InputElementType = Element | Node | null | undefined;
 declare type OutputElementType = Element | null;
-declare const find: (selector: string, elm?: InputElementType) => ReadonlyArray<Element>;
+declare const find: (selector: string, elm?: InputElementType) => Element[];
 declare const findFirst: (selector: string, elm?: InputElementType) => OutputElementType;
 declare const is: (elm: InputElementType, selector: string) => boolean;
 declare const children: (elm: InputElementType, selector?: string | undefined) => ReadonlyArray<Element>;

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

@@ -27,7 +27,7 @@ declare type OptionsTemplateTypeMap = {
     __TPL_array_TYPE__: Array<any>;
     __TPL_function_TYPE__: Func;
     __TPL_null_TYPE__: null;
-    __TPL_object_TYPE__: object;
+    __TPL_object_TYPE__: Record<string, unknown>;
 };
 declare type OptionsTemplateValueNonEnum<T extends OptionsTemplateNativeTypes> = OptionsTemplateType<T> | [OptionsTemplateType<T>, ...Array<OptionsTemplateTypes>];
 declare type ExtractPropsKey<T, TProps extends T[keyof T]> = {

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

@@ -8,7 +8,7 @@ declare type OptionsTemplateTypesDictionary = {
     readonly number: OptionsTemplateType<number>;
     readonly string: OptionsTemplateType<string>;
     readonly array: OptionsTemplateType<Array<any>>;
-    readonly object: OptionsTemplateType<object>;
+    readonly object: OptionsTemplateType<Record<string, unknown>>;
     readonly function: OptionsTemplateType<Func>;
     readonly null: OptionsTemplateType<null>;
 };

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

@@ -7,6 +7,7 @@ export declare function each<T>(arrayLikeObject: ArrayLike<T> | null | undefined
 export declare function each(obj: PlainObject, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject;
 export declare function each(obj: PlainObject | null | undefined, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject | null | undefined;
 export declare const indexOf: <T = any>(arr: T[], item: T, fromIndex?: number | undefined) => number;
+export declare const push: <T>(array: T[], items: T | ArrayLike<T>, arrayIsSingleItem?: boolean | undefined) => T[];
 export declare const from: <T = any>(arr: ArrayLike<T>) => T[];
 export declare const isEmptyArray: (array: Array<any> | null | undefined) => boolean | null | undefined;
 export declare const runEach: (arr: ArrayLike<RunEachItem> | Set<RunEachItem>, p1?: unknown) => void;

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

@@ -5,3 +5,4 @@ export declare function assignDeep<T, U, V>(target: T, object1: U, object2: V):
 export declare function assignDeep<T, U, V, W>(target: T, object1: U, object2: V, object3: W): T & U & V & W;
 export declare function assignDeep<T, U, V, W, X>(target: T, object1: U, object2: V, object3: W, object4: X): T & U & V & W & X;
 export declare function assignDeep<T, U, V, W, X, Y>(target: T, object1: U, object2: V, object3: W, object4: X, object5: Y): T & U & V & W & X & Y;
+export declare function isEmptyObject(obj: any): boolean;

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

@@ -11,4 +11,4 @@ export declare function isObject(obj: any): boolean;
 export declare function isArrayLike<T extends PlainObject = any>(obj: any): obj is ArrayLike<T>;
 export declare function isPlainObject<T = any>(obj: any): obj is PlainObject<T>;
 export declare function isHTMLElement(obj: any): obj is HTMLElement;
-export declare function isEmptyObject(obj: any): boolean;
+export declare function isElement(obj: any): obj is Element;