@keenthemes/ktui 1.2.0 → 1.2.2

package/src/components/select/combobox.ts

@@ -5,7 +5,7 @@
 
 import { KTSelectConfigInterface } from './config';
 import { KTSelect } from './select';
-import { filterOptions, renderTemplateString, stringToElement } from './utils';
+import { filterOptions, FocusManager } from './utils';
 import { defaultTemplates } from './templates';
 
 /**
@@ -14,7 +14,7 @@ import { defaultTemplates } from './templates';
 export class KTSelectCombobox {
 	private _select: KTSelect;
 	private _config: KTSelectConfigInterface;
-	private _searchInputElement: HTMLInputElement;
+	private _searchInputElement: HTMLInputElement | null;
 	private _clearButtonElement: HTMLElement | null;
 	private _boundInputHandler: (event: Event) => void;
 	private _boundClearHandler: (event: MouseEvent) => void;
@@ -41,16 +41,18 @@ export class KTSelectCombobox {
 
 		this._attachEventListeners();
 
-		this._select.getElement().addEventListener('dropdown.close', () => {
+		this._select.getElement()?.addEventListener('dropdown.close', () => {
 			// When dropdown closes, if not multi-select and not using displayTemplate,
 			// ensure input shows the selected value or placeholder.
 			if (!this._config.multiple && !this._config.displayTemplate) {
 				this.updateDisplay(this._select.getSelectedOptions());
 			} else {
 				// For tags or displayTemplate, the input should be clear for typing.
-				this._searchInputElement.value = '';
+				if (this._searchInputElement) {
+					this._searchInputElement.value = '';
+				}
 			}
-			this._toggleClearButtonVisibility(this._searchInputElement.value);
+			this._toggleClearButtonVisibility(this._searchInputElement?.value ?? '');
 			// this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
 		});
 	}
@@ -102,7 +104,7 @@ export class KTSelectCombobox {
 
 		this._toggleClearButtonVisibility(query);
 
-		if (!(this._select as any).isDropdownOpen()) {
+		if (!this._select.isDropdownOpen()) {
 			// Use public getter
 			this._select.openDropdown();
 		}
@@ -125,6 +127,7 @@ export class KTSelectCombobox {
 	private _handleClearButtonClick(event: MouseEvent): void {
 		event.preventDefault();
 		event.stopPropagation();
+		if (!this._searchInputElement) return;
 
 		this._searchInputElement.value = '';
 		this._toggleClearButtonVisibility('');
@@ -134,7 +137,7 @@ export class KTSelectCombobox {
 		this._select.clearSelection(); // This will also trigger updateSelectedOptionDisplay
 		this._select.showAllOptions(); // Show all options after clearing
 		this._select.openDropdown();
-		this._searchInputElement.focus();
+		this._searchInputElement?.focus();
 	}
 
 	/**
@@ -170,7 +173,10 @@ export class KTSelectCombobox {
 		// or the main FocusManager should adjust focus if needed.
 		// For combobox, this filtering is the primary search mechanism.
 		// We might need to tell select's focus manager to focus first option.
-		(this._select as any)._focusManager.focusFirst(); // Consider if this is always right
+		const focusManager = (
+			this._select as unknown as { _focusManager?: FocusManager }
+		)._focusManager;
+		focusManager?.focusFirst();
 	}
 
 	/**
@@ -185,17 +191,18 @@ export class KTSelectCombobox {
 		}
 
 		if (this._config.tags && this._valuesContainerElement) {
+			const valuesContainer = this._valuesContainerElement;
+			const selectElement = this._select.getElement();
+			if (!selectElement) return;
 			// Combobox + Tags
 			selectedOptions.forEach((value) => {
 				// Ensure value is properly escaped for querySelector
-				const optionElement = this._select
-					.getElement()
-					.querySelector(
-						`option[value="${CSS.escape(value)}"]`,
-					) as HTMLOptionElement;
+				const optionElement = selectElement.querySelector(
+					`option[value="${CSS.escape(value)}"]`,
+				) as HTMLOptionElement;
 				if (optionElement) {
 					const tagElement = defaultTemplates.tag(optionElement, this._config);
-					this._valuesContainerElement.appendChild(tagElement);
+					valuesContainer.appendChild(tagElement);
 				}
 			});
 			this._searchInputElement.value = ''; // Input field is for typing new searches
@@ -219,7 +226,7 @@ export class KTSelectCombobox {
 				.map((value) => {
 					const optionEl = this._select
 						.getElement()
-						.querySelector(`option[value="${CSS.escape(value)}"]`);
+						?.querySelector(`option[value="${CSS.escape(value)}"]`);
 					return optionEl ? optionEl.textContent : '';
 				})
 				.join(', '); // Basic comma separation
@@ -233,7 +240,7 @@ export class KTSelectCombobox {
 			const selectedValue = selectedOptions[0];
 			const optionElement = this._select
 				.getElement()
-				.querySelector(`option[value="${CSS.escape(selectedValue)}"]`);
+				?.querySelector(`option[value="${CSS.escape(selectedValue)}"]`);
 			this._searchInputElement.value = optionElement
 				? optionElement.textContent || ''
 				: '';

package/src/components/select/config.ts

@@ -15,17 +15,17 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	// Data Handling
 	items: [], // Static list of options
 	isLoading: false, // Indicates if options are being loaded asynchronously
-	onFetch: null, // Callback function to fetch options asynchronously
+	onFetch: undefined, // Callback function to fetch options asynchronously
 
 	// Remote Data Configuration
 	remote: false, // Enable/disable remote data fetching
-	dataUrl: null, // URL to fetch options from
-	apiDataProperty: null, // Property in the response object that contains the options
+	dataUrl: undefined, // URL to fetch options from
+	apiDataProperty: undefined, // Property in the response object that contains the options
 	remoteErrorMessage: 'Failed to load data', // Error message to display if remote data fetch fails
 
 	// Field Mapping
-	dataValueField: null, // Property in the option object that contains the value (default: 'id')
-	dataFieldText: null, // Property in the option object that contains the text (default: 'title')
+	dataValueField: undefined, // Property in the option object that contains the value (default: 'id')
+	dataFieldText: undefined, // Property in the option object that contains the text (default: 'title')
 
 	// Search Configuration
 	searchParam: '', // Query parameter for API search requests
@@ -60,7 +60,7 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	clearAllText: 'Clear all', // Text for the "Clear All" option (if implemented)
 	enableSelectAll: false, // Enable/disable "Select All" button for multi-select
 	showSelectedCount: true, // Show the number of selected options in multi-select mode
-	renderSelected: null, // Custom function to render the selected value(s) in the display area
+	renderSelected: undefined, // Custom function to render the selected value(s) in the display area
 
 	// Accessibility & Usability
 	label: 'Select an option', // Label for the select component (for screen readers)
@@ -69,10 +69,10 @@ export const DefaultConfig: KTSelectConfigInterface = {
 	// Dropdown Configuration
 	dropdownZindex: 105, // Initial z-index value for the dropdown
 	dropdownContainer: null, // Container element for the dropdown
-	dropdownPlacement: null,
+	dropdownPlacement: undefined,
 	dropdownFlip: false,
 	dropdownPreventOverflow: false,
-	dropdownStrategy: null,
+	dropdownStrategy: undefined,
 	dropdownWidth: null, // Custom width for dropdown (e.g., '300px'), null to match toggle element width
 	closeOnOtherOpen: true, // Close other open dropdowns when this one opens
 	dispatchGlobalEvents: true, // Dispatch events on document for global listeners (jQuery compatibility)
@@ -112,7 +112,7 @@ export interface KTSelectConfigInterface {
 	clearAllText?: string;
 	enableSelectAll?: boolean;
 	showSelectedCount?: boolean;
-	renderSelected?: (selectedOptions: any[]) => string; // Assuming any[] for now, adjust based on your option data structure
+	renderSelected?: (selectedOptions: string[]) => string;
 
 	// Accessibility & Usability
 	label?: string;
@@ -201,16 +201,17 @@ export class KTSelectState {
 	}
 
 	private _initDefaultConfig(
-		config: KTSelectConfigInterface,
+		config?: KTSelectConfigInterface,
 	): KTSelectConfigInterface {
+		const resolvedConfig: Partial<KTSelectConfigInterface> = config ?? {};
 		return {
 			...DefaultConfig,
-			...config,
-			...config.config,
-		};
+			...resolvedConfig,
+			...resolvedConfig.config,
+		} as KTSelectConfigInterface;
 	}
 
-	public setItems(items?: any[], query?: string): Promise<void> {
+	public setItems(items?: KTSelectOption[], query?: string): Promise<void> {
 		return new Promise<void>((resolve, reject) => {
 			if (items) {
 				this._config.items = items;

package/src/components/select/dropdown.ts

@@ -127,7 +127,7 @@ export class KTSelectDropdown extends KTComponent {
 	/**
 	 * Handle clicks outside the dropdown
 	 */
