build

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -82,21 +82,21 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): LifecycleUp
 
     if (!_nativeScrollbarStyling) {
       if (scrollX) {
-        viewportStyleObj.marginBottom = `-${scrollbarsHideOffset.x}px`;
+        viewportStyleObj.marginBottom = -scrollbarsHideOffset.x;
 
         contentStyleObj.borderBottom = overlaidX && overlaidHideOffset ? overlaidScrollbarsHideBorderStyle : '';
       }
       if (scrollY) {
         viewportStyleObj.maxWidth = `calc(100% + ${scrollbarsHideOffset.y}px)`;
-        viewportStyleObj[horizontalMarginKey] = `-${scrollbarsHideOffset.y}px`;
+        viewportStyleObj[horizontalMarginKey] = -scrollbarsHideOffset.y;
 
         contentStyleObj[horizontalBorderKey] = overlaidY && overlaidHideOffset ? overlaidScrollbarsHideBorderStyle : '';
       }
 
       if (_contentArrange) {
         style(_contentArrange, {
-          width: scrollY && !showNativeOverlaidScrollbars ? `${overlaidHideOffset + contentScrollSize.w}px` : '',
-          height: scrollX && !showNativeOverlaidScrollbars ? `${overlaidHideOffset + contentScrollSize.h}px` : '',
+          width: scrollY && !showNativeOverlaidScrollbars ? overlaidHideOffset + contentScrollSize.w : '',
+          height: scrollX && !showNativeOverlaidScrollbars ? overlaidHideOffset + contentScrollSize.h : '',
         });
       }
     }
@@ -120,7 +120,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): LifecycleUp
 
     if (heightIntrinsic) {
       style(_viewport, {
-        maxHeight: `${_host.clientHeight + (scrollX ? scrollbarsHideOffsetX : 0)}px`,
+        maxHeight: _host.clientHeight + (scrollX ? scrollbarsHideOffsetX : 0),
       });
     }
 

packages/overlayscrollbars/types/classnames.d.ts

@@ -5,6 +5,7 @@ export declare const classNameHost = "os-host";
 export declare const classNamePadding = "os-padding";
 export declare const classNameViewport = "os-viewport";
 export declare const classNameContent = "os-content";
+export declare const classNameContentArrange: string;
 export declare const classNameViewportScrollbarStyling: string;
 export declare const classNameSizeObserver = "os-size-observer";
 export declare const classNameSizeObserverAppear: string;

packages/overlayscrollbars/types/index.d.ts

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

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

@@ -1,24 +0,0 @@
-import { Cache, OptionsWithOptionsTemplate } from 'support';
-import { PlainObject } from 'typings';
-export interface LifecycleBase<O extends PlainObject> {
-    _options(newOptions?: O): O;
-    _update(force?: boolean): void;
-}
-export interface Lifecycle<T extends PlainObject> extends LifecycleBase<T> {
-    _destruct(): void;
-    _onSizeChanged?(): void;
-    _onDirectionChanged?(directionCache: Cache<boolean>): void;
-    _onTrinsicChanged?(widthIntrinsic: boolean, heightIntrinsicCache: Cache<boolean>): void;
-}
-export interface LifecycleOptionInfo<T> {
-    _value: T;
-    _changed: boolean;
-}
-export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
-/**
- * Creates a object which can be seen as the base of a lifecycle because it provides all the tools to manage a lifecycle and its options, cache and base functions.
- * @param defaultOptionsWithTemplate A object which describes the options and the default options of the lifecycle.
- * @param initialOptions The initialOptions for the lifecylce. (Can be undefined)
- * @param updateFunction The update function where cache and options updates are handled. Has two arguments which are the changedOptions and the changedCache objects.
- */
-export declare const createLifecycleBase: <O>(defaultOptionsWithTemplate: OptionsWithOptionsTemplate<Required<O>>, initialOptions: O | undefined, updateFunction: (force: boolean, checkOption: LifecycleCheckOption) => any) => LifecycleBase<O>;

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

@@ -0,0 +1,12 @@
+import { OptionsValidated } from 'support';
+import { Options } from 'options';
+import { StructureSetup } from 'setups/structureSetup';
+export interface LifecycleHubInstance {
+    _update(changedOptions?: OptionsValidated<Options> | null, force?: boolean): void;
+    _destroy(): void;
+}
+export interface LifecycleHub {
+    _options: Options;
+    _structureSetup: StructureSetup;
+}
+export declare const createLifecycleHub: (options: Options, structureSetup: StructureSetup) => LifecycleHubInstance;

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

