update build

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -1,22 +1,66 @@
+const type = (obj) => {
+  if (obj === undefined) return `${obj}`;
+  if (obj === null) return `${obj}`;
+  return Object.prototype.toString
+    .call(obj)
+    .replace(/^\[object (.+)\]$/, '$1')
+    .toLowerCase();
+};
 function isNumber(obj) {
   return typeof obj === 'number';
 }
 function isString(obj) {
   return typeof obj === 'string';
 }
+function isBoolean(obj) {
+  return typeof obj === 'boolean';
+}
 function isFunction(obj) {
   return typeof obj === 'function';
 }
 function isUndefined(obj) {
   return obj === undefined;
 }
+function isNull(obj) {
+  return obj === null;
+}
 function isArray(obj) {
   return Array.isArray(obj);
 }
+function isObject(obj) {
+  return typeof obj === 'object' && !isArray(obj) && !isNull(obj);
+}
 function isArrayLike(obj) {
   const length = !!obj && obj.length;
   return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
 }
+function isPlainObject(obj) {
+  if (!obj || !isObject(obj) || type(obj) !== 'object') return false;
+  let key;
+  const proto = 'prototype';
+  const { hasOwnProperty } = Object[proto];
+  const hasOwnConstructor = hasOwnProperty.call(obj, 'constructor');
+  const hasIsPrototypeOf = obj.constructor && obj.constructor[proto] && hasOwnProperty.call(obj.constructor[proto], 'isPrototypeOf');
+
+  if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
+    return false;
+  }
+
+  for (key in obj) {
+  }
+
+  return isUndefined(key) || hasOwnProperty.call(obj, key);
+}
+function isHTMLElement(obj) {
+  const instaceOfRightHandSide = window.HTMLElement;
+  const doInstanceOf = isObject(instaceOfRightHandSide) || isFunction(instaceOfRightHandSide);
+  return !!(doInstanceOf ? obj instanceof instaceOfRightHandSide : obj && isObject(obj) && obj.nodeType === 1 && isString(obj.nodeName));
+}
+function isEmptyObject(obj) {
+  for (const name in obj) return false;
+
+  return true;
+}
 
 function getSetProp(topLeft, fallback, elm, value) {
   if (isUndefined(value)) {
@@ -25,6 +69,14 @@ function getSetProp(topLeft, fallback, elm, value) {
 
   elm && (elm[topLeft] = value);
 }
+
+function attr(elm, attrName, value) {
+  if (isUndefined(value)) {
+    return elm ? elm.getAttribute(attrName) : null;
+  }
+
+  elm && elm.setAttribute(attrName, value);
+}
 const removeAttr = (elm, attrName) => {
   elm == null ? void 0 : elm.removeAttribute(attrName);
 };
@@ -89,6 +141,15 @@ const runEach = (arr) => {
   }
 };
 
+const matches = (elm, selector) => {
+  if (elm) {
+    const fn = Element.prototype.matches || Element.prototype.msMatchesSelector;
+    return fn.call(elm, selector);
+  }
+
+  return false;
+};
+const is = (elm, selector) => matches(elm, selector);
 const contents = (elm) => (elm ? from(elm.childNodes) : []);
 const parent = (elm) => (elm ? elm.parentElement : null);
 
@@ -142,7 +203,15 @@ const removeElements = (nodes) => {
   }
 };
 
