improve codebase

.eslintrc.js

@@ -60,6 +60,16 @@ module.exports = {
         ignore: [`^@/.*`],
       },
     ],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
   },
   overrides: [
     {

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -227,6 +227,21 @@ const on = (target, eventNames, listener, options) => {
 const stopPropagation = (evt) => evt.stopPropagation();
 const preventDefault = (evt) => evt.preventDefault();
 
+const equal = (a, b, props) => {
+  if (a && b) {
+    let result = true;
+    each(props, (prop) => {
+      if (a[prop] !== b[prop]) {
+        result = false;
+      }
+    });
+    return result;
+  }
+
+  return false;
+};
+const equalWH = (a, b) => equal(a, b, ['w', 'h']);
+
 const hasOwnProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 const keys = (obj) => (obj ? Object.keys(obj) : []);
 
@@ -366,6 +381,8 @@ const optionsTemplateTypes = ['boolean', 'number', 'string', 'array', 'object',
 let environmentInstance;
 const { abs, round } = Math;
 const environmentElmId = 'os-environment';
+const classNameFlexboxGlue = 'flexbox-glue';
+const classNameFlexboxGlueMax = `${classNameFlexboxGlue}-max`;
 
 const getNativeScrollbarSize = (body, measureElm) => {
   appendChildren(body, measureElm);
@@ -379,7 +396,7 @@ const getNativeScrollbarSize = (body, measureElm) => {
 
 const getNativeScrollbarStyling = (testElm) => {
   let result = false;
-  addClass(testElm, 'os-viewport-native-scrollbars-invisible');
+  addClass(testElm, 'os-viewport-scrollbar-styled');
 
   try {
     result =
@@ -407,6 +424,18 @@ const getRtlScrollBehavior = (parentElm, childElm) => {
   };
 };
 
+const getFlexboxGlue = (parentElm, childElm) => {
+  addClass(parentElm, classNameFlexboxGlue);
+  const minOffsetsizeParent = offsetSize(parentElm);
+  const minOffsetsize = offsetSize(childElm);
+  const supportsMin = equalWH(minOffsetsize, minOffsetsizeParent);
+  addClass(parentElm, classNameFlexboxGlueMax);
+  const maxOffsetsizeParent = offsetSize(parentElm);
+  const maxOffsetsize = offsetSize(childElm);
+  const supportsMax = equalWH(maxOffsetsize, maxOffsetsizeParent);
+  return supportsMin && supportsMax;
+};
+
 const getWindowDPR = () => {
   const dDPI = window.screen.deviceXDPI || 0;
   const sDPI = window.screen.logicalXDPI || 1;
@@ -436,6 +465,7 @@ const createEnvironment = () => {
     _nativeScrollbarIsOverlaid: nativeScrollbarIsOverlaid,
     _nativeScrollbarStyling: getNativeScrollbarStyling(envElm),
     _rtlScrollBehavior: getRtlScrollBehavior(envElm, envChildElm),
+    _flexboxGlue: getFlexboxGlue(envElm, envChildElm),
 
     _addListener(listener) {
       onChangedListener.add(listener);
@@ -446,6 +476,7 @@ const createEnvironment = () => {
     },
   };
   removeAttr(envElm, 'style');
+  removeAttr(envElm, 'class');
   removeElements(envElm);
 
   if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
@@ -507,6 +538,7 @@ const scrollEventName = 'scroll';
 const scrollAmount = 3333333;
 const ResizeObserverConstructor = jsAPI('ResizeObserver');
 const classNameSizeObserver = 'os-size-observer';
+const classNameSizeObserverAppear = `${classNameSizeObserver}-appear`;
 const classNameSizeObserverListener = `${classNameSizeObserver}-listener`;
 const classNameSizeObserverListenerItem = `${classNameSizeObserverListener}-item`;
 const classNameSizeObserverListenerItemFinal = `${classNameSizeObserverListenerItem}-final`;
@@ -515,7 +547,9 @@ const rAF = requestAnimationFrame;
 
 const getDirection = (elm) => style(elm, 'direction');
 
-const createSizeObserver = (target, onSizeChangedCallback, direction) => {
+const createSizeObserver = (target, onSizeChangedCallback, options) => {
+  const { _direction: direction = false, _appear: appear = false } = options || {};
+
   const rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;
 
   const baseElements = createDOM(`<div class="${classNameSizeObserver}"><div class="${classNameSizeObserverListener}"></div></div>`);
@@ -529,15 +563,16 @@ const createSizeObserver = (target, onSizeChangedCallback, direction) => {
       scrollTop(sizeObserver, scrollAmount);
     }
 
-    onSizeChangedCallback(dir === true);
+    onSizeChangedCallback(isString(dir) ? dir : undefined);
   };
 
   const offListeners = [];
-  let appearCallback = onSizeChangedCallbackProxy;
+  let appearCallback = appear ? onSizeChangedCallbackProxy : null;
 
   if (ResizeObserverConstructor) {
     const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
     resizeObserverInstance.observe(listenerElement);
+    offListeners.push(() => 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>`
@@ -561,19 +596,25 @@ const createSizeObserver = (target, onSizeChangedCallback, direction) => {
 
     const onResized = function onResized() {
       rAFId = 0;
-      if (!isDirty) return;
+
+      if (!isDirty) {
+        return;
+      }
+
       cacheSize = currSize;
       onSizeChangedCallbackProxy();
     };
 
     const onScroll = (scrollEvent) => {
       currSize = offsetSize(listenerElement);
-      isDirty = !scrollEvent || currSize.w !== cacheSize.w || currSize.h !== cacheSize.h;
+      isDirty = !scrollEvent || !equalWH(currSize, cacheSize);
 
       if (scrollEvent && isDirty && !rAFId) {
         cAF(rAFId);
         rAFId = rAF(onResized);
-      } else if (!scrollEvent) onResized();
+      } else if (!scrollEvent) {
+        onResized();
+      }
 
       reset();
 
@@ -592,7 +633,7 @@ const createSizeObserver = (target, onSizeChangedCallback, direction) => {
       height: scrollAmount,
     });
     reset();
-    appearCallback = onScroll;
+    appearCallback = appear ? onScroll : reset;
   }
 
   if (direction) {
@@ -616,7 +657,7 @@ const createSizeObserver = (target, onSizeChangedCallback, direction) => {
           }
 
           dirCache = dir;
-          onSizeChangedCallbackProxy(true);
+          onSizeChangedCallbackProxy(dir);
         }
 
         preventDefault(event);
@@ -626,7 +667,11 @@ const createSizeObserver = (target, onSizeChangedCallback, direction) => {
     );
   }
 
-  offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
+  if (appearCallback) {
+    addClass(sizeObserver, classNameSizeObserverAppear);
+    offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
+  }
+
   prependChildren(target, sizeObserver);
   return () => {
     runEach(offListeners);
@@ -634,10 +679,61 @@ const createSizeObserver = (target, onSizeChangedCallback, direction) => {
   };
 };
 
+const classNameTrinsicObserver = 'os-trinsic-observer';
+const IntersectionObserverConstructor = jsAPI('IntersectionObserver');
+const createTrinsicObserver = (target, onTrinsicChangedCallback) => {
+  const trinsicObserver = createDOM(`<div class="${classNameTrinsicObserver}"></div>`)[0];
+  const offListeners = [];
+  let heightIntrinsic = false;
+
+  if (IntersectionObserverConstructor) {
+    const intersectionObserverInstance = new IntersectionObserverConstructor(
+      (entries) => {
+        if (entries && entries.length > 0) {
+          const last = entries.pop();
+
+          if (last) {
+            const newHeightIntrinsic = last.isIntersecting || last.intersectionRatio > 0;
+
+            if (newHeightIntrinsic !== heightIntrinsic) {
+              onTrinsicChangedCallback(false, newHeightIntrinsic);
+              heightIntrinsic = newHeightIntrinsic;
+            }
+          }
+        }
+      },
+      {
+        root: target,
+      }
+    );
+    intersectionObserverInstance.observe(trinsicObserver);
+    offListeners.push(() => intersectionObserverInstance.disconnect());
+  } else {
+    offListeners.push(
+      createSizeObserver(trinsicObserver, () => {
+        const newSize = offsetSize(trinsicObserver);
+        const newHeightIntrinsic = newSize.h === 0;
+
+        if (newHeightIntrinsic !== heightIntrinsic) {
+          onTrinsicChangedCallback(false, newHeightIntrinsic);
+          heightIntrinsic = newHeightIntrinsic;
+        }
+      })
+    );
+  }
+
+  prependChildren(target, trinsicObserver);
+  return () => {
+    runEach(offListeners);
+    removeElements(trinsicObserver);
+  };
+};
+
 var index = () => {
   return [
     getEnvironment(),
     createSizeObserver(document.body, () => {}),
+    createTrinsicObserver(document.body, () => {}),
     createDOM(
       '\
     <div class="os-host">\

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -264,6 +264,23 @@
     return evt.preventDefault();
   };
 
+  var equal = function equal(a, b, props) {
+    if (a && b) {
+      var result = true;
+      each(props, function (prop) {
+        if (a[prop] !== b[prop]) {
+          result = false;
+        }
+      });
+      return result;
+    }
+
+    return false;
+  };
+  var equalWH = function equalWH(a, b) {
+    return equal(a, b, ['w', 'h']);
+  };
+
   var hasOwnProperty = function hasOwnProperty(obj, prop) {
     return Object.prototype.hasOwnProperty.call(obj, prop);
   };
@@ -416,6 +433,8 @@
   var abs = Math.abs,
     round = Math.round;
   var environmentElmId = 'os-environment';
+  var classNameFlexboxGlue = 'flexbox-glue';
+  var classNameFlexboxGlueMax = classNameFlexboxGlue + '-max';
 
   var getNativeScrollbarSize = function getNativeScrollbarSize(body, measureElm) {
     appendChildren(body, measureElm);
@@ -429,7 +448,7 @@
 
   var getNativeScrollbarStyling = function getNativeScrollbarStyling(testElm) {
     var result = false;
-    addClass(testElm, 'os-viewport-native-scrollbars-invisible');
+    addClass(testElm, 'os-viewport-scrollbar-styled');
 
     try {
       result =
@@ -458,6 +477,18 @@
     };
   };
 
+  var getFlexboxGlue = function getFlexboxGlue(parentElm, childElm) {
+    addClass(parentElm, classNameFlexboxGlue);
+    var minOffsetsizeParent = offsetSize(parentElm);
+    var minOffsetsize = offsetSize(childElm);
+    var supportsMin = equalWH(minOffsetsize, minOffsetsizeParent);
+    addClass(parentElm, classNameFlexboxGlueMax);
+    var maxOffsetsizeParent = offsetSize(parentElm);
+    var maxOffsetsize = offsetSize(childElm);
+    var supportsMax = equalWH(maxOffsetsize, maxOffsetsizeParent);
+    return supportsMin && supportsMax;
+  };
+
   var getWindowDPR = function getWindowDPR() {
     var dDPI = window.screen.deviceXDPI || 0;
     var sDPI = window.screen.logicalXDPI || 1;
@@ -488,6 +519,7 @@
       _nativeScrollbarIsOverlaid: nativeScrollbarIsOverlaid,
       _nativeScrollbarStyling: getNativeScrollbarStyling(envElm),
       _rtlScrollBehavior: getRtlScrollBehavior(envElm, envChildElm),
+      _flexboxGlue: getFlexboxGlue(envElm, envChildElm),
       _addListener: function _addListener(listener) {
         onChangedListener.add(listener);
       },
@@ -496,6 +528,7 @@
       },
     };
     removeAttr(envElm, 'style');
+    removeAttr(envElm, 'class');
     removeElements(envElm);
 
     if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
@@ -557,6 +590,7 @@
   var scrollAmount = 3333333;
   var ResizeObserverConstructor = jsAPI('ResizeObserver');
   var classNameSizeObserver = 'os-size-observer';
+  var classNameSizeObserverAppear = classNameSizeObserver + '-appear';
   var classNameSizeObserverListener = classNameSizeObserver + '-listener';
   var classNameSizeObserverListenerItem = classNameSizeObserverListener + '-item';
   var classNameSizeObserverListenerItemFinal = classNameSizeObserverListenerItem + '-final';
@@ -567,7 +601,13 @@
     return style(elm, 'direction');
   };
 
-  var createSizeObserver = function createSizeObserver(target, onSizeChangedCallback, direction) {
+  var createSizeObserver = function createSizeObserver(target, onSizeChangedCallback, options) {
+    var _ref = options || {},
+      _ref$_direction = _ref._direction,
+      direction = _ref$_direction === void 0 ? false : _ref$_direction,
+      _ref$_appear = _ref._appear,
+      appear = _ref$_appear === void 0 ? false : _ref$_appear;
+
     var rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;
 
     var baseElements = createDOM('<div class="' + classNameSizeObserver + '"><div class="' + classNameSizeObserverListener + '"></div></div>');
@@ -581,15 +621,18 @@
         scrollTop(sizeObserver, scrollAmount);
       }
 
-      onSizeChangedCallback(dir === true);
+      onSizeChangedCallback(isString(dir) ? dir : undefined);
     };
 
     var offListeners = [];
-    var appearCallback = onSizeChangedCallbackProxy;
+    var appearCallback = appear ? onSizeChangedCallbackProxy : null;
 
     if (ResizeObserverConstructor) {
       var resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
       resizeObserverInstance.observe(listenerElement);
+      offListeners.push(function () {
+        return resizeObserverInstance.disconnect();
+      });
     } else {
       var observerElementChildren = createDOM(
         '<div class="' +
@@ -623,19 +666,25 @@
 
       var onResized = function onResized() {
         rAFId = 0;
-        if (!isDirty) return;
+
+        if (!isDirty) {
+          return;
+        }
+
         cacheSize = currSize;
         onSizeChangedCallbackProxy();
       };
 
       var onScroll = function onScroll(scrollEvent) {
         currSize = offsetSize(listenerElement);
-        isDirty = !scrollEvent || currSize.w !== cacheSize.w || currSize.h !== cacheSize.h;
+        isDirty = !scrollEvent || !equalWH(currSize, cacheSize);
 
         if (scrollEvent && isDirty && !rAFId) {
           cAF(rAFId);
           rAFId = rAF(onResized);
-        } else if (!scrollEvent) onResized();
+        } else if (!scrollEvent) {
+          onResized();
+        }
 
         reset();
 
@@ -654,7 +703,7 @@
         height: scrollAmount,
       });
       reset();
-      appearCallback = onScroll;
+      appearCallback = appear ? onScroll : reset;
     }
 
     if (direction) {
@@ -678,7 +727,7 @@
             }
 
             dirCache = dir;
-            onSizeChangedCallbackProxy(true);
+            onSizeChangedCallbackProxy(dir);
           }
 
           preventDefault(event);
@@ -688,7 +737,11 @@
       );
     }
 
-    offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
+    if (appearCallback) {
+      addClass(sizeObserver, classNameSizeObserverAppear);
+      offListeners.push(on(sizeObserver, animationStartEventName, appearCallback));
+    }
+
     prependChildren(target, sizeObserver);
     return function () {
       runEach(offListeners);
@@ -696,10 +749,63 @@
     };
   };
 
+  var classNameTrinsicObserver = 'os-trinsic-observer';
+  var IntersectionObserverConstructor = jsAPI('IntersectionObserver');
+  var createTrinsicObserver = function createTrinsicObserver(target, onTrinsicChangedCallback) {
+    var trinsicObserver = createDOM('<div class="' + classNameTrinsicObserver + '"></div>')[0];
+    var offListeners = [];
+    var heightIntrinsic = false;
+
+    if (IntersectionObserverConstructor) {
+      var intersectionObserverInstance = new IntersectionObserverConstructor(
+        function (entries) {
+          if (entries && entries.length > 0) {
+            var last = entries.pop();
+
+            if (last) {
+              var newHeightIntrinsic = last.isIntersecting || last.intersectionRatio > 0;
+
+              if (newHeightIntrinsic !== heightIntrinsic) {
+                onTrinsicChangedCallback(false, newHeightIntrinsic);
+                heightIntrinsic = newHeightIntrinsic;
+              }
+            }
+          }
+        },
+        {
+          root: target,
+        }
+      );
+      intersectionObserverInstance.observe(trinsicObserver);
+      offListeners.push(function () {
+        return intersectionObserverInstance.disconnect();
+      });
+    } else {
+      offListeners.push(
+        createSizeObserver(trinsicObserver, function () {
+          var newSize = offsetSize(trinsicObserver);
+          var newHeightIntrinsic = newSize.h === 0;
+
+          if (newHeightIntrinsic !== heightIntrinsic) {
+            onTrinsicChangedCallback(false, newHeightIntrinsic);
+            heightIntrinsic = newHeightIntrinsic;
+          }
+        })
+      );
+    }
+
+    prependChildren(target, trinsicObserver);
+    return function () {
+      runEach(offListeners);
+      removeElements(trinsicObserver);
+    };
+  };
+
   var index = function () {
     return [
       getEnvironment(),
       createSizeObserver(document.body, function () {}),
+      createTrinsicObserver(document.body, function () {}),
       createDOM(
         '\
     <div class="os-host">\

packages/overlayscrollbars/src/index.ts

@@ -1,7 +1,7 @@
 import { createDOM } from 'support/dom';
 import { getEnvironment } from 'environment';
-import { createSizeObserver } from 'overlayscrollbars/observers/SizeObserver';
-import { createTrinsicObserver } from 'overlayscrollbars/observers/TrinsicObserver';
+import { createSizeObserver } from 'observers/sizeObserver';
+import { createTrinsicObserver } from 'observers/trinsicObserver';
 
 const abc = {
   a: 1,

packages/overlayscrollbars/types/environment/environment.d.ts

@@ -9,6 +9,7 @@ export interface Environment {
         n: boolean;
         i: boolean;
     };
+    _flexboxGlue: boolean;
     _addListener(listener: OnEnvironmentChanged): void;
     _removeListener(listener: OnEnvironmentChanged): void;
 }

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

@@ -0,0 +1,14 @@
+import { CacheUpdateInfo, CachePropsToUpdate, CacheUpdated, OptionsWithOptionsTemplate, OptionsValidated } from 'support';
+import { PlainObject } from 'typings';
+interface AbstractLifecycle<O extends PlainObject> {
+    _options(newOptions?: O): O;
+    _update(force?: boolean): void;
+}
+export interface Lifecycle<T extends PlainObject> extends AbstractLifecycle<T> {
+    _destruct(): void;
+}
+export interface LifecycleBase<O extends PlainObject, C extends PlainObject> extends AbstractLifecycle<O> {
+    _cacheChange(cachePropsToUpdate?: CachePropsToUpdate<C>): void;
+}
+export declare const createLifecycleBase: <O, C>(defaultOptionsWithTemplate: OptionsWithOptionsTemplate<Required<O>>, cacheUpdateInfo: CacheUpdateInfo<C>, initialOptions: O | undefined, updateFunction: (changedOptions: OptionsValidated<O>, changedCache: CacheUpdated<C>) => any) => LifecycleBase<O, C>;
+export {};

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

@@ -0,0 +1,10 @@
+import { Lifecycle } from 'lifecycles/lifecycleBase';
+export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
+export interface StructureLifecycleOptions {
+    paddingAbsolute: boolean;
+    overflowBehavior?: {
+        x?: OverflowBehavior;
+        y?: OverflowBehavior;
+    };
+}
+export declare const createStructureLifecycle: (target: HTMLElement, initialOptions?: StructureLifecycleOptions | undefined) => Lifecycle<StructureLifecycleOptions>;

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

@@ -0,0 +1,7 @@
+declare type Direction = 'ltr' | 'rtl';
+export declare type SizeObserverOptions = {
+    _direction?: boolean;
+    _appear?: boolean;
+};
+export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (direction?: "ltr" | "rtl" | undefined) => any, options?: SizeObserverOptions | undefined) => (() => void);
+export {};

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

@@ -0,0 +1 @@
+export declare const createTrinsicObserver: (target: HTMLElement, onTrinsicChangedCallback: (widthIntrinsic: boolean, heightIntrinsic: boolean) => any) => (() => void);

packages/overlayscrollbars/types/options/options.d.ts

@@ -1,4 +1,2 @@
-import { OptionsTemplate } from 'support/options';
 import { Options } from 'options';
-export declare const optionsTemplate: OptionsTemplate<Required<Options>>;
-export declare const defaultOptions: Options;
+export declare const optionsTemplate: import("../support/options").OptionsTemplate<Required<Options>>, defaultOptions: Required<Options>;

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

@@ -1,14 +0,0 @@
-import { OverlayScrollbarsLifecycle } from 'overlayscrollbars/lifecycles';
-export interface StructureLifecycleOptions {
-    _paddingAbsolute: boolean;
-    _autoSizeCapable: boolean;
-    _heightAuto: boolean;
-    _widthAuto: boolean;
-    _border: [number, number, number, number];
-    _padding: [number, number, number, number];
-    _margin: [number, number, number, number];
-}
-export declare class StructureLifecycle extends OverlayScrollbarsLifecycle<StructureLifecycleOptions> {
-    _update(options?: StructureLifecycleOptions): void;
-    _destruct(): void;
-}

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

@@ -1,8 +0,0 @@
-import { PlainObject } from 'typings';
-import { Environment } from 'environment';
-export declare abstract class OverlayScrollbarsLifecycle<T extends PlainObject> {
-    protected environment: Environment;
-    constructor(environment: Environment);
-    abstract _update(options?: T): void;
-    abstract _destruct(): void;
-}

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

@@ -1 +0,0 @@
-export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (direction?: boolean | undefined) => any, direction?: boolean | undefined) => () => void;

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

@@ -1 +0,0 @@
-export declare const hi: () => null;

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

@@ -0,0 +1,12 @@
+declare type UpdateCachePropFunction<T, P extends keyof T> = (current?: T[P], previous?: T[P]) => T[P];
+declare type EqualCachePropFunction<T, P extends keyof T> = (a?: T[P], b?: T[P]) => boolean;
+export declare type CachePropsToUpdate<T> = Array<keyof T> | keyof T;
+export declare type CacheUpdate<T> = (propsToUpdate?: CachePropsToUpdate<T>, force?: boolean) => CacheUpdated<T>;
+export declare type CacheUpdated<T> = {
+    [P in keyof T]?: T[P];
+};
+export declare type CacheUpdateInfo<T> = {
+    [P in keyof T]: UpdateCachePropFunction<T, P> | [UpdateCachePropFunction<T, P>, EqualCachePropFunction<T, P>];
+};
+export declare const createCache: <T>(cacheUpdateInfo: CacheUpdateInfo<T>) => CacheUpdate<T>;
+export {};

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

@@ -0,0 +1 @@
+export * from 'support/cache/cache';

packages/overlayscrollbars/types/support/dom/style.d.ts

@@ -1,3 +1,9 @@
+export interface TRBL {
+    t: number;
+    r: number;
+    b: number;
+    l: number;
+}
 declare type CssStyles = {
     [key: string]: string | number;
 };
@@ -8,4 +14,5 @@ export declare function style(elm: HTMLElement | null, styles: Array<string> | s
 };
 export declare const hide: (elm: HTMLElement | null) => void;
 export declare const show: (elm: HTMLElement | null) => void;
+export declare const topRightBottomLeft: (elm: HTMLElement | null, property?: string | undefined) => TRBL;
 export {};

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

@@ -1,3 +1,4 @@
+export * from 'support/cache';
 export * from 'support/compatibility';
 export * from 'support/dom';
 export * from 'support/options';

packages/overlayscrollbars/types/support/options/index.d.ts

@@ -9,9 +9,12 @@ export declare type OptionsTemplateValue<T extends OptionsTemplateNativeTypes =
 export declare type OptionsTemplate<T extends Required<T>> = {
     [P in keyof T]: PlainObject extends T[P] ? OptionsTemplate<Required<T[P]>> : T[P] extends OptionsTemplateNativeTypes ? OptionsTemplateValue<T[P]> : never;
 };
-export declare type OptionsValidatedResult<T> = {
-    readonly foreign: PlainObject;
-    readonly validated: T;
+export declare type OptionsValidated<T> = {
+    [P in keyof T]?: T[P];
+};
+export declare type OptionsValidationResult<T> = {
+    readonly _foreign: PlainObject;
+    readonly _validated: OptionsValidated<T>;
 };
 export declare type OptionsWithOptionsTemplateValue<T extends OptionsTemplateNativeTypes> = [T, OptionsTemplateValue<T>];
 export declare type OptionsWithOptionsTemplate<T extends Required<T>> = {

packages/overlayscrollbars/types/support/options/transformation.d.ts

@@ -1,3 +1,6 @@
 import { OptionsTemplate, OptionsWithOptionsTemplate } from 'support/options';
-export declare function transform<T extends Required<T>>(optionsWithOptionsTemplate: OptionsWithOptionsTemplate<T>): T;
-export declare function transform<T extends Required<T>>(optionsWithOptionsTemplate: OptionsWithOptionsTemplate<T>, toTemplate: true | void): OptionsTemplate<T>;
+export interface OptionsWithOptionsTemplateTransformation<T extends Required<T>> {
+    _template: OptionsTemplate<T>;
+    _options: T;
+}
+export declare function transformOptions<T extends Required<T>>(optionsWithOptionsTemplate: OptionsWithOptionsTemplate<T>): OptionsWithOptionsTemplateTransformation<T>;

packages/overlayscrollbars/types/support/options/validation.d.ts

@@ -1,8 +1,8 @@
 import { OptionsTemplate, OptionsTemplateType, Func, OptionsValidationResult } from 'support/options';
 import { PlainObject } from 'typings';
 declare const optionsTemplateTypes: OptionsTemplateTypesDictionary;
-declare const validate: <T extends PlainObject<any>>(options: T, template: OptionsTemplate<Required<T>>, optionsDiff?: T | undefined, doWriteErrors?: boolean | undefined) => OptionsValidationResult<T>;
-export { validate, optionsTemplateTypes };
+declare const validateOptions: <T extends PlainObject<any>>(options: T, template: OptionsTemplate<Required<T>>, optionsDiff?: T | undefined, doWriteErrors?: boolean | undefined) => OptionsValidationResult<T>;
+export { validateOptions, optionsTemplateTypes };
 declare type OptionsTemplateTypesDictionary = {
     readonly boolean: OptionsTemplateType<boolean>;
     readonly number: OptionsTemplateType<number>;

packages/overlayscrollbars/types/support/utils/equal.d.ts

@@ -0,0 +1,6 @@
+import { WH, XY, TRBL } from 'support/dom';
+import { PlainObject } from 'typings';
+export declare const equal: <T extends PlainObject<any>>(a: T | undefined, b: T | undefined, props: (keyof T)[]) => boolean;
+export declare const equalWH: (a?: WH<number> | undefined, b?: WH<number> | undefined) => boolean;
+export declare const equalXY: (a?: XY<number> | undefined, b?: XY<number> | undefined) => boolean;
+export declare const equalTRBL: (a?: TRBL | undefined, b?: TRBL | undefined) => boolean;

packages/overlayscrollbars/types/support/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from 'support/utils/array';
+export * from 'support/utils/equal';
 export * from 'support/utils/object';
 export * from 'support/utils/types';