@@ -0,0 +1,24 @@
+import { CacheValues, OptionsValidated } from 'support';
+import { Options } from 'options';
+import { LifecycleHub } from 'lifecycles/lifecycleHub';
+export interface LifecycleAdaptiveUpdateHints {
+    _sizeChanged: boolean;
+    _hostMutation: boolean;
+    _contentMutation: boolean;
+}
+export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
+    _directionIsRTL: CacheValues<boolean>;
+    _heightIntrinsic: CacheValues<boolean>;
+}
+export declare type LifecycleUpdateFunction = (updateHints: LifecycleUpdateHints, changedOptions?: OptionsValidated<Options> | null, force?: boolean) => Partial<LifecycleAdaptiveUpdateHints>;
+export interface LifecycleOptionInfo<T> {
+    readonly _value: T;
+    _changed: boolean;
+}
+export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
+/**
+ * Creates a update function for a lifecycle.
+ * @param lifecycleHub The LifecycleHub which is managing this lifecylce.
+ * @param updateFunction The update function where cache and options updates are handled. Has two arguments which are the changedOptions and the changedCache objects.
+ */
+export declare const createLifecycleUpdateFunction: (lifecycleHub: LifecycleHub, updateFunction: (force: boolean, updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption) => Partial<LifecycleAdaptiveUpdateHints> | void) => LifecycleUpdateFunction;

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

@@ -0,0 +1,3 @@
+import { LifecycleUpdateFunction } from 'lifecycles/lifecycleUpdateFunction';
+import { LifecycleHub } from 'lifecycles/lifecycleHub';
+export declare const createOverflowLifecycle: (lifecycleHub: LifecycleHub) => LifecycleUpdateFunction;

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

@@ -1,11 +1,2 @@
-import { PreparedOSTargetObject } from 'setups/structureSetup';
-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: PreparedOSTargetObject, initialOptions?: StructureLifecycleOptions | undefined) => Lifecycle<StructureLifecycleOptions>;
+import { LifecycleHub } from 'lifecycles/lifecycleHub';
+export declare const createStructureLifecycle: (lifecycleHub: LifecycleHub) => any;

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

@@ -1,6 +1,12 @@
-import { Cache } from 'support';
+import { CacheValues } from 'support';
 export declare type SizeObserverOptions = {
     _direction?: boolean;
     _appear?: boolean;
 };
-export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (directionIsRTLCache?: Cache<boolean> | undefined) => any, options?: SizeObserverOptions | undefined) => (() => void);
+export interface SizeObserver {
+    _destroy(): void;
+    _getCurrentCacheValues(force?: boolean): {
+        _directionIsRTL: CacheValues<boolean>;
+    };
+}
+export declare const createSizeObserver: (target: HTMLElement, onSizeChangedCallback: (directionIsRTLCache?: CacheValues<boolean> | undefined) => any, options?: SizeObserverOptions | undefined) => SizeObserver;

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

@@ -1,2 +1,8 @@
-import { Cache } from 'support';
-export declare const createTrinsicObserver: (target: HTMLElement, onTrinsicChangedCallback: (widthIntrinsic: boolean, heightIntrinsicCache: Cache<boolean>) => any) => (() => void);
+import { CacheValues } from 'support';
+export interface TrinsicObserver {
+    _destroy(): void;
+    _getCurrentCacheValues(force?: boolean): {
+        _heightIntrinsic: CacheValues<boolean>;
+    };
+}
+export declare const createTrinsicObserver: (target: HTMLElement, onTrinsicChangedCallback: (heightIntrinsic: CacheValues<boolean>) => any) => TrinsicObserver;

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