-const createDiv = () => document.createElement('div');
+const createDiv = (classNames) => {
+  const div = document.createElement('div');
+
+  if (classNames) {
+    attr(div, 'class', classNames);
+  }
+
+  return div;
+};
 const createDOM = (html) => {
   const createdDiv = createDiv();
   createdDiv.innerHTML = html.trim();
@@ -241,9 +310,45 @@ const equal = (a, b, props) => {
   return false;
 };
 const equalWH = (a, b) => equal(a, b, ['w', 'h']);
+const equalTRBL = (a, b) => equal(a, b, ['t', 'r', 'b', 'l']);
 
 const hasOwnProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 const keys = (obj) => (obj ? Object.keys(obj) : []);
+function assignDeep(target, object1, object2, object3, object4, object5, object6) {
+  const sources = [object1, object2, object3, object4, object5, object6];
+
+  if ((typeof target !== 'object' || isNull(target)) && !isFunction(target)) {
+    target = {};
+  }
+
+  each(sources, (source) => {
+    each(keys(source), (key) => {
+      const copy = source[key];
+
+      if (target === copy) {
+        return true;
+      }
+
+      const copyIsArray = isArray(copy);
+
+      if (copy && (isPlainObject(copy) || copyIsArray)) {
+        const src = target[key];
+        let clone = src;
+
+        if (copyIsArray && !isArray(src)) {
+          clone = [];
+        } else if (!copyIsArray && !isPlainObject(src)) {
+          clone = {};
+        }
+
+        target[key] = assignDeep(clone, copy);
+      } else {
+        target[key] = copy;
+      }
+    });
+  });
+  return target;
+}
 
 const cssNumber = {
   animationiterationcount: 1,
@@ -261,6 +366,11 @@ const cssNumber = {
   zoom: 1,
 };
 
+const parseToZeroOrNumber = (value, toFloat) => {
+  const num = toFloat ? parseFloat(value) : parseInt(value, 10);
+  return Number.isNaN(num) ? 0 : num;
+};
+
 const adaptCSSVal = (prop, val) => (!cssNumber[prop.toLowerCase()] && isNumber(val) ? `${val}px` : val);
 
 const getCSSVal = (elm, computedStyle, prop) => (computedStyle != null ? computedStyle.getPropertyValue(prop) : elm.style[prop]);
@@ -295,6 +405,20 @@ function style(elm, styles) {
 
   each(keys(styles), (key) => setCSSVal(elm, key, styles[key]));
 }
+const topRightBottomLeft = (elm, property) => {
+  const finalProp = property || '';
+  const top = `${finalProp}-top`;
+  const right = `${finalProp}-right`;
+  const bottom = `${finalProp}-bottom`;
+  const left = `${finalProp}-left`;
+  const result = style(elm, [top, right, bottom, left]);
+  return {
+    t: parseToZeroOrNumber(result[top]),
+    r: parseToZeroOrNumber(result[right]),
+    b: parseToZeroOrNumber(result[bottom]),
+    l: parseToZeroOrNumber(result[left]),
+  };
+};
 
 const zeroObj$1 = {
   x: 0,
@@ -310,9 +434,76 @@ const absoluteCoordinates = (elm) => {
     : zeroObj$1;
 };
 
+function createCache(cacheUpdateInfo, isReference) {
+  const cache = {};
+  const allProps = keys(cacheUpdateInfo);
+  each(allProps, (prop) => {
+    cache[prop] = {
+      _changed: false,
+      _value: isReference ? cacheUpdateInfo[prop] : undefined,
+    };
+  });
+
+  const updateCacheProp = (prop, value, equal) => {
+    const curr = cache[prop]._value;
+    cache[prop]._value = value;
+    cache[prop]._previous = curr;
+    cache[prop]._changed = equal ? !equal(curr, value) : curr !== value;
+  };
+
+  const flush = (props, force) => {
+    const result = assignDeep({}, cache, {
+      _anythingChanged: false,
+    });
+    each(props, (prop) => {
+      const changed = force || cache[prop]._changed;
+      result._anythingChanged = result._anythingChanged || changed;
+      result[prop]._changed = changed;
+      cache[prop]._changed = false;
+    });
+    return result;
+  };
+
+  return (propsToUpdate, force) => {
+    const finalPropsToUpdate = (isString(propsToUpdate) ? [propsToUpdate] : propsToUpdate) || allProps;
+    each(finalPropsToUpdate, (prop) => {
+      const cacheVal = cache[prop];
+      const curr = cacheUpdateInfo[prop];
+      const arr = isReference ? false : isArray(curr);
+      const value = arr ? curr[0] : curr;
+      const equal = arr ? curr[1] : null;
+      updateCacheProp(prop, isReference ? value : value(cacheVal._value, cacheVal._previous), equal);
+    });
+    return flush(finalPropsToUpdate, force);
+  };
+}
+
 const firstLetterToUpper = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+const getDummyStyle = () => createDiv().style;
+
+const cssPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
 const jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
 const jsCache = {};
+const cssCache = {};
+const cssProperty = (name) => {
+  let result = cssCache[name];
+
+  if (hasOwnProperty(cssCache, name)) {
+    return result;
+  }
+
+  const uppercasedName = firstLetterToUpper(name);
+  const elmStyle = getDummyStyle();
+  each(cssPrefixes, (prefix) => {
+    const prefixWithoutDashes = prefix.replace(/-/g, '');
+    const resultPossibilities = [name, prefix + name, prefixWithoutDashes + uppercasedName, firstLetterToUpper(prefixWithoutDashes) + uppercasedName];
+    result = resultPossibilities.find((resultPossibility) => elmStyle[resultPossibility] !== undefined);
+    return !result;
+  });
+  cssCache[name] = result;
+  return result;
+};
 const jsAPI = (name) => {
   let result = jsCache[name] || window[name];
 
@@ -372,12 +563,110 @@ var _extends_1 = createCommonjsModule(function (module) {
   module.exports = _extends;
 });
 
+const { stringify } = JSON;
 const templateTypePrefixSuffix = ['__TPL_', '_TYPE__'];
 const optionsTemplateTypes = ['boolean', 'number', 'string', 'array', 'object', 'function', 'null'].reduce((result, item) => {
   result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];
   return result;
 }, {});
 
+const validateRecursive = (options, template, optionsDiff, doWriteErrors, propPath) => {
+  const validatedOptions = {};
+
+  const optionsCopy = _extends_1({}, options);
+
+  const props = keys(template).filter((prop) => hasOwnProperty(options, prop));
+  each(props, (prop) => {
+    const optionsDiffValue = isUndefined(optionsDiff[prop]) ? {} : optionsDiff[prop];
+    const optionsValue = options[prop];
+    const templateValue = template[prop];
+    const templateIsComplex = isPlainObject(templateValue);
+    const propPrefix = propPath ? `${propPath}.` : '';
+
+    if (templateIsComplex && isPlainObject(optionsValue)) {
+      const validatedResult = validateRecursive(optionsValue, templateValue, optionsDiffValue, doWriteErrors, propPrefix + prop);
+      validatedOptions[prop] = validatedResult._validated;
+      optionsCopy[prop] = validatedResult._foreign;
+      each([optionsCopy, validatedOptions], (value) => {
+        if (isEmptyObject(value[prop])) {
+          delete value[prop];
+        }
+      });
+    } else if (!templateIsComplex) {
+      let isValid = false;
+      const errorEnumStrings = [];
+      const errorPossibleTypes = [];
+      const optionsValueType = type(optionsValue);
+      const templateValueArr = !isArray(templateValue) ? [templateValue] : templateValue;
+      each(templateValueArr, (currTemplateType) => {
+        let typeString;
+        each(optionsTemplateTypes, (value, key) => {
+          if (value === currTemplateType) {
+            typeString = key;
+          }
+        });
+        const isEnumString = typeString === undefined;
+
+        if (isEnumString && isString(optionsValue)) {
+          const enumStringSplit = currTemplateType.split(' ');
+          isValid = !!enumStringSplit.find((possibility) => possibility === optionsValue);
+          errorEnumStrings.push(...enumStringSplit);
+        } else {
+          isValid = optionsTemplateTypes[optionsValueType] === currTemplateType;
+        }
+
+        errorPossibleTypes.push(isEnumString ? optionsTemplateTypes.string : typeString);
+        return !isValid;
+      });
+
+      if (isValid) {
+        const doStringifyComparison = isArray(optionsValue) || isPlainObject(optionsValue);
+
+        if (doStringifyComparison ? stringify(optionsValue) !== stringify(optionsDiffValue) : optionsValue !== optionsDiffValue) {
+          validatedOptions[prop] = optionsValue;
+        }
+      } else if (doWriteErrors) {
+        console.warn(
+          `${
+            `The option "${propPrefix}${prop}" wasn't set, because it doesn't accept the type [ ${optionsValueType.toUpperCase()} ] with the value of "${optionsValue}".\r\n` +
+            `Accepted types are: [ ${errorPossibleTypes.join(', ').toUpperCase()} ].\r\n`
+          }${errorEnumStrings.length > 0 ? `\r\nValid strings are: [ ${errorEnumStrings.join(', ')} ].` : ''}`
+        );
+      }
+
+      delete optionsCopy[prop];
+    }
+  });
+  return {
+    _foreign: optionsCopy,
+    _validated: validatedOptions,
+  };
+};
+
+const validateOptions = (options, template, optionsDiff, doWriteErrors) => {
+  return validateRecursive(options, template, optionsDiff || {}, doWriteErrors || false);
+};
+
+function transformOptions(optionsWithOptionsTemplate) {
+  const result = {
+    _template: {},
+    _options: {},
+  };
+  each(keys(optionsWithOptionsTemplate), (key) => {
+    const val = optionsWithOptionsTemplate[key];
+
+    if (isArray(val)) {
+      result._template[key] = val[1];
+      result._options[key] = val[0];
+    } else {
+      const tmpResult = transformOptions(val);
+      result._template[key] = tmpResult._template;
+      result._options[key] = tmpResult._options;
+    }
+  });
+  return result;
+}
+
 let environmentInstance;
 const { abs, round } = Math;
 const environmentElmId = 'os-environment';
@@ -533,6 +822,140 @@ const getEnvironment = () => {
   return environmentInstance;
 };
 
+const createLifecycleBase = (defaultOptionsWithTemplate, cacheUpdateInfo, initialOptions, updateFunction) => {
+  const { _template: optionsTemplate, _options: defaultOptions } = transformOptions(defaultOptionsWithTemplate);
+  const options = assignDeep({}, defaultOptions, validateOptions(initialOptions || {}, optionsTemplate, null, true)._validated);
+  const cacheChange = createCache(cacheUpdateInfo);
+  const cacheOptions = createCache(options, true);
+
+  const update = (hints) => {
+    const hasForce = isBoolean(hints._force);
+    const force = hints._force === true;
+    const changedCache = cacheChange(force ? null : hints._changedCache || (hasForce ? null : []), force);
+    const changedOptions = cacheOptions(force ? null : hints._changedOptions, !!hints._changedOptions || force);
+
+    if (changedOptions._anythingChanged || changedCache._anythingChanged) {
+      updateFunction(changedOptions, changedCache);
+    }
+  };
+
+  update({
+    _force: true,
+  });
+  return {
+    _options(newOptions) {
+      if (newOptions) {
+        const { _validated: changedOptions } = validateOptions(newOptions, optionsTemplate, options, true);
+        assignDeep(options, changedOptions);
+        update({
+          _changedOptions: keys(changedOptions),
+        });
+      }
+
+      return options;
+    },
+
+    _update: (force) => {
+      update({
+        _force: !!force,
+      });
+    },
+    _updateCache: (cachePropsToUpdate) => {
+      update({
+        _changedCache: cachePropsToUpdate,
+      });
+    },
+  };
+};
+
+const overflowBehaviorAllowedValues = 'visible-hidden visible-scroll scroll hidden';
+const cssMarginEnd = cssProperty('margin-inline-end');
+const cssBorderEnd = cssProperty('border-inline-end');
+const createStructureLifecycle = (target, initialOptions) => {
+  const { host, viewport, content } = target;
+  const destructFns = [];
+  const env = getEnvironment();
+  const scrollbarsOverlaid = env._nativeScrollbarIsOverlaid;
+  const supportsScrollbarStyling = env._nativeScrollbarStyling;
+  const supportFlexboxGlue = env._flexboxGlue;
+  const directionObserverObsolete = (cssMarginEnd && cssBorderEnd) || supportsScrollbarStyling || scrollbarsOverlaid.y;
+  const { _options, _update, _updateCache } = createLifecycleBase(
+    {
+      paddingAbsolute: [false, optionsTemplateTypes.boolean],
+      overflowBehavior: {
+        x: ['scroll', overflowBehaviorAllowedValues],
+        y: ['scroll', overflowBehaviorAllowedValues],
+      },
+    },
+    {
+      padding: [() => topRightBottomLeft(host, 'padding'), equalTRBL],
+    },
+    initialOptions,
+    (options, cache) => {
+      const { _value: paddingAbsolute, _changed: paddingAbsoluteChanged } = options.paddingAbsolute;
+      const { _value: padding, _changed: paddingChanged } = cache.padding;
+
+      if (paddingAbsoluteChanged || paddingChanged) {
+        const paddingStyle = {
+          t: 0,
+          r: 0,
+          b: 0,
+          l: 0,
+        };
+
+        if (!paddingAbsolute) {
+          paddingStyle.t = -padding.t;
+          paddingStyle.r = -(padding.r + padding.l);
+          paddingStyle.b = -(padding.b + padding.t);
+          paddingStyle.l = -padding.l;
+        }
+
+        if (!supportsScrollbarStyling) {
+          paddingStyle.r -= env._nativeScrollbarSize.y;
+          paddingStyle.b -= env._nativeScrollbarSize.x;
+        }
+
+        style(viewport, {
+          top: paddingStyle.t,
+          left: paddingStyle.l,
+          'margin-right': paddingStyle.r,
+          'margin-bottom': paddingStyle.b,
+        });
+      }
+
+      console.log(options);
+      console.log(cache);
+    }
+  );
+
+  const onSizeChanged = () => {
+    _updateCache('padding');
+  };
+
+  const onTrinsicChanged = (widthIntrinsic, heightIntrinsic) => {
+    if (heightIntrinsic) {
+      style(content, {
+        height: 'auto',
+      });
+    } else {
+      style(content, {
+        height: '100%',
+      });
+    }
+  };
+
+  return {
+    _options,
+    _update,
+    _onSizeChanged: onSizeChanged,
+    _onTrinsicChanged: onTrinsicChanged,
+
+    _destruct() {
+      runEach(destructFns);
+    },
+  };
+};
+
 const animationStartEventName = 'animationstart';
 const scrollEventName = 'scroll';
 const scrollAmount = 3333333;
@@ -633,7 +1056,7 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
       height: scrollAmount,
     });
     reset();
-    appearCallback = appear ? onScroll : reset;
+    appearCallback = appear ? () => onScroll() : reset;
   }
 
   if (direction) {
@@ -729,11 +1152,74 @@ const createTrinsicObserver = (target, onTrinsicChangedCallback) => {
   };
 };
 
