build

packages/overlayscrollbars/src/index.ts

@@ -1,40 +1,6 @@
-import { createDOM } from 'support/dom';
 import { getEnvironment } from 'environment';
 import { OverlayScrollbars } from 'overlayscrollbars/overlayscrollbars';
 
-const abc = {
-  a: 1,
-  b: 1,
-  c: 1,
-};
-
 export default () => {
-  return [
+  return [getEnvironment(), OverlayScrollbars(document.body)];
-    getEnvironment(),
-    OverlayScrollbars(document.body),
-    createDOM(
-      '\
-    <div class="os-host">\
-        <div class="os-resize-observer-host"></div>\
-        <div class="os-padding">\
-            <div class="os-viewport">\
-                <div class="os-content">\
-                    fdfhdfgh\
-                </div>\
-            </div>\
-        </div>\
-        <div class="os-scrollbar os-scrollbar-horizontal">\
-            <div class="os-scrollbar-track">\
-                <div class="os-scrollbar-handle"></div>\
-            </div>\
-        </div>\
-        <div class="os-scrollbar os-scrollbar-vertical">\
-            <div class="os-scrollbar-track">\
-                <div class="os-scrollbar-handle"></div>\
-            </div>\
-        </div>\
-        <div class="os-scrollbar-corner"></div>\
-    </div>'
-    ),
-  ];
 };

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -144,7 +144,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     viewportStyleObj: StyleObject
   ): ViewportOverflowState => {
     const setPartialStylePerAxis = (horizontal: boolean, overflowAmount: number, behavior: OverflowBehavior, styleObj: StyleObject) => {
-      const overflowKey = horizontal ? 'overflowX' : 'overflowY';
+      const overflowKey: keyof StyleObject = horizontal ? 'overflowX' : 'overflowY';
       const behaviorIsScroll = behavior === 'scroll';
       const behaviorIsVisibleScroll = behavior === 'visible-scroll';
       const hideOverflow = behaviorIsScroll || behavior === 'hidden';
@@ -184,7 +184,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
       const { _scrollbarsHideOffset } = viewportOverflowState;
       const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
       const viewportPaddingStyle = _getViewportPaddingStyle();
-      const viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
+      const viewportArrangeHorizontalPaddingKey: keyof StyleObject = directionIsRTL ? 'paddingRight' : 'paddingLeft';
       const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey] as number;
       const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop as number;
       const arrangeSize = {
@@ -238,10 +238,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
     const { x: scrollX, y: scrollY } = _overflowScroll;
     const paddingStyle = _getViewportPaddingStyle();
-    const horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
+    const horizontalMarginKey: keyof StyleObject = directionIsRTL ? 'marginLeft' : 'marginRight';
+    const viewportHorizontalPaddingKey: keyof StyleObject = directionIsRTL ? 'paddingLeft' : 'paddingRight';
     const horizontalMarginValue = paddingStyle[horizontalMarginKey] as number;
     const verticalMarginValue = paddingStyle.marginBottom as number;
-    const viewportHorizontalPaddingKey = directionIsRTL ? 'paddingLeft' : 'paddingRight';
     const horizontalPaddingValue = paddingStyle[viewportHorizontalPaddingKey] as number;
     const verticalPaddingValue = paddingStyle.paddingBottom as number;
 
@@ -376,13 +376,13 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
       adjustFlexboxGlue
     ) {
       const viewportStyle: StyleObject = {
+        marginTop: 0,
+        marginRight: 0,
+        marginBottom: 0,
+        marginLeft: 0,
+        maxWidth: '',
         overflowY: '',
         overflowX: '',
-        marginTop: '',
-        marginRight: '',
-        marginBottom: '',
-        marginLeft: '',
-        maxWidth: '',
       };
 
       const viewportOverflowState = setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount!, overflow, viewportStyle);

packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts

@@ -29,44 +29,37 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
     const paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
 
     if (paddingStyleChanged) {
-      // if there is no padding element and no scrollbar styling padding absolute isn't supported
       const { _value: padding } = updatePaddingCache(force);
+      // if there is no padding element and no scrollbar styling padding absolute isn't supported
       const paddingRelative = !paddingAbsolute || (!_padding && !_nativeScrollbarStyling);
       const paddingHorizontal = padding!.r + padding!.l;
       const paddingVertical = padding!.t + padding!.b;
+
       const paddingStyle: StyleObject = {
-        marginTop: '',
+        marginTop: 0,
-        marginRight: '',
+        marginRight: 0,
-        marginBottom: '',
+        marginBottom: paddingRelative ? -paddingVertical : 0,
-        marginLeft: '',
+        marginLeft: 0,
-        top: '',
+        top: paddingRelative ? -padding!.t : 0,
-        right: '',
+        right: 0,
-        bottom: '',
+        bottom: 0,
-        left: '',
+        left: 0,
-        maxWidth: '',
+        maxWidth: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
       };
       const viewportStyle: StyleObject = {
-        paddingTop: '',
+        paddingTop: paddingRelative ? padding!.t : 0,
-        paddingRight: '',
+        paddingRight: paddingRelative ? padding!.r : 0,
-        paddingBottom: '',
+        paddingBottom: paddingRelative ? padding!.b : 0,
-        paddingLeft: '',
+        paddingLeft: paddingRelative ? padding!.l : 0,
       };
 
       if (paddingRelative) {
-        const horizontalPositionKey = directionIsRTL ? 'right' : 'left';
+        const horizontalPositionKey: keyof StyleObject = directionIsRTL ? 'right' : 'left';
+        const horizontalMarginKey: keyof StyleObject = directionIsRTL ? 'marginLeft' : 'marginRight';
         const horizontalPositionValue = directionIsRTL ? padding!.r : padding!.l;
-        const horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
 
-        paddingStyle.top = -padding!.t;
         paddingStyle[horizontalPositionKey] = -horizontalPositionValue;
-        paddingStyle.marginBottom = -paddingVertical;
         paddingStyle[horizontalMarginKey] = -paddingHorizontal;
-        paddingStyle.maxWidth = `calc(100% + ${paddingHorizontal}px)`;
-
-        viewportStyle.paddingTop = padding!.t;
-        viewportStyle.paddingRight = padding!.r;
-        viewportStyle.paddingBottom = padding!.b;
-        viewportStyle.paddingLeft = padding!.l;
       }
 
       // if there is no padding element apply the style to the viewport element instead

packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts

@@ -4,7 +4,7 @@ import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, cl
 import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars';
 
 const targetElm = document.querySelector('#target') as HTMLElement;
-window.os = OverlayScrollbars({ target: targetElm, padding: null });
+window.os = OverlayScrollbars({ target: targetElm });
 
 export const resize = (element: HTMLElement) => {
   const strMouseTouchDownEvent = 'mousedown touchstart';

packages/overlayscrollbars/types/classnames.d.ts

@@ -4,8 +4,8 @@ export declare const classNameEnvironmentFlexboxGlueMax: string;
 export declare const classNameHost = "os-host";
 export declare const classNamePadding = "os-padding";
 export declare const classNameViewport = "os-viewport";
+export declare const classNameViewportArrange: string;
 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/environment/environment.d.ts

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

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

@@ -1,6 +1,27 @@
-import { OptionsValidated } from 'support';
+import { XY, TRBL, CacheValues, OptionsValidated } from 'support';
 import { Options } from 'options';
 import { StructureSetup } from 'setups/structureSetup';
+import { StyleObject } from 'typings';
+export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
+export interface PaddingInfo {
+    _absolute: boolean;
+    _padding: TRBL;
+}
+export interface LifecycleOptionInfo<T> {
+    readonly _value: T;
+    _changed: boolean;
+}
+export interface LifecycleAdaptiveUpdateHints {
+    _sizeChanged: boolean;
+    _hostMutation: boolean;
+    _contentMutation: boolean;
+    _paddingStyleChanged: boolean;
+}
+export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
+    _directionIsRTL: CacheValues<boolean>;
+    _heightIntrinsic: CacheValues<boolean>;
+}
+export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
 export interface LifecycleHubInstance {
     _update(changedOptions?: OptionsValidated<Options> | null, force?: boolean): void;
     _destroy(): void;
@@ -8,5 +29,12 @@ export interface LifecycleHubInstance {
 export interface LifecycleHub {
     _options: Options;
     _structureSetup: StructureSetup;
+    _doViewportArrange: boolean;
+    _getPaddingInfo(): PaddingInfo;
+    _setPaddingInfo(newPadding?: PaddingInfo | null): void;
+    _getViewportPaddingStyle(): StyleObject;
+    _setViewportPaddingStyle(newPaddingStlye?: StyleObject | null): void;
+    _getViewportOverflowScroll(): XY<boolean>;
+    _setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
 }
 export declare const createLifecycleHub: (options: Options, structureSetup: StructureSetup) => LifecycleHubInstance;

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

@@ -1,24 +0,0 @@
-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

@@ -1,3 +1,7 @@
-import { LifecycleUpdateFunction } from 'lifecycles/lifecycleUpdateFunction';
+import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub';
-import { LifecycleHub } from 'lifecycles/lifecycleHub';
+/**
-export declare const createOverflowLifecycle: (lifecycleHub: LifecycleHub) => LifecycleUpdateFunction;
+ * Lifecycle with the responsibility to set the correct overflow and scrollbar hiding styles of the viewport element.
+ * @param lifecycleHub
+ * @returns
+ */
+export declare const createOverflowLifecycle: (lifecycleHub: LifecycleHub) => Lifecycle;

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

@@ -0,0 +1,7 @@
+import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub';
+/**
+ * Lifecycle with the responsibility to adjust the padding styling of the padding and viewport element.
+ * @param lifecycleHub
+ * @returns
+ */
+export declare const createPaddingLifecycle: (lifecycleHub: LifecycleHub) => Lifecycle;

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

@@ -1,2 +0,0 @@
-import { LifecycleHub } from 'lifecycles/lifecycleHub';
-export declare const createStructureLifecycle: (lifecycleHub: LifecycleHub) => any;

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

@@ -0,0 +1,7 @@
+import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub';
+/**
+ * Lifecycle with the responsibility to adjust the trinsic behavior of the content element.
+ * @param lifecycleHub
+ * @returns
+ */
+export declare const createTrinsicLifecycle: (lifecycleHub: LifecycleHub) => Lifecycle;

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

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

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

@@ -1,20 +1,18 @@
+import { StyleObject } from 'typings';
 export interface TRBL {
     t: number;
     r: number;
     b: number;
     l: number;
 }
-declare type CssStyles = {
-    [key: string]: string | number;
-};
 /**
  * Gets or sets the passed styles to the passed element.
  * @param elm The element to which the styles shall be applied to / be read from.
  * @param styles The styles which shall be set or read.
  */
-export declare function style(elm: HTMLElement | null | undefined, styles: CssStyles): void;
+export declare function style<CustomCssProps>(elm: HTMLElement | null | undefined, styles: StyleObject<CustomCssProps>): void;
-export declare function style(elm: HTMLElement | null | undefined, styles: string): string;
+export declare function style<CustomCssProps>(elm: HTMLElement | null | undefined, styles: string): string;
-export declare function style(elm: HTMLElement | null | undefined, styles: Array<string> | string): {
+export declare function style<CustomCssProps>(elm: HTMLElement | null | undefined, styles: Array<string> | string): {
     [key: string]: string;
 };
 /**
@@ -32,5 +30,4 @@ export declare const show: (elm: HTMLElement | null | undefined) => void;
  * @param elm
  * @param property
  */
-export declare const topRightBottomLeft: (elm: HTMLElement | null | undefined, property?: string | undefined) => TRBL;
+export declare const topRightBottomLeft: (elm: HTMLElement | null | undefined, propertyPrefix?: string | undefined, propertySuffix?: string | undefined) => TRBL;
-export {};

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

@@ -6,7 +6,7 @@ import { PlainObject } from 'typings';
  * @param b Object b.
  * @param props The props which shall be compared.
  */
-export declare const equal: <T extends PlainObject<any>>(a: T | undefined, b: T | undefined, props: (keyof T)[]) => boolean;
+export declare const equal: <T extends PlainObject<any>>(a: T | undefined, b: T | undefined, props: (keyof T)[], propMutation?: false | ((value: any) => any) | null | undefined) => boolean;
 /**
  * Compares object a with object b and returns true if both have the same property values, false otherwise.
  * Also returns false if one of the objects is undefined or null.
@@ -28,3 +28,11 @@ export declare const equalXY: (a?: XY<number> | undefined, b?: XY<number> | unde
  * @param b Object b.
  */
 export declare const equalTRBL: (a?: TRBL | undefined, b?: TRBL | undefined) => boolean;
+/**
+ * Compares two DOM Rects for their equality of their width and height properties
+ * Also returns false if one of the DOM Rects is undefined or null.
+ * @param a DOM Rect a.
+ * @param b DOM Rect b.
+ * @param round Whether the values should be rounded.
+ */
+export declare const equalBCRWH: (a?: DOMRect | undefined, b?: DOMRect | undefined, round?: boolean | undefined) => boolean;

packages/overlayscrollbars/types/typings.d.ts

@@ -1,6 +1,9 @@
 export declare type PlainObject<T = any> = {
     [name: string]: T;
 };
+export declare type StyleObject<CustomCssProps = ''> = {
+    [Key in (keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : ''))]?: string | number;
+};
 export declare type InternalVersionOf<T> = {
     [K in keyof T as `_${Uncapitalize<string & K>}`]: T[K];
 };