build

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -213,6 +213,11 @@ const find = (selector, elm) => {
   return rootElm ? push(arr, rootElm.querySelectorAll(selector)) : arr;
 };
 
+const findFirst = (selector, elm) => {
+  const rootElm = elm ? (isElement(elm) ? elm : null) : document;
+  return rootElm ? rootElm.querySelector(selector) : null;
+};
+
 const is = (elm, selector) => {
   if (isElement(elm)) {
     const fn = elmPrototype.matches || elmPrototype.msMatchesSelector;
@@ -226,6 +231,36 @@ const contents = (elm) => (elm ? from(elm.childNodes) : []);
 
 const parent = (elm) => (elm ? elm.parentElement : null);
 
+const closest = (elm, selector) => {
+  if (isElement(elm)) {
+    const closestFn = elmPrototype.closest;
+
+    if (closestFn) {
+      return closestFn.call(elm, selector);
+    }
+
+    do {
+      if (is(elm, selector)) {
+        return elm;
+      }
+
+      elm = parent(elm);
+    } while (elm);
+  }
+
+  return null;
+};
+
+const liesBetween = (elm, highBoundarySelector, deepBoundarySelector) => {
+  const closestHighBoundaryElm = elm && closest(elm, highBoundarySelector);
+  const closestDeepBoundaryElm = elm && findFirst(deepBoundarySelector, closestHighBoundaryElm);
+  return closestHighBoundaryElm && closestDeepBoundaryElm
+    ? closestHighBoundaryElm === elm ||
+        closestDeepBoundaryElm === elm ||
+        closest(closest(elm, deepBoundarySelector), highBoundarySelector) !== closestHighBoundaryElm
+    : false;
+};
+
 const before = (parentElm, preferredAnchor, insertedElms) => {
   if (insertedElms) {
     let anchor = preferredAnchor;
@@ -345,6 +380,22 @@ const addClass = (elm, className) => {
 const removeClass = (elm, className) => {
   classListAction(elm, className, (classList, clazz) => classList.remove(clazz));
 };
+const diffClass = (classNameA, classNameB) => {
+  const classNameASplit = classNameA && classNameA.split(' ');
+  const classNameBSplit = classNameB && classNameB.split(' ');
+  const tempObj = {};
+  each(classNameASplit, (className) => {
+    tempObj[className] = 1;
+  });
+  each(classNameBSplit, (className) => {
+    if (tempObj[className]) {
+      delete tempObj[className];
+    } else {
+      tempObj[className] = 1;
+    }
+  });
+  return keys(tempObj);
+};
 
 const zeroObj = {
   w: 0,
@@ -451,7 +502,6 @@ const equal = (a, b, props, propMutation) => {
   return false;
 };
 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 equalBCRWH = (a, b, round) => equal(a, b, ['width', 'height'], round && ((value) => Math.round(value)));
 
@@ -714,7 +764,7 @@ const stringArrayNullAllowedValues = [optionsTemplateTypes.string, optionsTempla
 const booleanTrueTemplate = [true, optionsTemplateTypes.boolean];
 const booleanFalseTemplate = [false, optionsTemplateTypes.boolean];
 const resizeAllowedValues = 'none both horizontal vertical';
-const overflowAllowedValues = 'visible-hidden visible-scroll scroll hidden';
+const overflowAllowedValues = 'hidden scroll visible visible-hidden';
 const scrollbarsVisibilityAllowedValues = 'visible hidden auto';
 const scrollbarsAutoHideAllowedValues = 'never scroll leavemove';
 const defaultOptionsWithTemplate = {
@@ -1074,14 +1124,20 @@ const createTrinsicLifecycle = (lifecycleHub) => {
 
     if (heightIntrinsicChanged) {
       style(_content, {
-        height: heightIntrinsic ? 'auto' : '100%',
+        height: heightIntrinsic ? '' : '100%',
+        display: heightIntrinsic ? '' : 'inline',
       });
     }
+
+    return {
+      _sizeChanged: heightIntrinsicChanged,
+      _contentMutation: heightIntrinsicChanged,
+    };
   };
 };
 
 const createPaddingLifecycle = (lifecycleHub) => {
-  const { _setPaddingInfo, _setViewportPaddingStyle, _structureSetup } = lifecycleHub;
+  const { _structureSetup, _setLifecycleCommunication } = lifecycleHub;
   const { _host, _padding, _viewport } = _structureSetup._targetObj;
   const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), {
     _equal: equalTRBL,
@@ -1133,12 +1189,13 @@ const createPaddingLifecycle = (lifecycleHub) => {
       style(_padding || _viewport, paddingStyle);
       style(_viewport, viewportStyle);
 
-      _setPaddingInfo({
+      _setLifecycleCommunication({
-        _absolute: !paddingRelative,
+        _paddingInfo: {
-        _padding: _padding2,
+          _absolute: !paddingRelative,
+          _padding: _padding2,
+        },
+        _viewportPaddingStyle: _padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle),
       });
-
-      _setViewportPaddingStyle(_padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle));
     }
 
     return {
@@ -1149,8 +1206,8 @@ const createPaddingLifecycle = (lifecycleHub) => {
 
 const overlaidScrollbarsHideOffset = 42;
 const createOverflowLifecycle = (lifecycleHub) => {
-  const { _structureSetup, _doViewportArrange, _getViewportPaddingStyle, _getPaddingInfo, _setViewportOverflowScroll } = lifecycleHub;
+  const { _structureSetup, _doViewportArrange, _getLifecycleCommunication, _setLifecycleCommunication } = lifecycleHub;
-  const { _host, _padding, _viewport, _viewportArrange } = _structureSetup._targetObj;
+  const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj;
   const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache(
     (ctx) => fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect),
     {
@@ -1159,14 +1216,14 @@ const createOverflowLifecycle = (lifecycleHub) => {
   );
   const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache(
     (ctx) => ({
-      x: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
+      w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
-      y: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
+      h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
     }),
     {
-      _equal: equalXY,
+      _equal: equalWH,
       _initialValue: {
-        x: 0,
+        w: 0,
-        y: 0,
+        h: 0,
       },
     }
   );
@@ -1182,16 +1239,16 @@ const createOverflowLifecycle = (lifecycleHub) => {
     });
 
     if (heightIntrinsic) {
-      const { _absolute: paddingAbsolute, _padding: padding } = _getPaddingInfo();
+      const { _absolute: paddingAbsolute, _padding: padding } = _getLifecycleCommunication()._paddingInfo;
 
       const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
       const hostBCR = getBoundingClientRect(_host);
       const hostOffsetSize = offsetSize(_host);
       const hostClientSize = clientSize(_host);
-      const paddingAbsoluteVertical = paddingAbsolute ? padding.b + padding.t : 0;
+      const paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
       const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
       style(_viewport, {
-        height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
+        height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
       });
     }
   };
@@ -1223,23 +1280,26 @@ const createOverflowLifecycle = (lifecycleHub) => {
   const setViewportOverflowState = (showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) => {
     const setPartialStylePerAxis = (horizontal, overflowAmount, behavior, styleObj) => {
       const overflowKey = horizontal ? 'overflowX' : 'overflowY';
+      const behaviorIsVisible = behavior.indexOf('visible') === 0;
+      const behaviorIsVisibleHidden = behavior === 'visible-hidden';
       const behaviorIsScroll = behavior === 'scroll';
-      const behaviorIsVisibleScroll = behavior === 'visible-scroll';
-      const hideOverflow = behaviorIsScroll || behavior === 'hidden';
-      const applyStyle = overflowAmount > 0 && hideOverflow;
 
-      if (applyStyle) {
+      if (behaviorIsVisible) {
+        styleObj[overflowKey] = 'visible';
+      }
+
+      if (behaviorIsScroll && overflowAmount > 0) {
         styleObj[overflowKey] = behavior;
       }
 
       return {
-        _visible: !applyStyle,
+        _visible: behaviorIsVisible,
-        _behavior: behaviorIsVisibleScroll ? 'scroll' : 'hidden',
+        _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
       };
     };
 
-    const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount.x, overflow.x, viewportStyleObj);
+    const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount.w, overflow.x, viewportStyleObj);
-    const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount.y, overflow.y, viewportStyleObj);
+    const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount.h, overflow.y, viewportStyleObj);
 
     if (xVisible && !yVisible) {
       viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1258,7 +1318,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
       const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
       const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
 
-      const viewportPaddingStyle = _getViewportPaddingStyle();
+      const { _viewportPaddingStyle: viewportPaddingStyle } = _getLifecycleCommunication();
 
       const viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
       const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
@@ -1296,20 +1356,18 @@ const createOverflowLifecycle = (lifecycleHub) => {
   };
 
   const hideNativeScrollbars = (viewportOverflowState, directionIsRTL, viewportArrange, viewportStyleObj) => {
-    const { _nativeScrollbarStyling } = getEnvironment();
+    const { _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
-    const { _overflowScroll, _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
     const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
     const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
-    const { x: scrollX, y: scrollY } = _overflowScroll;
 
-    const paddingStyle = _getViewportPaddingStyle();
+    const { _viewportPaddingStyle: viewportPaddingStyle } = _getLifecycleCommunication();
 
     const horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
     const viewportHorizontalPaddingKey = directionIsRTL ? 'paddingLeft' : 'paddingRight';
-    const horizontalMarginValue = paddingStyle[horizontalMarginKey];
+    const horizontalMarginValue = viewportPaddingStyle[horizontalMarginKey];
-    const verticalMarginValue = paddingStyle.marginBottom;
+    const verticalMarginValue = viewportPaddingStyle.marginBottom;
-    const horizontalPaddingValue = paddingStyle[viewportHorizontalPaddingKey];
+    const horizontalPaddingValue = viewportPaddingStyle[viewportHorizontalPaddingKey];
-    const verticalPaddingValue = paddingStyle.paddingBottom;
+    const verticalPaddingValue = viewportPaddingStyle.paddingBottom;
     viewportStyleObj.maxWidth = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`;
     viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
     viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
@@ -1318,19 +1376,13 @@ const createOverflowLifecycle = (lifecycleHub) => {
       viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + (arrangeY ? hideOffsetY : 0);
       viewportStyleObj.paddingBottom = verticalPaddingValue + (arrangeX ? hideOffsetX : 0);
     }
-
-    if (!_nativeScrollbarStyling) {
-      style(_padding || _host, {
-        overflow: scrollX || scrollY ? 'hidden' : '',
-      });
-    }
   };
 
-  const undoViewportArrange = (showNativeOverlaidScrollbars, viewportOverflowState) => {
+  const undoViewportArrange = (showNativeOverlaidScrollbars, directionIsRTL, viewportOverflowState) => {
     if (_doViewportArrange) {
       const finalViewportOverflowState = viewportOverflowState || getViewportOverflowState(showNativeOverlaidScrollbars);
 
-      const paddingStyle = _getViewportPaddingStyle();
+      const { _viewportPaddingStyle: viewportPaddingStyle } = _getLifecycleCommunication();
 
       const { _flexboxGlue } = getEnvironment();
       const { _scrollbarsHideOffsetArrange } = finalViewportOverflowState;
@@ -1339,7 +1391,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
 
       const assignProps = (props) =>
         each(props.split(' '), (prop) => {
-          finalPaddingStyle[prop] = paddingStyle[prop];
+          finalPaddingStyle[prop] = viewportPaddingStyle[prop];
         });
 
       if (!_flexboxGlue) {
@@ -1359,6 +1411,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
       style(_viewport, finalPaddingStyle);
       return {
         _redoViewportArrange: () => {
+          hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
           style(_viewport, prevStyle);
           addClass(_viewport, classNameViewportArrange);
         },
@@ -1402,6 +1455,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
     if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
       const { _redoViewportArrange, _viewportOverflowState: undoViewportArrangeOverflowState } = undoViewportArrange(
         showNativeOverlaidScrollbars,
+        directionIsRTL,
         preMeasureViewportOverflowState
       );
       const contentSize = clientSize(_viewport);
@@ -1471,7 +1525,10 @@ const createOverflowLifecycle = (lifecycleHub) => {
 
       style(_viewport, viewportStyle);
 
-      _setViewportOverflowScroll(viewportOverflowState._overflowScroll);
+      _setLifecycleCommunication({
+        _viewportOverflowScroll: viewportOverflowState._overflowScroll,
+        _viewportOverflowAmount: overflowAmount,
+      });
     }
   };
 };
@@ -1593,16 +1650,12 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
         const { _value, _changed } = directionIsRTLCacheValues;
 
         if (_changed) {
+          removeClass(listenerElement, 'ltr rtl');
+
           if (_value) {
-            style(listenerElement, {
+            addClass(listenerElement, 'rtl');
-              left: 'auto',
-              right: 0,
-            });
           } else {
-            style(listenerElement, {
+            addClass(listenerElement, 'ltr');
-              left: 0,
-              right: 'auto',
-            });
           }
 
           onSizeChangedCallbackProxy(directionIsRTLCacheValues);
@@ -1884,7 +1937,8 @@ const createDOMObserver = (target, isContentObserver, callback, options) => {
   };
 };
 
-const getPropByPath = (obj, path) => obj && path.split('.').reduce((o, prop) => (o && hasOwnProperty$1(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) : undefined;
 
 const emptyStylePropsToZero = (stlyeObj, baseStyle) =>
   keys(stlyeObj).reduce((obj, key) => {
@@ -1893,30 +1947,21 @@ const emptyStylePropsToZero = (stlyeObj, baseStyle) =>
     return obj;
   }, _extends_1({}, baseStyle));
 
+const ignorePrefix = 'os-';
+const hostSelector = `.${classNameHost}`;
+const viewportSelector = `.${classNameViewport}`;
+const contentSelector = `.${classNameContent}`;
 const attrs = ['id', 'class', 'style', 'open'];
-const paddingInfoFallback = {
+
-  _absolute: false,
+const ignoreTargetChange = (target, attrName, oldValue, newValue) => {
-  _padding: {
+  if (attrName === 'class' && oldValue && newValue) {
-    t: 0,
+    const diff = diffClass(oldValue, newValue);
-    r: 0,
+    return !!diff.find((addedOrRemovedClass) => addedOrRemovedClass.indexOf(ignorePrefix) !== 0);
-    b: 0,
+  }
-    l: 0,
+
-  },
+  return false;
-};
-const viewportPaddingStyleFallback = {
-  marginTop: 0,
-  marginRight: 0,
-  marginBottom: 0,
-  marginLeft: 0,
-  paddingTop: 0,
-  paddingRight: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-};
-const viewportOverflowScrollFallback = {
-  x: false,
-  y: false,
 };
+
 const directionIsRTLCacheValuesFallback = {
   _value: false,
   _previous: false,
@@ -1927,10 +1972,37 @@ const heightIntrinsicCacheValuesFallback = {
   _previous: false,
   _changed: false,
 };
+const lifecycleCommunicationFallback = {
+  _paddingInfo: {
+    _absolute: false,
+    _padding: {
+      t: 0,
+      r: 0,
+      b: 0,
+      l: 0,
+    },
+  },
+  _viewportOverflowScroll: {
+    x: false,
+    y: false,
+  },
+  _viewportOverflowAmount: {
+    w: 0,
+    h: 0,
+  },
+  _viewportPaddingStyle: {
+    marginTop: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    marginLeft: 0,
+    paddingTop: 0,
+    paddingRight: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+  },
+};
 const createLifecycleHub = (options, structureSetup) => {
-  let paddingInfo = paddingInfoFallback;
+  let lifecycleCommunication = lifecycleCommunicationFallback;
-  let viewportPaddingStyle = viewportPaddingStyleFallback;
-  let viewportOverflowScroll = viewportOverflowScrollFallback;
   const { _host, _viewport, _content } = structureSetup._targetObj;
   const {
     _nativeScrollbarStyling,
@@ -1945,22 +2017,17 @@ const createLifecycleHub = (options, structureSetup) => {
     _options: options,
     _structureSetup: structureSetup,
     _doViewportArrange: doViewportArrange,
-    _getPaddingInfo: () => paddingInfo,
+    _getLifecycleCommunication: () => lifecycleCommunication,
 
-    _setPaddingInfo(newPaddingInfo) {
+    _setLifecycleCommunication(newLifecycleCommunication) {
-      paddingInfo = newPaddingInfo || paddingInfoFallback;
+      if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
-    },
+        newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
+          newLifecycleCommunication._viewportPaddingStyle,
+          lifecycleCommunicationFallback._viewportPaddingStyle
+        );
+      }
 
-    _getViewportPaddingStyle: () => viewportPaddingStyle,
+      lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
-
-    _setViewportPaddingStyle(newPaddingStlye) {
-      viewportPaddingStyle = newPaddingStlye ? emptyStylePropsToZero(newPaddingStlye, viewportPaddingStyleFallback) : viewportPaddingStyleFallback;
-    },
-
-    _getViewportOverflowScroll: () => viewportOverflowScroll,
-
-    _setViewportOverflowScroll(newViewportOverflowScroll) {
-      viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback;
     },
   };
   push(lifecycles, createTrinsicLifecycle(instance));
@@ -2061,11 +2128,22 @@ const createLifecycleHub = (options, structureSetup) => {
   const hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
     _styleChangingAttributes: attrs,
     _attributes: attrs,
+    _ignoreTargetChange: ignoreTargetChange,
   });
   const contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
     _styleChangingAttributes: attrs,
     _attributes: attrs,
     _eventContentChange: options.updating.elementEvents,
+    _nestedTargetSelector: hostSelector,
+    _ignoreContentChange: (mutation, isNestedTarget) => {
+      const { target, attributeName } = mutation;
+      return isNestedTarget
+        ? false
+        : attributeName
+        ? liesBetween(target, hostSelector, viewportSelector) || liesBetween(target, hostSelector, contentSelector)
+        : false;
+    },
+    _ignoreNestedTargetChange: ignoreTargetChange,
   });
 
   const update = (changedOptions, force) => {
@@ -2074,8 +2152,12 @@ const createLifecycleHub = (options, structureSetup) => {
 
   const envUpdateListener = update.bind(null, null, true);
   addEnvironmentListener(envUpdateListener);
+  console.log(getEnvironment());
   return {
     _update: update,
+    _state: () => ({
+      _overflowAmount: lifecycleCommunication._viewportOverflowAmount,
+    }),
 
     _destroy() {
       removeEnvironmentListener(envUpdateListener);
@@ -2103,6 +2185,8 @@ const OverlayScrollbars = (target, options, extensions) => {
       return currentOptions;
     },
 
+    state: () => lifecycleHub._state(),
+
     update(force) {
       lifecycleHub._update(null, force);
     },

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -244,6 +244,11 @@
     return rootElm ? push(arr, rootElm.querySelectorAll(selector)) : arr;
   };
 
+  var findFirst = function findFirst(selector, elm) {
+    var rootElm = elm ? (isElement(elm) ? elm : null) : document;
+    return rootElm ? rootElm.querySelector(selector) : null;
+  };
+
   var is = function is(elm, selector) {
     if (isElement(elm)) {
       var fn = elmPrototype.matches || elmPrototype.msMatchesSelector;
@@ -261,6 +266,36 @@
     return elm ? elm.parentElement : null;
   };
 
+  var closest = function closest(elm, selector) {
+    if (isElement(elm)) {
+      var closestFn = elmPrototype.closest;
+
+      if (closestFn) {
+        return closestFn.call(elm, selector);
+      }
+
+      do {
+        if (is(elm, selector)) {
+          return elm;
+        }
+
+        elm = parent(elm);
+      } while (elm);
+    }
+
+    return null;
+  };
+
+  var liesBetween = function liesBetween(elm, highBoundarySelector, deepBoundarySelector) {
+    var closestHighBoundaryElm = elm && closest(elm, highBoundarySelector);
+    var closestDeepBoundaryElm = elm && findFirst(deepBoundarySelector, closestHighBoundaryElm);
+    return closestHighBoundaryElm && closestDeepBoundaryElm
+      ? closestHighBoundaryElm === elm ||
+          closestDeepBoundaryElm === elm ||
+          closest(closest(elm, deepBoundarySelector), highBoundarySelector) !== closestHighBoundaryElm
+      : false;
+  };
+
   var before = function before(parentElm, preferredAnchor, insertedElms) {
     if (insertedElms) {
       var anchor = preferredAnchor;
@@ -390,6 +425,22 @@
       return classList.remove(clazz);
     });
   };
+  var diffClass = function diffClass(classNameA, classNameB) {
+    var classNameASplit = classNameA && classNameA.split(' ');
+    var classNameBSplit = classNameB && classNameB.split(' ');
+    var tempObj = {};
+    each(classNameASplit, function (className) {
+      tempObj[className] = 1;
+    });
+    each(classNameBSplit, function (className) {
+      if (tempObj[className]) {
+        delete tempObj[className];
+      } else {
+        tempObj[className] = 1;
+      }
+    });
+    return keys(tempObj);
+  };
 
   var zeroObj = {
     w: 0,
@@ -513,9 +564,6 @@
   var equalWH = function equalWH(a, b) {
     return equal(a, b, ['w', 'h']);
   };
-  var equalXY = function equalXY(a, b) {
-    return equal(a, b, ['x', 'y']);
-  };
   var equalTRBL = function equalTRBL(a, b) {
     return equal(a, b, ['t', 'r', 'b', 'l']);
   };
@@ -806,7 +854,7 @@
   var booleanTrueTemplate = [true, optionsTemplateTypes.boolean];
   var booleanFalseTemplate = [false, optionsTemplateTypes.boolean];
   var resizeAllowedValues = 'none both horizontal vertical';
-  var overflowAllowedValues = 'visible-hidden visible-scroll scroll hidden';
+  var overflowAllowedValues = 'hidden scroll visible visible-hidden';
   var scrollbarsVisibilityAllowedValues = 'visible hidden auto';
   var scrollbarsAutoHideAllowedValues = 'never scroll leavemove';
   var defaultOptionsWithTemplate = {
@@ -1184,16 +1232,21 @@
 
       if (heightIntrinsicChanged) {
         style(_content, {
-          height: heightIntrinsic ? 'auto' : '100%',
+          height: heightIntrinsic ? '' : '100%',
+          display: heightIntrinsic ? '' : 'inline',
         });
       }
+
+      return {
+        _sizeChanged: heightIntrinsicChanged,
+        _contentMutation: heightIntrinsicChanged,
+      };
     };
   };
 
   var createPaddingLifecycle = function createPaddingLifecycle(lifecycleHub) {
-    var _setPaddingInfo = lifecycleHub._setPaddingInfo,
+    var _structureSetup = lifecycleHub._structureSetup,
-      _setViewportPaddingStyle = lifecycleHub._setViewportPaddingStyle,
+      _setLifecycleCommunication = lifecycleHub._setLifecycleCommunication;
-      _structureSetup = lifecycleHub._structureSetup;
     var _structureSetup$_targ = _structureSetup._targetObj,
       _host = _structureSetup$_targ._host,
       _padding = _structureSetup$_targ._padding,
@@ -1272,12 +1325,13 @@
         style(_padding || _viewport, paddingStyle);
         style(_viewport, viewportStyle);
 
-        _setPaddingInfo({
+        _setLifecycleCommunication({
-          _absolute: !paddingRelative,
+          _paddingInfo: {
-          _padding: _padding2,
+            _absolute: !paddingRelative,
+            _padding: _padding2,
+          },
+          _viewportPaddingStyle: _padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle),
         });
-
-        _setViewportPaddingStyle(_padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle));
       }
 
       return {
@@ -1290,12 +1344,10 @@
   var createOverflowLifecycle = function createOverflowLifecycle(lifecycleHub) {
     var _structureSetup = lifecycleHub._structureSetup,
       _doViewportArrange = lifecycleHub._doViewportArrange,
-      _getViewportPaddingStyle = lifecycleHub._getViewportPaddingStyle,
+      _getLifecycleCommunication = lifecycleHub._getLifecycleCommunication,
-      _getPaddingInfo = lifecycleHub._getPaddingInfo,
+      _setLifecycleCommunication = lifecycleHub._setLifecycleCommunication;
-      _setViewportOverflowScroll = lifecycleHub._setViewportOverflowScroll;
     var _structureSetup$_targ = _structureSetup._targetObj,
       _host = _structureSetup$_targ._host,
-      _padding = _structureSetup$_targ._padding,
       _viewport = _structureSetup$_targ._viewport,
       _viewportArrange = _structureSetup$_targ._viewportArrange;
 
@@ -1313,15 +1365,15 @@
     var _createCache2 = createCache(
         function (ctx) {
           return {
-            x: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
+            w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
-            y: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
+            h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
           };
         },
         {
-          _equal: equalXY,
+          _equal: equalWH,
           _initialValue: {
-            x: 0,
+            w: 0,
-            y: 0,
+            h: 0,
           },
         }
       ),
@@ -1341,19 +1393,19 @@
       });
 
       if (heightIntrinsic) {
-        var _getPaddingInfo2 = _getPaddingInfo(),
+        var _getLifecycleCommunic = _getLifecycleCommunication()._paddingInfo,
-          paddingAbsolute = _getPaddingInfo2._absolute,
+          paddingAbsolute = _getLifecycleCommunic._absolute,
-          padding = _getPaddingInfo2._padding;
+          padding = _getLifecycleCommunic._padding;
 
         var _overflowScroll = viewportOverflowState._overflowScroll,
           _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
         var hostBCR = getBoundingClientRect(_host);
         var hostOffsetSize = offsetSize(_host);
         var hostClientSize = clientSize(_host);
-        var paddingAbsoluteVertical = paddingAbsolute ? padding.b + padding.t : 0;
+        var paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
         var clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
         style(_viewport, {
-          height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
+          height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
         });
       }
     };
@@ -1390,26 +1442,29 @@
     var setViewportOverflowState = function setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) {
       var setPartialStylePerAxis = function setPartialStylePerAxis(horizontal, overflowAmount, behavior, styleObj) {
         var overflowKey = horizontal ? 'overflowX' : 'overflowY';
+        var behaviorIsVisible = behavior.indexOf('visible') === 0;
+        var behaviorIsVisibleHidden = behavior === 'visible-hidden';
         var behaviorIsScroll = behavior === 'scroll';
-        var behaviorIsVisibleScroll = behavior === 'visible-scroll';
-        var hideOverflow = behaviorIsScroll || behavior === 'hidden';
-        var applyStyle = overflowAmount > 0 && hideOverflow;
 
-        if (applyStyle) {
+        if (behaviorIsVisible) {
+          styleObj[overflowKey] = 'visible';
+        }
+
+        if (behaviorIsScroll && overflowAmount > 0) {
           styleObj[overflowKey] = behavior;
         }
 
         return {
-          _visible: !applyStyle,
+          _visible: behaviorIsVisible,
-          _behavior: behaviorIsVisibleScroll ? 'scroll' : 'hidden',
+          _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
         };
       };
 
-      var _setPartialStylePerAx = setPartialStylePerAxis(true, overflowAmount.x, overflow.x, viewportStyleObj),
+      var _setPartialStylePerAx = setPartialStylePerAxis(true, overflowAmount.w, overflow.x, viewportStyleObj),
         xVisible = _setPartialStylePerAx._visible,
         xVisibleBehavior = _setPartialStylePerAx._behavior;
 
-      var _setPartialStylePerAx2 = setPartialStylePerAxis(false, overflowAmount.y, overflow.y, viewportStyleObj),
+      var _setPartialStylePerAx2 = setPartialStylePerAxis(false, overflowAmount.h, overflow.y, viewportStyleObj),
         yVisible = _setPartialStylePerAx2._visible,
         yVisibleBehavior = _setPartialStylePerAx2._behavior;
 
@@ -1433,7 +1488,8 @@
         var hideOffsetX = _scrollbarsHideOffset.x,
           hideOffsetY = _scrollbarsHideOffset.y;
 
-        var viewportPaddingStyle = _getViewportPaddingStyle();
+        var _getLifecycleCommunic2 = _getLifecycleCommunication(),
+          viewportPaddingStyle = _getLifecycleCommunic2._viewportPaddingStyle;
 
         var viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
         var viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
@@ -1471,27 +1527,22 @@
     };
 
     var hideNativeScrollbars = function hideNativeScrollbars(viewportOverflowState, directionIsRTL, viewportArrange, viewportStyleObj) {
-      var _getEnvironment2 = getEnvironment(),
+      var _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
-        _nativeScrollbarStyling = _getEnvironment2._nativeScrollbarStyling;
-
-      var _overflowScroll = viewportOverflowState._overflowScroll,
-        _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
         _scrollbarsHideOffsetArrange = viewportOverflowState._scrollbarsHideOffsetArrange;
       var arrangeX = _scrollbarsHideOffsetArrange.x,
         arrangeY = _scrollbarsHideOffsetArrange.y;
       var hideOffsetX = _scrollbarsHideOffset.x,
         hideOffsetY = _scrollbarsHideOffset.y;
-      var scrollX = _overflowScroll.x,
-        scrollY = _overflowScroll.y;
 
-      var paddingStyle = _getViewportPaddingStyle();
+      var _getLifecycleCommunic3 = _getLifecycleCommunication(),
+        viewportPaddingStyle = _getLifecycleCommunic3._viewportPaddingStyle;
 
       var horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
       var viewportHorizontalPaddingKey = directionIsRTL ? 'paddingLeft' : 'paddingRight';
-      var horizontalMarginValue = paddingStyle[horizontalMarginKey];
+      var horizontalMarginValue = viewportPaddingStyle[horizontalMarginKey];
-      var verticalMarginValue = paddingStyle.marginBottom;
+      var verticalMarginValue = viewportPaddingStyle.marginBottom;
-      var horizontalPaddingValue = paddingStyle[viewportHorizontalPaddingKey];
+      var horizontalPaddingValue = viewportPaddingStyle[viewportHorizontalPaddingKey];
-      var verticalPaddingValue = paddingStyle.paddingBottom;
+      var verticalPaddingValue = viewportPaddingStyle.paddingBottom;
       viewportStyleObj.maxWidth = 'calc(100% + ' + (hideOffsetY + horizontalMarginValue * -1) + 'px)';
       viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
       viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
@@ -1500,22 +1551,17 @@
         viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + (arrangeY ? hideOffsetY : 0);
         viewportStyleObj.paddingBottom = verticalPaddingValue + (arrangeX ? hideOffsetX : 0);
       }
-
-      if (!_nativeScrollbarStyling) {
-        style(_padding || _host, {
-          overflow: scrollX || scrollY ? 'hidden' : '',
-        });
-      }
     };
 
-    var undoViewportArrange = function undoViewportArrange(showNativeOverlaidScrollbars, viewportOverflowState) {
+    var undoViewportArrange = function undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, viewportOverflowState) {
       if (_doViewportArrange) {
         var finalViewportOverflowState = viewportOverflowState || getViewportOverflowState(showNativeOverlaidScrollbars);
 
-        var paddingStyle = _getViewportPaddingStyle();
+        var _getLifecycleCommunic4 = _getLifecycleCommunication(),
+          viewportPaddingStyle = _getLifecycleCommunic4._viewportPaddingStyle;
 
-        var _getEnvironment3 = getEnvironment(),
+        var _getEnvironment2 = getEnvironment(),
-          _flexboxGlue = _getEnvironment3._flexboxGlue;
+          _flexboxGlue = _getEnvironment2._flexboxGlue;
 
         var _scrollbarsHideOffsetArrange = finalViewportOverflowState._scrollbarsHideOffsetArrange;
         var arrangeX = _scrollbarsHideOffsetArrange.x,
@@ -1524,7 +1570,7 @@
 
         var assignProps = function assignProps(props) {
           return each(props.split(' '), function (prop) {
-            finalPaddingStyle[prop] = paddingStyle[prop];
+            finalPaddingStyle[prop] = viewportPaddingStyle[prop];
           });
         };
 
@@ -1545,6 +1591,7 @@
         style(_viewport, finalPaddingStyle);
         return {
           _redoViewportArrange: function _redoViewportArrange() {
+            hideNativeScrollbars(finalViewportOverflowState, directionIsRTL, _doViewportArrange, prevStyle);
             style(_viewport, prevStyle);
             addClass(_viewport, classNameViewportArrange);
           },
@@ -1565,10 +1612,10 @@
         _contentMutation = updateHints._contentMutation,
         _paddingStyleChanged = updateHints._paddingStyleChanged;
 
-      var _getEnvironment4 = getEnvironment(),
+      var _getEnvironment3 = getEnvironment(),
-        _flexboxGlue = _getEnvironment4._flexboxGlue,
+        _flexboxGlue = _getEnvironment3._flexboxGlue,
-        _nativeScrollbarStyling = _getEnvironment4._nativeScrollbarStyling,
+        _nativeScrollbarStyling = _getEnvironment3._nativeScrollbarStyling,
-        _nativeScrollbarIsOverlaid = _getEnvironment4._nativeScrollbarIsOverlaid;
+        _nativeScrollbarIsOverlaid = _getEnvironment3._nativeScrollbarIsOverlaid;
 
       var heightIntrinsic = _heightIntrinsic._value,
         heightIntrinsicChanged = _heightIntrinsic._changed;
@@ -1600,7 +1647,7 @@
       }
 
       if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
-        var _undoViewportArrange = undoViewportArrange(showNativeOverlaidScrollbars, preMeasureViewportOverflowState),
+        var _undoViewportArrange = undoViewportArrange(showNativeOverlaidScrollbars, directionIsRTL, preMeasureViewportOverflowState),
           _redoViewportArrange = _undoViewportArrange._redoViewportArrange,
           undoViewportArrangeOverflowState = _undoViewportArrange._viewportOverflowState;
 
@@ -1681,7 +1728,10 @@
 
         style(_viewport, viewportStyle);
 
-        _setViewportOverflowScroll(viewportOverflowState._overflowScroll);
+        _setLifecycleCommunication({
+          _viewportOverflowScroll: viewportOverflowState._overflowScroll,
+          _viewportOverflowAmount: overflowAmount,
+        });
       }
     };
   };
@@ -1838,16 +1888,12 @@
             _changed = directionIsRTLCacheValues._changed;
 
           if (_changed) {
+            removeClass(listenerElement, 'ltr rtl');
+
             if (_value) {
-              style(listenerElement, {
+              addClass(listenerElement, 'rtl');
-                left: 'auto',
-                right: 0,
-              });
             } else {
-              style(listenerElement, {
+              addClass(listenerElement, 'ltr');
-                left: 0,
-                right: 'auto',
-              });
             }
 
             onSizeChangedCallbackProxy(directionIsRTLCacheValues);
@@ -2142,12 +2188,11 @@
   };
 
   var getPropByPath = function getPropByPath(obj, path) {
-    return (
+    return obj
-      obj &&
+      ? path.split('.').reduce(function (o, prop) {
-      path.split('.').reduce(function (o, prop) {
+          return o && hasOwnProperty$1(o, prop) ? o[prop] : undefined;
-        return o && hasOwnProperty$1(o, prop) ? o[prop] : undefined;
+        }, obj)
-      }, obj)
+      : undefined;
-    );
   };
 
   var emptyStylePropsToZero = function emptyStylePropsToZero(stlyeObj, baseStyle) {
@@ -2158,30 +2203,23 @@
     }, _extends_1({}, baseStyle));
   };
 
+  var ignorePrefix = 'os-';
+  var hostSelector = '.' + classNameHost;
+  var viewportSelector = '.' + classNameViewport;
+  var contentSelector = '.' + classNameContent;
   var attrs = ['id', 'class', 'style', 'open'];
-  var paddingInfoFallback = {
+
-    _absolute: false,
+  var ignoreTargetChange = function ignoreTargetChange(target, attrName, oldValue, newValue) {
-    _padding: {
+    if (attrName === 'class' && oldValue && newValue) {
-      t: 0,
+      var diff = diffClass(oldValue, newValue);
-      r: 0,
+      return !!diff.find(function (addedOrRemovedClass) {
-      b: 0,
+        return addedOrRemovedClass.indexOf(ignorePrefix) !== 0;
-      l: 0,
+      });
-    },
+    }
-  };
+
-  var viewportPaddingStyleFallback = {
+    return false;
-    marginTop: 0,
-    marginRight: 0,
-    marginBottom: 0,
-    marginLeft: 0,
-    paddingTop: 0,
-    paddingRight: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-  };
-  var viewportOverflowScrollFallback = {
-    x: false,
-    y: false,
   };
+
   var directionIsRTLCacheValuesFallback = {
     _value: false,
     _previous: false,
@@ -2192,10 +2230,37 @@
     _previous: false,
     _changed: false,
   };
+  var lifecycleCommunicationFallback = {
+    _paddingInfo: {
+      _absolute: false,
+      _padding: {
+        t: 0,
+        r: 0,
+        b: 0,
+        l: 0,
+      },
+    },
+    _viewportOverflowScroll: {
+      x: false,
+      y: false,
+    },
+    _viewportOverflowAmount: {
+      w: 0,
+      h: 0,
+    },
+    _viewportPaddingStyle: {
+      marginTop: 0,
+      marginRight: 0,
+      marginBottom: 0,
+      marginLeft: 0,
+      paddingTop: 0,
+      paddingRight: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+    },
+  };
   var createLifecycleHub = function createLifecycleHub(options, structureSetup) {
-    var paddingInfo = paddingInfoFallback;
+    var lifecycleCommunication = lifecycleCommunicationFallback;
-    var viewportPaddingStyle = viewportPaddingStyleFallback;
-    var viewportOverflowScroll = viewportOverflowScrollFallback;
     var _structureSetup$_targ = structureSetup._targetObj,
       _host = _structureSetup$_targ._host,
       _viewport = _structureSetup$_targ._viewport,
@@ -2214,23 +2279,18 @@
       _options: options,
       _structureSetup: structureSetup,
       _doViewportArrange: doViewportArrange,
-      _getPaddingInfo: function _getPaddingInfo() {
+      _getLifecycleCommunication: function _getLifecycleCommunication() {
-        return paddingInfo;
+        return lifecycleCommunication;
       },
-      _setPaddingInfo: function _setPaddingInfo(newPaddingInfo) {
+      _setLifecycleCommunication: function _setLifecycleCommunication(newLifecycleCommunication) {
-        paddingInfo = newPaddingInfo || paddingInfoFallback;
+        if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
-      },
+          newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
-      _getViewportPaddingStyle: function _getViewportPaddingStyle() {
+            newLifecycleCommunication._viewportPaddingStyle,
-        return viewportPaddingStyle;
+            lifecycleCommunicationFallback._viewportPaddingStyle
-      },
+          );
-      _setViewportPaddingStyle: function _setViewportPaddingStyle(newPaddingStlye) {
+        }
-        viewportPaddingStyle = newPaddingStlye ? emptyStylePropsToZero(newPaddingStlye, viewportPaddingStyleFallback) : viewportPaddingStyleFallback;
+
-      },
+        lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
-      _getViewportOverflowScroll: function _getViewportOverflowScroll() {
-        return viewportOverflowScroll;
-      },
-      _setViewportOverflowScroll: function _setViewportOverflowScroll(newViewportOverflowScroll) {
-        viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback;
       },
     };
     push(lifecycles, createTrinsicLifecycle(instance));
@@ -2337,11 +2397,23 @@
     var hostMutationObserver = createDOMObserver(_host, false, onHostMutation, {
       _styleChangingAttributes: attrs,
       _attributes: attrs,
+      _ignoreTargetChange: ignoreTargetChange,
     });
     var contentMutationObserver = createDOMObserver(_content || _viewport, true, onContentMutation, {
       _styleChangingAttributes: attrs,
       _attributes: attrs,
       _eventContentChange: options.updating.elementEvents,
+      _nestedTargetSelector: hostSelector,
+      _ignoreContentChange: function _ignoreContentChange(mutation, isNestedTarget) {
+        var target = mutation.target,
+          attributeName = mutation.attributeName;
+        return isNestedTarget
+          ? false
+          : attributeName
+          ? liesBetween(target, hostSelector, viewportSelector) || liesBetween(target, hostSelector, contentSelector)
+          : false;
+      },
+      _ignoreNestedTargetChange: ignoreTargetChange,
     });
 
     var update = function update(changedOptions, force) {
@@ -2350,8 +2422,14 @@
 
     var envUpdateListener = update.bind(null, null, true);
     addEnvironmentListener(envUpdateListener);
+    console.log(getEnvironment());
     return {
       _update: update,
+      _state: function _state() {
+        return {
+          _overflowAmount: lifecycleCommunication._viewportOverflowAmount,
+        };
+      },
       _destroy: function _destroy() {
         removeEnvironmentListener(envUpdateListener);
       },
@@ -2380,6 +2458,9 @@
 
         return currentOptions;
       },
+      state: function state() {
+        return lifecycleHub._state();
+      },
       update: function update(force) {
         lifecycleHub._update(null, force);
       },

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

@@ -1,16 +1,21 @@
-import { XY, TRBL, CacheValues, PartialOptions } from 'support';
+import { XY, WH, TRBL, CacheValues, PartialOptions } from 'support';
 import { OSOptions } from 'options';
 import { StructureSetup } from 'setups/structureSetup';
 import { StyleObject } from 'typings';
 export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
-export interface PaddingInfo {
-    _absolute: boolean;
-    _padding: TRBL;
-}
 export interface LifecycleOptionInfo<T> {
     readonly _value: T;
     _changed: boolean;
 }
+export interface LifecycleCommunication {
+    _paddingInfo: {
+        _absolute: boolean;
+        _padding: TRBL;
+    };
+    _viewportPaddingStyle: StyleObject;
+    _viewportOverflowScroll: XY<boolean>;
+    _viewportOverflowAmount: WH<number>;
+}
 export interface LifecycleAdaptiveUpdateHints {
     _sizeChanged: boolean;
     _hostMutation: boolean;
@@ -22,19 +27,19 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
     _heightIntrinsic: CacheValues<boolean>;
 }
 export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
+export interface LifecycleHubState {
+    _overflowAmount: WH<number>;
+}
 export interface LifecycleHubInstance {
     _update(changedOptions?: PartialOptions<OSOptions> | null, force?: boolean): void;
+    _state(): LifecycleHubState;
     _destroy(): void;
 }
 export interface LifecycleHub {
     _options: OSOptions;
     _structureSetup: StructureSetup;
     _doViewportArrange: boolean;
-    _getPaddingInfo(): PaddingInfo;
+    _getLifecycleCommunication(): LifecycleCommunication;
-    _setPaddingInfo(newPadding?: PaddingInfo | null): void;
+    _setLifecycleCommunication(newLifecycleCommunication?: Partial<LifecycleCommunication>): void;
-    _getViewportPaddingStyle(): StyleObject;
-    _setViewportPaddingStyle(newPaddingStlye?: StyleObject | null): void;
-    _getViewportOverflowScroll(): XY<boolean>;
-    _setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
 }
 export declare const createLifecycleHub: (options: OSOptions, structureSetup: StructureSetup) => LifecycleHubInstance;

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

@@ -23,7 +23,8 @@ interface DOMContentObserver extends DOMObserverBase {
 }
 interface DOMTargetObserver extends DOMObserverBase {
 }
-export declare type DOMObserverEventContentChange = Array<[StringNullUndefined, ((elms: Node[]) => StringNullUndefined) | StringNullUndefined] | null | undefined> | false | null | undefined;
+declare type ContentChangeArrayItem = [StringNullUndefined, ((elms: Node[]) => StringNullUndefined) | StringNullUndefined] | null | undefined;
+export declare type DOMObserverEventContentChange = Array<ContentChangeArrayItem> | false | null | undefined;
 export declare type DOMObserverIgnoreContentChange = (mutation: MutationRecord, isNestedTarget: boolean, domObserverTarget: HTMLElement, domObserverOptions: DOMContentObserverOptions | undefined) => boolean;
 export declare type DOMObserverIgnoreTargetChange = (target: Node, attributeName: string, oldAttributeValue: string | null, newAttributeValue: string | null) => boolean;
 export declare type DOMObserverCallback<ContentObserver extends boolean> = ContentObserver extends true ? DOMContentObserverCallback : DOMTargetObserverCallback;

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

@@ -10,7 +10,7 @@ export interface SizeObserver {
     };
 }
 /**
- * Creates a size observer which observes any size, padding, margin and border changes of the target element. Depending on the options also direction and appear can be observed.
+ * Creates a size observer which observes any size, padding, border, margin and box-sizing changes of the target element. Depending on the options also direction and appear can be observed.
  * @param target The target element which shall be observed.
  * @param onSizeChangedCallback The callback which gets called after a size change was detected.
  * @param options The options for size detection, whether to observe also direction and appear.

packages/overlayscrollbars/types/options.d.ts

@@ -1,5 +1,5 @@
 export declare type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical';
-export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
+export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible' | 'visible-hidden';
 export declare type VisibilityBehavior = 'visible' | 'hidden' | 'auto';
 export declare type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
 export declare type ScrollBehavior = 'always' | 'ifneeded' | 'never';
@@ -14,7 +14,7 @@ export interface OSOptions {
     resize: ResizeBehavior;
     paddingAbsolute: boolean;
     updating: {
-        elementEvents: ReadonlyArray<[string, string]> | null;
+        elementEvents: Array<[string, string]> | null;
         contentMutationDebounce: number;
         hostMutationDebounce: number;
         resizeDebounce: number;
@@ -34,7 +34,7 @@ export interface OSOptions {
     textarea: {
         dynWidth: boolean;
         dynHeight: boolean;
-        inheritedAttrs: string | ReadonlyArray<string> | null;
+        inheritedAttrs: string | Array<string> | null;
     };
     nativeScrollbarsOverlaid: {
         show: boolean;

packages/overlayscrollbars/types/overlayscrollbars.d.ts

@@ -8,5 +8,6 @@ export interface OverlayScrollbars {
     options(): OSOptions;
     options(newOptions?: PartialOptions<OSOptions>): OSOptions;
     update(force?: boolean): void;
+    state(): any;
 }
 export declare const OverlayScrollbars: OverlayScrollbarsStatic;