+const classNameHost = 'os-host';
+const classNameViewport = 'os-viewport';
+const classNameContent = 'os-content';
+
+const normalizeTarget = (target) => {
+  if (isHTMLElement(target)) {
+    const isTextarea = is(target, 'textarea');
+
+    const _host = isTextarea ? createDiv() : target;
+
+    const _viewport = createDiv(classNameViewport);
+
+    const _content = createDiv(classNameContent);
+
+    appendChildren(_viewport, _content);
+    appendChildren(_content, contents(target));
+    appendChildren(target, _viewport);
+    addClass(_host, classNameHost);
+    return {
+      target,
+      host: _host,
+      viewport: _viewport,
+      content: _content,
+    };
+  }
+
+  const { host, viewport, content } = target;
+  addClass(host, classNameHost);
+  addClass(viewport, classNameViewport);
+  addClass(content, classNameContent);
+  return target;
+};
+
+const OverlayScrollbars = (target, options, extensions) => {
+  const osTarget = normalizeTarget(target);
+  const lifecycles = [];
+  const { host } = osTarget;
+  lifecycles.push(createStructureLifecycle(osTarget));
+
+  const onSizeChanged = (direction) => {
+    if (direction) {
+      each(lifecycles, (lifecycle) => {
+        lifecycle._onDirectionChanged && lifecycle._onDirectionChanged(direction);
+      });
+    } else {
+      each(lifecycles, (lifecycle) => {
+        lifecycle._onSizeChanged && lifecycle._onSizeChanged();
+      });
+    }
+  };
+
+  const onTrinsicChanged = (widthIntrinsic, heightIntrinsic) => {
+    each(lifecycles, (lifecycle) => {
+      lifecycle._onTrinsicChanged && lifecycle._onTrinsicChanged(widthIntrinsic, heightIntrinsic);
+    });
+  };
+
+  createSizeObserver(host, onSizeChanged, {
+    _appear: true,
+    _direction: true,
+  });
+  createTrinsicObserver(host, onTrinsicChanged);
+};
+
 var index = () => {
   return [
     getEnvironment(),
-    createSizeObserver(document.body, () => {}),
-    createTrinsicObserver(document.body, () => {}),
+    OverlayScrollbars(document.body),
     createDOM(
       '\
     <div class="os-host">\

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -7,25 +7,71 @@
 })(this, function () {
   'use strict';
 
+  var type = function type(obj) {
+    if (obj === undefined) return '' + obj;
+    if (obj === null) return '' + obj;
+    return Object.prototype.toString
+      .call(obj)
+      .replace(/^\[object (.+)\]$/, '$1')
+      .toLowerCase();
+  };
   function isNumber(obj) {
     return typeof obj === 'number';
   }
   function isString(obj) {
     return typeof obj === 'string';
   }
+  function isBoolean(obj) {
+    return typeof obj === 'boolean';
+  }
   function isFunction(obj) {
     return typeof obj === 'function';
   }
   function isUndefined(obj) {
     return obj === undefined;
   }
+  function isNull(obj) {
+    return obj === null;
+  }
   function isArray(obj) {
     return Array.isArray(obj);
   }
+  function isObject(obj) {
+    return typeof obj === 'object' && !isArray(obj) && !isNull(obj);
+  }
   function isArrayLike(obj) {
     var length = !!obj && obj.length;
     return isArray(obj) || (!isFunction(obj) && isNumber(length) && length > -1 && length % 1 == 0);
   }
+  function isPlainObject(obj) {
+    if (!obj || !isObject(obj) || type(obj) !== 'object') return false;
+    var key;
+    var proto = 'prototype';
+    var hasOwnProperty = Object[proto].hasOwnProperty;
+    var hasOwnConstructor = hasOwnProperty.call(obj, 'constructor');
+    var hasIsPrototypeOf = obj.constructor && obj.constructor[proto] && hasOwnProperty.call(obj.constructor[proto], 'isPrototypeOf');
+
+    if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
+      return false;
+    }
+
+    for (key in obj) {
+    }
+
+    return isUndefined(key) || hasOwnProperty.call(obj, key);
+  }
+  function isHTMLElement(obj) {
+    var instaceOfRightHandSide = window.HTMLElement;
+    var doInstanceOf = isObject(instaceOfRightHandSide) || isFunction(instaceOfRightHandSide);
+    return !!(doInstanceOf ? obj instanceof instaceOfRightHandSide : obj && isObject(obj) && obj.nodeType === 1 && isString(obj.nodeName));
+  }
+  function isEmptyObject(obj) {
+    for (var name in obj) {
+      return false;
+    }
+
+    return true;
+  }
 
   function getSetProp(topLeft, fallback, elm, value) {
     if (isUndefined(value)) {
@@ -34,6 +80,14 @@
 
     elm && (elm[topLeft] = value);
   }
+
+  function attr(elm, attrName, value) {
+    if (isUndefined(value)) {
+      return elm ? elm.getAttribute(attrName) : null;
+    }
+
+    elm && elm.setAttribute(attrName, value);
+  }
   var removeAttr = function removeAttr(elm, attrName) {
     elm == null ? void 0 : elm.removeAttribute(attrName);
   };
@@ -106,6 +160,17 @@
     }
   };
 
+  var matches = function matches(elm, selector) {
+    if (elm) {
+      var fn = Element.prototype.matches || Element.prototype.msMatchesSelector;
+      return fn.call(elm, selector);
+    }
+
+    return false;
+  };
+  var is = function is(elm, selector) {
+    return matches(elm, selector);
+  };
   var contents = function contents(elm) {
     return elm ? from(elm.childNodes) : [];
   };
@@ -165,8 +230,14 @@
     }
   };
 
