@keenthemes/ktui 1.1.5 → 1.2.0

package/src/components/select/templates.ts

@@ -156,7 +156,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	dropdown: (
 		config: KTSelectConfigInterface & { zindex?: number; content?: string },
 	) => {
-		let template = getTemplateStrings(config).dropdown;
+		const template = getTemplateStrings(config).dropdown;
 		// If a custom dropdownTemplate is provided, it's responsible for its own content.
 		// Otherwise, the base template is used, and content is appended later.
 		if (config.dropdownTemplate) {
@@ -200,7 +200,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the load more button for pagination
 	 */
 	loadMore: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config)
+		const html = getTemplateStrings(config)
 			.loadMore // .replace('{{loadMoreText}}', config.loadMoreText || 'Load more...') // Content is no longer in template string
 			.replace('{{class}}', config.loadMoreClass || '');
 		const element = stringToElement(html);
@@ -239,7 +239,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the display element (trigger) for the select
 	 */
 	display: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config)
+		const html = getTemplateStrings(config)
 			.display.replace('{{tabindex}}', config.disabled ? '-1' : '0')
 			.replace('{{label}}', config.label || config.placeholder || 'Select...')
 			.replace('{{disabled}}', config.disabled ? 'aria-disabled="true"' : '')
@@ -335,7 +335,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the search input
 	 */
 	search: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config)
