@keenthemes/ktui 1.0.11 → 1.0.12

package/src/components/select/dropdown.ts

@@ -7,11 +7,9 @@ import {
 	Instance as PopperInstance,
 	createPopper,
 	Placement,
-	VirtualElement,
 } from '@popperjs/core';
 import KTDom from '../../helpers/dom';
 import KTData from '../../helpers/data';
-import KTEventHandler from '../../helpers/event-handler';
 import KTComponent from '../component';
 import { KTSelectConfigInterface } from './config';
 import { FocusManager, EventManager } from './utils';
@@ -79,13 +77,6 @@ export class KTSelectDropdown extends KTComponent {
 			this._handleToggleClick.bind(this),
 		);
 
-		// Keyboard navigation
-		this._eventManager.addListener(
-			this._element,
-			'keydown',
-			this._handleKeyDown.bind(this),
-		);
-
 		// Close on outside click
 		this._eventManager.addListener(
 			document as unknown as HTMLElement,
@@ -104,48 +95,6 @@ export class KTSelectDropdown extends KTComponent {
 		this.toggle();
 	}
 
-	/**
-	 * Handle keyboard events
-	 */
-	private _handleKeyDown(event: KeyboardEvent): void {
-		if (!this._isOpen) return;
-
-		switch (event.key) {
-			case 'Escape':
-				event.preventDefault();
-				this.close();
-				this._toggleElement.focus();
-				break;
-			case 'ArrowDown':
-				event.preventDefault();
-				this._focusManager.focusNext();
-				break;
-			case 'ArrowUp':
-				event.preventDefault();
-				this._focusManager.focusPrevious();
-				break;
-			case 'Home':
-				event.preventDefault();
-				// Focus first visible option
-				const firstOption = this._focusManager.getVisibleOptions()[0];
-				if (firstOption) {
-					this._focusManager.applyFocus(firstOption);
-					this._focusManager.scrollIntoView(firstOption);
-				}
-				break;
-			case 'End':
-				event.preventDefault();
-				// Focus last visible option
-				const visibleOptions = this._focusManager.getVisibleOptions();
-				const lastOption = visibleOptions[visibleOptions.length - 1];
-				if (lastOption) {
-					this._focusManager.applyFocus(lastOption);
-					this._focusManager.scrollIntoView(lastOption);
-				}
-				break;
-		}
-	}
-
 	/**
 	 * Handle clicks outside the dropdown
 	 */
@@ -274,6 +223,10 @@ export class KTSelectDropdown extends KTComponent {
 	 * Toggle the dropdown
 	 */
 	public toggle(): void {
+		if (this._config.disabled) {
+			if (this._config.debug) console.log('KTSelectDropdown.toggle: select is disabled, not toggling');
+			return;
+		}
 		if (this._config.debug)
 			console.log('KTSelectDropdown.toggle called - isOpen:', this._isOpen);
 
@@ -294,6 +247,10 @@ export class KTSelectDropdown extends KTComponent {
 	 * Open the dropdown
 	 */
 	public open(): void {
+		if (this._config.disabled) {
+			if (this._config.debug) console.log('KTSelectDropdown.open: select is disabled, not opening');
+			return;
+		}
 		if (this._isOpen || this._isTransitioning) return;
 
 		// Fire before show event
@@ -353,11 +310,7 @@ export class KTSelectDropdown extends KTComponent {
 				);
 				if (searchInput) {
 					(searchInput as HTMLInputElement).focus();
-				} else {
-					this._focusFirstOption();
 				}
-			} else {
-				this._focusFirstOption();
 			}
 
 			// Fire after show event

package/src/components/select/index.ts

@@ -9,5 +9,5 @@ export { KTSelectCombobox } from './combobox';
 export { KTSelectSearch } from './search';
 export { KTSelectTags } from './tags';
 export { KTSelectDropdown } from './dropdown';
-export { filterOptions, FocusManager, EventManager } from './utils';
+export { filterOptions, FocusManager, EventManager, TypeToSearchBuffer } from './utils';
 export { KTSelectConfigInterface, KTSelectOption } from './config';

package/src/components/select/option.ts

@@ -5,7 +5,6 @@
 
 import KTComponent from '../component';
 import {
-	KTSelectOptionConfigInterface,
 	KTSelectConfigInterface,
 } from './config';
 import { defaultTemplates } from './templates';
@@ -13,10 +12,10 @@ import { defaultTemplates } from './templates';
 export class KTSelectOption extends KTComponent {
 	protected override readonly _name: string = 'select-option';
 	protected override readonly _dataOptionPrefix: string = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
-	protected override readonly _config: KTSelectOptionConfigInterface;
+	protected override readonly _config: KTSelectConfigInterface;
 	private _globalConfig: KTSelectConfigInterface;
 
-	constructor(element: HTMLElement, config?: KTSelectConfigInterface) {
+	constructor(element: HTMLElement, config?: KTSelectConfigInterface,) {
 		super();
 
 		// Always initialize a new option instance
@@ -24,6 +23,13 @@ export class KTSelectOption extends KTComponent {
 		this._buildConfig();
 		this._globalConfig = config;
 
+		// Clean the config
+		this._config = (this._config as any)[''] || {};
+
+		// Add the option config to the global config
+		this._globalConfig.optionsConfig = this._globalConfig.optionsConfig || {};
+		this._globalConfig.optionsConfig[(element as HTMLInputElement).value] = this._config;
+
 		// Don't store in KTData to avoid Singleton pattern issues
 		// Each option should be a unique instance
 		(element as any).instance = this;
@@ -35,9 +41,24 @@ export class KTSelectOption extends KTComponent {
 
 	public render(): HTMLElement {
 		const optionElement = this.getHTMLOptionElement();
-		// Use the global config if available, or create a minimal valid config
-		const config = this._globalConfig || { height: 250 };
-		// Create a new option element every time
-		return defaultTemplates.option(optionElement, config);
+
+		// Get the original template
+		let originalTemplate = this._globalConfig.optionTemplate;
+
+		if (this._globalConfig.optionTemplate) {
+			// Replace all {{varname}} in option.innerHTML with values from _config
+			Object.entries((this._config as any) || {}).forEach(([key, value]) => {
+				if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+					this._globalConfig.optionTemplate = this._globalConfig.optionTemplate.replace(new RegExp(`{{${key}}}`, 'g'), String(value));
+				}
+			});
+		}
+
+		let template = defaultTemplates.option(optionElement, this._globalConfig);
+
+		// Restore the original template
+		this._globalConfig.optionTemplate = originalTemplate;
+
+		return template;
 	}
 }

package/src/components/select/remote.ts

@@ -259,12 +259,10 @@ export class KTSelectRemote {
 		// Get the field mapping from config with fallbacks for common field names
 		const valueField = this._config.dataValueField || 'id';
 		const labelField = this._config.dataFieldText || 'title';
-		const descriptionField = this._config.dataFieldDescription || 'description';
-		const iconField = this._config.dataFieldIcon || 'icon';
 
 		if (this._config.debug)
 			console.log(
-				`Mapping fields: value=${valueField}, label=${labelField}, description=${descriptionField}, icon=${iconField}`,
+				`Mapping fields: value=${valueField}, label=${labelField}`,
 			);
 		if (this._config.debug)
 			console.log('Item data:', JSON.stringify(item).substring(0, 200) + '...'); // Trimmed for readability
@@ -298,7 +296,7 @@ export class KTSelectRemote {
 								? typeof result === 'object'
 									? JSON.stringify(result).substring(0, 50)
 									: String(result).substring(0, 50)
-								: 'null'
+							: 'null'
 						}`,
 					);
 
@@ -363,48 +361,10 @@ export class KTSelectRemote {
 				console.log('After fallback checks, title:', title);
 		}
 
-		// Get description - make sure we don't pass null, undefined, or "null" string values
-		let description = getValue(item, descriptionField);
-		if (
-			description === null ||
-			description === undefined ||
-			String(description) === 'null' ||
-			String(description) === 'undefined'
-		) {
-			description = null;
-		} else {
-			description = String(description);
-		}
-		if (this._config.debug)
-			console.log(`Description field [${descriptionField}]:`, description);
-
-		// Try to get an icon - make sure we don't pass null, undefined, or "null" string values
-		let icon = getValue(item, iconField);
-		if (
-			icon === null ||
-			icon === undefined ||
-			String(icon) === 'null' ||
-			String(icon) === 'undefined'
-		) {
-			icon = null;
-		} else {
-			icon = String(icon);
-		}
-		if (this._config.debug) console.log(`Icon field [${iconField}]:`, icon);
-
-		// If ID is null, use the title as fallback
-		if (id === null || id === '') {
-			id = title;
-			if (this._config.debug)
-				console.log(`Using title as fallback for ID: ${id}`);
-		}
-
 		// Create the option object with non-empty values
 		const result = {
 			id: id || title || 'id-' + Math.random().toString(36).substr(2, 9), // Ensure we always have an ID
 			title: title || 'Unnamed option',
-			description: description,
-			icon: icon,
 		};
 
 		if (this._config.debug)

package/src/components/select/search.ts

@@ -6,7 +6,6 @@
 import { KTSelect } from './select';
 import { defaultTemplates } from './templates';
 import {
-	handleDropdownKeyNavigation,
 	filterOptions,
 	FocusManager,
 	EventManager,
@@ -17,7 +16,6 @@ export class KTSelectSearch {
 	private _searchInput: HTMLInputElement;
 	private _noResultsElement: HTMLElement | null = null;
 	private _originalOptionContents = new Map<string, string>();
-	private _boundKeyNavHandler: (event: KeyboardEvent) => void;
 	private _eventManager: EventManager;
 	private _focusManager: FocusManager;
 	private _config: import('./config').KTSelectConfigInterface;
@@ -34,7 +32,6 @@ export class KTSelectSearch {
 			'[data-kt-select-option]',
 			select.getConfig(),
 		);
-		this._boundKeyNavHandler = this._handleKeyboardNavigation.bind(this);
 		this.handleSearchInput = this._handleSearchInput.bind(this);
 		this._config = select.getConfig();
 		this._cacheOriginalOptionContents();
@@ -90,26 +87,13 @@ export class KTSelectSearch {
 					});
 				}
 
-				// Add keyboard navigation for search results
-				// This is stopping event propagation to prevent conflicts
-				this._eventManager.addListener(
-					this._searchInput,
-					'keydown',
-					this._boundKeyNavHandler,
-				);
-
 				// Listen for dropdown close to reset options if search is empty
 				this._select.getElement().addEventListener('dropdown.close', () => {
 					this._focusManager.resetFocus();
-					// Always clear highlights when dropdown closes
 					this.clearSearchHighlights();
-					if (!this._searchInput.value) {
-						this._resetAllOptions();
-					}
-					// Clear the search input when dropdown closes if configured
-					if (this._select.getConfig().clearSearchOnClose) {
-						this._searchInput.value = '';
-					}
+					this._searchInput.value = '';
+					this._resetAllOptions();
+					this._clearNoResultsMessage();
 				});
 
 				// Clear highlights when an option is selected
@@ -155,39 +139,6 @@ export class KTSelectSearch {
 		}
 	}
 
-	/**
-	 * Handle keyboard navigation for search results
-	 */
-	private _handleKeyboardNavigation(event: KeyboardEvent) {
-		// Stop propagation to prevent multiple handlers from firing
-		event.stopPropagation();
-
-		if (this._config.debug) console.log('Search module keydown:', event.key);
-
-		const visibleOptions = this._focusManager.getVisibleOptions();
-		if (visibleOptions.length === 0) return;
-
-		// Use the shared keyboard navigation handler with custom callbacks
-		handleDropdownKeyNavigation(
-			event,
-			this._select,
-			{
-				multiple: this._select.getConfig().multiple,
-				closeOnSelect: this._select.getConfig().closeOnSelect,
-			},
-			{
-				onArrowDown: () => this._focusManager.focusNext(),
-				onArrowUp: () => this._focusManager.focusPrevious(),
-				onEnter: () => this._selectFocusedOption(),
-				onClose: () => {
-					if (event.key === 'Escape') {
-						this.clearSearchHighlights();
-					}
-				},
-			},
-		);
-	}
-
 	/**
 	 * Select the currently focused option
 	 */
@@ -344,11 +295,11 @@ export class KTSelectSearch {
 		this._clearNoResultsMessage();
 
 		const config = this._select.getConfig();
-		this._noResultsElement = defaultTemplates.noResults(config);
+		this._noResultsElement = defaultTemplates.empty(config);
 
 		const dropdownElement = this._select.getDropdownElement();
 		const optionsContainer = dropdownElement.querySelector(
-			'[data-kt-select-options-container]',
+			'[data-kt-select-options]',
 		);
 		if (optionsContainer) {
 			optionsContainer.appendChild(this._noResultsElement);
@@ -390,6 +341,15 @@ export class KTSelectSearch {
 	 */
 	private _clearDisplayHighlights() {
 		// Implementation for clearing display highlights
+		const options = Array.from(
+			this._select.getOptionsElement(),
+		) as HTMLElement[];
+
+		options.forEach((option) => {
+			if (option.dataset && !option.dataset.originalText) {
+				option.dataset.originalText = option.innerHTML;
+			}
+		});
 	}
 
 	/**

package/src/components/select/select.css

@@ -103,3 +103,52 @@
 		@apply aria-invalid:border-destructive aria-invalid:ring-destructive/20;
 	}
 }
+
+/* Temporary styles */
+.kt-select-option.focus {
+	@apply bg-accent text-accent-foreground;
+}
+
+.kt-select-option.hover {
+	@apply bg-accent text-accent-foreground;
+}
+
+@custom-variant kt-select-option-selected {
+	[data-kt-select-option].selected {
+		@slot;
+	}
+
+	[data-kt-select-option].selected & {
+		@slot;
+	}
+}
+
+@custom-variant kt-select-option-focused {
+	[data-kt-select-option].focused {
+		@slot;
+	}
+
+	[data-kt-select-option].focused & {
+		@slot;
+	}
+}
+
+@custom-variant kt-select-option-disabled {
+	[data-kt-select-option].disabled {
+		@slot;
+	}
+
+	[data-kt-select-option].disabled & {
+		@slot;
+	}
+}
+
+@custom-variant kt-select-option-hover {
+	[data-kt-select-option]:hover {
+		@slot;
+	}
+
+	[data-kt-select-option]:hover & {
+		@slot;
+	}
+}