-  var createDiv = function createDiv() {
-    return document.createElement('div');
+  var createDiv = function createDiv(classNames) {
+    var div = document.createElement('div');
+
+    if (classNames) {
+      attr(div, 'class', classNames);
+    }
+
+    return div;
   };
   var createDOM = function createDOM(html) {
     var createdDiv = createDiv();
@@ -280,6 +351,9 @@
   var equalWH = function equalWH(a, b) {
     return equal(a, b, ['w', 'h']);
   };
+  var equalTRBL = function equalTRBL(a, b) {
+    return equal(a, b, ['t', 'r', 'b', 'l']);
+  };
 
   var hasOwnProperty = function hasOwnProperty(obj, prop) {
     return Object.prototype.hasOwnProperty.call(obj, prop);
@@ -287,6 +361,41 @@
   var keys = function keys(obj) {
     return obj ? Object.keys(obj) : [];
   };
+  function assignDeep(target, object1, object2, object3, object4, object5, object6) {
+    var sources = [object1, object2, object3, object4, object5, object6];
+
+    if ((typeof target !== 'object' || isNull(target)) && !isFunction(target)) {
+      target = {};
+    }
+
+    each(sources, function (source) {
+      each(keys(source), function (key) {
+        var copy = source[key];
+
+        if (target === copy) {
+          return true;
+        }
+
+        var copyIsArray = isArray(copy);
+
+        if (copy && (isPlainObject(copy) || copyIsArray)) {
+          var src = target[key];
+          var clone = src;
+
+          if (copyIsArray && !isArray(src)) {
+            clone = [];
+          } else if (!copyIsArray && !isPlainObject(src)) {
+            clone = {};
+          }
+
+          target[key] = assignDeep(clone, copy);
+        } else {
+          target[key] = copy;
+        }
+      });
+    });
+    return target;
+  }
 
   var cssNumber = {
     animationiterationcount: 1,
@@ -304,6 +413,11 @@
     zoom: 1,
   };
 
+  var parseToZeroOrNumber = function parseToZeroOrNumber(value, toFloat) {
+    var num = toFloat ? parseFloat(value) : parseInt(value, 10);
+    return Number.isNaN(num) ? 0 : num;
+  };
+
   var adaptCSSVal = function adaptCSSVal(prop, val) {
     return !cssNumber[prop.toLowerCase()] && isNumber(val) ? val + 'px' : val;
   };
@@ -344,6 +458,20 @@
       return setCSSVal(elm, key, styles[key]);
     });
   }