+		const html = getTemplateStrings(config)
 			.search.replace(
 				'{{searchPlaceholder}}',
 				config.searchPlaceholder || 'Search...',
@@ -348,7 +348,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the no results message
 	 */
 	searchEmpty: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config).searchEmpty.replace(
+		const html = getTemplateStrings(config).searchEmpty.replace(
 			'{{class}}',
 			config.searchEmptyClass || '',
 		);
@@ -376,7 +376,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		config: KTSelectConfigInterface,
 		loadingMessage: string,
 	): HTMLElement => {
-		let html = getTemplateStrings(config).loading.replace(
+		const html = getTemplateStrings(config).loading.replace(
 			'{{class}}',
 			config.loadingClass || '',
 		);
@@ -392,7 +392,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 		option: HTMLOptionElement,
 		config: KTSelectConfigInterface,
 	): HTMLElement => {
-		let template = getTemplateStrings(config).tag;
+		const template = getTemplateStrings(config).tag;
 		let preparedContent =
 			option.textContent || option.innerText || option.value || ''; // Default content is the option's text
 
@@ -444,7 +444,7 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 	 * Renders the placeholder for the select
 	 */
 	placeholder: (config: KTSelectConfigInterface): HTMLElement => {
-		let html = getTemplateStrings(config).placeholder.replace(
+		const html = getTemplateStrings(config).placeholder.replace(
 			'{{class}}',
 			config.placeholderClass || '',
 		);

package/src/components/select/utils.ts

@@ -227,7 +227,7 @@ export class FocusManager {
 			this._focusedOptionIndex === null
 				? 0
 				: (this._focusedOptionIndex + 1) % options.length;
-		let startIdx = idx;
+		const startIdx = idx;
 		do {
 			const option = options[idx];
 			if (
@@ -255,7 +255,7 @@ export class FocusManager {
 			this._focusedOptionIndex === null
 				? options.length - 1
 				: (this._focusedOptionIndex - 1 + options.length) % options.length;
-		let startIdx = idx;
+		const startIdx = idx;
 		do {
 			const option = options[idx];
 			if (
@@ -367,6 +367,19 @@ export class FocusManager {
 			return options[this._focusedOptionIndex];
 		}
 
+		// Fallback: DOM may have focus class applied (e.g. by arrow keys from search input)
+		// while _focusedOptionIndex is out of sync. Use the option that has the focus class.
+		const focusedEl = this._element.querySelector(
+			`${this._optionsSelector}.${this._focusClass}`,
+		) as HTMLElement | null;
+		if (focusedEl && !focusedEl.classList.contains('hidden') && focusedEl.style.display !== 'none') {
+			const idx = options.indexOf(focusedEl);
+			if (idx >= 0) {
+				this._focusedOptionIndex = idx;
+				return focusedEl;
+			}
+		}
+
 		return null;
 	}
 

package/src/components/sticky/__tests__/sticky.test.ts

@@ -0,0 +1,205 @@
+/**
+ * Tests for KTSticky component (PR #107: release delay, active/release classes, debounce)
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import * as KTDomModule from '../../../helpers/dom';
+import { KTSticky } from '../sticky';
+import { waitFor } from '../../datatable/__tests__/setup';
+
+describe('KTSticky', () => {
+	let stickyEl: HTMLElement;
+	let wrapper: HTMLElement;
+	let scrollTop = 0;
+
+	beforeEach(() => {
+		document.body.innerHTML = '';
+		scrollTop = 0;
+		vi.spyOn(KTDomModule.default, 'getScrollTop').mockImplementation(() => scrollTop);
+		vi.spyOn(KTDomModule.default, 'getViewPort').mockReturnValue({ height: 800, width: 1024 });
+
+		wrapper = document.createElement('div');
+		wrapper.setAttribute('data-kt-sticky-wrapper', 'true');
+		wrapper.style.height = '60px';
+
+		stickyEl = document.createElement('div');
+		stickyEl.setAttribute('data-kt-sticky', 'true');
+		stickyEl.setAttribute('data-kt-sticky-name', 'test');
+		stickyEl.setAttribute('data-kt-sticky-target', 'body');
+		stickyEl.setAttribute('data-kt-sticky-offset', '100');
+		stickyEl.setAttribute('data-kt-sticky-zindex', '10'); // required for _enable() to set position: fixed
+		stickyEl.style.height = '60px';
+		wrapper.appendChild(stickyEl);
+		document.body.appendChild(wrapper);
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+		vi.restoreAllMocks();
+		document.body.innerHTML = '';
+	});
+
+	describe('PR #107: data-kt-sticky-release-delay', () => {
+		it('reads releaseDelay from data-kt-sticky-release-delay attribute', () => {
+			stickyEl.setAttribute('data-kt-sticky-release-delay', '300');
+			const instance = new KTSticky(stickyEl);
+			expect(instance.getOption('releaseDelay')).toBe(300);
+			instance.dispose();
+		});
+
+		it('delays clearing inline styles when sticky is released (smooth exit)', async () => {
+			vi.useFakeTimers();
+			stickyEl.setAttribute('data-kt-sticky-release-delay', '250');
+			const instance = new KTSticky(stickyEl);
+
+			// Scroll past offset -> sticky becomes active (sync, no debounce when not active)
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(0);
+			expect(stickyEl.classList.contains('active')).toBe(true);
+			expect(stickyEl.style.position).toBe('fixed');
+
+			// Scroll back up -> release (when active, debounce 200ms then _process)
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(250); // debounce 200ms + a bit
+			expect(stickyEl.classList.contains('release')).toBe(true);
+			expect(stickyEl.style.position).toBe('fixed'); // not cleared yet (delay 250ms)
+
+			vi.advanceTimersByTime(250); // release delay
+			expect(stickyEl.style.position).toBe('');
+			expect(stickyEl.style.zIndex).toBe('');
+
+			vi.useRealTimers();
+			instance.dispose();
+		});
+
+		it('with no releaseDelay, inline styles are cleared immediately on release', async () => {
+			stickyEl.removeAttribute('data-kt-sticky-release-delay');
+			const instance = new KTSticky(stickyEl);
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(50);
+			expect(stickyEl.style.position).toBe('fixed');
+
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(250); // debounce 200ms
+			expect(stickyEl.style.position).toBe('');
+			instance.dispose();
+		});
+	});
+
+	describe('PR #107: data-kt-sticky-active-class and data-kt-sticky-release-class', () => {
+		it('applies activeClass when sticky is active and releaseClass when released', async () => {
+			stickyEl.setAttribute('data-kt-sticky-active-class', 'sticky-on');
+			stickyEl.setAttribute('data-kt-sticky-release-class', 'sticky-off');
+			const instance = new KTSticky(stickyEl);
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(50);
+			expect(stickyEl.classList.contains('sticky-on')).toBe(true);
+			expect(stickyEl.classList.contains('sticky-off')).toBe(false);
+
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(250);
+			expect(stickyEl.classList.contains('sticky-on')).toBe(false);
+			expect(stickyEl.classList.contains('sticky-off')).toBe(true);
+
+			instance.dispose();
+		});
+
+		it('falls back to data-kt-sticky-class when activeClass is not set', async () => {
+			stickyEl.setAttribute('data-kt-sticky-class', 'legacy-sticky');
+			const instance = new KTSticky(stickyEl);
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(50);
+			expect(stickyEl.classList.contains('legacy-sticky')).toBe(true);
+			instance.dispose();
+		});
+	});
+
+	describe('debounced scroll (no flicker on rapid scroll)', () => {
+		it('when active, scroll handler debounces so _process runs after delay', async () => {
+			vi.useFakeTimers();
+			const instance = new KTSticky(stickyEl);
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(0);
+			expect(stickyEl.classList.contains('active')).toBe(true);
+
+			// Rapid scroll back: multiple scroll events, only one _process after debounce
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			expect(stickyEl.classList.contains('release')).toBe(false); // not yet, debounce pending
+			vi.advanceTimersByTime(250);
+			expect(stickyEl.classList.contains('release')).toBe(true);
+
+			vi.useRealTimers();
+			instance.dispose();
+		});
+	});
+
+	describe('change event', () => {
+		it('fires change event when sticky becomes active and when released', async () => {
+			const instance = new KTSticky(stickyEl);
+			const changes: { active: boolean }[] = [];
+			instance.on('change', (payload: { active: boolean }) => changes.push(payload));
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(50);
+			expect(changes).toContainEqual({ active: true });
+
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			await waitFor(250);
+			expect(changes).toContainEqual({ active: false });
+
+			instance.dispose();
+		});
+	});
+
+	describe('dispose', () => {
+		it('clears release-delay timeout so _resetStyles does not run after dispose', async () => {
+			vi.useFakeTimers();
+			stickyEl.setAttribute('data-kt-sticky-release-delay', '500');
+			const instance = new KTSticky(stickyEl);
+
+			scrollTop = 150;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(0);
+
+			scrollTop = 50;
+			window.dispatchEvent(new Event('scroll', { bubbles: true }));
+			vi.advanceTimersByTime(250);
+			expect(stickyEl.style.position).toBe('fixed');
+
+			instance.dispose();
+			vi.advanceTimersByTime(600);
+			// If timeout weren't cleared, _resetStyles would have run; element is disposed so we just ensure no throw
+			vi.useRealTimers();
+		});
+	});
+
+	describe('getInstance / getOrCreateInstance', () => {
+		it('getInstance returns null for element without data-kt-sticky', () => {
+			stickyEl.removeAttribute('data-kt-sticky');
+			expect(KTSticky.getInstance(stickyEl)).toBeNull();
+		});
+
+		it('getOrCreateInstance creates instance and returns it', () => {
+			const instance = KTSticky.getOrCreateInstance(stickyEl);
+			expect(instance).toBeInstanceOf(KTSticky);
+			expect(KTSticky.getInstance(stickyEl)).toBe(instance);
+			instance.dispose();
+		});
+	});
+});

package/src/components/sticky/sticky.ts

@@ -34,11 +34,17 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		reverse: false,
 		release: '',
 		activate: '',
+		releaseDelay: 0,
+		activeClass: '',
+		releaseClass: '',
 	};
 	protected override _config: KTStickyConfigInterface = this._defaultConfig;
 	protected _targetElement: HTMLElement | Document | null = null;
 
 	protected _attributeRoot: string;
+	protected _isScrolling: boolean;
+	protected _timeoutState: ReturnType<typeof setTimeout> | null = null;
+	protected _scrollTimeout: ReturnType<typeof setTimeout> | null = null;
 	protected _eventTriggerState: boolean;
 	protected _lastScrollTop: number;
 	protected _releaseElement: HTMLElement;
@@ -69,6 +75,9 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		);
 		this._wrapperElement = this._element.closest('[data-kt-sticky-wrapper]');
 		this._attributeRoot = `data-kt-sticky-${this._getOption('name')}`;
+		this._isScrolling = false;
+		this._timeoutState = null;
+		this._scrollTimeout = null;
 		this._eventTriggerState = true;
 		this._lastScrollTop = 0;
 
@@ -110,26 +119,57 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 
 		// Store scroll handler reference for cleanup
 		this._scrollHandler = () => {
-			this._process();
+
+			this._isScrolling = true;
+
+			if(this._isActive() === true){
+
+				this._debounceScroll(() => {
+
+					this._isScrolling = false;
+					this._process();
+
+				}, 200);
+
+			}else{
+
+				this._isScrolling = false;
+				this._process();
+
+			}
+
 		};
 
 		if (this._targetElement) {
 			if (this._targetElement === document) {
-				window.addEventListener('scroll', this._scrollHandler);
+				window.addEventListener('scroll', this._scrollHandler, { passive: true });
 			} else {
 				(this._targetElement as HTMLElement).addEventListener(
 					'scroll',
 					this._scrollHandler,
+					{ passive: true }
 				);
 			}
 		}
 	}
 
+	protected _debounceScroll(callback: () => void, delay: number = 200): void {
+
+		if (this._scrollTimeout) {
+			clearTimeout(this._scrollTimeout);
+		}
+
+		this._scrollTimeout = setTimeout(() => {
+			callback();
+		}, delay);
+
+	}
+
 	protected _process(): void {
 		const reverse = this._getOption('reverse');
 		const offset = this._getOffset();
 
-		if (offset < 0) {
+		if (offset <= 0) {
 			this._disable();
 			return;
 		}
@@ -242,7 +282,6 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		const end = this._getOption('end') as string;
 		const height = this._calculateHeight();
 		const zindex = this._getOption('zindex') as string;
-		const classList = this._getOption('class') as string;
 
 		if (height + parseInt(top) > KTDom.getViewPort().height) {
 			return false;
@@ -310,16 +349,27 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 			this._element.style.position = 'fixed';
 		}
 
-		if (classList) {
-			KTDom.addClass(this._element, classList);
+		const activeClassList = this._getOption('activeClass') as string;
+		if (activeClassList) {
+			KTDom.addClass(this._element, activeClassList);
+		}else{
+			const classList = this._getOption('class') as string;
+			if (classList) {
+				KTDom.addClass(this._element, classList);
+			}
+		}
+
+		const releaseClassList = this._getOption('releaseClass') as string;
+		if (releaseClassList) {
+			KTDom.removeClass(this._element, releaseClassList);
 		}
 
 		if (this._wrapperElement) {
 			this._wrapperElement.style.height = `${height}px`;
 		}
 
-		this._element.classList.add('active');
 		this._element.classList.remove('release');
+		this._element.classList.add('active');
 
 		return true;
 	}
@@ -327,6 +377,53 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 	protected _disable(): void {
 		if (!this._element) return;
 
+		if (this._wrapperElement) {
+			this._wrapperElement.style.height = '';
+		}
+
+		this._element.classList.remove('active');
+		this._element.classList.add('release');
+
+		const activeClassList = this._getOption('activeClass') as string;
+		if (activeClassList) {
+			KTDom.removeClass(this._element, activeClassList);
+		}else{
+			const classList = this._getOption('class') as string;
+			if (classList) {
+					KTDom.removeClass(this._element, classList);
+			}
+		}
+
+		const releaseClassList = this._getOption('releaseClass') as string;
+		if (releaseClassList) {
+			KTDom.addClass(this._element, releaseClassList);
+		}
+
+		if(this._eventTriggerState === false){
+			const releaseDelay = this._getOption('releaseDelay') as number;
+			if(releaseDelay && this._timeoutState === null){
+				this._timeoutState = setTimeout(() => {
+
+					if (!this._element){
+						return;
+					}
+
+					if (this._isRelease() === true) {
+						this._resetStyles();
+					}
+
+					this._timeoutState = null;
+
+				}, releaseDelay);
+			}else{
+				this._resetStyles();
+			}
+		}else{
+			this._timeoutState = null;
+		}
+	}
+
+	protected _resetStyles = function () {
 		this._element.style.top = '';
 		this._element.style.bottom = '';
 		this._element.style.insetInlineStart = '';
@@ -338,21 +435,11 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		this._element.style.right = '';
 		this._element.style.zIndex = '';
 		this._element.style.position = '';
-
-		const classList = this._getOption('class') as string;
-
-		if (this._wrapperElement) {
-			this._wrapperElement.style.height = '';
-		}
-
-		if (classList) {
-			KTDom.removeClass(this._element, classList);
-		}
-
-		this._element.classList.remove('active');
-	}
+	};
 
 	protected _update(): void {
+		this._timeoutState = null;
+		this._eventTriggerState = true;
 		if (this._isActive()) {
 			this._disable();
 			this._enable();
@@ -385,6 +472,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		return this._element.classList.contains('active');
 	}
 
+	protected _isRelease(): boolean {
+		return this._element.classList.contains('release');
+	}
+
 	public update(): void {
 		this._update();
 	}
@@ -393,6 +484,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		return this._isActive();
 	}
 
+	public isRelease(): boolean {
+		return this._isRelease();
+	}
+
 	public override dispose(): void {
 		// Remove resize event listener
 		if (this._resizeHandler) {
@@ -415,7 +510,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 
 		// Clean up state
 		this._disable();
-		if (this._attributeRoot && document.body.hasAttribute(this._attributeRoot)) {
+		if (
+			this._attributeRoot &&
+			document.body.hasAttribute(this._attributeRoot)
+		) {
 			document.body.removeAttribute(this._attributeRoot);
 		}
 

package/src/components/sticky/types.ts

@@ -19,6 +19,9 @@ export interface KTStickyConfigInterface {
 	reverse: boolean;
 	release: string;
 	activate: string;
+	releaseDelay: number,
+	activeClass: string,
+	releaseClass: string,
 }
 
 export interface KTStickyInterface {

package/src/components/theme-switch/theme-switch.ts

@@ -3,9 +3,6 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
-/* eslint-disable max-len */
-/* eslint-disable require-jsdoc */
-
 import KTData from '../../helpers/data';
 import KTEventHandler from '../../helpers/event-handler';
 import KTComponent from '../component';

package/src/components/toast/toast.ts

@@ -415,8 +415,9 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		if (options.beep) {
 			try {
 				// Use Web Audio API for a short beep
-				const ctx = new (window.AudioContext ||
-					(window as any).webkitAudioContext)();
+				const ctx = new (
+					window.AudioContext || (window as any).webkitAudioContext
+				)();
 				const o = ctx.createOscillator();
 				const g = ctx.createGain();
 				o.type = 'sine';

package/src/helpers/dom.ts

@@ -3,7 +3,6 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
-/* eslint-disable max-len */
 import KTUtils from './utils';
 import { KTOffsetType, KTOptionType, KTViewPortType } from '../types';
 
@@ -130,7 +129,6 @@ const KTDom = {
 		for (
 			element && element !== document.documentElement;
 			(element = element.parentElement as HTMLElement);
-
 		) {
 			if (selector) {
 				if (element.matches(selector)) {
@@ -183,7 +181,6 @@ const KTDom = {
 			return false;
 		}
 
-		// eslint-disable-next-line max-len
 		return (
 			getComputedStyle(element).getPropertyValue('visibility') === 'visible'
 		);