mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-24 04:10:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve options, environment and structure setup

Browse Source
This commit is contained in:
Rene
2021-04-05 19:06:55 +02:00
parent 6b835c5283
commit 62e4388bc9
19 changed files with 807 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/environment/environment.ts
+37 -6
View File
@@ -14,7 +14,10 @@ import {
runEach, runEach,
equalBCRWH, equalBCRWH,
getBoundingClientRect, getBoundingClientRect,
assignDeep,
PartialOptions,
} from 'support'; } from 'support';
import { OverlayScrollbarsOptions, defaultOptions } from 'options';
import { import {
classNameEnvironment, classNameEnvironment,
classNameEnvironmentFlexboxGlue, classNameEnvironmentFlexboxGlue,
@@ -22,6 +25,11 @@ import {
classNameViewportScrollbarStyling, classNameViewportScrollbarStyling,
} from 'classnames'; } from 'classnames';
export interface InitializationStrategy {
_padding: boolean;
_content: boolean;
}
export type OnEnvironmentChanged = (env: Environment) => void; export type OnEnvironmentChanged = (env: Environment) => void;
export interface Environment { export interface Environment {
_autoUpdateLoop: boolean; _autoUpdateLoop: boolean;
@@ -33,11 +41,23 @@ export interface Environment {
_cssCustomProperties: boolean; _cssCustomProperties: boolean;
_addListener(listener: OnEnvironmentChanged): void; _addListener(listener: OnEnvironmentChanged): void;
_removeListener(listener: OnEnvironmentChanged): void; _removeListener(listener: OnEnvironmentChanged): void;
_getInitializationStrategy(): InitializationStrategy;
_setInitializationStrategy(newInitializationStrategy: Partial<InitializationStrategy>): void;
_getDefaultOptions(): OverlayScrollbarsOptions;
_setDefaultOptions(newDefaultOptions: PartialOptions<OverlayScrollbarsOptions>): void;
_defaultInitializationStrategy: InitializationStrategy;
_defaultDefaultOptions: OverlayScrollbarsOptions;
} }
let environmentInstance: Environment; let environmentInstance: Environment;
const { abs, round } = Math; const { abs, round } = Math;
const diffBiggerThanOne = (valOne: number, valTwo: number): boolean => {
const absValOne = abs(valOne);
const absValTwo = abs(valTwo);
return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo);
};
const getNativeScrollbarSize = (body: HTMLElement, measureElm: HTMLElement): XY => { const getNativeScrollbarSize = (body: HTMLElement, measureElm: HTMLElement): XY => {
appendChildren(body, measureElm); appendChildren(body, measureElm);
const cSize = clientSize(measureElm); const cSize = clientSize(measureElm);
@@ -111,18 +131,16 @@ const getWindowDPR = (): number => {
return window.devicePixelRatio || dDPI / sDPI; return window.devicePixelRatio || dDPI / sDPI;
}; };
const diffBiggerThanOne = (valOne: number, valTwo: number): boolean => { const getDefaultInitializationStrategy = (nativeScrollbarStyling: boolean): InitializationStrategy => ({
const absValOne = abs(valOne); _padding: !nativeScrollbarStyling,
const absValTwo = abs(valTwo); _content: false,
return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo); });
};
const createEnvironment = (): Environment => { const createEnvironment = (): Environment => {
const { body } = document; const { body } = document;
const envDOM = createDOM(`<div class="${classNameEnvironment}"><div></div></div>`); const envDOM = createDOM(`<div class="${classNameEnvironment}"><div></div></div>`);
const envElm = envDOM[0] as HTMLElement; const envElm = envDOM[0] as HTMLElement;
const envChildElm = envElm.firstChild as HTMLElement; const envChildElm = envElm.firstChild as HTMLElement;
const onChangedListener: Set<OnEnvironmentChanged> = new Set(); const onChangedListener: Set<OnEnvironmentChanged> = new Set();
const nativeScrollbarSize = getNativeScrollbarSize(body, envElm); const nativeScrollbarSize = getNativeScrollbarSize(body, envElm);
const nativeScrollbarStyling = false; //getNativeScrollbarStyling(envElm); //TODO: Re - enable; const nativeScrollbarStyling = false; //getNativeScrollbarStyling(envElm); //TODO: Re - enable;
@@ -130,6 +148,9 @@ const createEnvironment = (): Environment => {
x: nativeScrollbarSize.x === 0, x: nativeScrollbarSize.x === 0,
y: nativeScrollbarSize.y === 0, y: nativeScrollbarSize.y === 0,
}; };
const defaultInitializationStrategy = getDefaultInitializationStrategy(nativeScrollbarStyling);
let initializationStrategy = defaultInitializationStrategy;
let defaultDefaultOptions = defaultOptions;
const env: Environment = { const env: Environment = {
_autoUpdateLoop: false, _autoUpdateLoop: false,
@@ -145,6 +166,16 @@ const createEnvironment = (): Environment => {
_removeListener(listener: OnEnvironmentChanged): void { _removeListener(listener: OnEnvironmentChanged): void {
onChangedListener.delete(listener); onChangedListener.delete(listener);
}, },
_getInitializationStrategy: () => ({ ...initializationStrategy }),
_setInitializationStrategy(newInitializationStrategy) {
initializationStrategy = assignDeep({}, initializationStrategy, newInitializationStrategy);
},
_getDefaultOptions: () => ({ ...defaultDefaultOptions }),
_setDefaultOptions(newDefaultOptions) {
defaultDefaultOptions = assignDeep({}, defaultDefaultOptions, newDefaultOptions);
},
_defaultInitializationStrategy: defaultInitializationStrategy,
_defaultDefaultOptions: defaultDefaultOptions,
}; };
removeAttr(envElm, 'style'); removeAttr(envElm, 'style');
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+7 -7
View File
@@ -1,5 +1,5 @@
import { XY, TRBL, CacheValues, each, push, keys, OptionsValidated, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support'; import { XY, TRBL, CacheValues, PartialOptions, each, push, keys, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support';
import { Options } from 'options'; import { OverlayScrollbarsOptions } from 'options';
import { getEnvironment } from 'environment'; import { getEnvironment } from 'environment';
import { StructureSetup } from 'setups/structureSetup'; import { StructureSetup } from 'setups/structureSetup';
import { createTrinsicLifecycle } from 'lifecycles/trinsicLifecycle'; import { createTrinsicLifecycle } from 'lifecycles/trinsicLifecycle';
@@ -41,12 +41,12 @@ export type Lifecycle = (
) => Partial<LifecycleAdaptiveUpdateHints> | void; ) => Partial<LifecycleAdaptiveUpdateHints> | void;
export interface LifecycleHubInstance { export interface LifecycleHubInstance {
_update(changedOptions?: OptionsValidated<Options> | null, force?: boolean): void; _update(changedOptions?: PartialOptions<OverlayScrollbarsOptions> | null, force?: boolean): void;
_destroy(): void; _destroy(): void;
} }
export interface LifecycleHub { export interface LifecycleHub {
_options: Options; _options: OverlayScrollbarsOptions;
_structureSetup: StructureSetup; _structureSetup: StructureSetup;
// whether the "viewport arrange" strategy must be used (true if no native scrollbar hiding and scrollbars are overlaid) // whether the "viewport arrange" strategy must be used (true if no native scrollbar hiding and scrollbars are overlaid)
_doViewportArrange: boolean; _doViewportArrange: boolean;
@@ -108,7 +108,7 @@ const heightIntrinsicCacheValuesFallback: CacheValues<boolean> = {
_changed: false, _changed: false,
}; };
export const createLifecycleHub = (options: Options, structureSetup: StructureSetup): LifecycleHubInstance => { export const createLifecycleHub = (options: OverlayScrollbarsOptions, structureSetup: StructureSetup): LifecycleHubInstance => {
let paddingInfo = paddingInfoFallback; let paddingInfo = paddingInfoFallback;
let viewportPaddingStyle = viewportPaddingStyleFallback; let viewportPaddingStyle = viewportPaddingStyleFallback;
let viewportOverflowScroll = viewportOverflowScrollFallback; let viewportOverflowScroll = viewportOverflowScrollFallback;
@@ -146,7 +146,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
const updateLifecycles = ( const updateLifecycles = (
updateHints?: Partial<LifecycleUpdateHints> | null, updateHints?: Partial<LifecycleUpdateHints> | null,
changedOptions?: OptionsValidated<Options> | null, changedOptions?: Partial<OverlayScrollbarsOptions> | null,
force?: boolean force?: boolean
) => { ) => {
let { let {
@@ -260,7 +260,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
*/ */
}); });
const update = (changedOptions?: OptionsValidated<Options> | null, force?: boolean) => { const update = (changedOptions?: Partial<OverlayScrollbarsOptions> | null, force?: boolean) => {
updateLifecycles(null, changedOptions, force); updateLifecycles(null, changedOptions, force);
}; };
const envUpdateListener = update.bind(null, null, true); const envUpdateListener = update.bind(null, null, true);
packages/overlayscrollbars/src/options/index.ts
+25 -25
View File
@@ -24,35 +24,35 @@ export type SizeChangedCallback = (this: any, args?: SizeChangedArgs) => void;
export type UpdatedCallback = (this: any, args?: UpdatedArgs) => void; export type UpdatedCallback = (this: any, args?: UpdatedArgs) => void;
export interface Options { export interface OverlayScrollbarsOptions {
resize?: ResizeBehavior; resize: ResizeBehavior;
paddingAbsolute?: boolean; paddingAbsolute: boolean;
updating?: { updating: {
elementEvents?: ReadonlyArray<[string, string]> | null; elementEvents: ReadonlyArray<[string, string]> | null;
contentMutationDebounce?: number; contentMutationDebounce: number;
hostMutationDebounce?: number; hostMutationDebounce: number;
resizeDebounce?: number; resizeDebounce: number;
}; };
overflow?: { overflow: {
x?: OverflowBehavior; x: OverflowBehavior;
y?: OverflowBehavior; y: OverflowBehavior;
}; };
scrollbars?: { scrollbars: {
visibility?: VisibilityBehavior; visibility: VisibilityBehavior;
autoHide?: AutoHideBehavior; autoHide: AutoHideBehavior;
autoHideDelay?: number; autoHideDelay: number;
dragScroll?: boolean; dragScroll: boolean;
clickScroll?: boolean; clickScroll: boolean;
touch?: boolean; touch: boolean;
}; };
textarea?: { textarea: {
dynWidth?: boolean; dynWidth: boolean;
dynHeight?: boolean; dynHeight: boolean;
inheritedAttrs?: string | ReadonlyArray<string> | null; inheritedAttrs: string | ReadonlyArray<string> | null;
}; };
nativeScrollbarsOverlaid?: { nativeScrollbarsOverlaid: {
show?: boolean; show: boolean;
initialize?: boolean; initialize: boolean;
}; };
/* /*
callbacks?: { callbacks?: {
packages/overlayscrollbars/src/options/options.ts
+3 -2
View File
@@ -6,7 +6,7 @@ import {
OptionsWithOptionsTemplate, OptionsWithOptionsTemplate,
Func, Func,
} from 'support/options'; } from 'support/options';
import { ResizeBehavior, OverflowBehavior, VisibilityBehavior, AutoHideBehavior, Options } from 'options'; import { ResizeBehavior, OverflowBehavior, VisibilityBehavior, AutoHideBehavior, OverlayScrollbarsOptions } from 'options';
const numberAllowedValues: OptionsTemplateValue<number> = oTypes.number; const numberAllowedValues: OptionsTemplateValue<number> = oTypes.number;
const stringArrayNullAllowedValues: OptionsTemplateValue<string | ReadonlyArray<string> | null> = [oTypes.string, oTypes.array, oTypes.null]; const stringArrayNullAllowedValues: OptionsTemplateValue<string | ReadonlyArray<string> | null> = [oTypes.string, oTypes.array, oTypes.null];
@@ -33,7 +33,8 @@ const scrollbarsAutoHideAllowedValues: OptionsTemplateValue<AutoHideBehavior> =
* Property "a" has a default value of 'default' and it can be a string or null * Property "a" has a default value of 'default' and it can be a string or null
* Property "b" has a default value of 250 and it can be number * Property "b" has a default value of 250 and it can be number
*/ */
const defaultOptionsWithTemplate: OptionsWithOptionsTemplate<Required<Options>> = {
const defaultOptionsWithTemplate: OptionsWithOptionsTemplate<OverlayScrollbarsOptions> = {
resize: ['none', resizeAllowedValues], // none || both || horizontal || vertical || n || b || h || v resize: ['none', resizeAllowedValues], // none || both || horizontal || vertical || n || b || h || v
paddingAbsolute: booleanFalseTemplate, // true || false paddingAbsolute: booleanFalseTemplate, // true || false
updating: { updating: {
packages/overlayscrollbars/src/overlayscrollbars/OverlayScrollbars.ts
+9 -7
View File
@@ -1,20 +1,22 @@
import { OSTarget, OSTargetObject } from 'typings'; import { OSTarget, OSTargetObject } from 'typings';
import { validateOptions, assignDeep, isEmptyObject } from 'support'; import { PartialOptions, validateOptions, assignDeep, isEmptyObject } from 'support';
import { createStructureSetup, StructureSetup } from 'setups/structureSetup'; import { createStructureSetup, StructureSetup } from 'setups/structureSetup';
import { createLifecycleHub } from 'lifecycles/lifecycleHub'; import { createLifecycleHub } from 'lifecycles/lifecycleHub';
import { Options, defaultOptions, optionsTemplate } from 'options'; import { OverlayScrollbarsOptions, optionsTemplate } from 'options';
import { getEnvironment } from 'environment';
const OverlayScrollbars = (target: OSTarget | OSTargetObject, options?: Options, extensions?: any): any => { const OverlayScrollbars = (target: OSTarget | OSTargetObject, options?: PartialOptions<OverlayScrollbarsOptions>, extensions?: any): any => {
const currentOptions: Required<Options> = assignDeep( const { _getDefaultOptions } = getEnvironment();
const currentOptions: OverlayScrollbarsOptions = assignDeep(
{}, {},
defaultOptions, _getDefaultOptions(),
validateOptions<Options>(options || ({} as Options), optionsTemplate, null, true)._validated validateOptions(options || ({} as PartialOptions<OverlayScrollbarsOptions>), optionsTemplate, null, true)._validated
); );
const structureSetup: StructureSetup = createStructureSetup(target); const structureSetup: StructureSetup = createStructureSetup(target);
const lifecycleHub = createLifecycleHub(currentOptions, structureSetup); const lifecycleHub = createLifecycleHub(currentOptions, structureSetup);
const instance = { const instance = {
options(newOptions?: Options) { options(newOptions?: PartialOptions<OverlayScrollbarsOptions>) {
if (newOptions) { if (newOptions) {
const { _validated: _changedOptions } = validateOptions(newOptions, optionsTemplate, currentOptions, true); const { _validated: _changedOptions } = validateOptions(newOptions, optionsTemplate, currentOptions, true);
packages/overlayscrollbars/src/setups/structureSetup.ts
+32 -19
View File
@@ -14,6 +14,7 @@ import {
runEach, runEach,
insertBefore, insertBefore,
attr, attr,
isBoolean,
} from 'support'; } from 'support';
import { import {
classNameHost, classNameHost,
@@ -24,7 +25,7 @@ import {
classNameViewportScrollbarStyling, classNameViewportScrollbarStyling,
} from 'classnames'; } from 'classnames';
import { getEnvironment } from 'environment'; import { getEnvironment } from 'environment';
import { OSTarget, OSTargetObject, InternalVersionOf, OSTargetElement } from 'typings'; import { OSTarget, OSTargetObject, OSTargetElement } from 'typings';
export interface OSTargetContext { export interface OSTargetContext {
_isTextarea: boolean; _isTextarea: boolean;
@@ -35,9 +36,13 @@ export interface OSTargetContext {
_documentElm: HTMLDocument; _documentElm: HTMLDocument;
} }
export interface PreparedOSTargetObject extends Required<InternalVersionOf<OSTargetObject>> { export interface PreparedOSTargetObject {
_target: OSTargetElement;
_host: HTMLElement; _host: HTMLElement;
_viewportArrange: HTMLStyleElement | null; _viewport: HTMLElement;
_padding: HTMLElement | false | null;
_content: HTMLElement | false | null;
_viewportArrange: HTMLStyleElement | false | null;
} }
export interface StructureSetup { export interface StructureSetup {
@@ -46,13 +51,13 @@ export interface StructureSetup {
_destroy: () => void; _destroy: () => void;
} }
const unwrap = (elm: HTMLElement | null | undefined) => { const unwrap = (elm: HTMLElement | false | null | undefined) => {
appendChildren(parent(elm), contents(elm)); appendChildren(parent(elm), contents(elm));
removeElements(elm); removeElements(elm);
}; };
let contentArrangeCounter = 0; let contentArrangeCounter = 0;
const createUniqueViewportArrangeElement = () => { const createUniqueViewportArrangeElement = (): HTMLStyleElement => {
const elm = document.createElement('style'); const elm = document.createElement('style');
attr(elm, 'id', `${classNameViewportArrange}-${contentArrangeCounter}`); attr(elm, 'id', `${classNameViewportArrange}-${contentArrangeCounter}`);
@@ -60,26 +65,32 @@ const createUniqueViewportArrangeElement = () => {
return elm; return elm;
}; };
const evaluateCreationFromStrategy = (initializationValue: HTMLElement | boolean | undefined, strategy: boolean): HTMLElement | false | undefined => {
const isBooleanValue = isBoolean(initializationValue);
if (isBooleanValue || isUndefined(initializationValue)) {
return (isBooleanValue ? initializationValue : strategy) && undefined;
}
return initializationValue as HTMLElement;
};
export const createStructureSetup = (target: OSTarget | OSTargetObject): StructureSetup => { export const createStructureSetup = (target: OSTarget | OSTargetObject): StructureSetup => {
const { _getInitializationStrategy, _nativeScrollbarStyling, _nativeScrollbarIsOverlaid, _cssCustomProperties } = getEnvironment();
const { _padding: paddingNeeded, _content: contentNeeded } = _getInitializationStrategy();
const targetIsElm = isHTMLElement(target); const targetIsElm = isHTMLElement(target);
const osTargetObj: InternalVersionOf<OSTargetObject> = targetIsElm const osTargetObj: Partial<PreparedOSTargetObject> = targetIsElm
? ({} as InternalVersionOf<OSTargetObject>) ? ({} as Partial<PreparedOSTargetObject>)
: { : {
_host: (target as OSTargetObject).host, _host: (target as OSTargetObject).host,
_target: (target as OSTargetObject).target, _target: (target as OSTargetObject).target,
_padding: (target as OSTargetObject).padding,
_viewport: (target as OSTargetObject).viewport, _viewport: (target as OSTargetObject).viewport,
_content: (target as OSTargetObject).content, _padding: evaluateCreationFromStrategy((target as OSTargetObject).padding, paddingNeeded),
_content: evaluateCreationFromStrategy((target as OSTargetObject).content, contentNeeded),
}; };
if (targetIsElm) { if (targetIsElm) {
const padding = createDiv(classNamePadding);
const viewport = createDiv(classNameViewport); const viewport = createDiv(classNameViewport);
const content = createDiv(classNameContent); const padding = paddingNeeded && createDiv(classNamePadding);
const content = contentNeeded && createDiv(classNameContent);
appendChildren(padding, viewport);
appendChildren(viewport, content);
osTargetObj._target = target as OSTargetElement; osTargetObj._target = target as OSTargetElement;
osTargetObj._padding = padding; osTargetObj._padding = padding;
@@ -106,12 +117,15 @@ export const createStructureSetup = (target: OSTarget | OSTargetObject): Structu
} }
if (targetIsElm) { if (targetIsElm) {
appendChildren(_content!, getTargetContents(_target)); const contentSlot = _content || _viewport;
appendChildren(contentSlot, getTargetContents(_target!));
appendChildren(_host, _padding); appendChildren(_host, _padding);
appendChildren(_padding || _host, _viewport);
appendChildren(_viewport, _content);
push(destroyFns, () => { push(destroyFns, () => {
appendChildren(_host, contents(_content)); appendChildren(_host, contents(contentSlot));
removeElements(_padding); removeElements(_padding || _viewport);
removeClass(_host, classNameHost); removeClass(_host, classNameHost);
}); });
} else { } else {
@@ -154,7 +168,7 @@ export const createStructureSetup = (target: OSTarget | OSTargetObject): Structu
addClass(_viewport, classNameViewport); addClass(_viewport, classNameViewport);
addClass(_content, classNameContent); addClass(_content, classNameContent);
const ownerDocument: HTMLDocument = _target.ownerDocument; const ownerDocument: HTMLDocument = _target!.ownerDocument;
const bodyElm = ownerDocument.body as HTMLBodyElement; const bodyElm = ownerDocument.body as HTMLBodyElement;
const wnd = ownerDocument.defaultView as Window; const wnd = ownerDocument.defaultView as Window;
const ctx: OSTargetContext = { const ctx: OSTargetContext = {
@@ -171,7 +185,6 @@ export const createStructureSetup = (target: OSTarget | OSTargetObject): Structu
_host, _host,
}; };
const { _nativeScrollbarStyling, _nativeScrollbarIsOverlaid, _cssCustomProperties } = getEnvironment();
if (_nativeScrollbarStyling) { if (_nativeScrollbarStyling) {
push(destroyFns, removeClass.bind(0, _viewport, classNameViewportScrollbarStyling)); push(destroyFns, removeClass.bind(0, _viewport, classNameViewportScrollbarStyling));
} else if (!_cssCustomProperties && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y)) { } else if (!_cssCustomProperties && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y)) {
packages/overlayscrollbars/src/support/dom/class.ts
+4 -4
View File
@@ -4,7 +4,7 @@ import { keys } from 'support/utils/object';
const rnothtmlwhite = /[^\x20\t\r\n\f]+/g; const rnothtmlwhite = /[^\x20\t\r\n\f]+/g;
const classListAction = ( const classListAction = (
elm: Element | null | undefined, elm: Element | false | null | undefined,
className: string, className: string,
action: (elmClassList: DOMTokenList, clazz: string) => boolean | void action: (elmClassList: DOMTokenList, clazz: string) => boolean | void
): boolean => { ): boolean => {
@@ -27,7 +27,7 @@ const classListAction = (
* @param elm The element. * @param elm The element.
* @param className The class name(s). * @param className The class name(s).
*/ */
export const hasClass = (elm: Element | null | undefined, className: string): boolean => export const hasClass = (elm: Element | false | null | undefined, className: string): boolean =>
classListAction(elm, className, (classList, clazz) => classList.contains(clazz)); classListAction(elm, className, (classList, clazz) => classList.contains(clazz));
/** /**
@@ -35,7 +35,7 @@ export const hasClass = (elm: Element | null | undefined, className: string): bo
* @param elm The element. * @param elm The element.
* @param className The class name(s) which shall be added. (separated by spaces) * @param className The class name(s) which shall be added. (separated by spaces)
*/ */
export const addClass = (elm: Element | null | undefined, className: string): void => { export const addClass = (elm: Element | false | null | undefined, className: string): void => {
classListAction(elm, className, (classList, clazz) => classList.add(clazz)); classListAction(elm, className, (classList, clazz) => classList.add(clazz));
}; };
@@ -44,7 +44,7 @@ export const addClass = (elm: Element | null | undefined, className: string): vo
* @param elm The element. * @param elm The element.
* @param className The class name(s) which shall be removed. (separated by spaces) * @param className The class name(s) which shall be removed. (separated by spaces)
*/ */
export const removeClass = (elm: Element | null | undefined, className: string): void => { export const removeClass = (elm: Element | false | null | undefined, className: string): void => {
classListAction(elm, className, (classList, clazz) => classList.remove(clazz)); classListAction(elm, className, (classList, clazz) => classList.remove(clazz));
}; };
packages/overlayscrollbars/src/support/dom/manipulation.ts
+2 -2
View File
@@ -2,7 +2,7 @@ import { isArrayLike } from 'support/utils/types';
import { each, from } from 'support/utils/array'; import { each, from } from 'support/utils/array';
import { parent } from 'support/dom/traversal'; import { parent } from 'support/dom/traversal';
type NodeCollection = ArrayLike<Node> | Node | null | undefined; type NodeCollection = ArrayLike<Node> | Node | false | null | undefined;
/** /**
* Inserts Nodes before the given preferredAnchor element. * Inserts Nodes before the given preferredAnchor element.
@@ -10,7 +10,7 @@ type NodeCollection = ArrayLike<Node> | Node | null | undefined;
* @param preferredAnchor The element before which the Nodes shall be inserted or null if the elements shall be appended at the end. * @param preferredAnchor The element before which the Nodes shall be inserted or null if the elements shall be appended at the end.
* @param insertedElms The Nodes which shall be inserted. * @param insertedElms The Nodes which shall be inserted.
*/ */
const before = (parentElm: Node | null | undefined, preferredAnchor: Node | null | undefined, insertedElms: NodeCollection): void => { const before = (parentElm: Node | false | null | undefined, preferredAnchor: Node | null | undefined, insertedElms: NodeCollection): void => {
if (insertedElms) { if (insertedElms) {
let anchor: Node | null | undefined = preferredAnchor; let anchor: Node | null | undefined = preferredAnchor;
let fragment: DocumentFragment | Node | null | undefined; let fragment: DocumentFragment | Node | null | undefined;
packages/overlayscrollbars/src/support/dom/traversal.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { isElement } from 'support/utils/types'; import { isElement } from 'support/utils/types';
import { push, from } from 'support/utils/array'; import { push, from } from 'support/utils/array';
type InputElementType = Element | Node | null | undefined; type InputElementType = Element | Node | false | null | undefined;
type OutputElementType = Element | null; type OutputElementType = Element | null;
const elmPrototype = Element.prototype; const elmPrototype = Element.prototype;
packages/overlayscrollbars/src/support/options/index.ts
+10 -11
View File
@@ -3,6 +3,8 @@ import { PlainObject } from 'typings';
export * from 'support/options/validation'; export * from 'support/options/validation';
export * from 'support/options/transformation'; export * from 'support/options/transformation';
type ObjectType = Record<string, unknown>;
export type Func = (this: any, ...args: any[]) => any; export type Func = (this: any, ...args: any[]) => any;
export type OptionsTemplateType<T extends OptionsTemplateNativeTypes> = ExtractPropsKey<OptionsTemplateTypeMap, T>; export type OptionsTemplateType<T extends OptionsTemplateNativeTypes> = ExtractPropsKey<OptionsTemplateTypeMap, T>;
export type OptionsTemplateTypes = keyof OptionsTemplateTypeMap; export type OptionsTemplateTypes = keyof OptionsTemplateTypeMap;
@@ -12,29 +14,26 @@ export type OptionsTemplateValue<T extends OptionsTemplateNativeTypes = string>
? OptionsTemplateValueNonEnum<T> ? OptionsTemplateValueNonEnum<T>
: string : string
: OptionsTemplateValueNonEnum<T>; : OptionsTemplateValueNonEnum<T>;
export type OptionsTemplate<T extends Required<T>> = { export type OptionsTemplate<T> = {
[P in keyof T]: PlainObject extends T[P] [P in keyof T]: T[P] extends ObjectType ? OptionsTemplate<T[P]> : T[P] extends OptionsTemplateNativeTypes ? OptionsTemplateValue<T[P]> : never;
? OptionsTemplate<Required<T[P]>>
: T[P] extends OptionsTemplateNativeTypes
? OptionsTemplateValue<T[P]>
: never;
};
export type OptionsValidated<T> = {
[P in keyof T]?: T[P];
}; };
export type OptionsValidationResult<T> = { export type OptionsValidationResult<T> = {
readonly _foreign: PlainObject; readonly _foreign: PlainObject;
readonly _validated: OptionsValidated<T>; readonly _validated: PartialOptions<T>;
}; };
// Options With Options Template Typings: // Options With Options Template Typings:
export type OptionsWithOptionsTemplateValue<T extends OptionsTemplateNativeTypes> = [T, OptionsTemplateValue<T>]; export type OptionsWithOptionsTemplateValue<T extends OptionsTemplateNativeTypes> = [T, OptionsTemplateValue<T>];
export type OptionsWithOptionsTemplate<T extends Required<T>> = { export type OptionsWithOptionsTemplate<T extends Required<T>> = {
[P in keyof T]: PlainObject extends T[P] [P in keyof T]: T[P] extends ObjectType
? OptionsWithOptionsTemplate<Required<T[P]>> ? OptionsWithOptionsTemplate<Required<T[P]>>
: T[P] extends OptionsTemplateNativeTypes : T[P] extends OptionsTemplateNativeTypes
? OptionsWithOptionsTemplateValue<T[P]> ? OptionsWithOptionsTemplateValue<T[P]>
: never; : never;
}; };
export type PartialOptions<T> = {
[P in keyof T]?: T[P] extends ObjectType ? PartialOptions<T[P]> : T[P];
};
type OptionsTemplateTypeMap = { type OptionsTemplateTypeMap = {
__TPL_boolean_TYPE__: boolean; __TPL_boolean_TYPE__: boolean;
__TPL_number_TYPE__: number; __TPL_number_TYPE__: number;
packages/overlayscrollbars/src/support/options/validation.ts
+8 -8
View File
@@ -1,6 +1,6 @@
import { each, hasOwnProperty, keys, push, isEmptyObject } from 'support/utils'; import { each, hasOwnProperty, keys, push, isEmptyObject } from 'support/utils';
import { type, isArray, isUndefined, isPlainObject, isString } from 'support/utils/types'; import { type, isArray, isUndefined, isPlainObject, isString } from 'support/utils/types';
import { OptionsTemplate, OptionsTemplateTypes, OptionsTemplateType, Func, OptionsValidationResult, OptionsValidated } from 'support/options'; import { OptionsTemplate, OptionsTemplateTypes, OptionsTemplateType, PartialOptions, Func, OptionsValidationResult } from 'support/options';
import { PlainObject } from 'typings'; import { PlainObject } from 'typings';
const { stringify } = JSON; const { stringify } = JSON;
@@ -41,14 +41,14 @@ const optionsTemplateTypes: OptionsTemplateTypesDictionary = ['boolean', 'number
* @param propPath The propertyPath which lead to this object. (used for error logging) * @param propPath The propertyPath which lead to this object. (used for error logging)
*/ */
const validateRecursive = <T extends PlainObject>( const validateRecursive = <T extends PlainObject>(
options: T, options: PartialOptions<T>,
template: OptionsTemplate<Required<T>>, template: OptionsTemplate<T>,
optionsDiff: T, optionsDiff: T,
doWriteErrors?: boolean, doWriteErrors?: boolean,
propPath?: string propPath?: string
): OptionsValidationResult<T> => { ): OptionsValidationResult<T> => {
const validatedOptions: OptionsValidated<T> = {}; const validatedOptions: PartialOptions<T> = {};
const optionsCopy: T = { ...options }; const optionsCopy: PartialOptions<T> = { ...options };
const props = keys(template).filter((prop) => hasOwnProperty(options, prop)); const props = keys(template).filter((prop) => hasOwnProperty(options, prop));
each(props, (prop: Extract<keyof T, string>) => { each(props, (prop: Extract<keyof T, string>) => {
@@ -60,7 +60,7 @@ const validateRecursive = <T extends PlainObject>(
// if the template has a object as value, it means that the options are complex (verschachtelt) // if the template has a object as value, it means that the options are complex (verschachtelt)
if (templateIsComplex && isPlainObject(optionsValue)) { if (templateIsComplex && isPlainObject(optionsValue)) {
const validatedResult = validateRecursive(optionsValue, templateValue as PlainObject, optionsDiffValue, doWriteErrors, propPrefix + prop); const validatedResult = validateRecursive(optionsValue, templateValue as T, optionsDiffValue, doWriteErrors, propPrefix + prop);
validatedOptions[prop] = validatedResult._validated as any; validatedOptions[prop] = validatedResult._validated as any;
optionsCopy[prop] = validatedResult._foreign as any; optionsCopy[prop] = validatedResult._foreign as any;
@@ -147,8 +147,8 @@ const validateRecursive = <T extends PlainObject>(
* @param doWriteErrors True if errors shall be logged into the console, false otherwise. * @param doWriteErrors True if errors shall be logged into the console, false otherwise.
*/ */
const validateOptions = <T extends PlainObject>( const validateOptions = <T extends PlainObject>(
options: T, options: PartialOptions<T>,
template: OptionsTemplate<Required<T>>, template: OptionsTemplate<T>,
optionsDiff?: T | null, optionsDiff?: T | null,
doWriteErrors?: boolean doWriteErrors?: boolean
): OptionsValidationResult<T> => { ): OptionsValidationResult<T> => {
packages/overlayscrollbars/src/typings.ts
+5 -3
View File
@@ -18,14 +18,16 @@ export type OSTargetElement = HTMLElement | HTMLTextAreaElement;
* If element is provided, the provided element takes all its responsibilities. * If element is provided, the provided element takes all its responsibilities.
* DOM hierarchy isn't checked in this case, its assumed that hieararchy is correct in such a case. * DOM hierarchy isn't checked in this case, its assumed that hieararchy is correct in such a case.
* *
* If element is null it won't be generated, and the responsibilities (feautes) of this element are lost. * Undefined means that the plugin decides whether the respective element needs to be added or can be savely omitted.
* True means that even if the plugin would decide to not generate the element, the element is still generated.
* False means that event if the plugin would decide to generate the element, the element won't be generated.
*/ */
export interface OSTargetObject { export interface OSTargetObject {
target: OSTargetElement; target: OSTargetElement;
host?: HTMLElement; host?: HTMLElement;
padding?: HTMLElement | null; padding?: HTMLElement | boolean;
viewport?: HTMLElement; viewport?: HTMLElement;
content?: HTMLElement | null; content?: HTMLElement | boolean;
} }
export type OSTarget = OSTargetElement | OSTargetObject; export type OSTarget = OSTargetElement | OSTargetObject;
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, cl
import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars'; import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars';
const targetElm = document.querySelector('#target') as HTMLElement; const targetElm = document.querySelector('#target') as HTMLElement;
window.os = OverlayScrollbars({ target: targetElm }); window.os = OverlayScrollbars({ target: targetElm, content: null });
export const resize = (element: HTMLElement) => { export const resize = (element: HTMLElement) => {
const strMouseTouchDownEvent = 'mousedown touchstart'; const strMouseTouchDownEvent = 'mousedown touchstart';
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.test.ts
+17
View File
@@ -3,6 +3,23 @@ import 'expect-playwright';
import { Environment } from 'environment'; import { Environment } from 'environment';
import url from './.build/build.html'; import url from './.build/build.html';
/**
* env test cases:
* 1. overlaid scrollbars
* - with scrollbar styling
* - without scrollbar styling
* - with css custom properties
* - without css custom properties
* 2. partially overlaid, partially normal scrollbars
* - with scrollbar styling
* - without scrollbar styling
* - with css custom properties
* - without css custom properties
* 3. normal scrollbars
* - with scrollbar styling
* - without scrollbar styling
*/
describe('StructureLifecycle', () => { describe('StructureLifecycle', () => {
beforeAll(async () => { beforeAll(async () => {
await page.goto(url); await page.goto(url);
packages/overlayscrollbars/tests/jsdom/setups/structureSetup.test.ts
+619 -281
View File
@@ -1,4 +1,19 @@
import { Environment } from 'environment';
import { OSTarget, OSTargetObject } from 'typings';
import { createStructureSetup, StructureSetup } from 'setups/structureSetup'; import { createStructureSetup, StructureSetup } from 'setups/structureSetup';
import { isHTMLElement } from 'support';
const mockGetEnvironment = jest.fn();
jest.mock('environment', () => {
return {
getEnvironment: jest.fn().mockImplementation(() => mockGetEnvironment()),
};
});
interface StructureSetupProxy {
input: OSTarget | OSTargetObject;
setup: StructureSetup;
}
const textareaId = 'textarea'; const textareaId = 'textarea';
const textareaHostId = 'host'; const textareaHostId = 'host';
@@ -69,7 +84,13 @@ const assertCorrectDOMStructure = (textarea?: boolean) => {
} }
}; };
const assertCorrectSetup = (textarea: boolean, setup: StructureSetup) => { const createStructureSetupProxy = (target: OSTarget | OSTargetObject): StructureSetupProxy => ({
input: target,
setup: createStructureSetup(target),
});
const assertCorrectSetup = (textarea: boolean, setupProxy: StructureSetupProxy, environment: Environment): StructureSetup => {
const { input, setup } = setupProxy;
const { _targetObj, _targetCtx, _destroy } = setup; const { _targetObj, _targetCtx, _destroy } = setup;
const { _target, _host, _padding, _viewport, _content } = _targetObj; const { _target, _host, _padding, _viewport, _content } = _targetObj;
const { target, host, padding, viewport, content } = getElements(textarea); const { target, host, padding, viewport, content } = getElements(textarea);
@@ -113,6 +134,43 @@ const assertCorrectSetup = (textarea: boolean, setup: StructureSetup) => {
expect(typeof _destroy).toBe('function'); expect(typeof _destroy).toBe('function');
const { _nativeScrollbarStyling, _cssCustomProperties, _getInitializationStrategy } = environment;
const { _padding: paddingNeeded, _content: contentNeeded } = _getInitializationStrategy();
const inputIsElement = isHTMLElement(input);
const inputAsObj = input as OSTargetObject;
const styleElm = document.querySelector('style');
const checkStrategyDependendElements = (elm: Element | null, input: HTMLElement | boolean | undefined, strategy: boolean) => {
if (input) {
expect(elm).toBeTruthy();
} else {
if (input === false) {
expect(elm).toBeFalsy();
}
if (input === undefined) {
if (strategy) {
expect(elm).toBeTruthy();
} else {
expect(elm).toBeFalsy();
}
}
}
};
if (_nativeScrollbarStyling || _cssCustomProperties) {
expect(styleElm).toBeFalsy();
} else {
expect(styleElm).toBeTruthy();
}
if (inputIsElement) {
checkStrategyDependendElements(padding, undefined, paddingNeeded);
checkStrategyDependendElements(content, undefined, contentNeeded);
} else {
const { padding: inputPadding, content: inputContent } = inputAsObj;
checkStrategyDependendElements(padding, inputPadding, paddingNeeded);
checkStrategyDependendElements(content, inputContent, contentNeeded);
}
return setup; return setup;
}; };
@@ -133,314 +191,594 @@ const assertCorrectDestroy = (snapshot: string, setup: StructureSetup) => {
expect(snapshot).toBe(getSnapshot()); expect(snapshot).toBe(getSnapshot());
}; };
const env: Environment = jest.requireActual('environment').getEnvironment();
const envDefault = {
name: 'default',
env: env,
};
const envNativeScrollbarStyling = {
name: 'native scrollbar styling',
env: {
...env,
_nativeScrollbarStyling: true,
},
};
const envCssCustomProperties = {
name: 'custom css properties',
env: {
...env,
_cssCustomProperties: true,
},
};
const envInitStrategyMin = {
name: 'initialization strategy min',
env: {
...env,
_getInitializationStrategy: () => ({
_content: false,
_padding: false,
}),
},
};
const envInitStrategyMax = {
name: 'initialization strategy max',
env: {
...env,
_getInitializationStrategy: () => ({
_content: true,
_padding: true,
}),
},
};
describe('structureSetup', () => { describe('structureSetup', () => {
afterEach(() => clearBody()); afterEach(() => clearBody());
[false, true].forEach((isTextarea) => { [envDefault, envNativeScrollbarStyling, envCssCustomProperties, envInitStrategyMin, envInitStrategyMax].forEach((envWithName) => {
describe(isTextarea ? 'textarea' : 'element', () => { const { env: currEnv, name } = envWithName;
describe('basic', () => { describe(`Environment: ${name}`, () => {
test('Element', () => { beforeAll(() => {
const snapshot = fillBody(isTextarea); mockGetEnvironment.mockImplementation(() => currEnv);
const setup = assertCorrectSetup(isTextarea, createStructureSetup(getTarget(isTextarea)));
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('Object', () => {
const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(isTextarea, createStructureSetup({ target: getTarget(isTextarea) }));
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
}); });
describe('complex', () => { [false, true].forEach((isTextarea) => {
describe('single assigned', () => { describe(isTextarea ? 'textarea' : 'element', () => {
test('padding', () => { describe('basic', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { test('Element', () => {
return `<div id="${hostId}"><div id="padding">${content}</div></div>`; const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(isTextarea, createStructureSetupProxy(getTarget(isTextarea)), currEnv);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('viewport', () => { test('Object', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { const snapshot = fillBody(isTextarea);
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`; const setup = assertCorrectSetup(isTextarea, createStructureSetupProxy({ target: getTarget(isTextarea) }), currEnv);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
}); });
test('content', () => { describe('complex', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { describe('single assigned', () => {
return `<div id="${hostId}"><div id="content">${content}</div></div>`; test('padding', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('content', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="content">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
content: document.querySelector<HTMLElement>('#content')!,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
});
describe('multiple assigned', () => { describe('multiple assigned', () => {
test('padding viewport content', () => { test('padding viewport content', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding"><div id="viewport"><div id="content">${content}</div></div></div></div>`; return `<div id="${hostId}"><div id="padding"><div id="viewport"><div id="content">${content}</div></div></div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('padding viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('padding content', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding"><div id="content">${content}</div></div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('viewport content', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: document.querySelector<HTMLElement>('#content')!,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('padding viewport', () => { describe('single false', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { test('padding', () => {
return `<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`; const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
padding: false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('content', () => {
const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
content: false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('padding content', () => { describe('single true', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { test('padding', () => {
return `<div id="${hostId}"><div id="padding"><div id="content">${content}</div></div></div>`; const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
padding: true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('content', () => {
const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
content: true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
content: document.querySelector<HTMLElement>('#content')!,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('viewport content', () => { describe('multiple false', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { test('padding & content', () => {
return `<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`; const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
target: getTarget(isTextarea),
padding: false,
content: false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: document.querySelector<HTMLElement>('#content')!,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
});
describe('single null', () => { describe('multiple true', () => {
test('padding', () => { test('padding & content', () => {
const snapshot = fillBody(isTextarea); const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup( const setup = assertCorrectSetup(
isTextarea, isTextarea,
createStructureSetup({ createStructureSetupProxy({
target: getTarget(isTextarea), target: getTarget(isTextarea),
padding: null, padding: true,
}) content: true,
); }),
assertCorrectDOMStructure(isTextarea); currEnv
assertCorrectDestroy(snapshot, setup); );
}); assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
test('content', () => { });
const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
target: getTarget(isTextarea),
content: null,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
});
describe('multiple null', () => {
test('padding & content', () => {
const snapshot = fillBody(isTextarea);
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
target: getTarget(isTextarea),
padding: null,
content: null,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
});
describe('mixed', () => {
test('null: padding & content | assigned: viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: null,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: null,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('null: padding | assigned: content', () => { describe('mixed', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { test('false: padding & content | assigned: viewport', () => {
return `<div id="${hostId}"><div id="content">${content}</div></div>`; const snapshot = fillBody(isTextarea, (content, hostId) => {
}); return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
const setup = assertCorrectSetup( });
isTextarea, const setup = assertCorrectSetup(
createStructureSetup({ isTextarea,
host: document.querySelector<HTMLElement>('#host')!, createStructureSetupProxy({
target: getTarget(isTextarea), host: document.querySelector<HTMLElement>('#host')!,
padding: null, target: getTarget(isTextarea),
content: document.querySelector<HTMLElement>('#content')!, padding: false,
}) viewport: document.querySelector<HTMLElement>('#viewport')!,
); content: false,
assertCorrectDOMStructure(isTextarea); }),
assertCorrectDestroy(snapshot, setup); currEnv
}); );
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('null: padding | assigned: viewport', () => { test('true: padding & content | assigned: viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`; return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
}); });
const setup = assertCorrectSetup( const setup = assertCorrectSetup(
isTextarea, isTextarea,
createStructureSetup({ createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!, host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea), target: getTarget(isTextarea),
padding: null, padding: true,
viewport: document.querySelector<HTMLElement>('#viewport')!, viewport: document.querySelector<HTMLElement>('#viewport')!,
}) content: true,
); }),
assertCorrectDOMStructure(isTextarea); currEnv
assertCorrectDestroy(snapshot, setup); );
}); assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('null: padding | assigned: viewport & content', () => { test('true: content | false: padding | assigned: viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`; return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
}); });
const setup = assertCorrectSetup( const setup = assertCorrectSetup(
isTextarea, isTextarea,
createStructureSetup({ createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!, host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea), target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!, padding: false,
padding: null, viewport: document.querySelector<HTMLElement>('#viewport')!,
content: document.querySelector<HTMLElement>('#content')!, content: true,
}) }),
); currEnv
assertCorrectDOMStructure(isTextarea); );
assertCorrectDestroy(snapshot, setup); assertCorrectDOMStructure(isTextarea);
}); assertCorrectDestroy(snapshot, setup);
});
test('null: content | assigned: padding', () => { test('true: padding | false: content | assigned: viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding">${content}</div></div>`; return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
}); });
const setup = assertCorrectSetup( const setup = assertCorrectSetup(
isTextarea, isTextarea,
createStructureSetup({ createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!, host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea), target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!, padding: true,
content: null, viewport: document.querySelector<HTMLElement>('#viewport')!,
}) content: false,
); }),
assertCorrectDOMStructure(isTextarea); currEnv
assertCorrectDestroy(snapshot, setup); );
}); assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('null: content | assigned: viewport', () => { test('false: padding | assigned: content', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`; return `<div id="${hostId}"><div id="content">${content}</div></div>`;
}); });
const setup = assertCorrectSetup( const setup = assertCorrectSetup(
isTextarea, isTextarea,
createStructureSetup({ createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!, host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea), target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!, padding: false,
content: null, content: document.querySelector<HTMLElement>('#content')!,
}) }),
); currEnv
assertCorrectDOMStructure(isTextarea); );
assertCorrectDestroy(snapshot, setup); assertCorrectDOMStructure(isTextarea);
}); assertCorrectDestroy(snapshot, setup);
});
test('null: content | assigned: padding & viewport', () => { test('true: padding | assigned: content', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => { const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`; return `<div id="${hostId}"><div id="content">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: true,
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('false: padding | assigned: viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: false,
viewport: document.querySelector<HTMLElement>('#viewport')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('true: padding | assigned: viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: true,
viewport: document.querySelector<HTMLElement>('#viewport')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('false: padding | assigned: viewport & content', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
padding: false,
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('true: padding | assigned: viewport & content', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
padding: true,
content: document.querySelector<HTMLElement>('#content')!,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('false: content | assigned: padding', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
content: false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('true: content | assigned: padding', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
content: true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('false: content | assigned: viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('true: content | assigned: viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="viewport">${content}</div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('false: content | assigned: padding & viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: false,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
test('true: content | assigned: padding & viewport', () => {
const snapshot = fillBody(isTextarea, (content, hostId) => {
return `<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`;
});
const setup = assertCorrectSetup(
isTextarea,
createStructureSetupProxy({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: true,
}),
currEnv
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
});
}); });
const setup = assertCorrectSetup(
isTextarea,
createStructureSetup({
host: document.querySelector<HTMLElement>('#host')!,
target: getTarget(isTextarea),
padding: document.querySelector<HTMLElement>('#padding')!,
viewport: document.querySelector<HTMLElement>('#viewport')!,
content: null,
})
);
assertCorrectDOMStructure(isTextarea);
assertCorrectDestroy(snapshot, setup);
}); });
}); });
}); });
packages/overlayscrollbars/tests/jsdom/support/options/validation.test.ts
+18 -18
View File
@@ -4,18 +4,18 @@ import { assignDeep, isEmptyObject } from 'support/utils';
type TestOptionsObj = { propA: 'propA'; null: null }; type TestOptionsObj = { propA: 'propA'; null: null };
type TestOptionsEnum = 'A' | 'B' | 'C'; type TestOptionsEnum = 'A' | 'B' | 'C';
type TestOptions = { type TestOptions = {
str?: string; str: string;
strArrNull?: string | Array<string> | null; strArrNull: string | Array<string> | null;
nullbool?: boolean | null; nullbool: boolean | null;
nested?: { nested: {
num?: number; num: number;
switch?: boolean; switch: boolean;
abc?: TestOptionsEnum; abc: TestOptionsEnum;
}; };
obj?: TestOptionsObj | null; obj: TestOptionsObj | null;
abc?: TestOptionsEnum; abc: TestOptionsEnum;
arr?: Array<any>; arr: Array<any>;
func?: () => void; func: () => void;
}; };
const options: TestOptions = { const options: TestOptions = {
@@ -33,7 +33,7 @@ const options: TestOptions = {
func: () => {}, func: () => {},
}; };
const template: OptionsTemplate<Required<TestOptions>> = { const template: OptionsTemplate<TestOptions> = {
str: oTypes.string, str: oTypes.string,
strArrNull: [oTypes.string, oTypes.array, oTypes.null], strArrNull: [oTypes.string, oTypes.array, oTypes.null],
nullbool: [oTypes.boolean, oTypes.null], nullbool: [oTypes.boolean, oTypes.null],
@@ -385,7 +385,7 @@ describe('options validation', () => {
}); });
test('nested object is undefined', () => { test('nested object is undefined', () => {
const modifiedOptions = assignDeep({}, options); const modifiedOptions: Partial<TestOptions> = assignDeep({}, options);
modifiedOptions.nested = undefined; modifiedOptions.nested = undefined;
const result = validateOptions(modifiedOptions, template); const result = validateOptions(modifiedOptions, template);
const { _validated } = result; const { _validated } = result;
@@ -399,7 +399,7 @@ describe('options validation', () => {
const { warn } = console; const { warn } = console;
console.warn = jest.fn(); console.warn = jest.fn();
validateOptions(options, template, {}, true); validateOptions(options, template, null, true);
expect(console.warn).not.toBeCalled(); expect(console.warn).not.toBeCalled();
console.warn = warn; console.warn = warn;
@@ -410,7 +410,7 @@ describe('options validation', () => {
console.warn = jest.fn(); console.warn = jest.fn();
const modifiedOptions = assignDeep({}, options, { str: 1 }); const modifiedOptions = assignDeep({}, options, { str: 1 });
validateOptions(modifiedOptions, template, {}, false); validateOptions(modifiedOptions, template, null, false);
expect(console.warn).not.toBeCalled(); expect(console.warn).not.toBeCalled();
console.warn = warn; console.warn = warn;
@@ -421,15 +421,15 @@ describe('options validation', () => {
console.warn = jest.fn(); console.warn = jest.fn();
// str must be string // str must be string
validateOptions(assignDeep({}, options, { str: 1 }), template, {}, true); validateOptions(assignDeep({}, options, { str: 1 }), template, null, true);
expect(console.warn).toBeCalledTimes(1); expect(console.warn).toBeCalledTimes(1);
// abc must be A | B | C // abc must be A | B | C
validateOptions(assignDeep({}, options, { abc: 'some string' }), template, {}, true); validateOptions(assignDeep({}, options, { abc: 'some string' }), template, null, true);
expect(console.warn).toBeCalledTimes(2); expect(console.warn).toBeCalledTimes(2);
// everthing OK // everthing OK
validateOptions(assignDeep({}, options, { abc: 'C' }), template, {}, true); validateOptions(assignDeep({}, options, { abc: 'C' }), template, null, true);
expect(console.warn).toBeCalledTimes(2); expect(console.warn).toBeCalledTimes(2);
console.warn = warn; console.warn = warn;
packages/overlayscrollbars/types/lifecycles/lifecycleHub.d.ts
Vendored
+5 -5
View File
@@ -1,5 +1,5 @@
import { XY, TRBL, CacheValues, OptionsValidated } from 'support'; import { XY, TRBL, CacheValues } from 'support';
import { Options } from 'options'; import { OverlayScrollbarsOptions } from 'options';
import { StructureSetup } from 'setups/structureSetup'; import { StructureSetup } from 'setups/structureSetup';
import { StyleObject } from 'typings'; import { StyleObject } from 'typings';
export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>; export declare type LifecycleCheckOption = <T>(path: string) => LifecycleOptionInfo<T>;
@@ -23,11 +23,11 @@ export interface LifecycleUpdateHints extends LifecycleAdaptiveUpdateHints {
} }
export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void; export declare type Lifecycle = (updateHints: LifecycleUpdateHints, checkOption: LifecycleCheckOption, force: boolean) => Partial<LifecycleAdaptiveUpdateHints> | void;
export interface LifecycleHubInstance { export interface LifecycleHubInstance {
_update(changedOptions?: OptionsValidated<Options> | null, force?: boolean): void; _update(changedOptions?: Partial<OverlayScrollbarsOptions> | null, force?: boolean): void;
_destroy(): void; _destroy(): void;
} }
export interface LifecycleHub { export interface LifecycleHub {
_options: Options; _options: OverlayScrollbarsOptions;
_structureSetup: StructureSetup; _structureSetup: StructureSetup;
_doViewportArrange: boolean; _doViewportArrange: boolean;
_getPaddingInfo(): PaddingInfo; _getPaddingInfo(): PaddingInfo;
@@ -37,4 +37,4 @@ export interface LifecycleHub {
_getViewportOverflowScroll(): XY<boolean>; _getViewportOverflowScroll(): XY<boolean>;
_setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void; _setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
} }
export declare const createLifecycleHub: (options: Options, structureSetup: StructureSetup) => LifecycleHubInstance; export declare const createLifecycleHub: (options: OverlayScrollbarsOptions, structureSetup: StructureSetup) => LifecycleHubInstance;
packages/overlayscrollbars/types/options/options.d.ts
Vendored
+2 -2
View File
@@ -1,2 +1,2 @@
import { Options } from 'options'; import { OverlayScrollbarsOptions } from 'options';
export declare const optionsTemplate: import("../support/options").OptionsTemplate<Required<Options>>, defaultOptions: Required<Options>; export declare const optionsTemplate: import("../support/options").OptionsTemplate<Required<OverlayScrollbarsOptions>>, defaultOptions: Required<OverlayScrollbarsOptions>;
packages/overlayscrollbars/types/overlayscrollbars/OverlayScrollbars.d.ts
Vendored
+2 -2
View File
@@ -1,4 +1,4 @@
import { OSTarget, OSTargetObject } from 'typings'; import { OSTarget, OSTargetObject } from 'typings';
import { Options } from 'options'; import { OverlayScrollbarsOptions } from 'options';
declare const OverlayScrollbars: (target: OSTarget | OSTargetObject, options?: Options | undefined, extensions?: any) => any; declare const OverlayScrollbars: (target: OSTarget | OSTargetObject, options?: OverlayScrollbarsOptions | undefined, extensions?: any) => any;
export { OverlayScrollbars }; export { OverlayScrollbars };