+  var topRightBottomLeft = function topRightBottomLeft(elm, property) {
+    var finalProp = property || '';
+    var top = finalProp + '-top';
+    var right = finalProp + '-right';
+    var bottom = finalProp + '-bottom';
+    var left = finalProp + '-left';
+    var result = style(elm, [top, right, bottom, left]);
+    return {
+      t: parseToZeroOrNumber(result[top]),
+      r: parseToZeroOrNumber(result[right]),
+      b: parseToZeroOrNumber(result[bottom]),
+      l: parseToZeroOrNumber(result[left]),
+    };
+  };
 
   var zeroObj$1 = {
     x: 0,
@@ -359,11 +487,82 @@
       : zeroObj$1;
   };
 
+  function createCache(cacheUpdateInfo, isReference) {
+    var cache = {};
+    var allProps = keys(cacheUpdateInfo);
+    each(allProps, function (prop) {
+      cache[prop] = {
+        _changed: false,
+        _value: isReference ? cacheUpdateInfo[prop] : undefined,
+      };
+    });
+
+    var updateCacheProp = function updateCacheProp(prop, value, equal) {
+      var curr = cache[prop]._value;
+      cache[prop]._value = value;
+      cache[prop]._previous = curr;
+      cache[prop]._changed = equal ? !equal(curr, value) : curr !== value;
+    };
+
+    var flush = function flush(props, force) {
+      var result = assignDeep({}, cache, {
+        _anythingChanged: false,
+      });
+      each(props, function (prop) {
+        var changed = force || cache[prop]._changed;
+        result._anythingChanged = result._anythingChanged || changed;
+        result[prop]._changed = changed;
+        cache[prop]._changed = false;
+      });
+      return result;
+    };
+
+    return function (propsToUpdate, force) {
+      var finalPropsToUpdate = (isString(propsToUpdate) ? [propsToUpdate] : propsToUpdate) || allProps;
+      each(finalPropsToUpdate, function (prop) {
+        var cacheVal = cache[prop];
+        var curr = cacheUpdateInfo[prop];
+        var arr = isReference ? false : isArray(curr);
+        var value = arr ? curr[0] : curr;
+        var equal = arr ? curr[1] : null;
+        updateCacheProp(prop, isReference ? value : value(cacheVal._value, cacheVal._previous), equal);
+      });
+      return flush(finalPropsToUpdate, force);
+    };
+  }
+
   var firstLetterToUpper = function firstLetterToUpper(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
   };
+
+  var getDummyStyle = function getDummyStyle() {
+    return createDiv().style;
+  };
+
+  var cssPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
   var jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
   var jsCache = {};
+  var cssCache = {};
+  var cssProperty = function cssProperty(name) {
+    var result = cssCache[name];
+
+    if (hasOwnProperty(cssCache, name)) {
+      return result;
+    }
+
+    var uppercasedName = firstLetterToUpper(name);
+    var elmStyle = getDummyStyle();
+    each(cssPrefixes, function (prefix) {
+      var prefixWithoutDashes = prefix.replace(/-/g, '');
+      var resultPossibilities = [name, prefix + name, prefixWithoutDashes + uppercasedName, firstLetterToUpper(prefixWithoutDashes) + uppercasedName];
+      result = resultPossibilities.find(function (resultPossibility) {
+        return elmStyle[resultPossibility] !== undefined;
+      });
+      return !result;
+    });
+    cssCache[name] = result;
+    return result;
+  };
   var jsAPI = function jsAPI(name) {
     var result = jsCache[name] || window[name];
 
@@ -423,12 +622,121 @@
     module.exports = _extends;
   });
 
+  var stringify = JSON.stringify;
   var templateTypePrefixSuffix = ['__TPL_', '_TYPE__'];
   var optionsTemplateTypes = ['boolean', 'number', 'string', 'array', 'object', 'function', 'null'].reduce(function (result, item) {
     result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];
     return result;
   }, {});
 