-	private _handleOutsideClick(event: MouseEvent): void {
+	private _handleOutsideClick(event: Event): void {
 		if (!this._isOpen) return;
 
 		const target = event.target as HTMLElement;

package/src/components/select/option.ts

@@ -13,16 +13,26 @@ export class KTSelectOption extends KTComponent {
 	protected override readonly _config: KTSelectConfigInterface; // Holds option-specific data from data-kt-*
 	private _globalConfig: KTSelectConfigInterface; // Main select's config
 
+	private _elementWithInstance(): HTMLElement & { instance?: KTSelectOption } {
+		return this._element as HTMLElement & { instance?: KTSelectOption };
+	}
+
 	constructor(element: HTMLElement, config?: KTSelectConfigInterface) {
 		super();
 
 		// Always initialize a new option instance
 		this._init(element);
-		this._globalConfig = config;
+		this._globalConfig = (config ?? {}) as KTSelectConfigInterface;
 		this._buildConfig();
 
 		// Clean the config
-		this._config = (this._config as any)[''] || {};
+		const configRecord = this._config as unknown as Record<
+			string,
+			KTSelectConfigInterface
+		>;
+		this._config =
+			(configRecord[''] as KTSelectConfigInterface) ||
+			({} as KTSelectConfigInterface);
 
 		// Add the option config to the global config
 		// Ensure optionsConfig is initialized
@@ -42,7 +52,7 @@ export class KTSelectOption extends KTComponent {
 
 		// Don't store in KTData to avoid Singleton pattern issues
 		// Each option should be a unique instance
-		(element as any).instance = this;
+		this._elementWithInstance().instance = this;
 	}
 
 	public get id(): string {
@@ -61,7 +71,7 @@ export class KTSelectOption extends KTComponent {
 	 * Gathers all necessary data for rendering this option,
 	 * including standard HTML attributes and custom data-kt-* attributes.
 	 */
-	public getOptionDataForTemplate(): Record<string, any> {
+	public getOptionDataForTemplate(): Record<string, unknown> {
 		const el = this.getHTMLOptionElement();
 		const text = el.textContent || '';
 		return {

package/src/components/select/remote.ts

@@ -22,6 +22,10 @@ export class KTSelectRemote {
 	private _lastQuery: string = '';
 	private _element: HTMLElement | null = null;
 
+	private _isRecord(value: unknown): value is Record<string, unknown> {
+		return typeof value === 'object' && value !== null;
+	}
+
 	/**
 	 * Constructor
 	 * @param config KTSelect configuration
@@ -54,13 +58,13 @@ export class KTSelectRemote {
 		this._dispatchEvent('remoteSearchStart');
 
 		return fetch(url)
-			.then((response: Response): Promise<any> => {
+			.then((response: Response): Promise<unknown> => {
 				if (!response.ok) {
 					throw new Error(`HTTP error! Status: ${response.status}`);
 				}
 				return response.json();
 			})
-			.then((data: any): KTSelectOptionData[] => {
+			.then((data: unknown): KTSelectOptionData[] => {
 				// Process the data
 				return this._processData(data);
 			})
@@ -144,25 +148,30 @@ export class KTSelectRemote {
 	 * @param data API response data
 	 * @returns Array of KTSelectOptionData
 	 */
-	private _processData(data: any): KTSelectOptionData[] {
+	private _processData(data: unknown): KTSelectOptionData[] {
 		try {
-			let processedData = data;
+			let processedData: unknown = data;
+			const dataRecord = this._isRecord(data) ? data : null;
 
 			// Extract data from the API property if specified
-			if (this._config.apiDataProperty && data[this._config.apiDataProperty]) {
+			if (
+				this._config.apiDataProperty &&
+				dataRecord &&
+				this._config.apiDataProperty in dataRecord
+			) {
 				// If pagination metadata is available, extract it
 				if (this._config.pagination) {
-					if (data.total_pages) {
-						this._totalPages = data.total_pages;
+					if (typeof dataRecord.total_pages === 'number') {
+						this._totalPages = dataRecord.total_pages;
 					}
-					if (data.total) {
+					if (typeof dataRecord.total === 'number') {
 						this._totalPages = Math.ceil(
-							data.total / (this._config.paginationLimit || 10),
+							dataRecord.total / (this._config.paginationLimit || 10),
 						);
 					}
 				}
 
-				processedData = data[this._config.apiDataProperty];
+				processedData = dataRecord[this._config.apiDataProperty];
 			}
 
 			// Ensure data is an array
@@ -172,46 +181,48 @@ export class KTSelectRemote {
 			}
 
 			// Map data to KTSelectOptionData format
-			const mappedData = processedData.map((item: any): KTSelectOptionData => {
-				const mappedItem = this._mapItemToOption(item);
-
-				// Add logging to trace data path extraction
-				if (
-					this._config.dataValueField &&
-					this._config.dataValueField.includes('.')
-				) {
-					// For nested paths, verify extraction worked
-					const parts = this._config.dataValueField.split('.');
-					let nestedValue = item;
-
-					// Try to navigate to the value manually for verification
-					for (const part of parts) {
-						if (
-							nestedValue &&
-							typeof nestedValue === 'object' &&
-							part in nestedValue
-						) {
-							nestedValue = nestedValue[part];
-						} else {
-							nestedValue = null;
-							break;
+			const mappedData = processedData.map(
+				(item: unknown): KTSelectOptionData => {
+					const mappedItem = this._mapItemToOption(item);
+
+					// Add logging to trace data path extraction
+					if (
+						this._config.dataValueField &&
+						this._config.dataValueField.includes('.')
+					) {
+						// For nested paths, verify extraction worked
+						const parts = this._config.dataValueField.split('.');
+						let nestedValue: unknown = item;
+
+						// Try to navigate to the value manually for verification
+						for (const part of parts) {
+							if (
+								nestedValue &&
+								typeof nestedValue === 'object' &&
+								part in nestedValue
+							) {
+								nestedValue = (nestedValue as Record<string, unknown>)[part];
+							} else {
+								nestedValue = null;
+								break;
+							}
 						}
-					}
 
-					// If we found a value, verify it matches what was extracted
-					if (nestedValue !== null && nestedValue !== undefined) {
-						const expectedValue = String(nestedValue);
+						// If we found a value, verify it matches what was extracted
+						if (nestedValue !== null && nestedValue !== undefined) {
+							const expectedValue = String(nestedValue);
 
-						if (mappedItem.id !== expectedValue && expectedValue) {
-							console.warn(
-								`Value mismatch! Path: ${this._config.dataValueField}, Expected: ${expectedValue}, Got: ${mappedItem.id}`,
-							);
+							if (mappedItem.id !== expectedValue && expectedValue) {
+								console.warn(
+									`Value mismatch! Path: ${this._config.dataValueField}, Expected: ${expectedValue}, Got: ${mappedItem.id}`,
+								);
+							}
 						}
 					}
-				}
 
-				return mappedItem;
-			});
+					return mappedItem;
+				},
+			);
 
 			return mappedData;
 		} catch (error) {
@@ -227,19 +238,19 @@ export class KTSelectRemote {
 	 * @param item Data item from API
 	 * @returns KTSelectOptionData object
 	 */
-	private _mapItemToOption(item: any): KTSelectOptionData {
+	private _mapItemToOption(item: unknown): KTSelectOptionData {
 		// Get the field mapping from config with fallbacks for common field names
 		const valueField = this._config.dataValueField || 'id';
 		const labelField = this._config.dataFieldText || 'title';
 
 		// Extract values using improved getValue function
-		const getValue = (obj: any, path: string): any => {
+		const getValue = (obj: unknown, path: string): unknown => {
 			if (!path || !obj) return null;
 
 			try {
 				// Handle dot notation to access nested properties
 				const parts = path.split('.');
-				let result = obj;
+				let result: unknown = obj;
 
 				for (const part of parts) {
 					if (
@@ -249,7 +260,7 @@ export class KTSelectRemote {
 					) {
 						return null;
 					}
-					result = result[part];
+					result = (result as Record<string, unknown>)[part];
 				}
 
 				return result;
@@ -261,12 +272,13 @@ export class KTSelectRemote {
 
 		// Get ID and ensure it's a string
 		let id = getValue(item, valueField);
+		const itemRecord = this._isRecord(item) ? item : {};
 		if (id === null || id === undefined) {
 			// Try common fallback fields for ID
 			const fallbackFields = ['id', 'value', 'key', 'pk'];
 			for (const field of fallbackFields) {
-				if (item[field] !== null && item[field] !== undefined) {
-					id = String(item[field]);
+				if (itemRecord[field] !== null && itemRecord[field] !== undefined) {
+					id = String(itemRecord[field]);
 					break;
 				}
 			}
@@ -292,8 +304,8 @@ export class KTSelectRemote {
 				'description',
 			];
 			for (const field of fallbackFields) {
-				if (item[field] !== null && item[field] !== undefined) {
-					title = String(item[field]);
+				if (itemRecord[field] !== null && itemRecord[field] !== undefined) {
+					title = String(itemRecord[field]);
 					break;
 				}
 			}
@@ -308,10 +320,10 @@ export class KTSelectRemote {
 
 		// Create the option object with consistent structure
 		const result: KTSelectOptionData = {
-			id: id,
-			title: title,
-			selected: Boolean(item.selected),
-			disabled: Boolean(item.disabled),
+			id: String(id),
+			title: String(title),
+			selected: Boolean(itemRecord.selected),
+			disabled: Boolean(itemRecord.disabled),
 		};
 
 		return result;

package/src/components/select/search.ts

@@ -10,7 +10,7 @@ import { filterOptions, FocusManager, EventManager } from './utils';
 
 export class KTSelectSearch {
 	private _select: KTSelect;
-	private _searchInput: HTMLInputElement;
+	private _searchInput: HTMLInputElement | null;
 	private _noResultsElement: HTMLElement | null = null;
 	private _originalOptionContents = new Map<string, string>();
 	private _eventManager: EventManager;
@@ -18,7 +18,7 @@ export class KTSelectSearch {
 	private _config: KTSelectConfigInterface;
 
 	// Public handler for search input (made public for event binding)
-	public handleSearchInput: (...args: any[]) => void;
+	public handleSearchInput: (event: Event) => void;
 
 	constructor(select: KTSelect) {
 		this._select = select;
@@ -60,7 +60,7 @@ export class KTSelectSearch {
 				this._eventManager.addListener(this._searchInput, 'blur', () => {
 					// Small delay to prevent race conditions with selection
 					setTimeout(() => {
-						if (!this._searchInput.value) {
+						if (!this._searchInput?.value) {
 							this._resetAllOptions();
 							this.clearSearch();
 						}
@@ -74,12 +74,12 @@ export class KTSelectSearch {
 				) {
 					this._select
 						.getElement()
-						.addEventListener('remoteSearchStart', () => {
+						?.addEventListener('remoteSearchStart', () => {
 							// Reset focused option when remote search starts
 							this._focusManager.resetFocus();
 						});
 
-					this._select.getElement().addEventListener('remoteSearchEnd', () => {
+					this._select.getElement()?.addEventListener('remoteSearchEnd', () => {
 						// After remote search completes, refresh our option cache
 						this.refreshOptionCache();
 					});
@@ -88,7 +88,7 @@ export class KTSelectSearch {
 				// Listen for dropdown close to reset options - ATTACH TO WRAPPER
 				this._select
 					.getWrapperElement()
-					.addEventListener('dropdown.close', () => {
+					?.addEventListener('dropdown.close', () => {
 						this._focusManager.resetFocus();
 						const config = this._select.getConfig();
 
@@ -98,7 +98,9 @@ export class KTSelectSearch {
 						// Respect clearSearchOnClose config option
 						if (config.clearSearchOnClose) {
 							// Clear the search input field
-							this._searchInput.value = '';
+							if (this._searchInput) {
+								this._searchInput.value = '';
+							}
 							// Reset all options to their original state
 							this._resetAllOptions();
 							// Clear any "no results" message
@@ -116,7 +118,7 @@ export class KTSelectSearch {
 					});
 
 				// Clear highlights when an option is selected - ATTACH TO ORIGINAL SELECT (standard 'change' event)
-				this._select.getElement().addEventListener('change', () => {
+				this._select.getElement()?.addEventListener('change', () => {
 					this.clearSearch();
 
 					// Close dropdown only for single select mode, and only if closeOnEnter is not false
@@ -131,7 +133,7 @@ export class KTSelectSearch {
 				// Consolidated 'dropdown.show' event listener - ATTACH TO WRAPPER
 				this._select
 					.getWrapperElement()
-					.addEventListener('dropdown.show', () => {
+					?.addEventListener('dropdown.show', () => {
 						this._focusManager.resetFocus(); // Always clear previous focus state
 
 						if (this._searchInput?.value) {
@@ -205,7 +207,7 @@ export class KTSelectSearch {
 				if (attempt < maxAttempts) {
 					this._focusSearchInputWithRetry(attempt + 1);
 				}
-			} catch (error) {
+			} catch {
 				// Focus failed with error, retry if we haven't exceeded max attempts
 				if (attempt < maxAttempts) {
 					this._focusSearchInputWithRetry(attempt + 1);
@@ -223,25 +225,26 @@ export class KTSelectSearch {
 	/**
 	 * Handles keydown events on the search input for navigation and actions.
 	 */
-	private _handleSearchKeyDown(event: KeyboardEvent): void {
-		const key = event.key;
+	private _handleSearchKeyDown(event: Event): void {
+		const keyEvent = event as KeyboardEvent;
+		const key = keyEvent.key;
 
 		switch (key) {
 			case ' ': // Spacebar
 				// Do nothing, allow space to be typed into the input
 				// Stop propagation to prevent parent handlers from processing this event
-				event.stopPropagation();
+				keyEvent.stopPropagation();
 				break;
 			case 'ArrowDown':
-				event.preventDefault();
+				keyEvent.preventDefault();
 				this._focusManager.focusNext();
 				break;
 			case 'ArrowUp':
-				event.preventDefault();
+				keyEvent.preventDefault();
 				this._focusManager.focusPrevious();
 				break;
-			case 'Enter':
-				event.preventDefault();
+			case 'Enter': {
+				keyEvent.preventDefault();
 				// Use currently focused option (from arrow keys); only fall back to first if none focused
 				const optionToSelect =
 					this._focusManager.getFocusedOption() ??
@@ -272,9 +275,12 @@ export class KTSelectSearch {
 					}
 				}
 				break;
+			}
 			case 'Escape':
-				event.preventDefault();
-				this._searchInput.value = '';
+				keyEvent.preventDefault();
+				if (this._searchInput) {
+					this._searchInput.value = '';
+				}
 				this.clearSearch();
 				this._resetAllOptions();
 				this._clearNoResultsMessage();
@@ -342,8 +348,9 @@ export class KTSelectSearch {
 
 		// For remote search, KTSelect component handles it.
 		// KTSelect will call refreshAfterSearch on this module when remote data is updated.
+		const minLength = config.searchMinLength ?? 0;
 		if (config.remote && config.searchParam) {
-			if (query.length < config.searchMinLength) {
+			if (query.length < minLength) {
 				this._resetAllOptions();
 				this._clearNoResultsMessage();
 				this._focusManager.focusFirst(); // Focus first if query too short
@@ -352,7 +359,7 @@ export class KTSelectSearch {
 		}
 
 		// For local search
-		if (query.length >= config.searchMinLength) {
+		if (query.length >= minLength) {
 			this._filterOptions(query);
 			this._focusManager.focusFirst(); // Focus first visible option after local filtering
 		} else {
@@ -377,12 +384,8 @@ export class KTSelectSearch {
 		// Restore original content before filtering, so highlighting is applied fresh.
 		this._restoreOptionContentsBeforeFilter();
 
-		const visibleCount = filterOptions(
-			options,
-			query,
-			config,
-			dropdownElement,
-			(count) => this._handleNoResults(count),
+		filterOptions(options, query, config, dropdownElement, (count) =>
+			this._handleNoResults(count),
 		);
 
 		this._select.updateSelectAllButtonState();