@tabler/core 1.5.0 → 1.6.0

package/js/src/bootstrap/collapse.ts

@@ -8,8 +8,16 @@
 import BaseComponent from './base-component'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
-import { getElement, reflow } from './util/index'
-import type { ComponentConfig, ComponentConfigType, ElementSelector } from './types'
+import { defineJQueryPlugin, getElement, reflow } from './util/index'
+import type { DelegatedEvent } from './dom/event-handler'
+import type { ComponentConfig as BaseComponentConfig, ElementSelector, JQueryCollectionLike } from './types'
+
+type ComponentConfig = {
+  parent: HTMLElement | null
+  toggle: boolean
+}
+
+type ComponentConfigInput = Partial<Omit<ComponentConfig, 'parent'>> & { parent?: HTMLElement | string | null } & Record<string, unknown>
 
 const NAME = 'collapse'
 const DATA_KEY = 'bs.collapse'
@@ -40,16 +48,18 @@ const Default: ComponentConfig = {
   toggle: true,
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   parent: '(null|element)',
   toggle: 'boolean',
 }
 
 class Collapse extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _isTransitioning: boolean
   _triggerArray: HTMLElement[]
 
-  constructor(element: ElementSelector, config?: ComponentConfig) {
+  constructor(element: ElementSelector, config?: ComponentConfigInput) {
     super(element, config)
 
     this._isTransitioning = false
@@ -81,7 +91,7 @@ class Collapse extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -237,10 +247,30 @@ class Collapse extends BaseComponent {
       element.setAttribute('aria-expanded', String(isOpen))
     }
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    const _config: BaseComponentConfig = {}
+    if (typeof config === 'string' && /show|hide/.test(config)) {
+      _config.toggle = false
+    }
+
+    return this.each(function (this: HTMLElement) {
+      const data = Collapse.getOrCreateInstance(this, _config) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
+
+        data[config]()
+      }
+    })
+  }
 }
 
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (this: HTMLElement, event: Event) {
-  if ((event.target as HTMLElement).tagName === 'A' || ((event as any).delegateTarget && (event as any).delegateTarget.tagName === 'A')) {
+  const { delegateTarget } = event as DelegatedEvent
+  if ((event.target as HTMLElement).tagName === 'A' || (delegateTarget && delegateTarget.tagName === 'A')) {
     event.preventDefault()
   }
 
@@ -249,4 +279,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   }
 })
 
+defineJQueryPlugin(Collapse)
+
 export default Collapse

package/js/src/bootstrap/dom/event-handler.ts

@@ -5,7 +5,13 @@
  * --------------------------------------------------------------------------
  */
 
-type EventCallback = (this: EventTarget, ...args: unknown[]) => void
+import { getjQuery } from '../util/index.js'
+import type { JQueryEventLike } from '../types'
+
+// `this` is the element the handler was bound to, or the delegate target
+export type EventCallback<E extends Event = Event> = (this: HTMLElement, event: E) => void
+
+export type DelegatedEvent<E extends Event = Event> = E & { delegateTarget: HTMLElement }
 
 interface BootstrapHandler {
   (event: Event): void
@@ -99,7 +105,7 @@ function bootstrapHandler(element: EventTarget, fn: EventCallback): BootstrapHan
       EventHandler.off(element, event.type, fn)
     }
 
-    return fn.apply(element, [event])
+    return fn.apply(element as HTMLElement, [event])
   } as BootstrapHandler
 }
 
@@ -119,7 +125,7 @@ function bootstrapDelegationHandler(element: EventTarget, selector: string, fn:
           EventHandler.off(element, event.type, selector, fn)
         }
 
-        return fn.apply(target, [event])
+        return fn.apply(target as HTMLElement, [event])
       }
     }
   } as BootstrapHandler
@@ -129,7 +135,7 @@ function findHandler(events: Record<string | number, BootstrapHandler>, callable
   return Object.values(events).find((event) => event.callable === callable && event.delegationSelector === delegationSelector)
 }
 