+  var validateRecursive = function validateRecursive(options, template, optionsDiff, doWriteErrors, propPath) {
+    var validatedOptions = {};
+
+    var optionsCopy = _extends_1({}, options);
+
+    var props = keys(template).filter(function (prop) {
+      return hasOwnProperty(options, prop);
+    });
+    each(props, function (prop) {
+      var optionsDiffValue = isUndefined(optionsDiff[prop]) ? {} : optionsDiff[prop];
+      var optionsValue = options[prop];
+      var templateValue = template[prop];
+      var templateIsComplex = isPlainObject(templateValue);
+      var propPrefix = propPath ? propPath + '.' : '';
+
+      if (templateIsComplex && isPlainObject(optionsValue)) {
+        var validatedResult = validateRecursive(optionsValue, templateValue, optionsDiffValue, doWriteErrors, propPrefix + prop);
+        validatedOptions[prop] = validatedResult._validated;
+        optionsCopy[prop] = validatedResult._foreign;
+        each([optionsCopy, validatedOptions], function (value) {
+          if (isEmptyObject(value[prop])) {
+            delete value[prop];
+          }
+        });
+      } else if (!templateIsComplex) {
+        var isValid = false;
+        var errorEnumStrings = [];
+        var errorPossibleTypes = [];
+        var optionsValueType = type(optionsValue);
+        var templateValueArr = !isArray(templateValue) ? [templateValue] : templateValue;
+        each(templateValueArr, function (currTemplateType) {
+          var typeString;
+          each(optionsTemplateTypes, function (value, key) {
+            if (value === currTemplateType) {
+              typeString = key;
+            }
+          });
+          var isEnumString = typeString === undefined;
+
+          if (isEnumString && isString(optionsValue)) {
+            var enumStringSplit = currTemplateType.split(' ');
+            isValid = !!enumStringSplit.find(function (possibility) {
+              return possibility === optionsValue;
+            });
+            errorEnumStrings.push.apply(errorEnumStrings, enumStringSplit);
+          } else {
+            isValid = optionsTemplateTypes[optionsValueType] === currTemplateType;
+          }
+
+          errorPossibleTypes.push(isEnumString ? optionsTemplateTypes.string : typeString);
+          return !isValid;
+        });
+
+        if (isValid) {
+          var doStringifyComparison = isArray(optionsValue) || isPlainObject(optionsValue);
+
+          if (doStringifyComparison ? stringify(optionsValue) !== stringify(optionsDiffValue) : optionsValue !== optionsDiffValue) {
+            validatedOptions[prop] = optionsValue;
+          }
+        } else if (doWriteErrors) {
+          console.warn(
+            '' +
+              ('The option "' +
+                propPrefix +
+                prop +
+                "\" wasn't set, because it doesn't accept the type [ " +
+                optionsValueType.toUpperCase() +
+                ' ] with the value of "' +
+                optionsValue +
+                '".\r\n' +
+                ('Accepted types are: [ ' + errorPossibleTypes.join(', ').toUpperCase() + ' ].\r\n')) +
+              (errorEnumStrings.length > 0 ? '\r\nValid strings are: [ ' + errorEnumStrings.join(', ') + ' ].' : '')
+          );
+        }
+
+        delete optionsCopy[prop];
+      }
+    });
+    return {
+      _foreign: optionsCopy,
+      _validated: validatedOptions,
+    };
+  };
+
+  var validateOptions = function validateOptions(options, template, optionsDiff, doWriteErrors) {
+    return validateRecursive(options, template, optionsDiff || {}, doWriteErrors || false);
+  };
+
+  function transformOptions(optionsWithOptionsTemplate) {
+    var result = {
+      _template: {},
+      _options: {},
+    };
+    each(keys(optionsWithOptionsTemplate), function (key) {
+      var val = optionsWithOptionsTemplate[key];
+
+      if (isArray(val)) {
+        result._template[key] = val[1];
+        result._options[key] = val[0];
+      } else {
+        var tmpResult = transformOptions(val);
+        result._template[key] = tmpResult._template;
+        result._options[key] = tmpResult._options;
+      }
+    });
+    return result;
+  }
+
   var environmentInstance;
   var abs = Math.abs,
     round = Math.round;
@@ -585,6 +893,158 @@
     return environmentInstance;
   };
 
