build

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -1221,7 +1221,9 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
   if (ResizeObserverConstructor) {
     const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
     resizeObserverInstance.observe(listenerElement);
-    push(offListeners, () => 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>`
@@ -1367,7 +1369,9 @@ const createTrinsicObserver = (target, onTrinsicChangedCallback) => {
       }
     );
     intersectionObserverInstance.observe(trinsicObserver);
-    push(offListeners, () => intersectionObserverInstance.disconnect());
+    push(offListeners, () => {
+      intersectionObserverInstance.disconnect();
+    });
   } else {
     const onSizeChanged = () => {
       const newSize = offsetSize(trinsicObserver);
@@ -1402,7 +1406,9 @@ const createEventContentChange = (target, eventContentChange, callback) => {
 
   const _destroy = () => {
     if (map) {
-      map.forEach((eventName, elm) => off(elm, eventName, callback));
+      map.forEach((eventName, elm) => {
+        off(elm, eventName, callback);
+      });
       map.clear();
     }
   };
@@ -1569,6 +1575,7 @@ const createDOMObserver = (target, isContentObserver, callback, options) => {
 };
 
 const ignorePrefix = 'os-';
+const viewportAttrsFromTarget = ['tabindex'];
 const baseStyleChangingAttrsTextarea = ['wrap', 'cols', 'rows'];
 const baseStyleChangingAttrs = ['id', 'class', 'style', 'open'];
 
@@ -1584,6 +1591,7 @@ const ignoreTargetChange = (target, attrName, oldValue, newValue) => {
 const lifecycleHubOservers = (instance, updateLifecycles) => {
   let debounceTimeout;
   let debounceMaxDelay;
+  let contentMutationObserver;
   const { _structureSetup } = instance;
   const { _targetObj, _targetCtx } = _structureSetup;
   const { _host, _viewport, _content } = _targetObj;
@@ -1608,6 +1616,20 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
     },
   });
 
+  const updateViewportAttrsFromHost = (attributes) => {
+    each(attributes || viewportAttrsFromTarget, (attribute) => {
+      if (indexOf(viewportAttrsFromTarget, attribute) > -1) {
+        const hostAttr = attr(_host, attribute);
+
+        if (isString(hostAttr)) {
+          attr(_viewport, attribute, hostAttr);
+        } else {
+          removeAttr(_viewport, attribute);
+        }
+      }
+    });
+  };
+
   const onTrinsicChanged = (heightIntrinsic) => {
     updateLifecycles({
       _heightIntrinsic: heightIntrinsic,
@@ -1629,9 +1651,16 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
     });
   };
 
-  const onHostMutation = updateLifecyclesWithDebouncedAdaptiveUpdateHints.bind(0, {
+  const onHostMutation = (targetChangedAttrs, targetStyleChanged) => {
-    _hostMutation: true,
+    if (targetStyleChanged) {
-  });
+      updateLifecyclesWithDebouncedAdaptiveUpdateHints({
+        _hostMutation: true,
+      });
+    } else {
+      updateViewportAttrsFromHost(targetChangedAttrs);
+    }
+  };
+
   const trinsicObserver = (_content || !_flexboxGlue) && createTrinsicObserver(_host, onTrinsicChanged);
   const sizeObserver = createSizeObserver(_host, onSizeChanged, {
     _appear: true,
@@ -1639,10 +1668,9 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
   });
   const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
     _styleChangingAttributes: baseStyleChangingAttrs,
-    _attributes: baseStyleChangingAttrs,
+    _attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
     _ignoreTargetChange: ignoreTargetChange,
   });
-  let contentMutationObserver;
 
   const updateOptions = (checkOption) => {
     const { _value: elementEvents, _changed: elementEventsChanged } = checkOption('updating.elementEvents');
@@ -1683,10 +1711,20 @@ const lifecycleHubOservers = (instance, updateLifecycles) => {
     }
   };
 
+  updateViewportAttrsFromHost();
   return {
     _trinsicObserver: trinsicObserver,
     _sizeObserver: sizeObserver,
     _updateObserverOptions: updateOptions,
+
+    _destroy() {
+      contentMutationObserver && contentMutationObserver._destroy();
+      trinsicObserver && trinsicObserver._destroy();
+
+      sizeObserver._destroy();
+
+      hostMutationObserver._destroy();
+    },
   };
 };
 
@@ -1788,6 +1826,8 @@ const sizeFraction = (elm) => {
   };
 };
 
+const fractionalPixelRatioTollerance = () => (window.devicePixelRatio % 1 === 0 ? 0 : 1);
+
 const setAxisOverflowStyle = (horizontal, overflowAmount, behavior, styleObj) => {
   const overflowKey = horizontal ? 'overflowX' : 'overflowY';
   const behaviorIsVisible = behavior.indexOf('visible') === 0;
@@ -1822,8 +1862,14 @@ const createOverflowLifecycle = (lifecycleHub) => {
   );
   const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache(
     ({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({
-      w: round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
+      w: max(
-      h: round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
+        0,
+        round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.w)))
+      ),
+      h: max(
+        0,
+        round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.h)))
+      ),
     }),
     whCacheOptions
   );
@@ -2233,11 +2279,9 @@ const createLifecycleHub = (options, structureSetup) => {
     }
   };
 
-  const { _sizeObserver, _trinsicObserver, _updateObserverOptions } = lifecycleHubOservers(instance, updateLifecycles);
+  const { _sizeObserver, _trinsicObserver, _updateObserverOptions, _destroy: destroyObservers } = lifecycleHubOservers(instance, updateLifecycles);
 
-  const update = (changedOptions, force) => {
+  const update = (changedOptions, force) => updateLifecycles(null, changedOptions, force);
-    updateLifecycles(null, changedOptions, force);
-  };
 
   const envUpdateListener = update.bind(null, null, true);
   addEnvironmentListener(envUpdateListener);
@@ -2249,6 +2293,7 @@ const createLifecycleHub = (options, structureSetup) => {
     }),
 
     _destroy() {
+      destroyObservers();
       removeEnvironmentListener(envUpdateListener);
     },
   };

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -1355,7 +1355,7 @@
       var resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
       resizeObserverInstance.observe(listenerElement);
       push(offListeners, function () {
-        return resizeObserverInstance.disconnect();
+        resizeObserverInstance.disconnect();
       });
     } else {
       var observerElementChildren = createDOM(
@@ -1519,7 +1519,7 @@
       );
       intersectionObserverInstance.observe(trinsicObserver);
       push(offListeners, function () {
-        return intersectionObserverInstance.disconnect();
+        intersectionObserverInstance.disconnect();
       });
     } else {
       var onSizeChanged = function onSizeChanged() {
@@ -1555,7 +1555,7 @@
     var _destroy = function _destroy() {
       if (map) {
         map.forEach(function (eventName, elm) {
-          return off(elm, eventName, callback);
+          off(elm, eventName, callback);
         });
         map.clear();
       }
@@ -1731,6 +1731,7 @@
   };
 
   var ignorePrefix = 'os-';
+  var viewportAttrsFromTarget = ['tabindex'];
   var baseStyleChangingAttrsTextarea = ['wrap', 'cols', 'rows'];
   var baseStyleChangingAttrs = ['id', 'class', 'style', 'open'];
 
@@ -1748,6 +1749,7 @@
   var lifecycleHubOservers = function lifecycleHubOservers(instance, updateLifecycles) {
     var debounceTimeout;
     var debounceMaxDelay;
+    var contentMutationObserver;
     var _structureSetup = instance._structureSetup;
     var _targetObj = _structureSetup._targetObj,
       _targetCtx = _structureSetup._targetCtx;
@@ -1788,6 +1790,20 @@
       },
     });
 
+    var updateViewportAttrsFromHost = function updateViewportAttrsFromHost(attributes) {
+      each(attributes || viewportAttrsFromTarget, function (attribute) {
+        if (indexOf(viewportAttrsFromTarget, attribute) > -1) {
+          var hostAttr = attr(_host, attribute);
+
+          if (isString(hostAttr)) {
+            attr(_viewport, attribute, hostAttr);
+          } else {
+            removeAttr(_viewport, attribute);
+          }
+        }
+      });
+    };
+
     var onTrinsicChanged = function onTrinsicChanged(heightIntrinsic) {
       updateLifecycles({
         _heightIntrinsic: heightIntrinsic,
@@ -1812,9 +1828,16 @@
       });
     };
 
-    var onHostMutation = updateLifecyclesWithDebouncedAdaptiveUpdateHints.bind(0, {
+    var onHostMutation = function onHostMutation(targetChangedAttrs, targetStyleChanged) {
-      _hostMutation: true,
+      if (targetStyleChanged) {
-    });
+        updateLifecyclesWithDebouncedAdaptiveUpdateHints({
+          _hostMutation: true,
+        });
+      } else {
+        updateViewportAttrsFromHost(targetChangedAttrs);
+      }
+    };
+
     var trinsicObserver = (_content || !_flexboxGlue) && createTrinsicObserver(_host, onTrinsicChanged);
     var sizeObserver = createSizeObserver(_host, onSizeChanged, {
       _appear: true,
@@ -1822,10 +1845,9 @@
     });
     var hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
       _styleChangingAttributes: baseStyleChangingAttrs,
-      _attributes: baseStyleChangingAttrs,
+      _attributes: baseStyleChangingAttrs.concat(viewportAttrsFromTarget),
       _ignoreTargetChange: ignoreTargetChange,
     });
-    var contentMutationObserver;
 
     var updateOptions = function updateOptions(checkOption) {
       var _checkOption = checkOption('updating.elementEvents'),
@@ -1875,10 +1897,19 @@
       }
     };
 
+    updateViewportAttrsFromHost();
     return {
       _trinsicObserver: trinsicObserver,
       _sizeObserver: sizeObserver,
       _updateObserverOptions: updateOptions,
+      _destroy: function _destroy() {
+        contentMutationObserver && contentMutationObserver._destroy();
+        trinsicObserver && trinsicObserver._destroy();
+
+        sizeObserver._destroy();
+
+        hostMutationObserver._destroy();
+      },
     };
   };
 
@@ -2007,6 +2038,10 @@
     };
   };
 
+  var fractionalPixelRatioTollerance = function fractionalPixelRatioTollerance() {
+    return window.devicePixelRatio % 1 === 0 ? 0 : 1;
+  };
+
   var setAxisOverflowStyle = function setAxisOverflowStyle(horizontal, overflowAmount, behavior, styleObj) {
     var overflowKey = horizontal ? 'overflowX' : 'overflowY';
     var behaviorIsVisible = behavior.indexOf('visible') === 0;
@@ -2051,8 +2086,14 @@
           _viewportClientSize = _ref._viewportClientSize,
           _viewportSizeFraction = _ref._viewportSizeFraction;
         return {
-          w: round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
+          w: max(
-          h: round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
+            0,
+            round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.w)))
+          ),
+          h: max(
+            0,
+            round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.h)))
+          ),
         };
       }, whCacheOptions),
       updateOverflowAmountCache = _createCache3._update,
@@ -2531,10 +2572,11 @@
     var _lifecycleHubOservers = lifecycleHubOservers(instance, updateLifecycles),
       _sizeObserver = _lifecycleHubOservers._sizeObserver,
       _trinsicObserver = _lifecycleHubOservers._trinsicObserver,
-      _updateObserverOptions = _lifecycleHubOservers._updateObserverOptions;
+      _updateObserverOptions = _lifecycleHubOservers._updateObserverOptions,
+      destroyObservers = _lifecycleHubOservers._destroy;
 
     var update = function update(changedOptions, force) {
-      updateLifecycles(null, changedOptions, force);
+      return updateLifecycles(null, changedOptions, force);
     };
 
     var envUpdateListener = update.bind(null, null, true);
@@ -2548,6 +2590,7 @@
         };
       },
       _destroy: function _destroy() {
+        destroyObservers();
         removeEnvironmentListener(envUpdateListener);
       },
     };

packages/overlayscrollbars/types/lifecycles/lifecycleHub.d.ts

@@ -3,6 +3,7 @@ import { OSOptions } from 'options';
 import { StructureSetup } from 'setups/structureSetup';
 import { StyleObject } from 'typings';
 export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
+export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
 export interface LifecycleOptionInfo<T> {
     readonly _value: T;
     _changed: boolean;
@@ -26,7 +27,6 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
     _directionIsRTL: CacheValues<boolean>;
     _heightIntrinsic: CacheValues<boolean>;
 }
-export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
 export interface LifecycleHubState {
     _overflowAmount: WH<number>;
 }

packages/overlayscrollbars/types/lifecycles/lifecycleHubObservers.d.ts

@@ -3,4 +3,5 @@ export declare const lifecycleHubOservers: (instance: LifecycleHub, updateLifecy
     _trinsicObserver: false | import("observers/trinsicObserver").TrinsicObserver;
     _sizeObserver: import("observers/sizeObserver").SizeObserver;
     _updateObserverOptions: (checkOption: LifecycleCheckOption) => void;
+    _destroy(): void;
 };