update build

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -536,17 +536,17 @@ const absoluteCoordinates = (elm) => {
 };
 
 const createCache = (update, options) => {
-  const { _equal, _initialValue } = options || {};
+  const { _equal, _initialValue, _alwaysUpdateValues } = options || {};
   let _value = _initialValue;
 
   let _previous;
 
-  return (force, context) => {
+  const cacheUpdate = (force, context) => {
     const curr = _value;
-    const newVal = update(context, _value, _previous);
+    const newVal = update ? update(context, _value, _previous) : context;
     const changed = force || (_equal ? !_equal(curr, newVal) : curr !== newVal);
 
-    if (changed) {
+    if (changed || _alwaysUpdateValues) {
       _value = newVal;
       _previous = curr;
     }
@@ -557,6 +557,8 @@ const createCache = (update, options) => {
       _changed: changed,
     };
   };
+
+  return cacheUpdate;
 };
 
 function createCommonjsModule(fn) {
@@ -1009,27 +1011,47 @@ const scrollAmount = 3333333;
 
 const getDirection = (elm) => style(elm, 'direction');
 
+const domRectHasDimensions = (rect) => rect && (rect.height > 0 || rect.width > 0);
+
 const createSizeObserver = (target, onSizeChangedCallback, options) => {
-  const { _direction: direction = false, _appear: appear = false } = options || {};
+  const { _direction: observeDirectionChange = false, _appear: observeAppearChange = false } = options || {};
 
   const rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;
 
   const baseElements = createDOM(`<div class="${classNameSizeObserver}"><div class="${classNameSizeObserverListener}"></div></div>`);
   const sizeObserver = baseElements[0];
   const listenerElement = sizeObserver.firstChild;
+  const updateResizeObserverContentRectCache = createCache(0, {
+    _alwaysUpdateValues: true,
+    _equal: (currVal, newVal) => !(!currVal || (!domRectHasDimensions(currVal) && domRectHasDimensions(newVal))),
+  });
 
-  const onSizeChangedCallbackProxy = (directionCache) => {
+  const onSizeChangedCallbackProxy = (sizeChangedContext) => {
-    if (direction) {
+    const directionCacheValue = sizeChangedContext && sizeChangedContext._value;
-      const rtl = getDirection(sizeObserver) === 'rtl';
+    let skip = false;
+    let doDirectionScroll = true;
+
+    if (isArray(sizeChangedContext) && sizeChangedContext.length > 0) {
+      const { _previous, _value, _changed } = updateResizeObserverContentRectCache(0, sizeChangedContext.pop().contentRect);
+      skip = !_previous || !domRectHasDimensions(_value);
+      doDirectionScroll = !skip && _changed;
+    } else if (directionCacheValue) {
+      doDirectionScroll = sizeChangedContext._changed;
+    }
+
+    if (observeDirectionChange && doDirectionScroll) {
+      const rtl = (directionCacheValue || getDirection(sizeObserver)) === 'rtl';
       scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
       scrollTop(sizeObserver, scrollAmount);
     }
 
-    onSizeChangedCallback(isString((directionCache || {})._value) ? directionCache : undefined);
+    if (!skip) {
+      onSizeChangedCallback(directionCacheValue ? sizeChangedContext : undefined);
+    }
   };
 
   const offListeners = [];
-  let appearCallback = appear ? onSizeChangedCallbackProxy : null;
+  let appearCallback = observeAppearChange ? onSizeChangedCallbackProxy : false;
 
   if (ResizeObserverConstructor) {
     const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
@@ -1093,10 +1115,10 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
       height: scrollAmount,
     });
     reset();
-    appearCallback = appear ? () => onScroll() : reset;
+    appearCallback = observeAppearChange ? () => onScroll() : reset;
   }
 
-  if (direction) {
+  if (observeDirectionChange) {
     const updateDirectionCache = createCache(() => getDirection(sizeObserver));
     push(
       offListeners,
@@ -1129,7 +1151,12 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
 
   if (appearCallback) {
     addClass(sizeObserver, classNameSizeObserverAppear);
-    push(offListeners, on(sizeObserver, animationStartEventName, appearCallback));
+    push(
+      offListeners,
+      on(sizeObserver, animationStartEventName, appearCallback, {
+        _once: !!ResizeObserverConstructor,
+      })
+    );
   }
 
   prependChildren(target, sizeObserver);
@@ -1324,7 +1351,7 @@ const createDOMObserver = (target, callback, options) => {
         const baseAssertion = isNestedTarget
           ? !ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue)
           : notOnlyAttrChanged || contentAttrChanged;
-        const contentFinalChanged = baseAssertion && !ignoreContentChange(mutation, isNestedTarget, target, options);
+        const contentFinalChanged = baseAssertion && !ignoreContentChange(mutation, !!isNestedTarget, target, options);
         push(totalAddedNodes, addedNodes);
         contentChanged = contentChanged || contentFinalChanged;
         childListChanged = childListChanged || isChildListType;

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -604,18 +604,19 @@
   var createCache = function createCache(update, options) {
     var _ref = options || {},
       _equal = _ref._equal,
-      _initialValue = _ref._initialValue;
+      _initialValue = _ref._initialValue,
+      _alwaysUpdateValues = _ref._alwaysUpdateValues;
 
     var _value = _initialValue;
 
     var _previous;
 
-    return function (force, context) {
+    var cacheUpdate = function cacheUpdate(force, context) {
       var curr = _value;
-      var newVal = update(context, _value, _previous);
+      var newVal = update ? update(context, _value, _previous) : context;
       var changed = force || (_equal ? !_equal(curr, newVal) : curr !== newVal);
 
-      if (changed) {
+      if (changed || _alwaysUpdateValues) {
         _value = newVal;
         _previous = curr;
       }
@@ -626,6 +627,8 @@
         _changed: changed,
       };
     };
+
+    return cacheUpdate;
   };
 
   function createCommonjsModule(fn) {
@@ -1124,31 +1127,59 @@
     return style(elm, 'direction');
   };
 
+  var domRectHasDimensions = function domRectHasDimensions(rect) {
+    return rect && (rect.height > 0 || rect.width > 0);
+  };
+
   var createSizeObserver = function createSizeObserver(target, onSizeChangedCallback, options) {
     var _ref = options || {},
       _ref$_direction = _ref._direction,
-      direction = _ref$_direction === void 0 ? false : _ref$_direction,
+      observeDirectionChange = _ref$_direction === void 0 ? false : _ref$_direction,
       _ref$_appear = _ref._appear,
-      appear = _ref$_appear === void 0 ? false : _ref$_appear;
+      observeAppearChange = _ref$_appear === void 0 ? false : _ref$_appear;
 
     var rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;
 
     var baseElements = createDOM('<div class="' + classNameSizeObserver + '"><div class="' + classNameSizeObserverListener + '"></div></div>');
     var sizeObserver = baseElements[0];
     var listenerElement = sizeObserver.firstChild;
+    var updateResizeObserverContentRectCache = createCache(0, {
+      _alwaysUpdateValues: true,
+      _equal: function _equal(currVal, newVal) {
+        return !(!currVal || (!domRectHasDimensions(currVal) && domRectHasDimensions(newVal)));
+      },
+    });
 
-    var onSizeChangedCallbackProxy = function onSizeChangedCallbackProxy(directionCache) {
+    var onSizeChangedCallbackProxy = function onSizeChangedCallbackProxy(sizeChangedContext) {
-      if (direction) {
+      var directionCacheValue = sizeChangedContext && sizeChangedContext._value;
-        var rtl = getDirection(sizeObserver) === 'rtl';
+      var skip = false;
+      var doDirectionScroll = true;
+
+      if (isArray(sizeChangedContext) && sizeChangedContext.length > 0) {
+        var _updateResizeObserver = updateResizeObserverContentRectCache(0, sizeChangedContext.pop().contentRect),
+          _previous = _updateResizeObserver._previous,
+          _value = _updateResizeObserver._value,
+          _changed = _updateResizeObserver._changed;
+
+        skip = !_previous || !domRectHasDimensions(_value);
+        doDirectionScroll = !skip && _changed;
+      } else if (directionCacheValue) {
+        doDirectionScroll = sizeChangedContext._changed;
+      }
+
+      if (observeDirectionChange && doDirectionScroll) {
+        var rtl = (directionCacheValue || getDirection(sizeObserver)) === 'rtl';
         scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
         scrollTop(sizeObserver, scrollAmount);
       }
 
-      onSizeChangedCallback(isString((directionCache || {})._value) ? directionCache : undefined);
+      if (!skip) {
+        onSizeChangedCallback(directionCacheValue ? sizeChangedContext : undefined);
+      }
     };
 
     var offListeners = [];
-    var appearCallback = appear ? onSizeChangedCallbackProxy : null;
+    var appearCallback = observeAppearChange ? onSizeChangedCallbackProxy : false;
 
     if (ResizeObserverConstructor) {
       var resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
@@ -1224,14 +1255,14 @@
         height: scrollAmount,
       });
       reset();
-      appearCallback = appear
+      appearCallback = observeAppearChange
         ? function () {
             return onScroll();
           }
         : reset;
     }
 
-    if (direction) {
+    if (observeDirectionChange) {
       var updateDirectionCache = createCache(function () {
         return getDirection(sizeObserver);
       });
@@ -1267,7 +1298,12 @@
 
     if (appearCallback) {
       addClass(sizeObserver, classNameSizeObserverAppear);
-      push(offListeners, on(sizeObserver, animationStartEventName, appearCallback));
+      push(
+        offListeners,
+        on(sizeObserver, animationStartEventName, appearCallback, {
+          _once: !!ResizeObserverConstructor,
+        })
+      );
     }
 
     prependChildren(target, sizeObserver);
@@ -1471,7 +1507,7 @@
           var baseAssertion = isNestedTarget
             ? !ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue)
             : notOnlyAttrChanged || contentAttrChanged;
-          var contentFinalChanged = baseAssertion && !ignoreContentChange(mutation, isNestedTarget, target, options);
+          var contentFinalChanged = baseAssertion && !ignoreContentChange(mutation, !!isNestedTarget, target, options);
           push(totalAddedNodes, addedNodes);
           contentChanged = contentChanged || contentFinalChanged;
           childListChanged = childListChanged || isChildListType;

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

@@ -1,8 +1,7 @@
-declare type TruthyOrFalsy = boolean | '' | 0 | null | undefined;
 declare type StringNullUndefined = string | null | undefined;
-export declare type DOMObserverEventContentChange = Array<[StringNullUndefined, ((elms: Node[]) => string) | StringNullUndefined] | null | undefined> | false | '' | null | undefined;
+export declare type DOMObserverEventContentChange = Array<[StringNullUndefined, ((elms: Node[]) => string) | StringNullUndefined] | null | undefined> | false | null | undefined;
-export declare type DOMObserverIgnoreContentChange = (mutation: MutationRecord, isNestedTarget: TruthyOrFalsy, domObserverTarget: HTMLElement, domObserverOptions: DOMObserverOptions | undefined) => TruthyOrFalsy;
+export declare type DOMObserverIgnoreContentChange = (mutation: MutationRecord, isNestedTarget: boolean, domObserverTarget: HTMLElement, domObserverOptions: DOMObserverOptions | undefined) => boolean;
-export declare type DOMObserverIgnoreTargetAttrChange = (target: Node, attributeName: string, oldAttributeValue: string | null, newAttributeValue: string | null) => TruthyOrFalsy;
+export declare type DOMObserverIgnoreTargetAttrChange = (target: Node, attributeName: string, oldAttributeValue: string | null, newAttributeValue: string | null) => boolean;
 export interface DOMObserverOptions {
     _observeContent?: boolean;
     _attributes?: string[];

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

@@ -6,8 +6,9 @@ export interface Cache<T> {
 export interface CacheOptions<T> {
     _equal?: EqualCachePropFunction<T>;
     _initialValue?: T;
+    _alwaysUpdateValues?: boolean;
 }
-export declare type CacheUpdate<T, C> = (force?: boolean | 0, context?: C) => Cache<T>;
+export declare type CacheUpdate<T, C> = undefined extends C ? (force?: boolean | 0, context?: C) => Cache<T> : (force: boolean | 0, context: C) => Cache<T>;
-export declare type UpdateCachePropFunction<T, C> = (context?: C, current?: T, previous?: T) => T;
+export declare type UpdateCachePropFunction<T, C> = undefined extends C ? (context?: C, current?: T, previous?: T) => T : C extends T ? ((context: C, current?: T, previous?: T) => T) | 0 : (context: C, current?: T, previous?: T) => T;
 export declare type EqualCachePropFunction<T> = (currentVal?: T, newVal?: T) => boolean;
 export declare const createCache: <T, C = undefined>(update: UpdateCachePropFunction<T, C>, options?: CacheOptions<T> | undefined) => CacheUpdate<T, C>;