+  var createLifecycleBase = function createLifecycleBase(defaultOptionsWithTemplate, cacheUpdateInfo, initialOptions, updateFunction) {
+    var _transformOptions = transformOptions(defaultOptionsWithTemplate),
+      optionsTemplate = _transformOptions._template,
+      defaultOptions = _transformOptions._options;
+
+    var options = assignDeep({}, defaultOptions, validateOptions(initialOptions || {}, optionsTemplate, null, true)._validated);
+    var cacheChange = createCache(cacheUpdateInfo);
+    var cacheOptions = createCache(options, true);
+
+    var update = function update(hints) {
+      var hasForce = isBoolean(hints._force);
+      var force = hints._force === true;
+      var changedCache = cacheChange(force ? null : hints._changedCache || (hasForce ? null : []), force);
+      var changedOptions = cacheOptions(force ? null : hints._changedOptions, !!hints._changedOptions || force);
+
+      if (changedOptions._anythingChanged || changedCache._anythingChanged) {
+        updateFunction(changedOptions, changedCache);
+      }
+    };
+
+    update({
+      _force: true,
+    });
+    return {
+      _options: function _options(newOptions) {
+        if (newOptions) {
+          var _validateOptions = validateOptions(newOptions, optionsTemplate, options, true),
+            changedOptions = _validateOptions._validated;
+
+          assignDeep(options, changedOptions);
+          update({
+            _changedOptions: keys(changedOptions),
+          });
+        }
+
+        return options;
+      },
+      _update: function _update(force) {
+        update({
+          _force: !!force,
+        });
+      },
+      _updateCache: function _updateCache(cachePropsToUpdate) {
+        update({
+          _changedCache: cachePropsToUpdate,
+        });
+      },
+    };
+  };
+
+  var overflowBehaviorAllowedValues = 'visible-hidden visible-scroll scroll hidden';
+  var cssMarginEnd = cssProperty('margin-inline-end');
+  var cssBorderEnd = cssProperty('border-inline-end');
+  var createStructureLifecycle = function createStructureLifecycle(target, initialOptions) {
+    var host = target.host,
+      viewport = target.viewport,
+      content = target.content;
+    var destructFns = [];
+    var env = getEnvironment();
+    var scrollbarsOverlaid = env._nativeScrollbarIsOverlaid;
+    var supportsScrollbarStyling = env._nativeScrollbarStyling;
+    var supportFlexboxGlue = env._flexboxGlue;
+    var directionObserverObsolete = (cssMarginEnd && cssBorderEnd) || supportsScrollbarStyling || scrollbarsOverlaid.y;
+
+    var _createLifecycleBase = createLifecycleBase(
+        {
+          paddingAbsolute: [false, optionsTemplateTypes.boolean],
+          overflowBehavior: {
+            x: ['scroll', overflowBehaviorAllowedValues],
+            y: ['scroll', overflowBehaviorAllowedValues],
+          },
+        },
+        {
+          padding: [
+            function () {
+              return topRightBottomLeft(host, 'padding');
+            },
+            equalTRBL,
+          ],
+        },
+        initialOptions,
+        function (options, cache) {
+          var _options$paddingAbsol = options.paddingAbsolute,
+            paddingAbsolute = _options$paddingAbsol._value,
+            paddingAbsoluteChanged = _options$paddingAbsol._changed;
+          var _cache$padding = cache.padding,
+            padding = _cache$padding._value,
+            paddingChanged = _cache$padding._changed;
+
+          if (paddingAbsoluteChanged || paddingChanged) {
+            var paddingStyle = {
+              t: 0,
+              r: 0,
+              b: 0,
+              l: 0,
+            };
+
+            if (!paddingAbsolute) {
+              paddingStyle.t = -padding.t;
+              paddingStyle.r = -(padding.r + padding.l);
+              paddingStyle.b = -(padding.b + padding.t);
+              paddingStyle.l = -padding.l;
+            }
+
+            if (!supportsScrollbarStyling) {
+              paddingStyle.r -= env._nativeScrollbarSize.y;
+              paddingStyle.b -= env._nativeScrollbarSize.x;
+            }
+
+            style(viewport, {
+              top: paddingStyle.t,
+              left: paddingStyle.l,
+              'margin-right': paddingStyle.r,
+              'margin-bottom': paddingStyle.b,
+            });
+          }
+
+          console.log(options);
+          console.log(cache);
+        }
+      ),
+      _options = _createLifecycleBase._options,
+      _update = _createLifecycleBase._update,
+      _updateCache = _createLifecycleBase._updateCache;
+
+    var onSizeChanged = function onSizeChanged() {
+      _updateCache('padding');
+    };
+
+    var onTrinsicChanged = function onTrinsicChanged(widthIntrinsic, heightIntrinsic) {
+      if (heightIntrinsic) {
+        style(content, {
+          height: 'auto',
+        });
+      } else {
+        style(content, {
+          height: '100%',
+        });
+      }
+    };
+
+    return {
+      _options: _options,
+      _update: _update,
+      _onSizeChanged: onSizeChanged,
+      _onTrinsicChanged: onTrinsicChanged,
+      _destruct: function _destruct() {
+        runEach(destructFns);
+      },
+    };
+  };
+
   var animationStartEventName = 'animationstart';
   var scrollEventName = 'scroll';
   var scrollAmount = 3333333;
@@ -703,7 +1163,11 @@
         height: scrollAmount,
       });
       reset();
-      appearCallback = appear ? onScroll : reset;
+      appearCallback = appear
+        ? function () {
+            return onScroll();
+          }
+        : reset;
     }
 
     if (direction) {
@@ -801,11 +1265,76 @@
     };
   };
 
