@keenthemes/ktui 1.1.1 → 1.1.3

package/src/components/sticky/sticky.ts

@@ -44,6 +44,8 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 	protected _releaseElement: HTMLElement;
 	protected _activateElement: HTMLElement;
 	protected _wrapperElement: HTMLElement;
+	private _resizeHandler: (() => void) | null = null;
+	private _scrollHandler: (() => void) | null = null;
 
 	constructor(
 		element: HTMLElement,
@@ -51,7 +53,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 	) {
 		super();
 
-		if (KTData.has(element as HTMLElement, this._name)) return;
+		// Check if element already has an instance and is still connected
+		if (this._shouldSkipInit(element)) {
+			return;
+		}
 
 		this._init(element);
 		this._buildConfig(config);
@@ -88,7 +93,8 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 	}
 
 	protected _handlers(): void {
-		window.addEventListener('resize', () => {
+		// Store resize handler reference for cleanup
+		this._resizeHandler = () => {
 			let timer;
 
 			KTUtils.throttle(
@@ -98,11 +104,25 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 				},
 				200,
 			);
-		});
+		};
 
-		this._targetElement.addEventListener('scroll', () => {
+		window.addEventListener('resize', this._resizeHandler);
+
+		// Store scroll handler reference for cleanup
+		this._scrollHandler = () => {
 			this._process();
-		});
+		};
+
+		if (this._targetElement) {
+			if (this._targetElement === document) {
+				window.addEventListener('scroll', this._scrollHandler);
+			} else {
+				(this._targetElement as HTMLElement).addEventListener(
+					'scroll',
+					this._scrollHandler,
+				);
+			}
+		}
 	}
 
 	protected _process(): void {
@@ -373,6 +393,36 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		return this._isActive();
 	}
 
+	public override dispose(): void {
+		// Remove resize event listener
+		if (this._resizeHandler) {
+			window.removeEventListener('resize', this._resizeHandler);
+			this._resizeHandler = null;
+		}
+
+		// Remove scroll event listener
+		if (this._scrollHandler) {
+			if (this._targetElement === document) {
+				window.removeEventListener('scroll', this._scrollHandler);
+			} else if (this._targetElement) {
+				(this._targetElement as HTMLElement).removeEventListener(
+					'scroll',
+					this._scrollHandler,
+				);
+			}
+			this._scrollHandler = null;
+		}
+
+		// Clean up state
+		this._disable();
+		if (this._attributeRoot && document.body.hasAttribute(this._attributeRoot)) {
+			document.body.removeAttribute(this._attributeRoot);
+		}
+
+		// Call parent dispose to clean up data attributes and KTData
+		super.dispose();
+	}
+
 	public static getInstance(element: HTMLElement): KTSticky {
 		if (!element) return null;
 

package/src/helpers/data.ts

@@ -41,6 +41,16 @@ const KTData = {
 			KTElementMap.delete(element);
 		}
 	},
+
+	// Clear all data for a specific element (useful for reinitialization)
+	clear(element: HTMLElement): void {
+		KTElementMap.delete(element);
+	},
 };
 
+// Expose KTData on window for external access (useful for Livewire wire:navigate)
+if (typeof window !== 'undefined') {
+	window.KTData = KTData;
+}
+
 export default KTData;

package/src/helpers/event-handler.ts

@@ -28,14 +28,15 @@ const KTEventHandler = {
 		KTDelegatedEventHandlers[eventId] = (
 			event: Event & { target: HTMLElement },
 		) => {
-			const targets = element.querySelectorAll(selector);
-			let target = event.target;
+			// Fix: Check selector dynamically instead of pre-computing targets
+			// This allows event delegation to work with dynamically added elements
+			let target = event.target as HTMLElement;
 
 			while (target && target !== element) {
-				for (let i = 0, j = targets.length; i < j; i++) {
-					if (target === targets[i]) {
-						handler.call(this, event, target);
-					}
+				// Check if current target matches the selector
+				if (target.matches && target.matches(selector)) {
+					handler.call(this, event, target);
+					return; // Stop bubbling once we've handled it
 				}
 
 				target = target.parentNode as HTMLElement;

package/src/index.ts

@@ -6,6 +6,7 @@
 import KTDom from './helpers/dom';
 import KTUtils from './helpers/utils';
 import KTEventHandler from './helpers/event-handler';
+import KTData from './helpers/data';
 import { KTDropdown } from './components/dropdown';
 import { KTModal } from './components/modal';
 import { KTDrawer } from './components/drawer';
@@ -81,6 +82,7 @@ declare global {
 		KTUtils: typeof KTUtils;
 		KTDom: typeof KTDom;
 		KTEventHandler: typeof KTEventHandler;
+		KTData: typeof KTData;
 		KTDropdown: typeof KTDropdown;
 		KTModal: typeof KTModal;
 		KTDrawer: typeof KTDrawer;