build

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -1146,6 +1146,10 @@ const createOverflowLifecycle = (lifecycleHub) => {
     };
     return {
       _overflowScroll: scroll,
+      _scrollbarsHideOffsetArrange: {
+        x: overlaidX && !!arrangeHideOffset,
+        y: overlaidY && !!arrangeHideOffset,
+      },
       _scrollbarsHideOffset: scrollbarsHideOffset,
     };
   };
@@ -1184,7 +1188,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
 
   const arrangeViewport = (viewportOverflowState, contentScrollSize, directionIsRTL) => {
     if (_doViewportArrange) {
-      const { _scrollbarsHideOffset } = viewportOverflowState;
+      const { _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
+      const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
       const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
 
       const viewportPaddingStyle = _getViewportPaddingStyle();
@@ -1193,8 +1198,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
       const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
       const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop;
       const arrangeSize = {
-        w: hideOffsetY ? `${hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue}px` : '',
+        w: hideOffsetY && arrangeY ? `${hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue}px` : '',
-        h: hideOffsetX ? `${hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue}px` : '',
+        h: hideOffsetX && arrangeX ? `${hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue}px` : '',
       };
 
       if (_viewportArrange) {
@@ -1226,7 +1231,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
 
   const hideNativeScrollbars = (viewportOverflowState, directionIsRTL, viewportArrange, viewportStyleObj) => {
     const { _nativeScrollbarStyling } = getEnvironment();
-    const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
+    const { _overflowScroll, _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
+    const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
     const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
     const { x: scrollX, y: scrollY } = _overflowScroll;
 
@@ -1243,8 +1249,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
     viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
 
     if (viewportArrange) {
-      viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + hideOffsetY;
+      viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + (arrangeY ? hideOffsetY : 0);
-      viewportStyleObj.paddingBottom = verticalPaddingValue + hideOffsetX;
+      viewportStyleObj.paddingBottom = verticalPaddingValue + (arrangeX ? hideOffsetX : 0);
     }
 
     if (!_nativeScrollbarStyling) {
@@ -1254,28 +1260,49 @@ const createOverflowLifecycle = (lifecycleHub) => {
     }
   };
 
-  const undoViewportArrange = () => {
+  const undoViewportArrange = (showNativeOverlaidScrollbars, viewportOverflowState) => {
     if (_doViewportArrange) {
-      const { _flexboxGlue } = getEnvironment();
+      const finalViewportOverflowState = viewportOverflowState || getViewportOverflowState(showNativeOverlaidScrollbars);
 
-      let paddingStyle = _getViewportPaddingStyle();
+      const paddingStyle = _getViewportPaddingStyle();
+
+      const { _flexboxGlue } = getEnvironment();
+      const { _scrollbarsHideOffsetArrange } = finalViewportOverflowState;
+      const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
+      const finalPaddingStyle = {};
+
+      const assignProps = (props) =>
+        each(props.split(' '), (prop) => {
+          finalPaddingStyle[prop] = paddingStyle[prop];
+        });
 
       if (!_flexboxGlue) {
-        paddingStyle = _extends_1({}, paddingStyle, {
+        finalPaddingStyle.height = '';
-          height: '',
-        });
       }
 
-      const prevStyle = style(_viewport, keys(paddingStyle));
+      if (arrangeX) {
+        assignProps('marginTop marginBottom paddingTop paddingBottom');
+      }
+
+      if (arrangeY) {
+        assignProps('marginLeft marginRight paddingLeft paddingRight');
+      }
+
+      const prevStyle = style(_viewport, keys(finalPaddingStyle));
       removeClass(_viewport, classNameViewportArrange);
-      style(_viewport, paddingStyle);
+      style(_viewport, finalPaddingStyle);
-      return () => {
+      return {
-        style(_viewport, prevStyle);
+        _redoViewportArrange: () => {
-        addClass(_viewport, classNameViewportArrange);
+          style(_viewport, prevStyle);
+          addClass(_viewport, classNameViewportArrange);
+        },
+        _viewportOverflowState: finalViewportOverflowState,
       };
     }
 
-    return noop;
+    return {
+      _redoViewportArrange: noop,
+    };
   };
 
   return (updateHints, checkOption, force) => {
@@ -1307,7 +1334,10 @@ const createOverflowLifecycle = (lifecycleHub) => {
     }
 
     if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
-      const redoViewportArrange = undoViewportArrange();
+      const { _redoViewportArrange, _viewportOverflowState: undoViewportArrangeOverflowState } = undoViewportArrange(
+        showNativeOverlaidScrollbars,
+        preMeasureViewportOverflowState
+      );
       const contentSize = clientSize(_viewport);
       const viewportRect = getBoundingClientRect(_viewport);
       const viewportOffsetSize = offsetSize(_viewport);
@@ -1318,19 +1348,17 @@ const createOverflowLifecycle = (lifecycleHub) => {
         _viewportOffsetSize: viewportOffsetSize,
         _viewportScrollSize: viewportScrollSize,
       }));
-      redoViewportArrange();
 
-      if ((_contentScrollSizeChanged || showNativeOverlaidScrollbarsChanged) && !showNativeOverlaidScrollbars) {
+      _redoViewportArrange();
-        const arranged = arrangeViewport(
-          preMeasureViewportOverflowState || getViewportOverflowState(showNativeOverlaidScrollbars),
-          _contentScrollSize,
-          directionIsRTL
-        );
 
-        if (arranged) {
+      if (
-          viewportClientSize = clientSize(_viewport);
+        (_contentScrollSizeChanged || showNativeOverlaidScrollbarsChanged) &&
-          viewportScrollSize = fixScrollSizeRounding(scrollSize(_viewport), offsetSize(_viewport), getBoundingClientRect(_viewport));
+        undoViewportArrangeOverflowState &&
-        }
+        !showNativeOverlaidScrollbars &&
+        arrangeViewport(undoViewportArrangeOverflowState, _contentScrollSize, directionIsRTL)
+      ) {
+        viewportClientSize = clientSize(_viewport);
+        viewportScrollSize = fixScrollSizeRounding(scrollSize(_viewport), offsetSize(_viewport), getBoundingClientRect(_viewport));
       }
 
       overflowAmuntCache = updateOverflowAmountCache(force, {
@@ -2002,7 +2030,7 @@ const createLifecycleHub = (options, structureSetup) => {
 
   const envUpdateListener = update.bind(null, null, true);
   addEnvironmentListener(envUpdateListener);
-  console.log('flexboxGlue', _flexboxGlue);
+  console.log(getEnvironment());
   return {
     _update: update,
 

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -1302,6 +1302,10 @@
       };
       return {
         _overflowScroll: scroll,
+        _scrollbarsHideOffsetArrange: {
+          x: overlaidX && !!arrangeHideOffset,
+          y: overlaidY && !!arrangeHideOffset,
+        },
         _scrollbarsHideOffset: scrollbarsHideOffset,
       };
     };
@@ -1345,7 +1349,10 @@
 
     var arrangeViewport = function arrangeViewport(viewportOverflowState, contentScrollSize, directionIsRTL) {
       if (_doViewportArrange) {
-        var _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
+        var _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
+          _scrollbarsHideOffsetArrange = viewportOverflowState._scrollbarsHideOffsetArrange;
+        var arrangeX = _scrollbarsHideOffsetArrange.x,
+          arrangeY = _scrollbarsHideOffsetArrange.y;
         var hideOffsetX = _scrollbarsHideOffset.x,
           hideOffsetY = _scrollbarsHideOffset.y;
 
@@ -1355,8 +1362,8 @@
         var viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
         var viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop;
         var arrangeSize = {
-          w: hideOffsetY ? hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue + 'px' : '',
+          w: hideOffsetY && arrangeY ? hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue + 'px' : '',
-          h: hideOffsetX ? hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue + 'px' : '',
+          h: hideOffsetX && arrangeX ? hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue + 'px' : '',
         };
 
         if (_viewportArrange) {
@@ -1391,7 +1398,10 @@
         _nativeScrollbarStyling = _getEnvironment2._nativeScrollbarStyling;
 
       var _overflowScroll = viewportOverflowState._overflowScroll,
-        _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
+        _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
+        _scrollbarsHideOffsetArrange = viewportOverflowState._scrollbarsHideOffsetArrange;
+      var arrangeX = _scrollbarsHideOffsetArrange.x,
+        arrangeY = _scrollbarsHideOffsetArrange.y;
       var hideOffsetX = _scrollbarsHideOffset.x,
         hideOffsetY = _scrollbarsHideOffset.y;
       var scrollX = _overflowScroll.x,
@@ -1410,8 +1420,8 @@
       viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
 
       if (viewportArrange) {
-        viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + hideOffsetY;
+        viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + (arrangeY ? hideOffsetY : 0);
-        viewportStyleObj.paddingBottom = verticalPaddingValue + hideOffsetX;
+        viewportStyleObj.paddingBottom = verticalPaddingValue + (arrangeX ? hideOffsetX : 0);
       }
 
       if (!_nativeScrollbarStyling) {
@@ -1421,29 +1431,53 @@
       }
     };
 
-    var undoViewportArrange = function undoViewportArrange() {
+    var undoViewportArrange = function undoViewportArrange(showNativeOverlaidScrollbars, viewportOverflowState) {
       if (_doViewportArrange) {
-        var _getEnvironment3 = getEnvironment(),
+        var finalViewportOverflowState = viewportOverflowState || getViewportOverflowState(showNativeOverlaidScrollbars);
-          _flexboxGlue = _getEnvironment3._flexboxGlue;
 
         var paddingStyle = _getViewportPaddingStyle();
 
-        if (!_flexboxGlue) {
+        var _getEnvironment3 = getEnvironment(),
-          paddingStyle = _extends_1({}, paddingStyle, {
+          _flexboxGlue = _getEnvironment3._flexboxGlue;
-            height: '',
+
+        var _scrollbarsHideOffsetArrange = finalViewportOverflowState._scrollbarsHideOffsetArrange;
+        var arrangeX = _scrollbarsHideOffsetArrange.x,
+          arrangeY = _scrollbarsHideOffsetArrange.y;
+        var finalPaddingStyle = {};
+
+        var assignProps = function assignProps(props) {
+          return each(props.split(' '), function (prop) {
+            finalPaddingStyle[prop] = paddingStyle[prop];
           });
+        };
+
+        if (!_flexboxGlue) {
+          finalPaddingStyle.height = '';
         }
 
-        var prevStyle = style(_viewport, keys(paddingStyle));
+        if (arrangeX) {
+          assignProps('marginTop marginBottom paddingTop paddingBottom');
+        }
+
+        if (arrangeY) {
+          assignProps('marginLeft marginRight paddingLeft paddingRight');
+        }
+
+        var prevStyle = style(_viewport, keys(finalPaddingStyle));
         removeClass(_viewport, classNameViewportArrange);
-        style(_viewport, paddingStyle);
+        style(_viewport, finalPaddingStyle);
-        return function () {
+        return {
-          style(_viewport, prevStyle);
+          _redoViewportArrange: function _redoViewportArrange() {
-          addClass(_viewport, classNameViewportArrange);
+            style(_viewport, prevStyle);
+            addClass(_viewport, classNameViewportArrange);
+          },
+          _viewportOverflowState: finalViewportOverflowState,
         };
       }
 
-      return noop;
+      return {
+        _redoViewportArrange: noop,
+      };
     };
 
     return function (updateHints, checkOption, force) {
@@ -1489,7 +1523,10 @@
       }
 
       if (_sizeChanged || _paddingStyleChanged || _contentMutation || showNativeOverlaidScrollbarsChanged || directionChanged) {
-        var redoViewportArrange = undoViewportArrange();
+        var _undoViewportArrange = undoViewportArrange(showNativeOverlaidScrollbars, preMeasureViewportOverflowState),
+          _redoViewportArrange = _undoViewportArrange._redoViewportArrange,
+          undoViewportArrangeOverflowState = _undoViewportArrange._viewportOverflowState;
+
         var contentSize = clientSize(_viewport);
         var viewportRect = getBoundingClientRect(_viewport);
         var viewportOffsetSize = offsetSize(_viewport);
@@ -1504,19 +1541,16 @@
           _contentScrollSize = _contentScrollSizeCac._value,
           _contentScrollSizeChanged = _contentScrollSizeCac._changed;
 
-        redoViewportArrange();
+        _redoViewportArrange();
 
-        if ((_contentScrollSizeChanged || showNativeOverlaidScrollbarsChanged) && !showNativeOverlaidScrollbars) {
+        if (
-          var arranged = arrangeViewport(
+          (_contentScrollSizeChanged || showNativeOverlaidScrollbarsChanged) &&
-            preMeasureViewportOverflowState || getViewportOverflowState(showNativeOverlaidScrollbars),
+          undoViewportArrangeOverflowState &&
-            _contentScrollSize,
+          !showNativeOverlaidScrollbars &&
-            directionIsRTL
+          arrangeViewport(undoViewportArrangeOverflowState, _contentScrollSize, directionIsRTL)
-          );
+        ) {
-
+          viewportClientSize = clientSize(_viewport);
-          if (arranged) {
+          viewportScrollSize = fixScrollSizeRounding(scrollSize(_viewport), offsetSize(_viewport), getBoundingClientRect(_viewport));
-            viewportClientSize = clientSize(_viewport);
-            viewportScrollSize = fixScrollSizeRounding(scrollSize(_viewport), offsetSize(_viewport), getBoundingClientRect(_viewport));
-          }
         }
 
         overflowAmuntCache = updateOverflowAmountCache(force, {
@@ -2261,7 +2295,7 @@
 
     var envUpdateListener = update.bind(null, null, true);
     addEnvironmentListener(envUpdateListener);
-    console.log('flexboxGlue', _flexboxGlue);
+    console.log(getEnvironment());
     return {
       _update: update,
       _destroy: function _destroy() {