@keenthemes/ktui 1.2.0 → 1.2.2

package/src/components/datatable/__tests__/race-conditions.test.ts

@@ -43,7 +43,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 		// Mock fetch to track requests and signals
 		abortSignals = [];
-		mockFetch = vi.fn<typeof fetch>((url, options) => {
+		mockFetch = vi.fn<typeof fetch>((_url, options) => {
 			// Store abort signal for verification
 			if (options?.signal) {
 				abortSignals.push(options.signal);
@@ -98,12 +98,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 	describe('AbortController Integration', () => {
 		it('should create AbortController for remote data requests', async () => {
-			const datatable = new KTDataTable(
-				container.querySelector('[data-kt-datatable="true"]')!,
-				{
-					apiEndpoint: '/api/data',
-				},
-			);
+			new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
+				apiEndpoint: '/api/data',
+			});
 
 			await waitFor(150);
 
@@ -186,7 +183,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 			// Mock to capture request sequence
 			mockFetch.mockImplementation(
-				(url: RequestInfo | URL, options?: RequestInit) => {
+				(_url: RequestInfo | URL, _options?: RequestInit) => {
 					callCount++;
 					const id = callCount;
 					requestIds.push(id);
@@ -293,7 +290,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 		it('should reset _isFetching flag even after fetch error', async () => {
 			let callCount = 0;
 			mockFetch.mockImplementation(
-				(url: RequestInfo | URL, options?: RequestInit) => {
+				(_url: RequestInfo | URL, _options?: RequestInit) => {
 					callCount++;
 					if (callCount === 1) {
 						// Return invalid JSON to trigger parse error
@@ -333,7 +330,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 			const element = container.querySelector(
 				'[data-kt-datatable="true"]',
 			) as HTMLElement;
-			const datatable = new KTDataTable(element, {
+			new KTDataTable(element, {
 				apiEndpoint: '/api/data',
 			});
 
@@ -410,7 +407,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 	describe('Event Handling During Race Conditions', () => {
 		it('should fire fetch event for successful requests', async () => {
-			const fetchEvents: any[] = [];
+			const fetchEvents: Event[] = [];
 
 			const element = container.querySelector(
 				'[data-kt-datatable="true"]',
@@ -433,7 +430,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 
 		it('should fire fetched event after successful data load', async () => {
-			const fetchedEvents: any[] = [];
+			const fetchedEvents: Event[] = [];
 
 			const element = container.querySelector(
 				'[data-kt-datatable="true"]',
@@ -442,7 +439,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 				fetchedEvents.push(e);
 			});
 
-			const datatable = new KTDataTable(element, {
+			new KTDataTable(element, {
 				apiEndpoint: '/api/data',
 			});
 
@@ -453,7 +450,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 
 		it('should not fire error events for AbortError', async () => {
-			const errorEvents: any[] = [];
+			const errorEvents: Event[] = [];
 
 			const element = container.querySelector(
 				'[data-kt-datatable="true"]',

package/src/components/datatable/__tests__/setup.ts

@@ -46,7 +46,7 @@ Object.defineProperty(window, 'matchMedia', {
 		matches: false,
 		media: query,
 		onchange: null as
-			| ((this: MediaQueryList, ev: MediaQueryListEvent) => any)
+			| ((this: MediaQueryList, ev: MediaQueryListEvent) => unknown)
 			| null,
 		addListener: () => {}, // deprecated
 		removeListener: () => {}, // deprecated

package/src/components/datatable/datatable-checkbox.ts

@@ -25,7 +25,7 @@ export interface KTDataTableCheckboxAPI {
 export function createCheckboxHandler(
 	element: HTMLElement,
 	config: KTDataTableConfigInterface,
-	fireEvent: (eventName: string, eventData?: any) => void,
+	fireEvent: (eventName: string, eventData?: object) => void,
 ): KTDataTableCheckboxAPI {
 	let headerChecked = false;
 	let headerCheckElement: HTMLInputElement | null = null;
@@ -36,7 +36,8 @@ export function createCheckboxHandler(
 
 	// Helper: get selectedRows from state, always as string[]
 	function getSelectedRows(): string[] {
-		if (!config._state) config._state = {} as any;
+		if (!config._state)
+			config._state = {} as unknown as KTDataTableConfigInterface['_state'];
 		if (!Array.isArray(config._state.selectedRows))
 			config._state.selectedRows = [];
 		return config._state.selectedRows.map(String);
@@ -44,7 +45,8 @@ export function createCheckboxHandler(
 
 	// Helper: set selectedRows in state
 	function setSelectedRows(rows: string[]) {
-		if (!config._state) config._state = {} as any;
+		if (!config._state)
+			config._state = {} as unknown as KTDataTableConfigInterface['_state'];
 		config._state.selectedRows = Array.from(new Set(rows.map(String)));
 	}
 
@@ -118,7 +120,7 @@ export function createCheckboxHandler(
 	}
 
 	// When the header checkbox is toggled
-	function checkboxToggle(event?: Event) {
+	function checkboxToggle(_event?: Event) {
 		const checked = !isChecked();
 		// Update state first, then fire events
 		change(checked);

package/src/components/datatable/datatable-sort.ts

@@ -40,8 +40,8 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 		field: keyof T | number,
 		order: KTDataTableSortOrderInterface,
 	) => void,
-	fireEvent: (eventName: string, eventData?: any) => void,
-	dispatchEvent: (eventName: string, eventData?: any) => void,
+	fireEvent: (eventName: string, eventData?: object) => void,
+	dispatchEvent: (eventName: string, eventData?: object) => void,
 	updateData: () => void,
 ): KTDataTableSortAPI<T> {
 	// Helper to compare values for sorting (string)
@@ -93,7 +93,9 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 		| {
 				sortType?: 'string' | 'numeric';
 				sortValue?: (
-					cellValue: unknown,
+					cellValue:
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
 					rowData: KTDataTableDataInterface,
 				) => number | string;
 		  }
@@ -121,8 +123,18 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 			const bRaw = b[sortField as keyof T] as unknown;
 
 			if (typeof sortValueFn === 'function') {
-				const aVal = sortValueFn(aRaw, a as KTDataTableDataInterface);
-				const bVal = sortValueFn(bRaw, b as KTDataTableDataInterface);
+				const aVal = sortValueFn(
+					aRaw as
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
+					a as KTDataTableDataInterface,
+				);
+				const bVal = sortValueFn(
+					bRaw as
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
+					b as KTDataTableDataInterface,
+				);
 				const aNum = typeof aVal === 'number' ? aVal : parseNumeric(aVal);
 				const bNum = typeof bVal === 'number' ? bVal : parseNumeric(bVal);
 				if (typeof aVal === 'number' && typeof bVal === 'number') {
@@ -131,8 +143,16 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 				return compareValues(aVal, bVal, sortOrder);
 			}
 			if (useNumeric) {
-				const aNum = parseNumeric(aRaw);
-				const bNum = parseNumeric(bRaw);
+				const aNum = parseNumeric(
+					aRaw as
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
+				);
+				const bNum = parseNumeric(
+					bRaw as
+						| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+						| string,
+				);
 				return compareNumeric(aNum, bNum, sortOrder);
 			}
 			return compareValues(aRaw, bRaw, sortOrder);

package/src/components/datatable/datatable.ts

@@ -13,6 +13,7 @@ import {
 	KTDataTableColumnFilterInterface,
 	KTDataTableAttributeInterface,
 } from './types';
+import { KTOptionType } from '../../types';
 import KTUtils from '../../helpers/utils';
 import KTComponents from '../../index';
 import KTData from '../../helpers/data';
@@ -35,6 +36,20 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	extends KTComponent
 	implements KTDataTableInterface
 {
+	private static asElementWithInstance(element: HTMLElement): HTMLElement & {
+		instance?: KTDataTable<KTDataTableDataInterface>;
+	} {
+		return element as HTMLElement & {
+			instance?: KTDataTable<KTDataTableDataInterface>;
+		};
+	}
+
+	private static asSearchElementWithDebounce(
+		element: HTMLInputElement,
+	): HTMLInputElement & { _debouncedSearch?: EventListener } {
+		return element as HTMLInputElement & { _debouncedSearch?: EventListener };
+	}
+
 	protected override _name: string = 'datatable';
 	protected override _config: KTDataTableConfigInterface;
 	protected override _defaultConfig: KTDataTableConfigInterface;
@@ -88,7 +103,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._buildConfig();
 
 		// Store the instance directly on the element
-		(element as any).instance = this;
+		KTDataTable.asElementWithInstance(element).instance = this;
 
 		this._initElements();
 
@@ -96,7 +111,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._checkbox = createCheckboxHandler(
 			this._element,
 			this._config,
-			(eventName: string, eventData?: any) => {
+			(eventName: string, eventData?: object) => {
 				this._fireEvent(eventName, eventData);
 				this._dispatchEvent(eventName, eventData);
 			},
@@ -284,22 +299,20 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 							return false;
 						}
 
-						return Object.values(item).some(
-							(value: string | number | boolean) => {
-								if (
-									typeof value !== 'string' &&
-									typeof value !== 'number' &&
-									typeof value !== 'boolean'
-								) {
-									return false;
-								}
-
-								const valueText = String(value)
-									.replace(/<[^>]*>|&nbsp;/g, '')
-									.toLowerCase();
-								return valueText.includes(search.toLowerCase());
-							},
-						);
+						return Object.values(item).some((value: KTOptionType) => {
+							if (
+								typeof value !== 'string' &&
+								typeof value !== 'number' &&
+								typeof value !== 'boolean'
+							) {
+								return false;
+							}
+
+							const valueText = String(value)
+								.replace(/<|>|&nbsp;/g, '')
+								.toLowerCase();
+							return valueText.includes(search.toLowerCase());
+						});
 					});
 				},
 			},
@@ -533,11 +546,13 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 		if (searchElement) {
 			// Check if a debounced search function already exists
-			if ((searchElement as any)._debouncedSearch) {
+			const searchWithDebounce =
+				KTDataTable.asSearchElementWithDebounce(searchElement);
+			if (searchWithDebounce._debouncedSearch) {
 				// Remove the existing debounced event listener
 				searchElement.removeEventListener(
 					'keyup',
-					(searchElement as any)._debouncedSearch,
+					searchWithDebounce._debouncedSearch,
 				);
 			}
 
@@ -547,7 +562,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			}, this._config.search.delay);
 
 			// Store the new debounced function as a property of the element
-			(searchElement as any)._debouncedSearch = debouncedSearch;
+			searchWithDebounce._debouncedSearch = debouncedSearch;
 
 			// Add the new debounced event listener
 			searchElement.addEventListener('keyup', debouncedSearch);
@@ -590,10 +605,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		let _temp = (this._data = [...originalData] as T[]);
 
 		if (search) {
+			const searchTerm = typeof search === 'string' ? search : '';
 			_temp = this._data = this._config.search.callback.call(
 				this,
 				this._data,
-				search,
+				searchTerm,
 			) as T[];
 		}
 
@@ -651,7 +667,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 	private _tableConfigInvalidate(): boolean {
 		// Remove _data and _state from config
-		const { _data, _state, ...restConfig } = this._config;
+		const { _state, ...restConfig } = this._config;
 		const checksum: string = KTUtils.checksum(JSON.stringify(restConfig));
 		if (_state._configChecksum !== checksum) {
 			this._config._state._configChecksum = checksum;
@@ -746,9 +762,8 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			return Object.keys(originalData[0]).length;
 		}
 		if (this._tbodyElement) {
-			const firstRow = this._tbodyElement.querySelector<HTMLTableRowElement>(
-				'tr',
-			);
+			const firstRow =
+				this._tbodyElement.querySelector<HTMLTableRowElement>('tr');
 			if (firstRow) {
 				return firstRow.querySelectorAll<HTMLTableCellElement>('td').length;
 			}
@@ -1052,8 +1067,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			th.hasAttribute('data-kt-datatable-column'),
 		);
 		// When no th has data-kt-datatable-column (e.g. multi-row headers), use logical column count from tbody so we don't overcount thead cells
-		const columnsToRender: HTMLTableCellElement[] =
-			ths.length > 0 ? ths : [];
+		const columnsToRender: HTMLTableCellElement[] = ths.length > 0 ? ths : [];
 		const logicalColumnCount =
 			ths.length > 0 ? ths.length : this._getLogicalColumnCount();
 
@@ -1074,7 +1088,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 					const th = columnsToRender[colIndex];
 					const colName = th?.getAttribute('data-kt-datatable-column');
 					const td = document.createElement('td');
-					let value: any;
+					let value: KTOptionType | '';
 					if (colName && Object.prototype.hasOwnProperty.call(item, colName)) {
 						value = item[colName as keyof T];
 					} else if (Object.prototype.hasOwnProperty.call(item, colIndex)) {
@@ -1566,12 +1580,17 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			document.querySelector<HTMLInputElement>(
 				`[data-kt-datatable-search="#${tableId}"]`,
 			);
-		if (searchElement && (searchElement as any)._debouncedSearch) {
+		if (searchElement) {
+			const searchWithDebounce =
+				KTDataTable.asSearchElementWithDebounce(searchElement);
+			if (!searchWithDebounce._debouncedSearch) {
+				return;
+			}
 			searchElement.removeEventListener(
 				'keyup',
-				(searchElement as any)._debouncedSearch,
+				searchWithDebounce._debouncedSearch,
 			);
-			delete (searchElement as any)._debouncedSearch;
+			delete searchWithDebounce._debouncedSearch;
 		}
 
 		// --- 2. Remove page size dropdown event listener ---
@@ -1589,11 +1608,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 
 		// --- 4. Dispose of handler objects (checkbox, sort) ---
 		// KTDataTableCheckboxAPI does not have a dispose method, but we can remove header checkbox listener
-		if (
-			this._checkbox &&
-			typeof (this._checkbox as any).dispose === 'function'
-		) {
-			(this._checkbox as any).dispose();
+		const checkboxWithDispose = this._checkbox as KTDataTableCheckboxAPI & {
+			dispose?: () => void;
+		};
+		if (this._checkbox && typeof checkboxWithDispose.dispose === 'function') {
+			checkboxWithDispose.dispose();
 		} else {
 			// Remove header checkbox event listener if possible
 			const headerCheckElement = this._element.querySelector<HTMLInputElement>(
@@ -1621,8 +1640,11 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._element.classList.remove(this._config.loadingClass);
 
 		// --- 6. Remove instance reference from the DOM element ---
-		if ((this._element as any).instance) {
-			delete (this._element as any).instance;
+		const elementWithInstance = KTDataTable.asElementWithInstance(
+			this._element,
+		);
+		if (elementWithInstance.instance) {
+			delete elementWithInstance.instance;
 		}
 
 		// --- 7. (Optional) Clear localStorage state ---
@@ -1630,9 +1652,12 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		// this._deleteState();
 	}
 
-	private _debounce(func: Function, wait: number) {
+	private _debounce<TArgs extends unknown[]>(
+		func: (...args: TArgs) => void,
+		wait: number,
+	): (...args: TArgs) => void {
 		let timeout: number | undefined;
-		return function (...args: any[]) {
+		return function (...args: TArgs) {
 			const later = () => {
 				clearTimeout(timeout);
 				func(...args);
@@ -1839,7 +1864,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		}
 
 		// Fallback to element's instance property (for manually created instances)
-		return (element as any).instance;
+		return KTDataTable.asElementWithInstance(element).instance;
 	}
 
 	/**

package/src/components/datatable/types.ts

@@ -3,11 +3,13 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
+import { KTOptionType } from '../../types';
+
 // Define the sort order and filter criteria types
 export type KTDataTableSortOrderInterface = 'asc' | 'desc' | '';
 
 export interface KTDataTableDataInterface {
-	[key: string]: string | number | boolean | object;
+	[key: string]: KTOptionType;
 }
 
 export interface KTDataTableAttributeInterface {

package/src/components/drawer/drawer.ts

@@ -448,8 +448,6 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 		if (!drawerElement) {
 			// If element is a toggle button and drawer element wasn't found, return null
 			// The handleToggle() will handle waiting for the element to appear
-			if (element.hasAttribute('data-kt-drawer-toggle')) {
-			}
 			return null;
 		}
 
@@ -485,10 +483,8 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 
 	public static handleResize(): void {
 		window.addEventListener('resize', () => {
-			let timer;
-
 			KTUtils.throttle(
-				timer,
+				undefined,
 				() => {
 					document
 						.querySelectorAll('[data-kt-drawer-initialized]')
@@ -512,8 +508,7 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 			'click',
 			(rawEvent: MouseEvent) => {
 				const target = rawEvent.target as HTMLElement;
-				if (target && target.hasAttribute('data-kt-drawer-toggle')) {
-				}
+				void (target && target.hasAttribute('data-kt-drawer-toggle'));
 			},
 			true,
 		); // Use capture phase to catch before any stopPropagation
@@ -534,15 +529,6 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 				if (drawer) {
 					drawer.toggle(target);
 				} else {
-					// Drawer element not found - wait for it to appear (handles persisted Livewire components)
-					// Check if drawer exists in persisted components (might be in header that's persisted)
-					const persistedHeader =
-						document.querySelector('[wire\\:id]')?.closest('[wire\\:id]') ||
-						document.querySelector('header#header');
-					const drawerInPersisted = persistedHeader
-						? persistedHeader.querySelector(selector)
-						: null;
-
 					// Wait longer for persisted components that may take time to render
 					// Also check if drawer exists in persisted header component
 					KTDrawer.waitForElement(selector, 5000).then((drawerElement) => {
@@ -706,11 +692,10 @@ export class KTDrawer extends KTComponent implements KTDrawerInterface {
 					instance.hide(); // This will clean up backdrop and state
 				}
 				// Clear KTData entries
-				const hadDrawer = KTData.has(element as HTMLElement, 'drawer');
 				KTData.remove(element as HTMLElement, 'drawer');
 				// Remove initialization attribute to allow fresh initialization
 				element.removeAttribute('data-kt-drawer-initialized');
-			} catch (e) {
+			} catch {
 				// Ignore errors for individual elements
 			}
 		});

package/src/components/dropdown/dropdown.ts

@@ -120,7 +120,7 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 		this._toggle();
 	}
 
-	protected _mouseover(event: MouseEvent): void {
+	protected _mouseover(_event: MouseEvent): void {
 		if (this._disabled) return;
 
 		if (this._getOption('trigger') !== 'hover') return;
@@ -244,7 +244,6 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 	}
 
 	protected _initPopper(): void {
-		const isRtl = KTDom.isRTL();
 		let reference: HTMLElement;
 		const attach = this._getOption('attach') as string;
 
@@ -607,7 +606,7 @@ export class KTDropdown extends KTComponent implements KTDropdownInterface {
 				if (menu) {
 					KTData.remove(menu as HTMLElement, 'dropdownElement');
 				}
-			} catch (e) {
+			} catch {
 				// Ignore errors for individual elements
 			}
 		});