-function normalizeParameters(originalTypeEvent: string, handler: string | EventCallback | undefined, delegationFunction: EventCallback | undefined): [boolean, EventCallback, string] {
+function normalizeParameters(originalTypeEvent: string, handler: string | false | EventCallback | undefined, delegationFunction: EventCallback | undefined): [boolean, EventCallback, string] {
   const isDelegated = typeof handler === 'string'
   const callable = isDelegated ? delegationFunction! : (handler || delegationFunction)!
   let typeEvent = getTypeEvent(originalTypeEvent)
@@ -141,7 +147,7 @@ function normalizeParameters(originalTypeEvent: string, handler: string | EventC
   return [isDelegated, callable, typeEvent]
 }
 
-function addHandler(element: EventTarget | null, originalTypeEvent: string, handler: string | EventCallback | undefined, delegationFunction: EventCallback | undefined, oneOff: boolean): void {
+function addHandler(element: EventTarget | null, originalTypeEvent: string, handler: string | false | EventCallback | undefined, delegationFunction: EventCallback | undefined, oneOff: boolean): void {
   if (typeof originalTypeEvent !== 'string' || !element) {
     return
   }
@@ -150,10 +156,10 @@ function addHandler(element: EventTarget | null, originalTypeEvent: string, hand
 
   if (originalTypeEvent in customEvents) {
     const wrapFunction = (fn: EventCallback): EventCallback => {
-      return function (this: EventTarget, event: unknown) {
-        const evt = event as MouseEvent & { delegateTarget: HTMLElement }
+      return function (this: EventTarget, event: Event) {
+        const evt = event as DelegatedEvent<MouseEvent>
         if (!evt.relatedTarget || (evt.relatedTarget !== evt.delegateTarget && !evt.delegateTarget.contains(evt.relatedTarget as Node))) {
-          return fn.call(this, event)
+          return fn.call(this as HTMLElement, event)
         }
       }
     }
@@ -210,20 +216,20 @@ function getTypeEvent(event: string): string {
 }
 
 const EventHandler = {
-  on(element: EventTarget | null, event: string, handler: string | EventCallback, delegationFunction?: EventCallback): void {
-    addHandler(element, event, handler, delegationFunction, false)
+  on<E extends Event = Event>(element: EventTarget | null, event: string, handler: string | false | EventCallback<E>, delegationFunction?: EventCallback<E>): void {
+    addHandler(element, event, handler as string | false | EventCallback, delegationFunction as EventCallback | undefined, false)
   },
 
-  one(element: EventTarget | null, event: string, handler: string | EventCallback, delegationFunction?: EventCallback): void {
-    addHandler(element, event, handler, delegationFunction, true)
+  one<E extends Event = Event>(element: EventTarget | null, event: string, handler: string | false | EventCallback<E>, delegationFunction?: EventCallback<E>): void {
+    addHandler(element, event, handler as string | false | EventCallback, delegationFunction as EventCallback | undefined, true)
   },
 
-  off(element: EventTarget | null, originalTypeEvent: string, handler?: string | EventCallback, delegationFunction?: EventCallback): void {
+  off<E extends Event = Event>(element: EventTarget | null, originalTypeEvent: string, handler?: string | false | EventCallback<E>, delegationFunction?: EventCallback<E>): void {
     if (typeof originalTypeEvent !== 'string' || !element) {
       return
     }
 
-    const [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
+    const [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler as string | false | EventCallback | undefined, delegationFunction as EventCallback | undefined)
     const inNamespace = typeEvent !== originalTypeEvent
     const events = getElementEvents(element)
     const storeElementEvent = events[typeEvent] || {}
@@ -258,9 +264,37 @@ const EventHandler = {
       return null
     }
 
-    const evt = hydrateObj(new Event(event, { bubbles: true, cancelable: true }), args)
+    const $ = getjQuery()
+    const typeEvent = getTypeEvent(event)
+    const inNamespace = event !== typeEvent
+
+    let jQueryEvent: JQueryEventLike | null = null
+    let bubbles = true
+    let nativeDispatch = true
+    let defaultPrevented = false
+
+    if (inNamespace && $) {
+      jQueryEvent = $.Event(event, args)
+
+      $(element).trigger(jQueryEvent)
+      bubbles = !jQueryEvent.isPropagationStopped()
+      nativeDispatch = !jQueryEvent.isImmediatePropagationStopped()
+      defaultPrevented = jQueryEvent.isDefaultPrevented()
+    }
+
+    const evt = hydrateObj(new Event(event, { bubbles, cancelable: true }), args)
+
+    if (defaultPrevented) {
+      evt.preventDefault()
+    }
+
+    if (nativeDispatch) {
+      element.dispatchEvent(evt)
+    }
 
-    element.dispatchEvent(evt)
+    if (evt.defaultPrevented && jQueryEvent) {
+      jQueryEvent.preventDefault()
+    }
 
     return evt
   },

package/js/src/bootstrap/dropdown.ts

@@ -10,8 +10,26 @@ import BaseComponent from './base-component'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
-import { execute, getElement, getNextActiveElement, isDisabled, isElement, isRTL, isVisible, noop } from './util/index'
-import type { ComponentConfig, ComponentConfigType } from './types'
+import { defineJQueryPlugin, execute, getElement, getNextActiveElement, isDisabled, isElement, isRTL, isVisible, noop } from './util/index'
+import type { DelegatedEvent } from './dom/event-handler'
+import type { ComponentConfig as BaseComponentConfig, JQueryCollectionLike } from './types'
+
+type PopperOffsetData = { placement: Popper.Placement; reference: Popper.Rect; popper: Popper.Rect }
+type PopperOffsetFunction = (popperData: PopperOffsetData) => number[]
+type PopperConfigFunction = (defaultConfig: Partial<Popper.Options>) => Partial<Popper.Options>
+
+type ComponentConfig = {
+  autoClose: boolean | 'inside' | 'outside'
+  boundary: Popper.Boundary
+  display: 'dynamic' | 'static'
+  offset: number[] | string | ((popperData: PopperOffsetData, element: HTMLElement) => number[])
+  popperConfig: Partial<Popper.Options> | PopperConfigFunction | null
+  reference: 'toggle' | 'parent' | HTMLElement | Popper.VirtualElement
+}
+
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>
+
+type RelatedTarget = { relatedTarget: HTMLElement; clickEvent?: Event }
 
 const NAME = 'dropdown'
 const DATA_KEY = 'bs.dropdown'
@@ -64,7 +82,7 @@ const Default: ComponentConfig = {
   reference: 'toggle',
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   autoClose: '(boolean|string)',
   boundary: '(string|element)',
   display: 'string',
@@ -74,12 +92,14 @@ const DefaultType: ComponentConfigType = {
 }
 
 class Dropdown extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _popper: Popper.Instance | null
   _parent: HTMLElement
   _menu: HTMLElement
   _inNavbar: boolean
 
-  constructor(element: HTMLElement | string, config?: Partial<ComponentConfig>) {
+  constructor(element: HTMLElement | string, config?: ComponentConfigInput) {
     super(element, config)
 
     this._popper = null
@@ -92,7 +112,7 @@ class Dropdown extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -115,14 +135,14 @@ class Dropdown extends BaseComponent {
 
     const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, relatedTarget)
 
-    if (showEvent.defaultPrevented) {
+    if (showEvent?.defaultPrevented) {
       return
     }
 
     this._createPopper()
 
     if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
-      for (const element of [].concat(...(document.body.children as any))) {
+      for (const element of Array.from(document.body.children)) {
         EventHandler.on(element, 'mouseover', noop)
       }
     }
@@ -162,14 +182,14 @@ class Dropdown extends BaseComponent {
     }
   }
 
-  _completeHide(relatedTarget: Record<string, any>): void {
+  _completeHide(relatedTarget: RelatedTarget): void {
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget)
-    if (hideEvent.defaultPrevented) {
+    if (hideEvent?.defaultPrevented) {
       return
     }
 
     if ('ontouchstart' in document.documentElement) {
-      for (const element of [].concat(...(document.body.children as any))) {
+      for (const element of Array.from(document.body.children)) {
         EventHandler.off(element, 'mouseover', noop)
       }
     }
@@ -185,14 +205,14 @@ class Dropdown extends BaseComponent {
     EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
   }
 
-  _getConfig(config: Partial<ComponentConfig>): ComponentConfig {
-    config = super._getConfig(config)
+  _getConfig(config?: ComponentConfigInput): ComponentConfig {
+    const merged = super._getConfig(config) as ComponentConfig
 
-    if (typeof config.reference === 'object' && !isElement(config.reference) && typeof (config.reference as any).getBoundingClientRect !== 'function') {
+    if (typeof merged.reference === 'object' && !isElement(merged.reference) && typeof (merged.reference as Popper.VirtualElement).getBoundingClientRect !== 'function') {
       throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
     }
 
-    return config
+    return merged
   }
 
   _createPopper(): void {
@@ -250,7 +270,7 @@ class Dropdown extends BaseComponent {
     return this._element.closest(SELECTOR_NAVBAR) !== null
   }
 
-  _getOffset(): number[] | ((popperData: any) => number[]) {
+  _getOffset(): number[] | PopperOffsetFunction {
     const { offset } = this._config
 
     if (typeof offset === 'string') {
@@ -258,10 +278,10 @@ class Dropdown extends BaseComponent {
     }
 
     if (typeof offset === 'function') {
-      return (popperData: any) => (offset as Function)(popperData, this._element)
+      return (popperData: PopperOffsetData) => offset(popperData, this._element)
     }
 
-    return offset as number[]
+    return offset
   }
 
   _getPopperConfig(): Partial<Popper.Options> {
@@ -300,14 +320,15 @@ class Dropdown extends BaseComponent {
     }
   }
 
-  _selectMenuItem({ key, target }: { key: string; target: HTMLElement }): void {
+  _selectMenuItem({ key, target }: { key: string; target: EventTarget | null }): void {
     const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter((element) => isVisible(element))
 
     if (!items.length) {
       return
     }
 
-    getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus()
+    const activeElement = target as HTMLElement
+    getNextActiveElement(items, activeElement, key === ARROW_DOWN_KEY, !items.includes(activeElement)).focus()
   }
 
   static clearMenus(event: Event & { button?: number; key?: string; composedPath?: () => EventTarget[] }): void {
@@ -333,7 +354,7 @@ class Dropdown extends BaseComponent {
         continue
       }
 
-      const relatedTarget: Record<string, any> = { relatedTarget: context._element }
+      const relatedTarget: RelatedTarget = { relatedTarget: context._element }
 
       if (event.type === 'click') {
         relatedTarget.clickEvent = event
@@ -358,14 +379,14 @@ class Dropdown extends BaseComponent {
 
     event.preventDefault()
 
-    const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, (event as any).delegateTarget.parentNode)
+    const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, (event as DelegatedEvent<KeyboardEvent>).delegateTarget.parentNode as Element)
 
     const instance = Dropdown.getOrCreateInstance(getToggleButton!) as Dropdown
 
     if (isUpOrDownEvent) {
       event.stopPropagation()
       instance.show()
-      instance._selectMenuItem(event as any)
+      instance._selectMenuItem(event)
       return
     }
 
@@ -375,6 +396,22 @@ class Dropdown extends BaseComponent {
       getToggleButton!.focus()
     }
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Dropdown.getOrCreateInstance(this, config as BaseComponentConfig) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (typeof data[config] === 'undefined') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config]()
+    })
+  }
 }
 
 EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler)
@@ -386,4 +423,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   ;(Dropdown.getOrCreateInstance(this) as Dropdown).toggle()
 })
 
+defineJQueryPlugin(Dropdown)
+
 export default Dropdown

package/js/src/bootstrap/modal.ts

@@ -11,8 +11,9 @@ import SelectorEngine from './dom/selector-engine'
 import Backdrop from './util/backdrop'
 import { enableDismissTrigger } from './util/component-functions'
 import FocusTrap from './util/focustrap'
-import { isRTL, isVisible, reflow } from './util/index'
+import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index'
 import ScrollBarHelper from './util/scrollbar'
+import type { ComponentConfig as BaseComponentConfig, JQueryCollectionLike } from './types'
 
 /**
  * Constants
@@ -45,13 +46,13 @@ const SELECTOR_DIALOG = '.modal-dialog'
 const SELECTOR_MODAL_BODY = '.modal-body'
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"], [data-tblr-toggle="modal"]'
 
-interface ComponentConfig {
-  [key: string]: any
+type ComponentConfig = {
+  backdrop: boolean | 'static'
+  focus: boolean
+  keyboard: boolean
 }
 
-interface ComponentConfigType {
-  [key: string]: string
-}
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>
 
 const Default: ComponentConfig = {
   backdrop: true,
@@ -59,7 +60,7 @@ const Default: ComponentConfig = {
   keyboard: true,
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   backdrop: '(boolean|string)',
   focus: 'boolean',
   keyboard: 'boolean',
@@ -70,6 +71,8 @@ const DefaultType: ComponentConfigType = {
  */
 
 class Modal extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _dialog: HTMLElement | null
   _backdrop: Backdrop
   _focustrap: FocusTrap
@@ -77,7 +80,7 @@ class Modal extends BaseComponent {
   _isTransitioning: boolean
   _scrollBar: ScrollBarHelper
 
-  constructor(element: HTMLElement | string, config?: Partial<ComponentConfig>) {
+  constructor(element: HTMLElement | string, config?: ComponentConfigInput) {
     super(element, config)
 
     this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
@@ -94,7 +97,7 @@ class Modal extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -115,7 +118,7 @@ class Modal extends BaseComponent {
       relatedTarget,
     })
 
-    if (showEvent.defaultPrevented) {
+    if (showEvent?.defaultPrevented) {
       return
     }
 
@@ -138,7 +141,7 @@ class Modal extends BaseComponent {
 
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
 
-    if (hideEvent.defaultPrevented) {
+    if (hideEvent?.defaultPrevented) {
       return
     }
 
@@ -189,7 +192,7 @@ class Modal extends BaseComponent {
     this._element.setAttribute('role', 'dialog')
     this._element.scrollTop = 0
 
-    const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
+    const modalBody = this._dialog ? SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog) : null
     if (modalBody) {
       modalBody.scrollTop = 0
     }
@@ -271,7 +274,7 @@ class Modal extends BaseComponent {
 
   _triggerBackdropTransition(): void {
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
-    if (hideEvent.defaultPrevented) {
+    if (hideEvent?.defaultPrevented) {
       return
     }
 
@@ -316,6 +319,22 @@ class Modal extends BaseComponent {
     this._element.style.paddingLeft = ''
     this._element.style.paddingRight = ''
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown, relatedTarget?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Modal.getOrCreateInstance(this, config as BaseComponentConfig) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (typeof data[config] === 'undefined') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config](relatedTarget)
+    })
+  }
 }
 
 /**
@@ -329,8 +348,12 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     event.preventDefault()
   }
 
+  if (!target) {
+    return
+  }
+
   EventHandler.one(target, EVENT_SHOW, (showEvent: Event) => {
-    if (showEvent.defaultPrevented) {
+    if (showEvent?.defaultPrevented) {
       return
     }
 
@@ -353,4 +376,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 
 enableDismissTrigger(Modal)
 
+defineJQueryPlugin(Modal)
+
 export default Modal

package/js/src/bootstrap/offcanvas.ts

@@ -11,8 +11,9 @@ import SelectorEngine from './dom/selector-engine'
 import Backdrop from './util/backdrop'
 import { enableDismissTrigger } from './util/component-functions'
 import FocusTrap from './util/focustrap'
-import { isDisabled, isVisible } from './util/index'
+import { defineJQueryPlugin, isDisabled, isVisible } from './util/index'
 import ScrollBarHelper from './util/scrollbar'
+import type { ComponentConfig as BaseComponentConfig, JQueryCollectionLike } from './types'
 
 /**
  * Constants
@@ -42,13 +43,13 @@ const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"], [data-tblr-toggle="offcanvas"]'
 
-interface ComponentConfig {
-  [key: string]: any
+type ComponentConfig = {
+  backdrop: boolean | 'static'
+  keyboard: boolean
+  scroll: boolean
 }
 
-interface ComponentConfigType {
-  [key: string]: string
-}
+type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>
 
 const Default: ComponentConfig = {
   backdrop: true,
@@ -56,7 +57,7 @@ const Default: ComponentConfig = {
   scroll: false,
 }
 
-const DefaultType: ComponentConfigType = {
+const DefaultType: Record<keyof ComponentConfig, string> = {
   backdrop: '(boolean|string)',
   keyboard: 'boolean',
   scroll: 'boolean',
@@ -67,11 +68,13 @@ const DefaultType: ComponentConfigType = {
  */
 
 class Offcanvas extends BaseComponent {
+  declare _element: HTMLElement
+  declare _config: ComponentConfig
   _isShown: boolean
   _backdrop: Backdrop
   _focustrap: FocusTrap
 
-  constructor(element: HTMLElement | string, config?: Partial<ComponentConfig>) {
+  constructor(element: HTMLElement | string, config?: ComponentConfigInput) {
     super(element, config)
 
     this._isShown = false
@@ -84,7 +87,7 @@ class Offcanvas extends BaseComponent {
     return Default
   }
 
-  static get DefaultType(): ComponentConfigType {
+  static get DefaultType(): Record<keyof ComponentConfig, string> {
     return DefaultType
   }
 
@@ -103,7 +106,7 @@ class Offcanvas extends BaseComponent {
 
     const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget })
 
-    if (showEvent.defaultPrevented) {
+    if (showEvent?.defaultPrevented) {
       return
     }
 
@@ -138,7 +141,7 @@ class Offcanvas extends BaseComponent {
 
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
 
-    if (hideEvent.defaultPrevented) {
+    if (hideEvent?.defaultPrevented) {
       return
     }
 
@@ -210,6 +213,22 @@ class Offcanvas extends BaseComponent {
       EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
     })
   }
+
+  static jQueryInterface(this: JQueryCollectionLike, config?: unknown): unknown {
+    return this.each(function (this: HTMLElement) {
+      const data = Offcanvas.getOrCreateInstance(this, config as BaseComponentConfig) as unknown as Record<string, (arg?: unknown) => unknown>
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config](this)
+    })
+  }
 }
 
 /**
@@ -223,6 +242,10 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     event.preventDefault()
   }
 
+  if (!target) {
+    return
+  }
+
   if (isDisabled(this)) {
     return
   }
@@ -258,4 +281,6 @@ EventHandler.on(window, EVENT_RESIZE, () => {
 
 enableDismissTrigger(Offcanvas)
 
+defineJQueryPlugin(Offcanvas)
+
 export default Offcanvas