improve code

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -1348,11 +1348,11 @@ const createEventContentChange = (target, callback, eventContentChange) => {
   let map;
   let destroyed = false;
 
-  const _destroy = () => {
+  const destroy = () => {
     destroyed = true;
   };
 
-  const _updateElements = getElements => {
+  const updateElements = getElements => {
     if (eventContentChange) {
       const eventElmList = eventContentChange.reduce((arr, item) => {
         if (item) {
@@ -1395,14 +1395,10 @@ const createEventContentChange = (target, callback, eventContentChange) => {
 
   if (eventContentChange) {
     map = new WeakMap();
-
+    updateElements();
-    _updateElements();
   }
 
-  return {
+  return [destroy, updateElements];
-    _destroy,
-    _updateElements
-  };
 };
 
 const createDOMObserver = (target, isContentObserver, callback, options) => {
@@ -1416,10 +1412,7 @@ const createDOMObserver = (target, isContentObserver, callback, options) => {
     _ignoreNestedTargetChange,
     _ignoreContentChange
   } = options || {};
-  const {
+  const [destroyEventContentChange, updateEventContentChangeElements] = createEventContentChange(target, debounce(() => {
-    _destroy: destroyEventContentChange,
-    _updateElements: updateEventContentChangeElements
-  } = createEventContentChange(target, debounce(() => {
     if (isConnected) {
       callback(true);
     }
@@ -1495,20 +1488,17 @@ const createDOMObserver = (target, isContentObserver, callback, options) => {
     characterData: isContentObserver
   });
   isConnected = true;
-  return {
+  return [() => {
-    _destroy: () => {
+    if (isConnected) {
-      if (isConnected) {
+      destroyEventContentChange();
-        destroyEventContentChange();
+      mutationObserver.disconnect();
-        mutationObserver.disconnect();
+      isConnected = false;
-        isConnected = false;
-      }
-    },
-    _update: () => {
-      if (isConnected) {
-        observerCallback(mutationObserver.takeRecords());
-      }
     }
-  };
+  }, () => {
+    if (isConnected) {
+      observerCallback(mutationObserver.takeRecords());
+    }
+  }];
 };
 
 const ignorePrefix = 'os-';
@@ -1628,7 +1618,7 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
     _appear: true,
     _direction: !_nativeScrollbarStyling
   });
-  const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
+  const [destroyHostMutationObserver] = createDOMObserver(_host, false, onHostMutation, {
     _styleChangingAttributes: baseStyleChangingAttrs,
     _attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
     _ignoreTargetChange: ignoreTargetChange
@@ -1642,9 +1632,8 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
 
     if (updateContentMutationObserver) {
       if (contentMutationObserver) {
-        contentMutationObserver._update();
+        contentMutationObserver[1]();
-
+        contentMutationObserver[0]();
-        contentMutationObserver._destroy();
       }
 
       contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
@@ -1675,11 +1664,10 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
 
   updateViewportAttrsFromHost();
   return [updateOptions, () => {
-    contentMutationObserver && contentMutationObserver._destroy();
+    contentMutationObserver && contentMutationObserver[0]();
     destroyTrinsicObserver && destroyTrinsicObserver();
     destroySizeObserver();
-
+    destroyHostMutationObserver();
-    hostMutationObserver._destroy();
   }];
 };
 
@@ -1768,11 +1756,9 @@ const createPaddingLifecycle = lifecycleHub => {
       style(_viewport, viewportStyle);
 
       _setLifecycleCommunication({
-        _paddingInfo: {
+        _padding: padding,
-          _absolute: !paddingRelative,
+        _paddingAbsolute: !paddingRelative,
-          _padding: padding
+        _viewportPaddingStyle: _padding ? viewportStyle : assignDeep({}, paddingStyle, viewportStyle)
-        },
-        _viewportPaddingStyle: _padding ? viewportStyle : _extends({}, paddingStyle, viewportStyle)
       });
     }
 
@@ -1868,9 +1854,9 @@ const createOverflowLifecycle = lifecycleHub => {
       } = getEnvironment();
 
       const {
-        _absolute: paddingAbsolute,
+        _paddingAbsolute,
-        _padding: padding
+        _padding
-      } = _getLifecycleCommunication()._paddingInfo;
+      } = _getLifecycleCommunication();
 
       const {
         _overflowScroll,
@@ -1879,7 +1865,7 @@ const createOverflowLifecycle = lifecycleHub => {
       const hostSizeFraction = sizeFraction(_host);
       const hostClientSize = clientSize(_host);
       const isContentBox = style(_viewport, 'boxSizing') === 'content-box';
-      const paddingVertical = paddingAbsolute || isContentBox ? padding.b + padding.t : 0;
+      const paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
       const fractionalClientHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
       const subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
       style(_viewport, {
@@ -1946,6 +1932,10 @@ const createOverflowLifecycle = lifecycleHub => {
 
   const arrangeViewport = (viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL) => {
     if (_doViewportArrange) {
+      const {
+        _viewportPaddingStyle
+      } = _getLifecycleCommunication();
+
       const {
         _scrollbarsHideOffset,
         _scrollbarsHideOffsetArrange
@@ -1958,14 +1948,9 @@ const createOverflowLifecycle = lifecycleHub => {
         x: hideOffsetX,
         y: hideOffsetY
       } = _scrollbarsHideOffset;
-
-      const {
-        _viewportPaddingStyle: viewportPaddingStyle
-      } = _getLifecycleCommunication();
-
       const viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
-      const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
+      const viewportArrangeHorizontalPaddingValue = _viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
-      const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop;
+      const viewportArrangeVerticalPaddingValue = _viewportPaddingStyle.paddingTop;
       const fractionalContentWidth = viewportScrollSize.w + (abs(viewportSizeFraction.w) < 1 ? viewportSizeFraction.w : 0);
       const fractionalContenHeight = viewportScrollSize.h + (abs(viewportSizeFraction.h) < 1 ? viewportSizeFraction.h : 0);
       const arrangeSize = {
@@ -2184,16 +2169,14 @@ const getPropByPath = (obj, path) => obj ? path.split('.').reduce((o, prop) => o
 const applyForceToCache = (cacheValues, force) => [cacheValues[0], force || cacheValues[1], cacheValues[2]];
 
 const booleanCacheValuesFallback = [false, false, false];
-const lifecycleCommunicationFallback = {
+const initialLifecycleCommunication = {
-  _paddingInfo: {
+  _padding: {
-    _absolute: false,
+    t: 0,
-    _padding: {
+    r: 0,
-      t: 0,
+    b: 0,
-      r: 0,
+    l: 0
-      b: 0,
-      l: 0
-    }
   },
+  _paddingAbsolute: false,
   _viewportOverflowScrollCache: [{
     x: false,
     y: false
@@ -2238,7 +2221,7 @@ const createOverflowChangedArgs = (overflowAmount, overflowScroll) => ({
 });
 
 const createLifecycleHub = (options, triggerListener, structureSetup, scrollbarsSetup) => {
-  let lifecycleCommunication = lifecycleCommunicationFallback;
+  let lifecycleCommunication = initialLifecycleCommunication;
   let updateObserverOptions;
   let destroyObservers;
   const {
@@ -2490,7 +2473,7 @@ const OverlayScrollbars = (target, options, eventListeners) => {
   const [addEvent, removeEvent, triggerEvent] = createEventListenerHub(eventListeners);
 
   if (_nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y && !currentOptions.nativeScrollbarsOverlaid.initialize) {
-    triggerEvent('initializationWithdrawn', false);
+    triggerEvent('initializationWithdrawn');
   }
 
   const structureSetup = createStructureSetup(target);
@@ -2524,7 +2507,7 @@ const OverlayScrollbars = (target, options, eventListeners) => {
 
       removeInstance(instanceTarget);
       removeEvent();
-      triggerEvent('destroyed', false);
+      triggerEvent('destroyed');
     }
   };
   each(keys(plugins), pluginName => {
@@ -2536,7 +2519,7 @@ const OverlayScrollbars = (target, options, eventListeners) => {
   });
   instance.update(true);
   addInstance(instanceTarget, instance);
-  triggerEvent('initialized', false);
+  triggerEvent('initialized');
   return instance;
 };
 OverlayScrollbars.extend = addPlugin;

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -1429,11 +1429,11 @@
     var map;
     var destroyed = false;
 
-    var _destroy = function _destroy() {
+    var destroy = function destroy() {
       destroyed = true;
     };
 
-    var _updateElements = function _updateElements(getElements) {
+    var updateElements = function updateElements(getElements) {
       if (eventContentChange) {
         var eventElmList = eventContentChange.reduce(function (arr, item) {
           if (item) {
@@ -1478,14 +1478,10 @@
 
     if (eventContentChange) {
       map = new WeakMap();
-
+      updateElements();
-      _updateElements();
     }
 
-    return {
+    return [destroy, updateElements];
-      _destroy: _destroy,
-      _updateElements: _updateElements
-    };
   };
 
   var createDOMObserver = function createDOMObserver(target, isContentObserver, callback, options) {
@@ -1508,8 +1504,8 @@
       _timeout: 33,
       _maxDelay: 99
     }), _eventContentChange),
-        destroyEventContentChange = _createEventContentCh._destroy,
+        destroyEventContentChange = _createEventContentCh[0],
-        updateEventContentChangeElements = _createEventContentCh._updateElements;
+        updateEventContentChangeElements = _createEventContentCh[1];
 
     var finalAttributes = _attributes || [];
     var finalStyleChangingAttributes = _styleChangingAttributes || [];
@@ -1579,20 +1575,17 @@
       characterData: isContentObserver
     });
     isConnected = true;
-    return {
+    return [function () {
-      _destroy: function _destroy() {
+      if (isConnected) {
-        if (isConnected) {
+        destroyEventContentChange();
-          destroyEventContentChange();
+        mutationObserver.disconnect();
-          mutationObserver.disconnect();
+        isConnected = false;
-          isConnected = false;
-        }
-      },
-      _update: function _update() {
-        if (isConnected) {
-          observerCallback(mutationObserver.takeRecords());
-        }
       }
-    };
+    }, function () {
+      if (isConnected) {
+        observerCallback(mutationObserver.takeRecords());
+      }
+    }];
   };
 
   var ignorePrefix = 'os-';
@@ -1706,11 +1699,13 @@
       _appear: true,
       _direction: !_nativeScrollbarStyling
     });
-    var hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
+
+    var _createDOMObserver = createDOMObserver(_host, false, onHostMutation, {
       _styleChangingAttributes: baseStyleChangingAttrs,
       _attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
       _ignoreTargetChange: ignoreTargetChange
-    });
+    }),
+        destroyHostMutationObserver = _createDOMObserver[0];
 
     var updateOptions = function updateOptions(checkOption) {
       var _checkOption = checkOption('updating.elementEvents'),
@@ -1729,9 +1724,8 @@
 
       if (updateContentMutationObserver) {
         if (contentMutationObserver) {
-          contentMutationObserver._update();
+          contentMutationObserver[1]();
-
+          contentMutationObserver[0]();
-          contentMutationObserver._destroy();
         }
 
         contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
@@ -1762,11 +1756,10 @@
 
     updateViewportAttrsFromHost();
     return [updateOptions, function () {
-      contentMutationObserver && contentMutationObserver._destroy();
+      contentMutationObserver && contentMutationObserver[0]();
       destroyTrinsicObserver && destroyTrinsicObserver();
       destroySizeObserver();
-
+      destroyHostMutationObserver();
-      hostMutationObserver._destroy();
     }];
   };
 
@@ -1860,11 +1853,9 @@
         style(_viewport, viewportStyle);
 
         _setLifecycleCommunication({
-          _paddingInfo: {
+          _padding: padding,
-            _absolute: !paddingRelative,
+          _paddingAbsolute: !paddingRelative,
-            _padding: padding
+          _viewportPaddingStyle: _padding ? viewportStyle : assignDeep({}, paddingStyle, viewportStyle)
-          },
-          _viewportPaddingStyle: _padding ? viewportStyle : _extends({}, paddingStyle, viewportStyle)
         });
       }
 
@@ -1968,16 +1959,16 @@
         var _getEnvironment = getEnvironment(),
             _nativeScrollbarIsOverlaid = _getEnvironment._nativeScrollbarIsOverlaid;
 
-        var _getLifecycleCommunic = _getLifecycleCommunication()._paddingInfo,
+        var _getLifecycleCommunic = _getLifecycleCommunication(),
-            paddingAbsolute = _getLifecycleCommunic._absolute,
+            _paddingAbsolute = _getLifecycleCommunic._paddingAbsolute,
-            padding = _getLifecycleCommunic._padding;
+            _padding = _getLifecycleCommunic._padding;
 
         var _overflowScroll = viewportOverflowState._overflowScroll,
             _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
         var hostSizeFraction = sizeFraction(_host);
         var hostClientSize = clientSize(_host);
         var isContentBox = style(_viewport, 'boxSizing') === 'content-box';
-        var paddingVertical = paddingAbsolute || isContentBox ? padding.b + padding.t : 0;
+        var paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
         var fractionalClientHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
         var subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
         style(_viewport, {
@@ -2041,19 +2032,18 @@
 
     var arrangeViewport = function arrangeViewport(viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL) {
       if (_doViewportArrange) {
+        var _getLifecycleCommunic2 = _getLifecycleCommunication(),
+            _viewportPaddingStyle = _getLifecycleCommunic2._viewportPaddingStyle;
+
         var _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
             _scrollbarsHideOffsetArrange = viewportOverflowState._scrollbarsHideOffsetArrange;
         var arrangeX = _scrollbarsHideOffsetArrange.x,
             arrangeY = _scrollbarsHideOffsetArrange.y;
         var hideOffsetX = _scrollbarsHideOffset.x,
             hideOffsetY = _scrollbarsHideOffset.y;
-
-        var _getLifecycleCommunic2 = _getLifecycleCommunication(),
-            viewportPaddingStyle = _getLifecycleCommunic2._viewportPaddingStyle;
-
         var viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
-        var viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
+        var viewportArrangeHorizontalPaddingValue = _viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
-        var viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop;
+        var viewportArrangeVerticalPaddingValue = _viewportPaddingStyle.paddingTop;
         var fractionalContentWidth = viewportScrollSize.w + (abs(viewportSizeFraction.w) < 1 ? viewportSizeFraction.w : 0);
         var fractionalContenHeight = viewportScrollSize.h + (abs(viewportSizeFraction.h) < 1 ? viewportSizeFraction.h : 0);
         var arrangeSize = {
@@ -2287,16 +2277,14 @@
   };
 
   var booleanCacheValuesFallback = [false, false, false];
-  var lifecycleCommunicationFallback = {
+  var initialLifecycleCommunication = {
-    _paddingInfo: {
+    _padding: {
-      _absolute: false,
+      t: 0,
-      _padding: {
+      r: 0,
-        t: 0,
+      b: 0,
-        r: 0,
+      l: 0
-        b: 0,
-        l: 0
-      }
     },
+    _paddingAbsolute: false,
     _viewportOverflowScrollCache: [{
       x: false,
       y: false
@@ -2343,7 +2331,7 @@
   };
 
   var createLifecycleHub = function createLifecycleHub(options, triggerListener, structureSetup, scrollbarsSetup) {
-    var lifecycleCommunication = lifecycleCommunicationFallback;
+    var lifecycleCommunication = initialLifecycleCommunication;
     var updateObserverOptions;
     var destroyObservers;
     var _viewport = structureSetup._targetObj._viewport;
@@ -2614,7 +2602,7 @@
         triggerEvent = _createEventListenerH[2];
 
     if (_nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y && !currentOptions.nativeScrollbarsOverlaid.initialize) {
-      triggerEvent('initializationWithdrawn', false);
+      triggerEvent('initializationWithdrawn');
     }
 
     var structureSetup = createStructureSetup(target);
@@ -2647,7 +2635,7 @@
 
         removeInstance(instanceTarget);
         removeEvent();
-        triggerEvent('destroyed', false);
+        triggerEvent('destroyed');
       }
     };
     each(keys(plugins), function (pluginName) {
@@ -2659,7 +2647,7 @@
     });
     instance.update(true);
     addInstance(instanceTarget, instance);
-    triggerEvent('initialized', false);
+    triggerEvent('initialized');
     return instance;
   };
   OverlayScrollbars.extend = addPlugin;

packages/overlayscrollbars/src/eventListeners.ts

@@ -36,16 +36,15 @@ export interface OnOverflowChangedEventListenerArgs {
 }
 
 export interface EventListenerArgsMap {
-  initialized: false;
+  initialized: undefined;
-  initializationWithdrawn: false;
+  initializationWithdrawn: undefined;
   overflowChanged: OnOverflowChangedEventListenerArgs;
   updated: OnUpdatedEventListenerArgs;
-  destroyed: false;
+  destroyed: undefined;
 }
 
-export type OSEventListener<N extends keyof EventListenerArgsMap> = (
+export type OSEventListener<N extends keyof EventListenerArgsMap = keyof EventListenerArgsMap> =
-  args: EventListenerArgsMap[N]
+  undefined extends EventListenerArgsMap[N] ? () => void : (args: EventListenerArgsMap[N]) => void;
-) => void;
 
 export type AddEventListener = <N extends keyof EventListenerArgsMap>(
   name: N,
@@ -59,7 +58,9 @@ export type RemoveEventListener = <N extends keyof EventListenerArgsMap>(
 
 export type TriggerEventListener = <N extends keyof EventListenerArgsMap>(
   name: N,
-  args: EventListenerArgsMap[N]
+  ...args: undefined extends EventListenerArgsMap[N]
+    ? [args?: never]
+    : [args: EventListenerArgsMap[N]]
 ) => void;
 
 export type EventListenersHub = [AddEventListener, RemoveEventListener, TriggerEventListener];
@@ -78,7 +79,7 @@ const manageListener = <N extends keyof EventListenerArgsMap>(
 export const createEventListenerHub = (
   initialEventListeners?: EventListenersMap
 ): EventListenersHub => {
-  const events = new Map<string, Set<OSEventListener<any>>>();
+  const events = new Map<keyof EventListenerArgsMap, Set<OSEventListener>>();
   const removeEvent: RemoveEventListener = (name?, listener?) => {
     if (name) {
       const eventSet = events.get(name);
@@ -110,7 +111,7 @@ export const createEventListenerHub = (
 
     each(from(eventSet), (event) => {
       if (args) {
-        event(args);
+        (event as (args: any) => void)(args);
       } else {
         (event as () => void)();
       }

packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts

@@ -34,10 +34,8 @@ export type Lifecycle = (
 export type LifecycleOptionInfo<T> = [T, boolean];
 
 export interface LifecycleCommunication {
-  _paddingInfo: {
+  _padding: TRBL;
-    _absolute: boolean;
+  _paddingAbsolute: boolean;
-    _padding: TRBL;
-  };
   _viewportPaddingStyle: StyleObject;
   _viewportOverflowScrollCache: CacheValues<XY<boolean>>;
   _viewportOverflowAmountCache: CacheValues<WH<number>>;
@@ -82,16 +80,14 @@ const applyForceToCache = <T>(cacheValues: CacheValues<T>, force?: boolean): Cac
   cacheValues[2],
 ];
 const booleanCacheValuesFallback: CacheValues<boolean> = [false, false, false];
-const lifecycleCommunicationFallback: LifecycleCommunication = {
+const initialLifecycleCommunication: LifecycleCommunication = {
-  _paddingInfo: {
+  _padding: {
-    _absolute: false,
+    t: 0,
-    _padding: {
+    r: 0,
-      t: 0,
+    b: 0,
-      r: 0,
+    l: 0,
-      b: 0,
-      l: 0,
-    },
   },
+  _paddingAbsolute: false,
   _viewportOverflowScrollCache: [
     {
       x: false,
@@ -155,7 +151,7 @@ export const createLifecycleHub = (
   structureSetup: StructureSetup,
   scrollbarsSetup: ScrollbarsSetup
 ): LifecycleHubInstance => {
-  let lifecycleCommunication = lifecycleCommunicationFallback;
+  let lifecycleCommunication = initialLifecycleCommunication;
   let updateObserverOptions: UpdateObserverOptions;
   let destroyObservers: () => void;
   const { _viewport } = structureSetup._targetObj;

packages/overlayscrollbars/src/lifecycles/lifecycleHubObservers.ts

@@ -18,7 +18,10 @@ import { LifecycleHub, LifecycleCheckOption, LifecycleUpdateHints } from 'lifecy
 
 export type UpdateObserverOptions = (checkOption: LifecycleCheckOption) => void;
 
-export type LifecycleHubObservers = [UpdateObserverOptions, () => void];
+export type LifecycleHubObservers = [
+  updateObserverOptions: UpdateObserverOptions,
+  destroy: () => void
+];
 
 // const hostSelector = `.${classNameHost}`;
 
@@ -144,7 +147,7 @@ export const lifecycleHubOservers = (
     _appear: true,
     _direction: !_nativeScrollbarStyling,
   });
-  const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
+  const [destroyHostMutationObserver] = createDOMObserver(_host, false, onHostMutation, {
     _styleChangingAttributes: baseStyleChangingAttrs,
     _attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
     _ignoreTargetChange: ignoreTargetChange,
@@ -162,8 +165,8 @@ export const lifecycleHubOservers = (
 
     if (updateContentMutationObserver) {
       if (contentMutationObserver) {
-        contentMutationObserver._update();
+        contentMutationObserver[1](); // update
-        contentMutationObserver._destroy();
+        contentMutationObserver[0](); // destroy
       }
       contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
         _styleChangingAttributes: contentMutationObserverAttr.concat(attributes || []),
@@ -206,10 +209,10 @@ export const lifecycleHubOservers = (
   return [
     updateOptions,
     () => {
-      contentMutationObserver && contentMutationObserver._destroy();
+      contentMutationObserver && contentMutationObserver[0](); // destroy
       destroyTrinsicObserver && destroyTrinsicObserver();
       destroySizeObserver();
-      hostMutationObserver._destroy();
+      destroyHostMutationObserver();
     },
   ];
 };

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -143,14 +143,13 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
 
     if (heightIntrinsic) {
       const { _nativeScrollbarIsOverlaid } = getEnvironment();
-      const { _absolute: paddingAbsolute, _padding: padding } =
+      const { _paddingAbsolute, _padding } = _getLifecycleCommunication();
-        _getLifecycleCommunication()._paddingInfo;
       const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
       const hostSizeFraction = sizeFraction(_host);
       const hostClientSize = clientSize(_host);
       // padding subtraction is only needed if padding is absolute or if viewport is content-box
       const isContentBox = style(_viewport, 'boxSizing') === 'content-box';
-      const paddingVertical = paddingAbsolute || isContentBox ? padding.b + padding.t : 0;
+      const paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
       const fractionalClientHeight =
         hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
       const subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
@@ -257,17 +256,17 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     directionIsRTL: boolean
   ) => {
     if (_doViewportArrange) {
+      const { _viewportPaddingStyle } = _getLifecycleCommunication();
       const { _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
       const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
       const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
-      const { _viewportPaddingStyle: viewportPaddingStyle } = _getLifecycleCommunication();
       const viewportArrangeHorizontalPaddingKey: keyof StyleObject = directionIsRTL
         ? 'paddingRight'
         : 'paddingLeft';
-      const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[
+      const viewportArrangeHorizontalPaddingValue = _viewportPaddingStyle[
         viewportArrangeHorizontalPaddingKey
       ] as number;
-      const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop as number;
+      const viewportArrangeVerticalPaddingValue = _viewportPaddingStyle.paddingTop as number;
       const fractionalContentWidth =
         viewportScrollSize.w + (abs(viewportSizeFraction.w) < 1 ? viewportSizeFraction.w : 0);
       const fractionalContenHeight =

packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts

@@ -1,4 +1,4 @@
-import { createCache, topRightBottomLeft, equalTRBL, style } from 'support';
+import { createCache, topRightBottomLeft, equalTRBL, style, assignDeep } from 'support';
 import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub';
 import { StyleObject } from 'typings';
 import { getEnvironment } from 'environment';
@@ -60,16 +60,11 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
       style(_viewport, viewportStyle);
 
       _setLifecycleCommunication({
-        _paddingInfo: {
+        _padding: padding,
-          _absolute: !paddingRelative,
+        _paddingAbsolute: !paddingRelative,
-          _padding: padding,
-        },
         _viewportPaddingStyle: _padding
           ? viewportStyle
-          : {
+          : assignDeep({}, paddingStyle, viewportStyle),
-              ...paddingStyle,
-              ...viewportStyle,
-            },
       });
     }
 

packages/overlayscrollbars/src/observers/domObserver.ts

@@ -63,10 +63,10 @@ export type DOMObserverOptions<ContentObserver extends boolean> = ContentObserve
   ? DOMContentObserverOptions
   : DOMTargetObserverOptions;
 
-export interface DOMObserver {
+export type DOMObserver = [destroy: () => void, update: () => void];
-  _destroy: () => void;
+
-  _update: () => void;
+type EventContentChangeUpdateElement = (getElements?: (selector: string) => Node[]) => void;
-}
+type EventContentChange = [destroy: () => void, updateElements: EventContentChangeUpdateElement];
 
 /**
  * Creates a set of helper functions to observe events of elements inside the target element.
@@ -79,13 +79,13 @@ const createEventContentChange = (
   target: Element,
   callback: (...args: any) => any,
   eventContentChange?: DOMObserverEventContentChange
-) => {
+): EventContentChange => {
   let map: WeakMap<Node, [string, () => any]> | undefined; // weak map to prevent memory leak for detached elements
   let destroyed = false;
-  const _destroy = () => {
+  const destroy = () => {
     destroyed = true;
   };
-  const _updateElements = (getElements?: (selector: string) => Node[]) => {
+  const updateElements: EventContentChangeUpdateElement = (getElements?) => {
     if (eventContentChange) {
       const eventElmList = eventContentChange.reduce<Array<[Node[], string]>>((arr, item) => {
         if (item) {
@@ -134,13 +134,10 @@ const createEventContentChange = (
 
   if (eventContentChange) {
     map = new WeakMap();
-    _updateElements();
+    updateElements();
   }
 
-  return {
+  return [destroy, updateElements];
-    _destroy,
-    _updateElements,
-  };
 };
 
 /**
@@ -167,10 +164,7 @@ export const createDOMObserver = <ContentObserver extends boolean>(
     _ignoreNestedTargetChange,
     _ignoreContentChange,
   } = (options as DOMContentObserverOptions & DOMTargetObserverOptions) || {};
-  const {
+  const [destroyEventContentChange, updateEventContentChangeElements] = createEventContentChange(
-    _destroy: destroyEventContentChange,
-    _updateElements: updateEventContentChangeElements,
-  } = createEventContentChange(
     target,
     debounce(
       () => {
@@ -267,18 +261,18 @@ export const createDOMObserver = <ContentObserver extends boolean>(
   });
   isConnected = true;
 
-  return {
+  return [
-    _destroy: () => {
+    () => {
       if (isConnected) {
         destroyEventContentChange();
         mutationObserver.disconnect();
         isConnected = false;
       }
     },
-    _update: () => {
+    () => {
       if (isConnected) {
         observerCallback(mutationObserver.takeRecords());
       }
     },
-  };
+  ];
 };

packages/overlayscrollbars/src/overlayscrollbars.ts

@@ -72,7 +72,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
     _nativeScrollbarIsOverlaid.y &&
     !currentOptions.nativeScrollbarsOverlaid.initialize
   ) {
-    triggerEvent('initializationWithdrawn', false);
+    triggerEvent('initializationWithdrawn');
   }
 
   const structureSetup: StructureSetup = createStructureSetup(target);
@@ -106,7 +106,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
       lifecycleHub._destroy();
       removeInstance(instanceTarget);
       removeEvent();
-      triggerEvent('destroyed', false);
+      triggerEvent('destroyed');
     },
   };
 
@@ -121,7 +121,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
 
   addInstance(instanceTarget, instance);
 
-  triggerEvent('initialized', false);
+  triggerEvent('initialized');
 
   return instance;
 };

packages/overlayscrollbars/src/support/cache/cache.ts

@@ -7,11 +7,7 @@ export interface CacheOptions<Value> {
   _alwaysUpdateValues?: boolean;
 }
 
-export type CacheValues<T> = [
+export type CacheValues<T> = [value: T, changed: boolean, previous?: T];
-  T, // value
-  boolean, // changed
-  T? // previous
-];
 
 export type EqualCachePropFunction<Value> = (currentVal: Value, newVal: Value) => boolean;
 

packages/overlayscrollbars/types/overlayscrollbars.d.ts

@@ -125,13 +125,13 @@ interface OnOverflowChangedEventListenerArgs {
     };
 }
 interface EventListenerArgsMap {
-    initialized: false;
+    initialized: undefined;
-    initializationWithdrawn: false;
+    initializationWithdrawn: undefined;
     overflowChanged: OnOverflowChangedEventListenerArgs;
     updated: OnUpdatedEventListenerArgs;
-    destroyed: false;
+    destroyed: undefined;
 }
-type OSEventListener<N extends keyof EventListenerArgsMap> = (args: EventListenerArgsMap[N]) => void;
+type OSEventListener<N extends keyof EventListenerArgsMap> = undefined extends EventListenerArgsMap[N] ? () => void : (args: EventListenerArgsMap[N]) => void;
 type AddEventListener = <N extends keyof EventListenerArgsMap>(name: N, listener: OSEventListener<N> | OSEventListener<N>[]) => () => void;
 type RemoveEventListener = <N extends keyof EventListenerArgsMap>(name?: N, listener?: OSEventListener<N> | OSEventListener<N>[]) => void;
 type EventListenersMap = {