+  var classNameHost = 'os-host';
+  var classNameViewport = 'os-viewport';
+  var classNameContent = 'os-content';
+
+  var normalizeTarget = function normalizeTarget(target) {
+    if (isHTMLElement(target)) {
+      var isTextarea = is(target, 'textarea');
+
+      var _host = isTextarea ? createDiv() : target;
+
+      var _viewport = createDiv(classNameViewport);
+
+      var _content = createDiv(classNameContent);
+
+      appendChildren(_viewport, _content);
+      appendChildren(_content, contents(target));
+      appendChildren(target, _viewport);
+      addClass(_host, classNameHost);
+      return {
+        target: target,
+        host: _host,
+        viewport: _viewport,
+        content: _content,
+      };
+    }
+
+    var host = target.host,
+      viewport = target.viewport,
+      content = target.content;
+    addClass(host, classNameHost);
+    addClass(viewport, classNameViewport);
+    addClass(content, classNameContent);
+    return target;
+  };
+
+  var OverlayScrollbars = function OverlayScrollbars(target, options, extensions) {
+    var osTarget = normalizeTarget(target);
+    var lifecycles = [];
+    var host = osTarget.host;
+    lifecycles.push(createStructureLifecycle(osTarget));
+
+    var onSizeChanged = function onSizeChanged(direction) {
+      if (direction) {
+        each(lifecycles, function (lifecycle) {
+          lifecycle._onDirectionChanged && lifecycle._onDirectionChanged(direction);
+        });
+      } else {
+        each(lifecycles, function (lifecycle) {
+          lifecycle._onSizeChanged && lifecycle._onSizeChanged();
+        });
+      }
+    };
+
+    var onTrinsicChanged = function onTrinsicChanged(widthIntrinsic, heightIntrinsic) {
+      each(lifecycles, function (lifecycle) {
+        lifecycle._onTrinsicChanged && lifecycle._onTrinsicChanged(widthIntrinsic, heightIntrinsic);
+      });
+    };
+
+    createSizeObserver(host, onSizeChanged, {
+      _appear: true,
+      _direction: true,
+    });
+    createTrinsicObserver(host, onTrinsicChanged);
+  };
+
   var index = function () {
     return [
       getEnvironment(),
-      createSizeObserver(document.body, function () {}),
-      createTrinsicObserver(document.body, function () {}),
+      OverlayScrollbars(document.body),
       createDOM(
         '\
     <div class="os-host">\

packages/overlayscrollbars/src/index.ts

@@ -1,7 +1,6 @@
 import { createDOM } from 'support/dom';
 import { getEnvironment } from 'environment';
-import { createSizeObserver } from 'observers/sizeObserver';
-import { createTrinsicObserver } from 'observers/trinsicObserver';
+import { OverlayScrollbars } from 'overlayscrollbars/overlayscrollbars';
 
 const abc = {
   a: 1,
@@ -12,8 +11,7 @@ const abc = {
 export default () => {
   return [
     getEnvironment(),
-    createSizeObserver(document.body, () => {}),
-    createTrinsicObserver(document.body, () => {}),
+    OverlayScrollbars(document.body),
     createDOM(
       '\
     <div class="os-host">\

packages/overlayscrollbars/src/lifecycles/lifecycleBase.ts

@@ -45,7 +45,7 @@ export const createLifecycleBase = <O, C>(
   defaultOptionsWithTemplate: OptionsWithOptionsTemplate<Required<O>>,
   cacheUpdateInfo: CacheUpdateInfo<C>,
   initialOptions: O | undefined,
-  updateFunction: (changedOptions: Cache<O>, changedCache: Cache<C>) => any
+  updateFunction: (options: Cache<O>, cache: Cache<C>) => any
 ): LifecycleBase<O, C> => {
   const { _template: optionsTemplate, _options: defaultOptions } = transformOptions<Required<O>>(defaultOptionsWithTemplate);
   const options: Required<O> = assignDeep(

packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts

@@ -50,9 +50,9 @@ export const createStructureLifecycle = (
       padding: [() => topRightBottomLeft(host, 'padding'), equalTRBL],
     },
     initialOptions,
-    (changedOptions, changedCache) => {
-      const { _value: paddingAbsolute, _changed: paddingAbsoluteChanged } = changedOptions.paddingAbsolute;
-      const { _value: padding, _changed: paddingChanged } = changedCache.padding;
+    (options, cache) => {
+      const { _value: paddingAbsolute, _changed: paddingAbsoluteChanged } = options.paddingAbsolute;
+      const { _value: padding, _changed: paddingChanged } = cache.padding;
 
       if (paddingAbsoluteChanged || paddingChanged) {
         const paddingStyle: TRBL = {
@@ -77,8 +77,8 @@ export const createStructureLifecycle = (
         style(viewport, { top: paddingStyle.t, left: paddingStyle.l, 'margin-right': paddingStyle.r, 'margin-bottom': paddingStyle.b });
       }
 
-      console.log(changedOptions); // eslint-disable-line
-      console.log(changedCache); // eslint-disable-line
+      console.log(options); // eslint-disable-line
+      console.log(cache); // eslint-disable-line
     }
   );
 

packages/overlayscrollbars/types/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => (import("./environment").Environment | (() => void) | readonly Node[])[];
+declare const _default: () => (void | import("./environment").Environment | readonly Node[])[];
 export default _default;

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

@@ -1,4 +1,4 @@
-import { CacheUpdateInfo, CachePropsToUpdate, CacheUpdated, OptionsWithOptionsTemplate, OptionsValidated } from 'support';
+import { CacheUpdateInfo, CachePropsToUpdate, Cache, OptionsWithOptionsTemplate } from 'support';
 import { PlainObject } from 'typings';
 interface AbstractLifecycle<O extends PlainObject> {
     _options(newOptions?: O): O;
@@ -6,9 +6,12 @@ interface AbstractLifecycle<O extends PlainObject> {
 }
 export interface Lifecycle<T extends PlainObject> extends AbstractLifecycle<T> {
     _destruct(): void;
+    _onSizeChanged?(): void;
+    _onDirectionChanged?(direction: 'ltr' | 'rtl'): void;
+    _onTrinsicChanged?(widthIntrinsic: boolean, heightIntrinsic: boolean): void;
 }
 export interface LifecycleBase<O extends PlainObject, C extends PlainObject> extends AbstractLifecycle<O> {
-    _cacheChange(cachePropsToUpdate?: CachePropsToUpdate<C>): void;
+    _updateCache(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 declare const createLifecycleBase: <O, C>(defaultOptionsWithTemplate: OptionsWithOptionsTemplate<Required<O>>, cacheUpdateInfo: CacheUpdateInfo<C>, initialOptions: O | undefined, updateFunction: (options: Cache<O>, cache: Cache<C>) => any) => LifecycleBase<O, C>;
 export {};

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

@@ -1,3 +1,4 @@
+import { OSTargetObject } from 'typings';
 import { Lifecycle } from 'lifecycles/lifecycleBase';
 export declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
 export interface StructureLifecycleOptions {
@@ -7,4 +8,4 @@ export interface StructureLifecycleOptions {
         y?: OverflowBehavior;
     };
 }
-export declare const createStructureLifecycle: (target: HTMLElement, initialOptions?: StructureLifecycleOptions | undefined) => Lifecycle<StructureLifecycleOptions>;
+export declare const createStructureLifecycle: (target: OSTargetObject, initialOptions?: StructureLifecycleOptions | undefined) => Lifecycle<StructureLifecycleOptions>;

packages/overlayscrollbars/types/overlayscrollbars/OverlayScrollbars.d.ts

@@ -1 +1,3 @@
-export {};
+import { OSTarget } from 'typings';
+declare const OverlayScrollbars: (target: OSTarget, options?: any, extensions?: any) => void;
+export { OverlayScrollbars };

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

@@ -1,12 +1,21 @@
 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 interface CacheEntry<T> {
+    _value?: T;
+    _previous?: T;
+    _changed: boolean;
+}
+export declare type Cache<T> = {
+    [P in keyof T]: CacheEntry<T[P]>;
 };
+export declare type CacheUpdated<T> = Cache<T> & {
+    _anythingChanged: boolean;
+};
+export declare type CachePropsToUpdate<T> = Array<keyof T> | keyof T;
+export declare type CacheUpdate<T> = (propsToUpdate?: CachePropsToUpdate<T> | null, force?: boolean) => CacheUpdated<T>;
 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 declare function createCache<T>(cacheUpdateInfo: CacheUpdateInfo<T>): CacheUpdate<T>;
+export declare function createCache<T>(referenceObj: T, isReference: true): CacheUpdate<T>;
 export {};

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

@@ -1,2 +1,2 @@
-export declare const createDiv: () => HTMLDivElement;
+export declare const createDiv: (classNames?: string | undefined) => HTMLDivElement;
 export declare const createDOM: (html: string) => ReadonlyArray<Node>;

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

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

packages/overlayscrollbars/types/typings.d.ts

@@ -1,3 +1,11 @@
 export declare type PlainObject<T = any> = {
     [name: string]: T;
 };
+export declare type OSTargetElement = HTMLElement | HTMLTextAreaElement;
+export interface OSTargetObject {
+    target: OSTargetElement;
+    host: HTMLElement;
+    viewport: HTMLElement;
+    content: HTMLElement;
+}
+export declare type OSTarget = OSTargetElement | OSTargetObject;