From 2e7f8b4df4cd95ec42926510cb44444a1a4393a7 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Tue, 19 Jul 2022 17:24:32 +0200 Subject: [PATCH] improve code and public interface --- packages/overlayscrollbars/src/classnames.ts | 4 +- packages/overlayscrollbars/src/environment.ts | 38 +- .../overlayscrollbars/src/initialization.ts | 73 +++- packages/overlayscrollbars/src/options.ts | 19 +- .../src/overlayscrollbars.ts | 66 ++- .../optionsValidationPlugin.ts | 11 +- .../optionsValidationPlugin/validation.ts | 12 +- .../scrollbarsHidingPlugin.ts | 10 +- .../scrollbarsSetup.elements.ts | 16 +- .../scrollbarsSetup.initialization.ts | 8 +- .../overlayscrollbars/src/setups/setups.ts | 6 +- .../structureSetup/structureSetup.elements.ts | 72 ++-- .../structureSetup.initialization.ts | 6 +- .../setups/structureSetup/structureSetup.ts | 8 +- .../structureSetup/structureSetup.update.ts | 8 +- .../updateSegments/overflowUpdateSegment.ts | 10 +- .../src/styles/structure.scss | 21 +- packages/overlayscrollbars/src/typings.ts | 383 +----------------- .../structureSetup.elements.test.ts | 10 +- .../structureSetup/body/index.browser.ts | 69 +--- .../structureSetup/nesting/index.browser.ts | 4 +- .../structureSetup/observers/index.browser.ts | 4 +- .../structureSetup/update/index.browser.ts | 8 +- .../types/overlayscrollbars.d.ts | 297 -------------- 24 files changed, 226 insertions(+), 937 deletions(-) delete mode 100644 packages/overlayscrollbars/types/overlayscrollbars.d.ts diff --git a/packages/overlayscrollbars/src/classnames.ts b/packages/overlayscrollbars/src/classnames.ts index 9f0d1d9..77c2b51 100644 --- a/packages/overlayscrollbars/src/classnames.ts +++ b/packages/overlayscrollbars/src/classnames.ts @@ -6,12 +6,12 @@ export const dataAttributeHost = 'data-overlayscrollbars'; export const dataAttributeHostOverflowX = `${dataAttributeHost}-overflow-x`; export const dataAttributeHostOverflowY = `${dataAttributeHost}-overflow-y`; export const dataValueHostOverflowVisible = 'overflowVisible'; -export const dataValueHostViewportScrollbarStyling = 'viewportStyled'; +export const dataValueHostScrollbarHidden = 'scrollbarHidden'; export const classNamePadding = 'os-padding'; export const classNameViewport = 'os-viewport'; export const classNameViewportArrange = `${classNameViewport}-arrange`; export const classNameContent = 'os-content'; -export const classNameViewportScrollbarStyling = `${classNameViewport}-scrollbar-styled`; +export const classNameViewportScrollbarHidden = `${classNameViewport}-scrollbar-hidden`; export const classNameOverflowVisible = `os-overflow-visible`; export const classNameSizeObserver = 'os-size-observer'; diff --git a/packages/overlayscrollbars/src/environment.ts b/packages/overlayscrollbars/src/environment.ts index 4009be2..12cf983 100644 --- a/packages/overlayscrollbars/src/environment.ts +++ b/packages/overlayscrollbars/src/environment.ts @@ -24,11 +24,11 @@ import { classNameEnvironment, classNameEnvironmentFlexboxGlue, classNameEnvironmentFlexboxGlueMax, - classNameViewportScrollbarStyling, + classNameViewportScrollbarHidden, } from 'classnames'; import { Options, defaultOptions } from 'options'; -import { PartialOptions } from 'typings'; -import { InitializationStrategy } from 'initialization'; +import { DeepPartial } from 'typings'; +import { DefaultInitialization } from 'initialization'; import { getPlugins, ScrollbarsHidingPluginInstance, scrollbarsHidingPluginName } from 'plugins'; type EnvironmentEventMap = { @@ -42,13 +42,13 @@ export interface InternalEnvironment { readonly _rtlScrollBehavior: { n: boolean; i: boolean }; readonly _flexboxGlue: boolean; readonly _cssCustomProperties: boolean; - readonly _defaultInitializationStrategy: InitializationStrategy; - readonly _defaultDefaultOptions: Options; + readonly _staticDefaultInitialization: DefaultInitialization; + readonly _staticDefaultOptions: Options; _addListener(listener: EventListener): () => void; - _getInitializationStrategy(): InitializationStrategy; - _setInitializationStrategy(newInitializationStrategy: Partial): void; + _getDefaultInitialization(): DefaultInitialization; + _setDefaultInitialization(newInitialization: DeepPartial): void; _getDefaultOptions(): Options; - _setDefaultOptions(newDefaultOptions: PartialOptions): void; + _setDefaultOptions(newDefaultOptions: DeepPartial): void; } let environmentInstance: InternalEnvironment; @@ -75,7 +75,7 @@ const getNativeScrollbarSize = ( const getNativeScrollbarsHiding = (testElm: HTMLElement): boolean => { let result = false; - const revertClass = addClass(testElm, classNameViewportScrollbarStyling); + const revertClass = addClass(testElm, classNameViewportScrollbarHidden); try { result = style(testElm, cssProperty('scrollbar-width')) === 'none' || @@ -152,9 +152,13 @@ const createEnvironment = (): InternalEnvironment => { x: nativeScrollbarsSize.x === 0, y: nativeScrollbarsSize.y === 0, }; - const initializationStrategy = { + const defaultInitialization = { padding: !nativeScrollbarsHiding, content: false, + cancel: { + nativeScrollbarsOverlaid: true, + body: null, + }, }; const defaultDefaultOptions = assignDeep({}, defaultOptions); @@ -166,20 +170,20 @@ const createEnvironment = (): InternalEnvironment => { _rtlScrollBehavior: getRtlScrollBehavior(envElm, envChildElm), _flexboxGlue: getFlexboxGlue(envElm, envChildElm), _addListener: (listener) => addEvent('_', listener), - _getInitializationStrategy: assignDeep.bind( + _getDefaultInitialization: assignDeep.bind( 0, - {} as InitializationStrategy, - initializationStrategy + {} as DefaultInitialization, + defaultInitialization ), - _setInitializationStrategy(newInitializationStrategy) { - assignDeep(initializationStrategy, newInitializationStrategy); + _setDefaultInitialization(newInitializationStrategy) { + assignDeep(defaultInitialization, newInitializationStrategy); }, _getDefaultOptions: assignDeep.bind(0, {} as Options, defaultDefaultOptions), _setDefaultOptions(newDefaultOptions) { assignDeep(defaultDefaultOptions, newDefaultOptions); }, - _defaultInitializationStrategy: assignDeep({}, initializationStrategy), - _defaultDefaultOptions: assignDeep({}, defaultDefaultOptions), + _staticDefaultInitialization: assignDeep({}, defaultInitialization), + _staticDefaultOptions: assignDeep({}, defaultDefaultOptions), }; removeAttr(envElm, 'style'); diff --git a/packages/overlayscrollbars/src/initialization.ts b/packages/overlayscrollbars/src/initialization.ts index 253c193..aa75800 100644 --- a/packages/overlayscrollbars/src/initialization.ts +++ b/packages/overlayscrollbars/src/initialization.ts @@ -1,24 +1,37 @@ -import { isFunction, isNull, isUndefined } from 'support'; +import { isBoolean, isFunction, isNull, isUndefined } from 'support'; import type { StructureInitialization, - StructureInitializationStrategy, + DefaultStructureInitialization, } from 'setups/structureSetup'; import type { ScrollbarsInitialization, - ScrollbarsInitializationStrategy, + DefaultScrollbarsInitialization, } from 'setups/scrollbarsSetup'; +import { getEnvironment } from 'environment'; +import { DeepPartial } from 'typings'; +import { StructureSetupElementsObj } from 'setups/structureSetup/structureSetup.elements'; type StaticInitialization = HTMLElement | null | undefined; type DynamicInitialization = HTMLElement | boolean | null | undefined; +export type CancelInitialization = { + cancel: { + nativeScrollbarsOverlaid: boolean | undefined; + body: boolean | null | undefined; + }; +}; + export type InitializationTargetElement = HTMLElement | HTMLTextAreaElement; -export type InitializationTargetObject = StructureInitialization & ScrollbarsInitialization; +export type InitializationTargetObject = StructureInitialization & + ScrollbarsInitialization & + DeepPartial; export type InitializationTarget = InitializationTargetElement | InitializationTargetObject; -export type InitializationStrategy = StructureInitializationStrategy & - ScrollbarsInitializationStrategy; +export type DefaultInitialization = DefaultStructureInitialization & + DefaultScrollbarsInitialization & + CancelInitialization; /** * Static elements MUST be present. @@ -39,9 +52,9 @@ export type DynamicInitializationElement = | ((...args: Args) => DynamicInitialization) | DynamicInitialization; -export type InitializtationElementStrategy = Exclude; +export type DefaultInitializtationElement = Exclude; -export type DefaultInitializtationElementStrategy< +export type FallbackInitializtationElement< InitElm extends StaticInitializationElement | DynamicInitializationElement > = Extract any> extends (...args: infer P) => any ? (...args: P) => HTMLElement @@ -52,20 +65,20 @@ const resolveInitialization = (value: any, args: any): T => const staticInitializationElement = >( args: Parameters any>>, - defaultStaticInitializationElement: DefaultInitializtationElementStrategy, - staticInitializationElementStrategy?: InitializtationElementStrategy, + fallbackStaticInitializationElement: FallbackInitializtationElement, + defaultStaticInitializationElementStrategy?: DefaultInitializtationElement, staticInitializationElementValue?: T | false ): HTMLElement => resolveInitialization( staticInitializationElementValue || - resolveInitialization(staticInitializationElementStrategy, args), + resolveInitialization(defaultStaticInitializationElementStrategy, args), args - ) || defaultStaticInitializationElement.apply(0, args); + ) || fallbackStaticInitializationElement.apply(0, args); const dynamicInitializationElement = >( args: Parameters any>>, - defaultDynamicInitializationElement: DefaultInitializtationElementStrategy, - dynamicInitializationElementStrategy?: InitializtationElementStrategy, + fallbackDynamicInitializationElement: FallbackInitializtationElement, + defaultDynamicInitializationElementStrategy?: DefaultInitializtationElement, dynamicInitializationElementValue?: T | false ): HTMLElement | false => { let result = resolveInitialization( @@ -75,14 +88,40 @@ const dynamicInitializationElement = ( - dynamicInitializationElementStrategy, + defaultDynamicInitializationElementStrategy, args ); } return result === true || isNull(result) || isUndefined(result) - ? defaultDynamicInitializationElement.apply(0, args) + ? fallbackDynamicInitializationElement.apply(0, args) : result; }; -export { staticInitializationElement, dynamicInitializationElement }; +const cancelInitialization = ( + cancelInitializationValue: DeepPartial | false | null | undefined, + structureSetupElements: StructureSetupElementsObj +): boolean => { + const { nativeScrollbarsOverlaid, body } = cancelInitializationValue || {}; + const { _isBody, _viewportIsTarget } = structureSetupElements; + const { _getDefaultInitialization, _nativeScrollbarsOverlaid } = getEnvironment(); + const { nativeScrollbarsOverlaid: defaultNativeScrollbarsOverlaid, body: defaultbody } = + _getDefaultInitialization().cancel; + + const resolvedNativeScrollbarsOverlaid = + nativeScrollbarsOverlaid ?? defaultNativeScrollbarsOverlaid; + const resolvedDocumentScrollingElement = isBoolean(body) || isNull(body) ? body : defaultbody; + + const finalNativeScrollbarsOverlaid = + (_nativeScrollbarsOverlaid.x || _nativeScrollbarsOverlaid.y) && + resolvedNativeScrollbarsOverlaid; + const finalDocumentScrollingElement = + _isBody && + (isNull(resolvedDocumentScrollingElement) + ? !_viewportIsTarget + : resolvedDocumentScrollingElement); + + return !!finalNativeScrollbarsOverlaid || !!finalDocumentScrollingElement; +}; + +export { staticInitializationElement, dynamicInitializationElement, cancelInitialization }; diff --git a/packages/overlayscrollbars/src/options.ts b/packages/overlayscrollbars/src/options.ts index 8693d33..151bec0 100644 --- a/packages/overlayscrollbars/src/options.ts +++ b/packages/overlayscrollbars/src/options.ts @@ -1,5 +1,5 @@ import { assignDeep, each, isObject, keys, isArray, hasOwnProperty, isFunction } from 'support'; -import { PartialOptions, ReadonlyOptions } from 'typings'; +import { DeepPartial, ReadonlyOptions } from 'typings'; const opsStringify = (value: any) => JSON.stringify(value, (_, val) => { @@ -40,6 +40,7 @@ export type UpdatedCallback = (this: any, args?: UpdatedArgs) => void; export interface Options { paddingAbsolute: boolean; + showNativeOverlaidScrollbars: boolean; updating: { elementEvents: Array<[elementSelector: string, eventNames: string]> | null; attributes: string[] | null; @@ -59,10 +60,6 @@ export interface Options { clickScroll: boolean; touch: boolean; }; - nativeScrollbarsOverlaid: { - show: boolean; - initialize: boolean; - }; } export type ReadonlyOSOptions = ReadonlyOptions; @@ -97,6 +94,7 @@ export interface UpdatedArgs { export const defaultOptions: Options = { // resize: 'none', // none || both || horizontal || vertical || n || b || h || v paddingAbsolute: false, // true || false + showNativeOverlaidScrollbars: false, // true || false updating: { elementEvents: [['img', 'load']], // array of tuples || null debounce: [0, 33], // number || number array || null @@ -107,10 +105,6 @@ export const defaultOptions: Options = { x: 'scroll', // visible-hidden || visible-scroll || hidden || scroll || v-h || v-s || h || s y: 'scroll', // visible-hidden || visible-scroll || hidden || scroll || v-h || v-s || h || s }, - nativeScrollbarsOverlaid: { - show: false, // true || false - initialize: false, // true || false - }, scrollbars: { theme: 'os-theme-dark', visibility: 'auto', // visible || hidden || auto || v || h || a @@ -129,11 +123,8 @@ export const defaultOptions: Options = { */ }; -export const getOptionsDiff = ( - currOptions: T, - newOptions: PartialOptions -): PartialOptions => { - const diff: PartialOptions = {}; +export const getOptionsDiff = (currOptions: T, newOptions: DeepPartial): DeepPartial => { + const diff: DeepPartial = {}; const optionsKeys = keys(newOptions).concat(keys(currOptions)); each(optionsKeys, (optionKey) => { diff --git a/packages/overlayscrollbars/src/overlayscrollbars.ts b/packages/overlayscrollbars/src/overlayscrollbars.ts index 1bc749b..c623eec 100644 --- a/packages/overlayscrollbars/src/overlayscrollbars.ts +++ b/packages/overlayscrollbars/src/overlayscrollbars.ts @@ -20,11 +20,12 @@ import { OptionsValidationPluginInstance, } from 'plugins'; import { addInstance, getInstance, removeInstance } from 'instances'; -import type { PartialOptions, OverflowStyle } from 'typings'; -import type { +import type { DeepPartial, OverflowStyle } from 'typings'; +import { InitializationTarget, InitializationTargetObject, - InitializationStrategy, + DefaultInitialization, + cancelInitialization, } from 'initialization'; import type { InitialEventListeners as GeneralInitialEventListeners, @@ -34,7 +35,7 @@ import type { export interface OverlayScrollbarsStatic { ( target: InitializationTarget | InitializationTargetObject, - options?: PartialOptions, + options?: DeepPartial, eventListeners?: GeneralInitialEventListeners ): OverlayScrollbars; @@ -49,13 +50,13 @@ export interface Environment { rtlScrollBehavior: { n: boolean; i: boolean }; flexboxGlue: boolean; cssCustomProperties: boolean; - defaultInitializationStrategy: InitializationStrategy; - defaultDefaultOptions: Options; + staticDefaultInitialization: DefaultInitialization; + staticDefaultOptions: Options; - getInitializationStrategy(): InitializationStrategy; - setInitializationStrategy(newInitializationStrategy: Partial): void; + getDefaultInitialization(): DefaultInitialization; + setDefaultInitialization(newDefaultInitialization: DeepPartial): void; getDefaultOptions(): Options; - setDefaultOptions(newDefaultOptions: PartialOptions): void; + setDefaultOptions(newDefaultOptions: DeepPartial): void; } export interface State { @@ -87,7 +88,7 @@ export interface OnUpdatedEventListenerArgs { hostMutation: boolean; contentMutation: boolean; }; - changedOptions: PartialOptions; + changedOptions: DeepPartial; force: boolean; } @@ -103,7 +104,7 @@ export type EventListenerMap = { /** * Triggered after all elements, observers and events are destroyed. */ - destroyed: [instance: OverlayScrollbars, withdrawn: boolean]; + destroyed: [instance: OverlayScrollbars, canceled: boolean]; }; export type InitialEventListeners = GeneralInitialEventListeners; @@ -115,7 +116,7 @@ export type EventListener = GeneralEventLis export interface OverlayScrollbars { options(): Options; - options(newOptions?: PartialOptions): Options; + options(newOptions?: DeepPartial): Options; update(force?: boolean): OverlayScrollbars; @@ -143,13 +144,10 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = ( eventListeners? ): OverlayScrollbars => { let destroyed = false; - const { - _getDefaultOptions, - _nativeScrollbarsOverlaid: _nativeScrollbarIsOverlaid, - _addListener: addEnvListener, - } = getEnvironment(); + const { _getDefaultOptions, _addListener: addEnvListener } = getEnvironment(); const plugins = getPlugins(); - const instanceTarget = isHTMLElement(target) ? target : target.target; + const targetIsElement = isHTMLElement(target); + const instanceTarget = targetIsElement ? target : target.target; const potentialInstance = getInstance(instanceTarget); if (potentialInstance) { return potentialInstance; @@ -158,7 +156,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = ( const optionsValidationPlugin = plugins[ optionsValidationPluginName ] as OptionsValidationPluginInstance; - const validateOptions = (newOptions?: PartialOptions) => { + const validateOptions = (newOptions?: DeepPartial) => { const opts = newOptions || {}; const validate = optionsValidationPlugin && optionsValidationPlugin._; return validate ? validate(opts, true) : opts; @@ -178,11 +176,11 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = ( currentOptions, structureState ); - const update = (changedOptions: PartialOptions, force?: boolean) => { + const update = (changedOptions: DeepPartial, force?: boolean) => { updateStructure(changedOptions, !!force); }; const removeEnvListener = addEnvListener(update.bind(0, {}, true)); - const destroy = (withdrawn?: boolean) => { + const destroy = (canceled?: boolean) => { removeInstance(instanceTarget); removeEnvListener(); @@ -192,12 +190,12 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = ( destroyed = true; // eslint-disable-next-line no-use-before-define - triggerEvent('destroyed', [instance, !!withdrawn]); + triggerEvent('destroyed', [instance, !!canceled]); removeEvent(); }; const instance: OverlayScrollbars = { - options(newOptions?: PartialOptions) { + options(newOptions?: DeepPartial) { if (newOptions) { const changedOptions = getOptionsDiff(currentOptions, validateOptions(newOptions)); @@ -265,11 +263,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = ( } }); - if ( - _nativeScrollbarIsOverlaid.x && - _nativeScrollbarIsOverlaid.y && - !currentOptions.nativeScrollbarsOverlaid.initialize - ) { + if (cancelInitialization(!targetIsElement && target.cancel, structureState._elements)) { destroy(true); return instance; } @@ -323,10 +317,10 @@ OverlayScrollbars.env = () => { _rtlScrollBehavior, _flexboxGlue, _cssCustomProperties, - _defaultInitializationStrategy, - _defaultDefaultOptions, - _getInitializationStrategy, - _setInitializationStrategy, + _staticDefaultInitialization, + _staticDefaultOptions, + _getDefaultInitialization, + _setDefaultInitialization, _getDefaultOptions, _setDefaultOptions, } = getEnvironment(); @@ -339,11 +333,11 @@ OverlayScrollbars.env = () => { rtlScrollBehavior: _rtlScrollBehavior, flexboxGlue: _flexboxGlue, cssCustomProperties: _cssCustomProperties, - defaultInitializationStrategy: _defaultInitializationStrategy, - defaultDefaultOptions: _defaultDefaultOptions, + staticDefaultInitialization: _staticDefaultInitialization, + staticDefaultOptions: _staticDefaultOptions, - getInitializationStrategy: _getInitializationStrategy, - setInitializationStrategy: _setInitializationStrategy, + getDefaultInitialization: _getDefaultInitialization, + setDefaultInitialization: _setDefaultInitialization, getDefaultOptions: _getDefaultOptions, setDefaultOptions: _setDefaultOptions, } diff --git a/packages/overlayscrollbars/src/plugins/optionsValidationPlugin/optionsValidationPlugin.ts b/packages/overlayscrollbars/src/plugins/optionsValidationPlugin/optionsValidationPlugin.ts index 5f7fd5b..c4a8980 100644 --- a/packages/overlayscrollbars/src/plugins/optionsValidationPlugin/optionsValidationPlugin.ts +++ b/packages/overlayscrollbars/src/plugins/optionsValidationPlugin/optionsValidationPlugin.ts @@ -10,7 +10,7 @@ import { OptionsTemplateValue, optionsTemplateTypes as oTypes, } from 'plugins/optionsValidationPlugin/validation'; -import type { PartialOptions } from 'typings'; +import type { DeepPartial } from 'typings'; import type { Plugin } from 'plugins'; const numberAllowedValues: OptionsTemplateValue = oTypes.number; @@ -26,6 +26,7 @@ const scrollbarsAutoHideAllowedValues: OptionsTemplateValue = { // resize: resizeAllowedValues, // none || both || horizontal || vertical || n || b || paddingAbsolute: booleanAllowedValues, // true || false + showNativeOverlaidScrollbars: booleanAllowedValues, // true || false updating: { elementEvents: arrayNullValues, // array of tuples || null attributes: arrayNullValues, @@ -52,21 +53,17 @@ const optionsTemplate: OptionsTemplate = { inheritedAttrs: stringArrayNullAllowedValues, // string || array || nul }, */ - nativeScrollbarsOverlaid: { - show: booleanAllowedValues, // true || false - initialize: booleanAllowedValues, // true || false - }, }; export type OptionsValidationPluginInstance = { - _: (options: PartialOptions, doWriteErrors?: boolean) => PartialOptions; + _: (options: DeepPartial, doWriteErrors?: boolean) => DeepPartial; }; export const optionsValidationPluginName = '__osOptionsValidationPlugin'; export const optionsValidationPlugin: Plugin = { [optionsValidationPluginName]: { - _: (options: PartialOptions, doWriteErrors?: boolean) => { + _: (options: DeepPartial, doWriteErrors?: boolean) => { const [validated, foreign] = validateOptions(optionsTemplate, options, doWriteErrors); return { ...foreign, ...validated }; }, diff --git a/packages/overlayscrollbars/src/plugins/optionsValidationPlugin/validation.ts b/packages/overlayscrollbars/src/plugins/optionsValidationPlugin/validation.ts index 66524cf..6bf524f 100644 --- a/packages/overlayscrollbars/src/plugins/optionsValidationPlugin/validation.ts +++ b/packages/overlayscrollbars/src/plugins/optionsValidationPlugin/validation.ts @@ -1,6 +1,6 @@ import { each, hasOwnProperty, keys, push, isEmptyObject } from 'support/utils'; import { type, isArray, isUndefined, isPlainObject, isString } from 'support/utils/types'; -import { PlainObject, PartialOptions } from 'typings'; +import { PlainObject, DeepPartial } from 'typings'; export type OptionsObjectType = Record; export type OptionsFunctionType = (this: any, ...args: any[]) => any; @@ -26,7 +26,7 @@ export type OptionsTemplate = { }; export type OptionsValidationResult = [ - PartialOptions, // validated + DeepPartial, // validated Record // foreign ]; @@ -88,12 +88,12 @@ const optionsTemplateTypes: OptionsTemplateTypesDictionary = { */ const validateRecursive = ( template: OptionsTemplate, - options: PartialOptions, + options: DeepPartial, doWriteErrors?: boolean, propPath?: string ): OptionsValidationResult => { - const validatedOptions: PartialOptions = {}; - const optionsCopy: PartialOptions = { ...options }; + const validatedOptions: DeepPartial = {}; + const optionsCopy: DeepPartial = { ...options }; const props = keys(template).filter((prop) => hasOwnProperty(options, prop)); each(props, (prop: Extract) => { @@ -189,7 +189,7 @@ const validateRecursive = ( */ const validateOptions = ( template: OptionsTemplate, - options: PartialOptions, + options: DeepPartial, doWriteErrors?: boolean ): OptionsValidationResult => validateRecursive(template, options, doWriteErrors); diff --git a/packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts b/packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts index 0a6326e..3dbb49f 100644 --- a/packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts +++ b/packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts @@ -82,15 +82,11 @@ export const scrollbarsHidingPluginName = '__osScrollbarsHidingPlugin'; export const scrollbarsHidingPlugin: Plugin = { [scrollbarsHidingPluginName]: { _createUniqueViewportArrangeElement: (env: InternalEnvironment) => { - const { - _nativeScrollbarsHiding: _nativeScrollbarStyling, - _nativeScrollbarsOverlaid: _nativeScrollbarIsOverlaid, - _cssCustomProperties, - } = env; + const { _nativeScrollbarsHiding, _nativeScrollbarsOverlaid, _cssCustomProperties } = env; const create = !_cssCustomProperties && - !_nativeScrollbarStyling && - (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y); + !_nativeScrollbarsHiding && + (_nativeScrollbarsOverlaid.x || _nativeScrollbarsOverlaid.y); const result = create ? document.createElement('style') : false; if (result) { diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts index defd45d..91c56c3 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts +++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts @@ -29,7 +29,7 @@ import type { InitializationTarget } from 'initialization'; import type { StructureSetupElementsObj } from 'setups/structureSetup/structureSetup.elements'; import type { ScrollbarsInitialization, - ScrollbarsInitializationStrategy, + DefaultScrollbarsInitialization, ScrollbarsDynamicInitializationElement, } from 'setups/scrollbarsSetup/scrollbarsSetup.initialization'; import { StyleObject } from 'typings'; @@ -85,19 +85,17 @@ export const createScrollbarsSetupElements = ( target: InitializationTarget, structureSetupElements: StructureSetupElementsObj ): ScrollbarsSetupElements => { - const { _getInitializationStrategy } = getEnvironment(); - const { scrollbarsSlot: environmentScrollbarSlot } = - _getInitializationStrategy() as ScrollbarsInitializationStrategy; + const { _getDefaultInitialization } = getEnvironment(); + const { scrollbarsSlot: defaultScrollbarSlot } = + _getDefaultInitialization() as DefaultScrollbarsInitialization; const { _documentElm, _target, _host, _viewport, _targetIsElm } = structureSetupElements; - const initializationScrollbarSlot = _targetIsElm - ? null - : (target as ScrollbarsInitialization).scrollbarsSlot; + const scrollbarSlot = _targetIsElm ? null : (target as ScrollbarsInitialization).scrollbarsSlot; const evaluatedScrollbarSlot = generalDynamicInitializationElement( [_target, _host, _viewport], () => _host, - environmentScrollbarSlot, - initializationScrollbarSlot + defaultScrollbarSlot, + scrollbarSlot ); const scrollbarsAddRemoveClass = ( scrollbarStructures: ScrollbarStructure[], diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.initialization.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.initialization.ts index 9f7e12c..e89bb72 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.initialization.ts +++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.initialization.ts @@ -1,6 +1,6 @@ import type { InitializationTargetElement, - InitializtationElementStrategy, + DefaultInitializtationElement, DynamicInitializationElement, } from 'initialization'; @@ -20,8 +20,6 @@ export interface ScrollbarsInitialization { scrollbarsSlot?: ScrollbarsDynamicInitializationElement; } -export type ScrollbarsInitializationStrategy = { - [K in keyof ScrollbarsInitialization]: InitializtationElementStrategy< - ScrollbarsInitialization[K] - >; +export type DefaultScrollbarsInitialization = { + [K in keyof ScrollbarsInitialization]: DefaultInitializtationElement; }; diff --git a/packages/overlayscrollbars/src/setups/setups.ts b/packages/overlayscrollbars/src/setups/setups.ts index 97690b5..7aac5f0 100644 --- a/packages/overlayscrollbars/src/setups/setups.ts +++ b/packages/overlayscrollbars/src/setups/setups.ts @@ -1,11 +1,11 @@ import { assignDeep, hasOwnProperty } from 'support'; import type { Options, ReadonlyOSOptions } from 'options'; -import type { PartialOptions } from 'typings'; +import type { DeepPartial } from 'typings'; export type SetupElements> = [elements: T, destroy: () => void]; export type SetupUpdate = ( - changedOptions: PartialOptions, + changedOptions: DeepPartial, force: boolean, ...args: T ) => void; @@ -37,7 +37,7 @@ const getPropByPath = (obj: any, path: string): T => export const createOptionCheck = ( options: ReadonlyOSOptions, - changedOptions: PartialOptions, + changedOptions: DeepPartial, force?: boolean ): SetupUpdateCheckOption => (path: string) => diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts index d3af54b..19204ce 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts @@ -20,6 +20,8 @@ import { attrClass, hasAttrClass, ResizeObserverConstructor, + hasOwnProperty, + noop, } from 'support'; import { dataAttributeHost, @@ -28,7 +30,7 @@ import { classNamePadding, classNameViewport, classNameContent, - classNameViewportScrollbarStyling, + classNameViewportScrollbarHidden, } from 'classnames'; import { getEnvironment } from 'environment'; import { getPlugins, scrollbarsHidingPluginName } from 'plugins'; @@ -36,11 +38,11 @@ import type { ScrollbarsHidingPluginInstance } from 'plugins/scrollbarsHidingPlu import { staticInitializationElement as generalStaticInitializationElement, dynamicInitializationElement as generalDynamicInitializationElement, + InitializationTargetObject, } from 'initialization'; import type { InitializationTarget, InitializationTargetElement } from 'initialization'; import type { StructureDynamicInitializationElement, - StructureInitialization, StructureStaticInitializationElement, } from 'setups/structureSetup/structureSetup.initialization'; @@ -60,8 +62,6 @@ export interface StructureSetupElementsObj { // ctx ---- _isTextarea: boolean; _isBody: boolean; - _htmlElm: HTMLHtmlElement; - _bodyElm: HTMLBodyElement; _windowElm: Window; _documentElm: Document; _targetIsElm: boolean; @@ -86,29 +86,35 @@ export const createStructureSetupElements = ( target: InitializationTarget ): StructureSetupElements => { const env = getEnvironment(); - const { _getInitializationStrategy, _nativeScrollbarsHiding } = env; + const { _getDefaultInitialization, _nativeScrollbarsHiding } = env; const scrollbarsHidingPlugin = getPlugins()[scrollbarsHidingPluginName] as | ScrollbarsHidingPluginInstance | undefined; const createUniqueViewportArrangeElement = scrollbarsHidingPlugin && scrollbarsHidingPlugin._createUniqueViewportArrangeElement; const { - host: hostInitializationStrategy, - viewport: viewportInitializationStrategy, - padding: paddingInitializationStrategy, - content: contentInitializationStrategy, - } = _getInitializationStrategy(); + host: defaultHostInitializationStrategy, + viewport: defaultViewportInitializationStrategy, + padding: defaultPaddingInitializationStrategy, + content: defaultContentInitializationStrategy, + } = _getDefaultInitialization(); const targetIsElm = isHTMLElement(target); - const targetStructureInitialization = target as StructureInitialization; - const targetElement = targetIsElm - ? (target as InitializationTargetElement) - : targetStructureInitialization.target; + const targetStructureInitialization = (targetIsElm ? {} : target) as InitializationTargetObject; + const { + host: hostInitializationStrategy, + padding: paddingInitializationStrategy, + viewport: viewportInitializationStrategy, + content: contentInitializationStrategy, + } = targetStructureInitialization; + + const targetElement = targetIsElm ? target : targetStructureInitialization.target; const isTextarea = is(targetElement, 'textarea'); - const isBody = !isTextarea && is(targetElement, 'body'); - const ownerDocument = targetElement!.ownerDocument; - const bodyElm = ownerDocument.body as HTMLBodyElement; + const ownerDocument = targetElement.ownerDocument; + const isBody = targetElement === ownerDocument.body; const wnd = ownerDocument.defaultView as Window; - const singleElmSupport = !!ResizeObserverConstructor && !isTextarea && _nativeScrollbarsHiding; + const singleElmSupport = isBody + ? _nativeScrollbarsHiding + : !!ResizeObserverConstructor && !isTextarea && _nativeScrollbarsHiding; const staticInitializationElement = generalStaticInitializationElement.bind(0, [ targetElement, @@ -120,13 +126,15 @@ export const createStructureSetupElements = ( const viewportElement = [ staticInitializationElement( createNewDiv, - viewportInitializationStrategy, - targetStructureInitialization.viewport + defaultViewportInitializationStrategy, + isBody && !hasOwnProperty(targetStructureInitialization, 'viewport') + ? targetElement + : viewportInitializationStrategy ), - staticInitializationElement(createNewDiv, viewportInitializationStrategy), + staticInitializationElement(createNewDiv, defaultViewportInitializationStrategy), staticInitializationElement(createNewDiv), ].filter((potentialViewport) => - !singleElmSupport ? potentialViewport !== targetElement : true + singleElmSupport ? true : potentialViewport !== targetElement )[0]; const viewportIsTarget = viewportElement === targetElement; const evaluatedTargetObj: StructureSetupElementsObj = { @@ -134,8 +142,8 @@ export const createStructureSetupElements = ( _host: isTextarea ? staticInitializationElement( createNewDiv, - hostInitializationStrategy, - targetStructureInitialization.host + defaultHostInitializationStrategy, + hostInitializationStrategy ) : (targetElement as HTMLElement), _viewport: viewportElement, @@ -143,15 +151,15 @@ export const createStructureSetupElements = ( !viewportIsTarget && dynamicInitializationElement( createNewDiv, - paddingInitializationStrategy, - targetStructureInitialization.padding + defaultPaddingInitializationStrategy, + paddingInitializationStrategy ), _content: !viewportIsTarget && dynamicInitializationElement( createNewDiv, - contentInitializationStrategy, - targetStructureInitialization.content + defaultContentInitializationStrategy, + contentInitializationStrategy ), _viewportArrange: !viewportIsTarget && @@ -160,8 +168,6 @@ export const createStructureSetupElements = ( createUniqueViewportArrangeElement(env), _windowElm: wnd, _documentElm: ownerDocument, - _htmlElm: parent(bodyElm) as HTMLHtmlElement, - _bodyElm: bodyElm, _isTextarea: isTextarea, _isBody: isBody, _targetIsElm: targetIsElm, @@ -197,6 +203,9 @@ export const createStructureSetupElements = ( const removePaddingClass = addClass(_padding, classNamePadding); const removeViewportClass = addClass(_viewport, !viewportIsTarget && classNameViewport); const removeContentClass = addClass(_content, classNameContent); + const removeHtmlClass = isBody + ? addClass(parent(targetElement), classNameViewportScrollbarHidden) + : noop; // only insert host for textarea after target if it was generated if (isTextareaHostGenerated) { @@ -214,6 +223,7 @@ export const createStructureSetupElements = ( appendChildren(_viewport, _content); push(destroyFns, () => { + removeHtmlClass(); removeHostDataAttr(); removeAttr(_viewport, dataAttributeHostOverflowX); removeAttr(_viewport, dataAttributeHostOverflowY); @@ -233,7 +243,7 @@ export const createStructureSetupElements = ( }); if (_nativeScrollbarsHiding && !viewportIsTarget) { - push(destroyFns, removeClass.bind(0, _viewport, classNameViewportScrollbarStyling)); + push(destroyFns, removeClass.bind(0, _viewport, classNameViewportScrollbarHidden)); } if (_viewportArrange) { insertBefore(_viewport, _viewportArrange); diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.initialization.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.initialization.ts index 71e7d27..45bcc64 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.initialization.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.initialization.ts @@ -2,7 +2,7 @@ import type { InitializationTargetElement, StaticInitializationElement, DynamicInitializationElement, - InitializtationElementStrategy, + DefaultInitializtationElement, } from 'initialization'; export type StructureStaticInitializationElement = StaticInitializationElement< @@ -31,8 +31,8 @@ export interface StructureInitialization { content?: StructureDynamicInitializationElement; } -export type StructureInitializationStrategy = { - [K in keyof Omit]: InitializtationElementStrategy< +export type DefaultStructureInitialization = { + [K in keyof Omit]: DefaultInitializtationElement< StructureInitialization[K] >; }; diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts index 12bee77..24816af 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts @@ -9,7 +9,7 @@ import type { TRBL, XY, EventListener } from 'support'; import type { Options, ReadonlyOSOptions } from 'options'; import type { Setup } from 'setups'; import type { InitializationTarget } from 'initialization'; -import type { PartialOptions, StyleObject, OverflowStyle } from 'typings'; +import type { DeepPartial, StyleObject, OverflowStyle } from 'typings'; export interface StructureSetupState { _padding: TRBL; @@ -30,11 +30,7 @@ export interface StructureSetupStaticState { } type StructureSetupEventMap = { - u: [ - updateHints: StructureSetupUpdateHints, - changedOptions: PartialOptions, - force: boolean - ]; + u: [updateHints: StructureSetupUpdateHints, changedOptions: DeepPartial, force: boolean]; }; const initialXYNumber = { x: 0, y: 0 }; diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts index 2f80e86..3b9755d 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts @@ -57,13 +57,9 @@ export const createStructureSetupUpdate = ( state: SetupState ): StructureSetupUpdate => { const { _viewport } = structureSetupElements; - const { - _nativeScrollbarsHiding: _nativeScrollbarStyling, - _nativeScrollbarsOverlaid: _nativeScrollbarIsOverlaid, - _flexboxGlue, - } = getEnvironment(); + const { _nativeScrollbarsHiding, _nativeScrollbarsOverlaid, _flexboxGlue } = getEnvironment(); const doViewportArrange = - !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y); + !_nativeScrollbarsHiding && (_nativeScrollbarsOverlaid.x || _nativeScrollbarsOverlaid.y); const updateSegments: StructureSetupUpdateSegment[] = [ createTrinsicUpdateSegment(structureSetupElements, state), diff --git a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts index b064dc2..e26a12d 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts @@ -16,12 +16,12 @@ import { } from 'support'; import { getEnvironment } from 'environment'; import { - classNameViewportScrollbarStyling, + classNameViewportScrollbarHidden, classNameOverflowVisible, dataAttributeHost, dataAttributeHostOverflowX, dataAttributeHostOverflowY, - dataValueHostViewportScrollbarStyling, + dataValueHostScrollbarHidden, dataValueHostOverflowVisible, } from 'classnames'; import { getPlugins, scrollbarsHidingPluginName } from 'plugins'; @@ -328,7 +328,7 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( } = updateHints; const { _heightIntrinsic, _directionIsRTL } = getState(); const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] = - checkOption('nativeScrollbarsOverlaid.show'); + checkOption('showNativeOverlaidScrollbars'); const [overflow, overflowChanged] = checkOption>('overflow'); const showNativeOverlaidScrollbars = @@ -356,8 +356,8 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarsHiding) { _viewportAddRemoveClass( - classNameViewportScrollbarStyling, - dataValueHostViewportScrollbarStyling, + classNameViewportScrollbarHidden, + dataValueHostScrollbarHidden, !showNativeOverlaidScrollbars ); } diff --git a/packages/overlayscrollbars/src/styles/structure.scss b/packages/overlayscrollbars/src/styles/structure.scss index 0ce2a2b..8b0fb8b 100644 --- a/packages/overlayscrollbars/src/styles/structure.scss +++ b/packages/overlayscrollbars/src/styles/structure.scss @@ -53,17 +53,20 @@ .os-viewport { -ms-overflow-style: scrollbar !important; } -[data-overlayscrollbars~='viewportStyled'], -.os-viewport-scrollbar-styled.os-environment, -.os-viewport-scrollbar-styled.os-viewport { +[data-overlayscrollbars~='scrollbarHidden'], +html.os-viewport-scrollbar-hidden, +.os-viewport-scrollbar-hidden.os-environment, +.os-viewport-scrollbar-hidden.os-viewport { scrollbar-width: none !important; } -[data-overlayscrollbars~='viewportStyled']::-webkit-scrollbar, -[data-overlayscrollbars~='viewportStyled']::-webkit-scrollbar-corner, -.os-viewport-scrollbar-styled.os-environment::-webkit-scrollbar, -.os-viewport-scrollbar-styled.os-viewport::-webkit-scrollbar, -.os-viewport-scrollbar-styled.os-environment::-webkit-scrollbar-corner, -.os-viewport-scrollbar-styled.os-viewport::-webkit-scrollbar-corner { +[data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar, +[data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar-corner, +html.os-viewport-scrollbar-hidden::-webkit-scrollbar, +html.os-viewport-scrollbar-hidden::-webkit-scrollbar-corner, +.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar, +.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar-corner, +.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar, +.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar-corner { display: none !important; width: 0px !important; height: 0px !important; diff --git a/packages/overlayscrollbars/src/typings.ts b/packages/overlayscrollbars/src/typings.ts index e75cf24..222afe2 100644 --- a/packages/overlayscrollbars/src/typings.ts +++ b/packages/overlayscrollbars/src/typings.ts @@ -1,5 +1,5 @@ -export type PartialOptions = { - [P in keyof T]?: T[P] extends Record ? PartialOptions : T[P]; +export type DeepPartial = { + [P in keyof T]?: T[P] extends Record ? DeepPartial : T[P]; }; export type ReadonlyOptions = { @@ -15,382 +15,3 @@ export type StyleObject = { }; export type OverflowStyle = 'scroll' | 'hidden' | 'visible'; - -/* -export namespace OverlayScrollbars { - export type ResizeBehavior = 'none' | 'both' | 'horizontal' | 'vertical'; - - export type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll'; - - export type VisibilityBehavior = 'visible' | 'hidden' | 'auto'; - - export type AutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move'; - - export type ScrollBehavior = 'always' | 'ifneeded' | 'never'; - - export type BlockBehavior = 'begin' | 'end' | 'center' | 'nearest'; - - export type Easing = string | null | undefined; - - export type Margin = number | boolean; - - export type Position = number | string; - - export type Extensions = string | ReadonlyArray | { [extensionName: string]: {} }; - - export type BasicEventCallback = (this: OverlayScrollbars) => void; - - export type ScrollEventCallback = (this: OverlayScrollbars, args?: UIEvent) => void; - - export type OverflowChangedCallback = (this: OverlayScrollbars, args?: OverflowChangedArgs) => void; - - export type OverflowAmountChangedCallback = (this: OverlayScrollbars, args?: OverflowAmountChangedArgs) => void; - - export type DirectionChangedCallback = (this: OverlayScrollbars, args?: DirectionChangedArgs) => void; - - export type SizeChangedCallback = (this: OverlayScrollbars, args?: SizeChangedArgs) => void; - - export type UpdatedCallback = (this: OverlayScrollbars, args?: UpdatedArgs) => void; - - export type Coordinates = - | { x?: Position; y?: Position } - | { l?: Position; t?: Position } - | { left?: Position; top?: Position } - | [Position, Position] - | Position - | HTMLElement - | { - el: HTMLElement; - scroll?: ScrollBehavior | { x?: ScrollBehavior; y?: ScrollBehavior } | [ScrollBehavior, ScrollBehavior]; - block?: BlockBehavior | { x?: BlockBehavior; y?: BlockBehavior } | [BlockBehavior, BlockBehavior]; - margin?: - | Margin - | { - top?: Margin; - right?: Margin; - bottom?: Margin; - left?: Margin; - } - | [Margin, Margin] - | [Margin, Margin, Margin, Margin]; - }; - - export interface OverflowChangedArgs { - x: boolean; - y: boolean; - xScrollable: boolean; - yScrollable: boolean; - clipped: boolean; - } - - export interface OverflowAmountChangedArgs { - x: number; - y: number; - } - - export interface DirectionChangedArgs { - isRTL: number; - dir: string; - } - - export interface SizeChangedArgs { - width: number; - height: number; - } - - export interface UpdatedArgs { - forced: boolean; - } - - export interface Options { - className?: string | null; - resize?: ResizeBehavior; - sizeAutoCapable?: boolean; - clipAlways?: boolean; - normalizeRTL?: boolean; - paddingAbsolute?: boolean; - autoUpdate?: boolean | null; - autoUpdateInterval?: number; - updateOnLoad?: string | ReadonlyArray | null; - nativeScrollbarsOverlaid?: { - showNativeScrollbars?: boolean; - initialize?: boolean; - }; - overflowBehavior?: { - x?: OverflowBehavior; - y?: OverflowBehavior; - }; - scrollbars?: { - visibility?: VisibilityBehavior; - autoHide?: AutoHideBehavior; - autoHideDelay?: number; - dragScrolling?: boolean; - clickScrolling?: boolean; - touchSupport?: boolean; - snapHandle?: boolean; - }; - textarea?: { - dynWidth?: boolean; - dynHeight?: boolean; - inheritedAttrs?: string | ReadonlyArray | 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; - }; - } - - export interface ScrollInfo { - position: { - x: number; - y: number; - }; - ratio: { - x: number; - y: number; - }; - max: { - x: number; - y: number; - }; - handleOffset: { - x: number; - y: number; - }; - handleLength: { - x: number; - y: number; - }; - handleLengthRatio: { - x: number; - y: number; - }; - trackLength: { - x: number; - y: number; - }; - snappedHandleOffset: { - x: number; - y: number; - }; - isRTL: boolean; - isRTLNormalized: boolean; - } - - export interface Elements { - target: HTMLElement; - host: HTMLElement; - padding: HTMLElement; - viewport: HTMLElement; - content: HTMLElement; - scrollbarHorizontal: { - scrollbar: HTMLElement; - track: HTMLElement; - handle: HTMLElement; - }; - scrollbarVertical: { - scrollbar: HTMLElement; - track: HTMLElement; - handle: HTMLElement; - }; - scrollbarCorner: HTMLElement; - } - - export interface State { - destroyed: boolean; - sleeping: boolean; - autoUpdate: boolean; - widthAuto: boolean; - heightAuto: boolean; - documentMixed: boolean; - padding: { - t: number; - r: number; - b: number; - l: number; - }; - overflowAmount: { - x: number; - y: number; - }; - hideOverflow: { - x: boolean; - y: boolean; - xs: boolean; - ys: boolean; - }; - hasOverflow: { - x: boolean; - y: boolean; - }; - contentScrollSize: { - width: number; - height: number; - }; - viewportSize: { - width: number; - height: number; - }; - hostSize: { - width: number; - height: number; - }; - } - - export interface Extension { - contract(global: any): boolean; - - added(options?: {}): void; - - removed(): void; - - on( - callbackName: string, - callbackArgs?: UIEvent | OverflowChangedArgs | OverflowAmountChangedArgs | DirectionChangedArgs | SizeChangedArgs | UpdatedArgs, - ): void; - } - - export interface ExtensionInfo { - name: string; - extensionFactory: (this: OverlayScrollbars, defaultOptions: {}, compatibility: Compatibility, framework: any) => Extension; - defaultOptions?: {}; - } - - export interface Globals { - defaultOptions: {}; - autoUpdateLoop: boolean; - autoUpdateRecommended: boolean; - supportMutationObserver: boolean; - supportResizeObserver: boolean; - supportPassiveEvents: boolean; - supportTransform: boolean; - supportTransition: boolean; - restrictedMeasuring: boolean; - nativeScrollbarStyling: boolean; - cssCalc: string | null; - nativeScrollbarSize: { - x: number; - y: number; - }; - nativeScrollbarIsOverlaid: { - x: boolean; - y: boolean; - }; - overlayScrollbarDummySize: { - x: number; - y: number; - }; - rtlScrollBehavior: { - i: boolean; - n: boolean; - }; - } - - export interface Compatibility { - wW(): number; - wH(): number; - mO(): any; - rO(): any; - rAF(): (callback: (...args: any[]) => any) => number; - cAF(): (requestID: number) => void; - now(): number; - stpP(event: Event): void; - prvD(event: Event): void; - page(event: MouseEvent): { x: number; y: number }; - mBtn(event: MouseEvent): number; - inA(item: T, array: T[]): number; - isA(obj: any): boolean; - type(obj: any): string; - bind(func: (...args: any[]) => any, thisObj: any, ...args: any[]): any; - } -} - -interface OverlayScrollbars { - options(): OverlayScrollbars.Options; - options(options: OverlayScrollbars.Options): void; - options(optionName: string): any; - options(optionName: string, optionValue: {} | null): void; - - update(force?: boolean): void; - - sleep(): void; - - scroll(): OverlayScrollbars.ScrollInfo; - scroll( - coordinates: OverlayScrollbars.Coordinates, - duration?: number, - easing?: - | OverlayScrollbars.Easing - | { x?: OverlayScrollbars.Easing; y?: OverlayScrollbars.Easing } - | [OverlayScrollbars.Easing, OverlayScrollbars.Easing], - complete?: (...args: any[]) => any, - ): void; - scroll(coordinates: OverlayScrollbars.Coordinates, options: {}): void; - - scrollStop(): OverlayScrollbars; - - getElements(): OverlayScrollbars.Elements; - getElements(elementName: string): any; - - getState(): OverlayScrollbars.State; - getState(stateProperty: string): any; - - destroy(): void; - - ext(): {}; - ext(extensionName: string): OverlayScrollbars.Extension; - - addExt(extensionName: string, options: {}): OverlayScrollbars.Extension; - - removeExt(extensionName: string): boolean; -} - -interface OverlayScrollbarsStatic { - (element: HTMLElement | Element, options: OverlayScrollbars.Options, extensions?: OverlayScrollbars.Extensions): OverlayScrollbars; - (element: HTMLElement | Element | null): OverlayScrollbars | undefined; - - (elements: NodeListOf | ReadonlyArray, options: OverlayScrollbars.Options, extensions?: OverlayScrollbars.Extensions): - | OverlayScrollbars - | OverlayScrollbars[] - | undefined; - (elements: NodeListOf | ReadonlyArray, filter?: string | ((element: Element, instance: OverlayScrollbars) => boolean)): - | OverlayScrollbars - | OverlayScrollbars[] - | undefined; - - globals(): OverlayScrollbars.Globals; - - defaultOptions(): OverlayScrollbars.Options; - defaultOptions(newDefaultOptions: OverlayScrollbars.Options): void; - - extension(): { - [index: number]: OverlayScrollbars.ExtensionInfo; - length: number; - }; - extension(extensionName: string): OverlayScrollbars.ExtensionInfo; - extension( - extensionName: string, - extensionFactory: ( - this: OverlayScrollbars, - defaultOptions: {}, - compatibility: OverlayScrollbars.Compatibility, - framework: any, - ) => OverlayScrollbars.Extension, - defaultOptions?: {}, - ): void; - extension(extensionName: string, extensionFactory: null | undefined): void; - - valid(osInstance: any): boolean; -} - -*/ diff --git a/packages/overlayscrollbars/tests/jest/setups/structureSetup/structureSetup.elements.test.ts b/packages/overlayscrollbars/tests/jest/setups/structureSetup/structureSetup.elements.test.ts index 5d8684e..0dc01dc 100644 --- a/packages/overlayscrollbars/tests/jest/setups/structureSetup/structureSetup.elements.test.ts +++ b/packages/overlayscrollbars/tests/jest/setups/structureSetup/structureSetup.elements.test.ts @@ -5,7 +5,7 @@ import { createStructureSetupElements, StructureSetupElementsObj, } from 'setups/structureSetup/structureSetup.elements'; -import type { InitializationTarget, InitializtationElementStrategy } from 'initialization'; +import type { InitializationTarget, DefaultInitializtationElement } from 'initialization'; import type { StructureInitialization, StructureStaticInitializationElement, @@ -208,8 +208,8 @@ const assertCorrectSetupElements = ( inputStrategy: StructureStaticInitializationElement | StructureDynamicInitializationElement, isStaticStrategy: boolean, strategy: - | InitializtationElementStrategy - | InitializtationElementStrategy, + | DefaultInitializtationElement + | DefaultInitializtationElement, kind: 'padding' | 'viewport' | 'content' | 'host' ) => { const input = isFunction(inputStrategy) ? inputStrategy(target) : inputStrategy; @@ -224,7 +224,7 @@ const assertCorrectSetupElements = ( if (input === undefined) { if (isStaticStrategy) { strategy = - strategy as InitializtationElementStrategy; + strategy as DefaultInitializtationElement; if (typeof strategy === 'function') { const result = strategy(target); if (_viewportIsTarget) { @@ -243,7 +243,7 @@ const assertCorrectSetupElements = ( } } else { strategy = - strategy as InitializtationElementStrategy; + strategy as DefaultInitializtationElement; if (typeof strategy === 'function') { const result = strategy(target); diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/body/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/body/index.browser.ts index 0ca4b68..0a980c0 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/body/index.browser.ts +++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/body/index.browser.ts @@ -2,67 +2,10 @@ import './index.scss'; import 'index.scss'; import { OverlayScrollbars } from 'overlayscrollbars'; -OverlayScrollbars.env().setDefaultOptions({ - nativeScrollbarsOverlaid: { initialize: true }, +// test with different cancel values for body + +OverlayScrollbars.env().setDefaultInitialization({ + cancel: { nativeScrollbarsOverlaid: false }, }); - -OverlayScrollbars.env().setInitializationStrategy({ viewport: (target) => target }); - -window.os = OverlayScrollbars(document.body, {}); - -// test viewport inheritted attrs (tabindex) for multiple and single element init -// test appear & resize for multiple and single element init -// test children changing attr according to dom observer - -/* -import { OverlayScrollbars } from 'overlayscrollbars'; - -import should from 'should'; -import { resize } from '@/testing-browser/Resize'; -import { timeout } from '@/testing-browser/timeout'; -import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult'; -import { addClass, each, isArray, removeAttr, style } from 'support'; - -OverlayScrollbars.env().setDefaultOptions({ - nativeScrollbarsOverlaid: { initialize: true }, -}); - - - - -/* -const startBtn: HTMLButtonElement | null = document.querySelector('#start'); -const target: HTMLElement | null = document.querySelector('#target'); -const updatesSlot: HTMLElement | null = document.querySelector('#update'); - -let updateCount = 0; - -const osInstance = OverlayScrollbars( - { target: target! }, - { - updating: { - ignoreMutation(mutation) { - console.log(mutation); - }, - }, - }, - { - updated() { - updateCount++; - requestAnimationFrame(() => { - if (updatesSlot) { - updatesSlot.textContent = `${updateCount}`; - } - }); - }, - } -); - -const start = async () => { - setTestResult(null); - - setTestResult(true); -}; - -startBtn?.addEventListener('click', start); -*/ +// @ts-ignore +window.os = OverlayScrollbars({ target: document.body, cancel: { body: null } }, {}); diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts index 5f2814d..c825a8a 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts +++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts @@ -18,8 +18,8 @@ if (!OverlayScrollbars.env().scrollbarsHiding) { // @ts-ignore window.OverlayScrollbars = OverlayScrollbars; -OverlayScrollbars.env().setDefaultOptions({ - nativeScrollbarsOverlaid: { initialize: true }, +OverlayScrollbars.env().setDefaultInitialization({ + cancel: { nativeScrollbarsOverlaid: false }, }); const startBtn: HTMLButtonElement | null = document.querySelector('#start'); diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts index 795faae..85247b1 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts +++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts @@ -14,8 +14,8 @@ import { timeout } from '@/testing-browser/timeout'; import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult'; import { addClass, each, isArray, removeAttr, style } from 'support'; -OverlayScrollbars.env().setDefaultOptions({ - nativeScrollbarsOverlaid: { initialize: true }, +OverlayScrollbars.env().setInitializationStrategy({ + cancel: { nativeScrollbarsOverlaid: false }, }); diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts index 3be7220..d27c3e8 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts +++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts @@ -23,7 +23,7 @@ import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult'; import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select'; import { timeout } from '@/testing-browser/timeout'; import { Options } from 'options'; -import { PartialOptions } from 'typings'; +import { DeepPartial } from 'typings'; import { addPlugin, scrollbarsHidingPlugin, sizeObserverPlugin } from 'plugins'; if (!window.ResizeObserver) { @@ -36,8 +36,8 @@ if (!OverlayScrollbars.env().scrollbarsHiding) { // @ts-ignore window.OverlayScrollbars = OverlayScrollbars; -OverlayScrollbars.env().setDefaultOptions({ - nativeScrollbarsOverlaid: { initialize: true }, +OverlayScrollbars.env().setDefaultInitialization({ + cancel: { nativeScrollbarsOverlaid: false }, }); interface Metrics { @@ -587,7 +587,7 @@ const iterateMinMax = async (afterEach?: () => any) => { await iterate(containerMinMaxSelect, afterEach); }; -const overflowTest = async (osOptions?: PartialOptions) => { +const overflowTest = async (osOptions?: DeepPartial) => { const additiveOverflow = () => { if (isFractionalPixelRatio()) { return 1; diff --git a/packages/overlayscrollbars/types/overlayscrollbars.d.ts b/packages/overlayscrollbars/types/overlayscrollbars.d.ts deleted file mode 100644 index 0980e09..0000000 --- a/packages/overlayscrollbars/types/overlayscrollbars.d.ts +++ /dev/null @@ -1,297 +0,0 @@ -type CacheValues = [ - value: T, - changed: boolean, - previous?: T -]; -type UpdateCache = (force?: boolean) => CacheValues; -interface WH { - w: T; - h: T; -} -type PartialOptions = { - [P in keyof T]?: T[P] extends Record ? PartialOptions : T[P]; -}; -type StyleObject = { - [Key in keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : "")]?: string | number; -}; -type OverflowStyle = "scroll" | "hidden" | "visible"; -interface TRBL { - t: number; - r: number; - b: number; - l: number; -} -interface XY { - x: T; - y: T; -} -type EventListener, Name extends keyof EventMap> = (...args: EventMap[Name]) => void; -type InitialEventListeners> = { - [K in keyof EventMap]?: EventListener | EventListener[]; -}; -type OverflowBehavior = "hidden" | "scroll" | "visible" | "visible-hidden" | "visible-scroll"; -type ScrollbarVisibilityBehavior = "visible" | "hidden" | "auto"; -type ScrollbarAutoHideBehavior = "never" | "scroll" | "leave" | "move"; -interface Options { - paddingAbsolute: boolean; - updating: { - elementEvents: Array<[ - elementSelector: string, - eventNames: string - ]> | null; - attributes: string[] | null; - debounce: [ - timeout: number, - maxWait: number - ] | number | null; // (if tuple: [timeout: 0, maxWait: 33], if number: [timeout: number, maxWait: false]) debounce for content Changes - ignoreMutation: ((mutation: MutationRecord) => any) | null; - }; - overflow: { - x: OverflowBehavior; - y: OverflowBehavior; - }; - scrollbars: { - theme: string | null; - visibility: ScrollbarVisibilityBehavior; - autoHide: ScrollbarAutoHideBehavior; - autoHideDelay: number; - dragScroll: boolean; - clickScroll: boolean; - touch: boolean; - }; - nativeScrollbarsOverlaid: { - show: boolean; - initialize: boolean; - }; -} -type PluginInstance = Record | ((staticObj: OverlayScrollbarsStatic, instanceObj: OverlayScrollbars) => void); -type Plugin = { - [pluginName: string]: T; -}; -type OptionsValidationPluginInstance = { - _: (options: PartialOptions, doWriteErrors?: boolean) => PartialOptions; -}; -declare const optionsValidationPlugin: Plugin; -type SizeObserverPluginInstance = { - _: (listenerElement: HTMLElement, onSizeChangedCallback: (appear: boolean) => any, observeAppearChange: boolean) => [ - appearCallback: () => any, - offFns: (() => any)[] - ]; -}; -declare const sizeObserverPlugin: Plugin; -type StaticInitialization = HTMLElement | null | undefined; -type DynamicInitialization = HTMLElement | boolean | null | undefined; -type InitializationTargetElement = HTMLElement | HTMLTextAreaElement; -type InitializationTargetObject = StructureInitialization & ScrollbarsInitialization; -type InitializationTarget = InitializationTargetElement | InitializationTargetObject; -type InitializationStrategy = StructureInitializationStrategy & ScrollbarsInitializationStrategy; -/** - * Static elements MUST be present. - * Null or undefined behave like if this element wasn't specified during initialization. - */ -type StaticInitializationElement = ((...args: Args) => StaticInitialization) | StaticInitialization; -/** - * Dynamic element CAN be present. - * If its a element the element will be handled as the repsective element. - * True means that the respective dynamic element is forced to be generated. - * False means that the respective dynamic element is forced NOT to be generated. - * Null or undefined behave like if this element wasn't specified during initialization. - */ -type DynamicInitializationElement = ((...args: Args) => DynamicInitialization) | DynamicInitialization; -type InitializtationElementStrategy = Exclude; -type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[ - target: InitializationTargetElement, - host: HTMLElement, - viewport: HTMLElement -]>; -/** - * Object for special initialization. - * - * 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. - * - * Null or Undefined means that the environment initialization strategy is used. - */ -interface ScrollbarsInitialization { - scrollbarsSlot?: ScrollbarsDynamicInitializationElement; -} -type ScrollbarsInitializationStrategy = { - [K in keyof ScrollbarsInitialization]: InitializtationElementStrategy; -}; -interface StructureSetupState { - _padding: TRBL; - _paddingAbsolute: boolean; - _viewportPaddingStyle: StyleObject; - _overflowEdge: XY; - _overflowAmount: XY; - _overflowStyle: XY; - _hasOverflow: XY; - _heightIntrinsic: boolean; - _directionIsRTL: boolean; -} -type StructureStaticInitializationElement = StaticInitializationElement<[ - target: InitializationTargetElement -]>; -type StructureDynamicInitializationElement = DynamicInitializationElement<[ - target: InitializationTargetElement -]>; -/** - * Object for special initialization. - * - * Target is always required, if element is not provided or undefined it will be generated. - * - * 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. - * - * Null or Undefined means that the environment initialization strategy is used. - */ -interface StructureInitialization { - target: InitializationTargetElement; - host?: StructureStaticInitializationElement; // only relevant for textarea - viewport?: StructureStaticInitializationElement; - padding?: StructureDynamicInitializationElement; - content?: StructureDynamicInitializationElement; -} -type StructureInitializationStrategy = { - [K in keyof Omit]: InitializtationElementStrategy; -}; -interface ViewportOverflowState { - _scrollbarsHideOffset: XY; - _scrollbarsHideOffsetArrange: XY; - _overflowScroll: XY; - _overflowStyle: XY; -} -type GetViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject) => ViewportOverflowState; -type HideNativeScrollbars = (viewportOverflowState: ViewportOverflowState, directionIsRTL: boolean, viewportArrange: boolean, viewportStyleObj: StyleObject) => void; -type EnvironmentEventMap = { - _: [ - ]; -}; -interface InternalEnvironment { - readonly _nativeScrollbarsSize: XY; - readonly _nativeScrollbarsOverlaid: XY; - readonly _nativeScrollbarsHiding: boolean; - readonly _rtlScrollBehavior: { - n: boolean; - i: boolean; - }; - readonly _flexboxGlue: boolean; - readonly _cssCustomProperties: boolean; - readonly _defaultInitializationStrategy: InitializationStrategy; - readonly _defaultDefaultOptions: Options; - _addListener(listener: EventListener): () => void; - _getInitializationStrategy(): InitializationStrategy; - _setInitializationStrategy(newInitializationStrategy: Partial): void; - _getDefaultOptions(): Options; - _setDefaultOptions(newDefaultOptions: PartialOptions): void; -} -type ArrangeViewport = (viewportOverflowState: ViewportOverflowState, viewportScrollSize: WH, sizeFraction: WH, directionIsRTL: boolean) => boolean; -type UndoViewportArrangeResult = [ - redoViewportArrange: () => void, - overflowState?: ViewportOverflowState -]; -type UndoArrangeViewport = (showNativeOverlaidScrollbars: boolean, directionIsRTL: boolean, viewportOverflowState?: ViewportOverflowState) => UndoViewportArrangeResult; -type ScrollbarsHidingPluginInstance = { - _createUniqueViewportArrangeElement(env: InternalEnvironment): HTMLStyleElement | false; - _overflowUpdateSegment(doViewportArrange: boolean, flexboxGlue: boolean, viewport: HTMLElement, viewportArrange: HTMLStyleElement | false | null | undefined, getState: () => StructureSetupState, getViewportOverflowState: GetViewportOverflowState, hideNativeScrollbars: HideNativeScrollbars): [ - ArrangeViewport, - UndoArrangeViewport - ]; - _envWindowZoom(): (envInstance: InternalEnvironment, updateNativeScrollbarSizeCache: UpdateCache>, triggerEvent: () => void) => void; -}; -declare const scrollbarsHidingPlugin: Plugin; -type GeneralInitialEventListeners = InitialEventListeners; -type GeneralEventListener = EventListener; -interface OverlayScrollbarsStatic { - (target: InitializationTarget | InitializationTargetObject, options?: PartialOptions, eventListeners?: GeneralInitialEventListeners): OverlayScrollbars; - plugin(plugin: Plugin | Plugin[]): void; - env(): Environment; -} -interface Environment { - scrollbarsSize: XY; - scrollbarsOverlaid: XY; - scrollbarsHiding: boolean; - rtlScrollBehavior: { - n: boolean; - i: boolean; - }; - flexboxGlue: boolean; - cssCustomProperties: boolean; - defaultInitializationStrategy: InitializationStrategy; - defaultDefaultOptions: Options; - getInitializationStrategy(): InitializationStrategy; - setInitializationStrategy(newInitializationStrategy: Partial): void; - getDefaultOptions(): Options; - setDefaultOptions(newDefaultOptions: PartialOptions): void; -} -interface State { - padding: TRBL; - paddingAbsolute: boolean; - overflowEdge: XY; - overflowAmount: XY; - overflowStyle: XY; - hasOverflow: XY; - destroyed: boolean; -} -interface Elements { - target: HTMLElement; - host: HTMLElement; - padding: HTMLElement; - viewport: HTMLElement; - content: HTMLElement; -} -interface OnUpdatedEventListenerArgs { - updateHints: { - sizeChanged: boolean; - directionChanged: boolean; - heightIntrinsicChanged: boolean; - overflowEdgeChanged: boolean; - overflowAmountChanged: boolean; - overflowStyleChanged: boolean; - hostMutation: boolean; - contentMutation: boolean; - }; - changedOptions: PartialOptions; - force: boolean; -} -type EventListenerMap = { - /** - * Triggered after all elements are initialized and appended. - */ - initialized: [ - instance: OverlayScrollbars - ]; - /** - * Triggered after an update. - */ - updated: [ - instance: OverlayScrollbars, - onUpdatedArgs: OnUpdatedEventListenerArgs - ]; - /** - * Triggered after all elements, observers and events are destroyed. - */ - destroyed: [ - instance: OverlayScrollbars, - withdrawn: boolean - ]; -}; -type EventListener$0 = GeneralEventListener; -interface OverlayScrollbars { - options(): Options; - options(newOptions?: PartialOptions): Options; - update(force?: boolean): OverlayScrollbars; - destroy(): void; - state(): State; - elements(): Elements; - on(name: Name, listener: EventListener$0): () => void; - on(name: Name, listener: EventListener$0[]): () => void; - off(name: Name, listener: EventListener$0): void; - off(name: Name, listener: EventListener$0[]): void; -} -/** - * Notes: - * Height intrinsic detection use "content: true" init strategy - or open ticket for custom height intrinsic observer - */ -declare const OverlayScrollbars: OverlayScrollbarsStatic; -export { OverlayScrollbars, optionsValidationPlugin, scrollbarsHidingPlugin, sizeObserverPlugin };