@@ -12,20 +12,15 @@ export declare type DirectionChangedCallback = (this: any, args?: DirectionChang
 export declare type SizeChangedCallback = (this: any, args?: SizeChangedArgs) => void;
 export declare type UpdatedCallback = (this: any, args?: UpdatedArgs) => void;
 export interface Options {
-    className?: string | null;
     resize?: ResizeBehavior;
-    sizeAutoCapable?: boolean;
-    clipAlways?: boolean;
-    normalizeRTL?: boolean;
     paddingAbsolute?: boolean;
-    autoUpdate?: boolean | null;
-    autoUpdateInterval?: number;
-    updateOnLoad?: string | ReadonlyArray<string> | null;
-    nativeScrollbarsOverlaid?: {
-        showNativeScrollbars?: boolean;
-        initialize?: boolean;
+    updating?: {
+        elementEvents?: ReadonlyArray<[string, string]> | null;
+        contentMutationDebounce?: number;
+        hostMutationDebounce?: number;
+        resizeDebounce?: number;
     };
-    overflowBehavior?: {
+    overflow?: {
         x?: OverflowBehavior;
         y?: OverflowBehavior;
     };
@@ -33,29 +28,18 @@ export interface Options {
         visibility?: VisibilityBehavior;
         autoHide?: AutoHideBehavior;
         autoHideDelay?: number;
-        dragScrolling?: boolean;
-        clickScrolling?: boolean;
-        touchSupport?: boolean;
-        snapHandle?: boolean;
+        dragScroll?: boolean;
+        clickScroll?: boolean;
+        touch?: boolean;
     };
     textarea?: {
         dynWidth?: boolean;
         dynHeight?: boolean;
         inheritedAttrs?: string | ReadonlyArray<string> | null;
     };
-    callbacks?: {
-        onInitialized?: BasicEventCallback | null;
-        onInitializationWithdrawn?: BasicEventCallback | null;
-        onDestroyed?: BasicEventCallback | null;
-        onScrollStart?: ScrollEventCallback | null;
-        onScroll?: ScrollEventCallback | null;
-        onScrollStop?: ScrollEventCallback | null;
-        onOverflowChanged?: OverflowChangedCallback | null;
-        onOverflowAmountChanged?: OverflowAmountChangedCallback | null;
-        onDirectionChanged?: DirectionChangedCallback | null;
-        onContentSizeChanged?: SizeChangedCallback | null;
-        onHostSizeChanged?: SizeChangedCallback | null;
-        onUpdated?: UpdatedCallback | null;
+    nativeScrollbarsOverlaid?: {
+        show?: boolean;
+        initialize?: boolean;
     };
 }
 export interface OverflowChangedArgs {

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

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

packages/overlayscrollbars/types/setups/structureSetup.d.ts

@@ -9,6 +9,7 @@ export interface OSTargetContext {
 }
 export interface PreparedOSTargetObject extends Required<InternalVersionOf<OSTargetObject>> {
     _host: HTMLElement;
+    _contentArrange: HTMLElement | null;
 }
 export interface StructureSetup {
     _targetObj: PreparedOSTargetObject;

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

@@ -1,14 +1,18 @@
-export interface Cache<T> {
+export interface CacheValues<T> {
     readonly _value?: T;
     readonly _previous?: T;
-    readonly _changed: boolean;
+    _changed: boolean;
 }
 export interface CacheOptions<T> {
     _equal?: EqualCachePropFunction<T>;
     _initialValue?: T;
     _alwaysUpdateValues?: boolean;
 }
-export declare type CacheUpdate<T, C> = undefined extends C ? (force?: boolean | 0, context?: C) => Cache<T> : (force: boolean | 0, context: C) => Cache<T>;
+export interface Cache<T, C = undefined> {
+    _current: (force?: boolean) => CacheValues<T>;
+    _update: CacheUpdate<T, C>;
+}
+export declare type CacheUpdate<T, C> = undefined extends C ? (force?: boolean | 0, context?: C) => CacheValues<T> : (force: boolean | 0, context: C) => CacheValues<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>;
+export declare const createCache: <T, C = undefined>(update: UpdateCachePropFunction<T, C>, options?: CacheOptions<T> | undefined) => Cache<T, C>;

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

@@ -10,7 +10,7 @@ export interface OnOptions {
  * @param listener The listener which shall be removed.
  * @param capture The options of the removed listener.
  */
-export declare const off: (target: EventTarget, eventNames: string, listener: EventListener, capture?: boolean | undefined) => void;
+export declare const off: <T extends Event = Event>(target: EventTarget, eventNames: string, listener: (event: T) => any, capture?: boolean | undefined) => void;
 /**
  * Adds the passed event listener for the passed eventnames with the passed options.
  * @param target The element to which the listener shall be added.
@@ -18,7 +18,7 @@ export declare const off: (target: EventTarget, eventNames: string, listener: Ev
  * @param listener The listener which is called on the eventnames.
  * @param options The options of the added listener.
  */
-export declare const on: (target: EventTarget, eventNames: string, listener: EventListener, options?: OnOptions | undefined) => (() => void);
+export declare const on: <T extends Event = Event>(target: EventTarget, eventNames: string, listener: (event: T) => any, options?: OnOptions | undefined) => (() => void);
 /**
  * Shorthand for the stopPropagation event Method.
  * @param evt The event of which the stopPropagation method shall be called.

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

@@ -24,7 +24,7 @@ declare type OptionsTemplateTypeMap = {
     __TPL_boolean_TYPE__: boolean;
     __TPL_number_TYPE__: number;
     __TPL_string_TYPE__: string;
-    __TPL_array_TYPE__: Array<any>;
+    __TPL_array_TYPE__: Array<any> | ReadonlyArray<any>;
     __TPL_function_TYPE__: Func;
     __TPL_null_TYPE__: null;
     __TPL_object_TYPE__: Record<string, unknown>;