@keenthemes/ktui 1.0.20 → 1.0.21

package/src/components/select/remote.ts

@@ -261,16 +261,13 @@ export class KTSelectRemote {
 		const labelField = this._config.dataFieldText || 'title';
 
 		if (this._config.debug)
-			console.log(
-				`Mapping fields: value=${valueField}, label=${labelField}`,
-			);
+			console.log(`Mapping fields: value=${valueField}, label=${labelField}`);
 		if (this._config.debug)
 			console.log('Item data:', JSON.stringify(item).substring(0, 200) + '...'); // Trimmed for readability
 
-		// Extract values using dot notation if needed
+		// Extract values using improved getValue function
 		const getValue = (obj: any, path: string): any => {
-			if (!path) return null;
-			if (!obj) return null;
+			if (!path || !obj) return null;
 
 			try {
 				// Handle dot notation to access nested properties
@@ -296,7 +293,7 @@ export class KTSelectRemote {
 								? typeof result === 'object'
 									? JSON.stringify(result).substring(0, 50)
 									: String(result).substring(0, 50)
-							: 'null'
+								: 'null'
 						}`,
 					);
 
@@ -307,64 +304,66 @@ export class KTSelectRemote {
 			}
 		};
 
-		// Try to get a usable ID, with fallbacks
+		// Get ID and ensure it's a string
 		let id = getValue(item, valueField);
-
-		// Ensure id is always a proper string
 		if (id === null || id === undefined) {
-			// If no ID found, check for id.value or item.id as fallbacks
-			if (
-				item.id &&
-				typeof item.id === 'object' &&
-				'value' in item.id &&
-				item.id.value
-			) {
-				id = String(item.id.value);
-				if (this._config.debug)
-					console.log(`Using id.value as fallback: ${id}`);
-			} else if (item.id) {
-				id = String(item.id);
-				if (this._config.debug)
-					console.log(`Using direct item.id as fallback: ${id}`);
-			} else {
-				// If no ID found at all, use the title instead (will be extracted below)
-				if (this._config.debug)
-					console.log(`No ID found, will use title as fallback`);
-				id = null;
+			// 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 (this._config.debug)
+						console.log(`Using fallback field '${field}' for ID: ${id}`);
+					break;
+				}
 			}
-		} else if (typeof id === 'object') {
-			// If ID is an object, log the issue and set to null to use title fallback
-			console.warn(
-				`ID for path ${valueField} is an object, will use title fallback instead`,
-			);
-			id = null;
 		} else {
-			// Otherwise, ensure it's a string
 			id = String(id);
-			if (this._config.debug) console.log(`Final ID value: ${id}`);
 		}
 
-		// Try to get a usable title, with fallbacks
+		// If still no ID, generate one
+		if (!id) {
+			id = `option-${Math.random().toString(36).substr(2, 9)}`;
+			if (this._config.debug) console.log(`Generated fallback ID: ${id}`);
+		}
+
+		// Get label with proper fallbacks
 		let title = getValue(item, labelField);
-		title = title !== null ? String(title) : '';
-		if (this._config.debug)
-			console.log(`Title/label field [${labelField}]:`, title);
+		if (!title) {
+			// Try common fallback fields for title
+			const fallbackFields = [
+				'name',
+				'title',
+				'label',
+				'text',
+				'displayName',
+				'description',
+			];
+			for (const field of fallbackFields) {
+				if (item[field] !== null && item[field] !== undefined) {
+					title = String(item[field]);
+					if (this._config.debug)
+						console.log(`Using fallback field '${field}' for title: ${title}`);
+					break;
+				}
+			}
+		} else {
+			title = String(title);
+		}
 
-		// If title is still empty, try common field names
+		// If still no title, use ID as fallback
 		if (!title) {
-			// Try common field names if the configured one doesn't work
-			if (item.name) title = String(item.name);
-			else if (item.title) title = String(item.title);
-			else if (item.label) title = String(item.label);
-			else if (item.text) title = String(item.text);
+			title = `Option ${id}`;
 			if (this._config.debug)
-				console.log('After fallback checks, title:', title);
+				console.log(`Using ID as fallback title: ${title}`);
 		}
 
-		// 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',
+		// Create the option object with consistent structure
+		const result: KTSelectOptionData = {
+			id: id,
+			title: title,
+			selected: Boolean(item.selected),
+			disabled: Boolean(item.disabled),
 		};
 
 		if (this._config.debug)

package/src/components/select/search.ts

@@ -6,11 +6,7 @@
 import { KTSelectConfigInterface } from './config';
 import { KTSelect } from './select';
 import { defaultTemplates } from './templates';
-import {
-	filterOptions,
-	FocusManager,
-	EventManager,
-} from './utils';
+import { filterOptions, FocusManager, EventManager } from './utils';
 
 export class KTSelectSearch {
 	private _select: KTSelect;
@@ -63,7 +59,7 @@ export class KTSelectSearch {
 				this._eventManager.addListener(
 					this._searchInput,
 					'keydown',
-					this._handleSearchKeyDown.bind(this)
+					this._handleSearchKeyDown.bind(this),
 				);
 
 				// Add blur event listener to ensure highlights are cleared when focus is lost
@@ -96,18 +92,20 @@ export class KTSelectSearch {
 				}
 
 				// Listen for dropdown close to reset options - ATTACH TO WRAPPER
-				this._select.getWrapperElement().addEventListener('dropdown.close', () => {
-					this._focusManager.resetFocus();
-					// If clearSearchOnClose is false and there's a value, the search term and filtered state should persist.
-					// KTSelect's closeDropdown method already calls this._searchModule.clearSearch() (which clears highlights)
-					// and conditionally clears the input value based on KTSelect's config.clearSearchOnClose.
-					// This listener in search.ts seems to unconditionally clear everything.
-					// For now, keeping its original behavior:
-					this.clearSearch(); // Clears highlights from current options
-					this._searchInput.value = ''; // Clears the search input field
-					this._resetAllOptions(); // Shows all options, restores original text, removes highlights
-					this._clearNoResultsMessage(); // Clears any "no results" message
-				});
+				this._select
+					.getWrapperElement()
+					.addEventListener('dropdown.close', () => {
+						this._focusManager.resetFocus();
+						// If clearSearchOnClose is false and there's a value, the search term and filtered state should persist.
+						// KTSelect's closeDropdown method already calls this._searchModule.clearSearch() (which clears highlights)
+						// and conditionally clears the input value based on KTSelect's config.clearSearchOnClose.
+						// This listener in search.ts seems to unconditionally clear everything.
+						// For now, keeping its original behavior:
+						this.clearSearch(); // Clears highlights from current options
+						this._searchInput.value = ''; // Clears the search input field
+						this._resetAllOptions(); // Shows all options, restores original text, removes highlights
+						this._clearNoResultsMessage(); // Clears any "no results" message
+					});
 
 				// Clear highlights when an option is selected - ATTACH TO ORIGINAL SELECT (standard 'change' event)
 				this._select.getElement().addEventListener('change', () => {
@@ -121,30 +119,32 @@ export class KTSelectSearch {
 				});
 
 				// Consolidated 'dropdown.show' event listener - ATTACH TO WRAPPER
-				this._select.getWrapperElement().addEventListener('dropdown.show', () => {
-					this._focusManager.resetFocus(); // Always clear previous focus state
-
-					if (this._searchInput?.value) {
-						// If there's an existing search term:
-						// 1. Re-filter options. This ensures the display (hidden/visible) is correct
-						//    and "no results" message is handled if query yields nothing.
-						this._filterOptions(this._searchInput.value);
-					} else {
-						// If search input is empty:
-						// 1. Reset all options to their full, unfiltered, original state.
-						this._resetAllOptions(); // Shows all, clears highlights from options, restores original text
-						// 2. Clear any "no results" message.
-						this._clearNoResultsMessage();
-					}
+				this._select
+					.getWrapperElement()
+					.addEventListener('dropdown.show', () => {
+						this._focusManager.resetFocus(); // Always clear previous focus state
+
+						if (this._searchInput?.value) {
+							// If there's an existing search term:
+							// 1. Re-filter options. This ensures the display (hidden/visible) is correct
+							//    and "no results" message is handled if query yields nothing.
+							this._filterOptions(this._searchInput.value);
+						} else {
+							// If search input is empty:
+							// 1. Reset all options to their full, unfiltered, original state.
+							this._resetAllOptions(); // Shows all, clears highlights from options, restores original text
+							// 2. Clear any "no results" message.
+							this._clearNoResultsMessage();
+						}
 
-					// Handle autofocus for the search input (this was one of the original separate listeners)
-					if (this._select.getConfig().searchAutofocus) {
-						setTimeout(() => {
-							this._searchInput?.focus(); // Focus search input
-						}, 50); // Delay to ensure dropdown is visible
-					}
-					this._select.updateSelectAllButtonState();
-				});
+						// Handle autofocus for the search input (this was one of the original separate listeners)
+						if (this._select.getConfig().searchAutofocus) {
+							setTimeout(() => {
+								this._searchInput?.focus(); // Focus search input
+							}, 50); // Delay to ensure dropdown is visible
+						}
+						this._select.updateSelectAllButtonState();
+					});
 			}
 		}
 	}
@@ -229,8 +229,10 @@ export class KTSelectSearch {
 	 * This is typically called before applying new filters/highlights.
 	 */
 	private _restoreOptionContentsBeforeFilter(): void {
-		const options = Array.from(this._select.getOptionsElement()) as HTMLElement[];
-		options.forEach(option => {
+		const options = Array.from(
+			this._select.getOptionsElement(),
+		) as HTMLElement[];
+		options.forEach((option) => {
 			const value = option.getAttribute('data-value');
 			if (value && this._originalOptionContents.has(value)) {
 				const originalContent = this._originalOptionContents.get(value)!;
@@ -295,8 +297,12 @@ 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),
+		const visibleCount = filterOptions(
+			options,
+			query,
+			config,
+			dropdownElement,
+			(count) => this._handleNoResults(count),
 		);
 
 		this._select.updateSelectAllButtonState();

package/src/components/select/select.css

@@ -60,7 +60,7 @@
 		}
 	}
 
-	.kt-select-search-empty  {
+	.kt-select-search-empty {
 		@apply px-3.5 py-1 text-sm text-muted-foreground;
 	}
 
@@ -92,12 +92,13 @@
 		@apply grow flex items-center gap-2.5 py-1.75 px-2.5 rounded-md text-sm text-start cursor-pointer;
 		@apply hover:bg-accent hover:text-accent-foreground;
 
-		&[aria-disabled=true],
+		&[aria-disabled='true'],
 		&.disabled {
 			@apply opacity-60 pointer-events-none;
 		}
 
-		&.selected {}
+		&.selected {
+		}
 
 		&.focused,
 		&.hover,
@@ -122,7 +123,7 @@
 		@apply text-muted-foreground overflow-ellipsis truncate;
 	}
 
-	.kt-select-display:not([data-multiple=true]) {
+	.kt-select-display:not([data-multiple='true']) {
 		@apply w-full overflow-ellipsis truncate;
 	}
 }
@@ -133,7 +134,7 @@
 		@apply h-8.5 gap-1 ps-3 pe-6 text-[0.8125rem] leading-(--text-sm--line-height) rounded-md;
 		background-position: right 0.5rem center;
 
-		&[data-multiple=true] {
+		&[data-multiple='true'] {
 			@apply h-auto min-h-8.5 py-1.5 flex-wrap;
 			background-position: right 0.5rem top 0.675rem;
 		}
@@ -143,7 +144,7 @@
 		@apply h-7 gap-1 ps-2.5 pe-5 text-xs rounded-md;
 		background-position: right 0.5rem center;
 
-		&[data-multiple=true] {
+		&[data-multiple='true'] {
 			@apply h-auto min-h-7;
 			background-position: right 0.5rem top 0.575rem;
 		}
@@ -153,7 +154,7 @@
 		@apply h-10 gap-1.5 ps-4 pe-8 py-1 text-sm rounded-md;
 		background-position: right 0.6rem center;
 
-		&[data-multiple=true] {
+		&[data-multiple='true'] {
 			@apply h-auto min-h-10 py-2;
 			background-position: right 0.6rem top 0.85rem;
 		}
@@ -166,7 +167,7 @@
 		.kt-select {
 			background-position: left 0.5rem center;
 
-			&[data-multiple=true] {
+			&[data-multiple='true'] {
 				background-position: left 0.5rem top 0.675rem;
 			}
 		}
@@ -174,7 +175,7 @@
 		.kt-select-sm {
 			background-position: left 0.5rem center;
 
-			&[data-multiple=true] {
+			&[data-multiple='true'] {
 				background-position: left 0.5rem top 0.575rem;
 			}
 		}
@@ -182,7 +183,7 @@
 		.kt-select-lg {
 			background-position: left 0.75rem center;
 
-			&[data-multiple=true] {
+			&[data-multiple='true'] {
 				background-position: left 0.75rem top 0.85rem;
 			}
 		}
@@ -235,4 +236,4 @@
 	[data-kt-select-option]:hover & {
 		@slot;
 	}
-}
+}