@keenthemes/ktui 1.0.12 → 1.0.13

package/src/components/select/utils.ts

@@ -30,133 +30,47 @@ export function filterOptions(
 ): number {
 	let visibleOptionsCount = 0;
 
-	// Clear existing "no results" messages
-	const noResultsElement = dropdownElement.querySelector(
-		'[data-kt-select-no-results]',
-	);
-	if (noResultsElement) {
-		noResultsElement.remove();
-	}
-
-	// For empty query, ensure highlights are cleared from all options
+	// For empty query, make all options visible
+	// The KTSelectSearch class is now responsible for restoring original content before calling this.
 	if (!query || query.trim() === '') {
-		// Just make all options visible without highlighting
 		for (const option of options) {
-			// Make option visible by removing hidden classes and inline styles
 			option.classList.remove('hidden');
-
-			// Clean up any inline display styles from legacy code
-			if (
-				option.hasAttribute('style') &&
-				option.getAttribute('style').includes('display:')
-			) {
-				const styleAttr = option.getAttribute('style');
-				if (
-					styleAttr.trim() === 'display: none;' ||
-					styleAttr.trim() === 'display: block;'
-				) {
-					option.removeAttribute('style');
-				} else {
-					option.setAttribute(
-						'style',
-						styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim(),
-					);
+			// Remove inline display style if it was used to hide
+			if (option.style.display === 'none') {
+				option.style.display = '';
 				}
-			}
-
-			// Clear highlights by restoring original text content
-			if (option.dataset && option.dataset.originalText) {
-				option.innerHTML = option.dataset.originalText;
-			} else {
-				option.innerHTML = option.textContent || '';
-			}
-			// Remove the cache if present
-			if (option.dataset && option.dataset.originalText) {
-				delete option.dataset.originalText;
-			}
-
+			// At this point, option.innerHTML should be its original.
 			visibleOptionsCount++;
 		}
 
-		// Call the callback with the visible count if provided
 		if (onVisibleCount) {
 			onVisibleCount(visibleOptionsCount);
 		}
-
 		return visibleOptionsCount;
 	}
 
-	// Filter options based on query
-	for (const option of options) {
-		const optionText = option.textContent?.toLowerCase() || '';
-		const isMatch = optionText.includes(query.toLowerCase());
+	const queryLower = query.toLowerCase();
 
-		// Check if option is disabled
-		const isDisabled = option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true';
+	for (const option of options) {
+		// Use data-text for matching if available, otherwise fall back to textContent
+		const optionText = (option.dataset.text || option.textContent || '').toLowerCase();
+		const isMatch = optionText.includes(queryLower);
 
-		if (isMatch || query.trim() === '') {
-			// Show option by removing the hidden class and any display inline styles
+		if (isMatch) {
 			option.classList.remove('hidden');
-
-			// Remove any inline display styles that might be present
-			if (
-				option.hasAttribute('style') &&
-				option.getAttribute('style').includes('display:')
-			) {
-				const styleAttr = option.getAttribute('style');
-				if (
-					styleAttr.trim() === 'display: none;' ||
-					styleAttr.trim() === 'display: block;'
-				) {
-					option.removeAttribute('style');
-				} else {
-					option.setAttribute(
-						'style',
-						styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim(),
-					);
-				}
-			}
-
+			if (option.style.display === 'none') option.style.display = ''; // Ensure visible
 			visibleOptionsCount++;
 
-			if (config.searchHighlight && query.trim() !== '') {
-				if (option.dataset && !option.dataset.originalText) {
-					option.dataset.originalText = option.innerHTML;
-				}
-				highlightTextInElementDebounced(option, query, config);
-			}
-
 		} else {
-			// Hide option using hidden class
 			option.classList.add('hidden');
-
-			// Remove any inline display styles
-			if (
-				option.hasAttribute('style') &&
-				option.getAttribute('style').includes('display:')
-			) {
-				const styleAttr = option.getAttribute('style');
-				if (
-					styleAttr.trim() === 'display: none;' ||
-					styleAttr.trim() === 'display: block;'
-				) {
-					option.removeAttribute('style');
-				} else {
-					option.setAttribute(
-						'style',
-						styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim(),
-					);
-				}
-			}
 		}
 
-		// Early exit if maxItems limit is reached
-		if (config.searchMaxItems && visibleOptionsCount >= config.searchMaxItems) {
-			break;
-		}
+		// Early exit if maxItems limit is reached (optional)
+		// if (config.searchMaxItems && visibleOptionsCount >= config.searchMaxItems) {
+		// 	break;
+		// }
 	}
 
-	// Call the callback with the visible count if provided
 	if (onVisibleCount) {
 		onVisibleCount(visibleOptionsCount);
 	}
@@ -164,56 +78,6 @@ export function filterOptions(
 	return visibleOptionsCount;
 }
 
-/**
- * Highlight text only within a specific element, preserving other elements
- */
-export function highlightTextInElement(
-	element: HTMLElement,
-	query: string,
-	config: KTSelectConfigInterface,
-): void {
-	if (!element || !query || query.trim() === '') return;
-
-	const queryLower = query.toLowerCase();
-	const text = element.textContent || '';
-	if (!text) return;
-
-	// Escape regex special characters in query
-	const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-	const regex = new RegExp(escapedQuery, 'gi');
-
-	// Replace all matches with the highlight template
-	let lastIndex = 0;
-	let result = '';
-	let match: RegExpExecArray | null;
-	let matches = [];
-	while ((match = regex.exec(text)) !== null) {
-		matches.push({ start: match.index, end: regex.lastIndex });
-	}
-
-	if (matches.length === 0) {
-		element.innerHTML = text;
-		return;
-	}
-
-	for (let i = 0; i < matches.length; i++) {
-		const { start, end } = matches[i];
-		// Add text before match
-		result += text.slice(lastIndex, start);
-		// Add highlighted match using template
-		const highlighted = defaultTemplates.highlight(config, text.slice(start, end)).outerHTML;
-		result += highlighted;
-		lastIndex = end;
-	}
-	// Add remaining text
-	result += text.slice(lastIndex);
-
-	element.innerHTML = result;
-}
-
-// Debounced version for performance
-export const highlightTextInElementDebounced = debounce(highlightTextInElement, 100);
-
 /**
  * Focus manager for keyboard navigation
  * Consolidates redundant focus management logic into shared functions
@@ -331,6 +195,7 @@ export class FocusManager {
 				option.getAttribute('aria-disabled') !== 'true' &&
 				(option.textContent?.toLowerCase().startsWith(lowerStr) || option.dataset.value?.toLowerCase().startsWith(lowerStr))
 			) {
+				this.resetFocus();
 				this._focusedOptionIndex = idx;
 				this.applyFocus(option);
 				this.scrollIntoView(option);
@@ -389,12 +254,14 @@ export class FocusManager {
 	 */
 	public applyFocus(option: HTMLElement): void {
 		if (!option) return;
+		// Ensure it's not disabled
 		if (option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true') {
 			return;
 		}
-		this.resetFocus();
+		// DO NOT CALL resetFocus() here. Caller's responsibility.
 		option.classList.add(this._focusClass);
 		option.classList.add(this._hoverClass);
+		// _triggerFocusChange needs _focusedOptionIndex to be set by the caller before this.
 		this._triggerFocusChange();
 	}
 
@@ -409,14 +276,7 @@ export class FocusManager {
 			element.classList.remove(this._focusClass, this._hoverClass);
 		});
 
-		// Reset index if visible options have changed
-		const visibleOptions = this.getVisibleOptions();
-		if (
-			this._focusedOptionIndex !== null &&
-			this._focusedOptionIndex >= visibleOptions.length
-		) {
-			this._focusedOptionIndex = null;
-		}
+		this._focusedOptionIndex = null; // Always reset the index
 	}
 
 	/**
@@ -451,10 +311,14 @@ export class FocusManager {
 		const index = options.findIndex((option) => option.dataset.value === value);
 
 		if (index >= 0) {
-			this._focusedOptionIndex = index;
-			this.applyFocus(options[index]);
-			this.scrollIntoView(options[index]);
-			return true;
+			const optionToFocus = options[index];
+			if (!optionToFocus.classList.contains('disabled') && optionToFocus.getAttribute('aria-disabled') !== 'true'){
+				this.resetFocus();
+				this._focusedOptionIndex = index;
+				this.applyFocus(optionToFocus);
+				this.scrollIntoView(optionToFocus);
+				return true;
+			}
 		}
 
 		return false;

package/src/helpers/dom.ts

@@ -391,36 +391,6 @@ const KTDom = {
 		return attributes;
 	},
 
-	getDataAttributesByJson(element: HTMLElement, prefix: string): object {
-		if (!element) {
-			return {};
-		}
-
-		const rawValue = element.dataset[prefix];
-
-		if (!rawValue) {
-			return {};
-		}
-
-		const parsedValue = KTUtils.parseDataAttribute(rawValue);
-
-		if (typeof parsedValue === 'string') {
-			try {
-				return JSON.parse(parsedValue);
-			} catch (e) {
-				console.error(`Invalid JSON format for '${prefix}': ${e instanceof Error ? e.message : e} ${rawValue}`);
-			}
-		}
-
-		// If it's already an object, return as is
-		if (typeof parsedValue === 'object' && parsedValue !== null) {
-			return parsedValue;
-		}
-
-		// For other types (number, boolean, null), return an empty object
-		return {};
-	},
-
 	ready(callback: CallableFunction): void {
 		if (document.readyState === 'loading') {
 			document.addEventListener('DOMContentLoaded', () => {

package/webpack.config.js

@@ -91,7 +91,12 @@ module.exports = (env) => {
 			...baseConfig.optimization,
 			minimize: false, // Disable minimization for normal JS files
 		},
-		plugins: [...baseConfig.plugins, new CleanWebpackPlugin()],
+		plugins: [
+			...baseConfig.plugins,
+			new CleanWebpackPlugin({
+				cleanOnceBeforeBuildPatterns: ['**/*', '!styles.css'],
+			}),
+		],
 	};
 
 	const minifiedConfig = {

package/examples/select/combobox-icons.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Combobox Icons</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Combobox Icons</label>
-
-				<select
-					class="kt-select"
-					data-kt-select
-					data-kt-select-combobox="true"
-					data-kt-select-placeholder="Type or select a country..."
-					data-kt-select-config='{
-						"displayTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"font-semibold text-gray-900\">{{text}}</span></div>",
-						"displayClass": "kt-select-display",
-						"displayToggle": true,
-						"optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-gray-800\">{{text}}</span></div>",
-						"optionClass": "kt-select-option"
-					}'>
-				<option value="us"
-					data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/us.png\" class=\"w-6 h-6\" />"}'>
-					United States</option>
-				<option value="de"
-					data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/de.png\" class=\"w-6 h-6\" />"}'>
-					Germany</option>
-				<option value="it"
-					data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/it.png\" class=\"w-6 h-6\" />"}'>
-					Italy</option>
-				<option value="fr"
-					data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/fr.png\" class=\"w-6 h-6\" />"}'>
-					France</option>
-				<option value="es"
-					data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/es.png\" class=\"w-6 h-6\" />"}'>
-					Spain</option>
-				<option value="jp"
-					data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/jp.png\" class=\"w-6 h-6\" />"}'>
-					Japan</option>
-				<option value="ru"
-					data-kt-select-option='{"icon": "<img src=\"https://flagcdn.com/w40/ru.png\" class=\"w-6 h-6\" />"}'>
-					Russia</option>
-			</select>
-
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-
-</html>

package/examples/select/icon-description.html

@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Icon Description</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Icon Description</label>
-
-				<select
-					class="kt-select"
-					data-kt-select
-					data-kt-select-placeholder="Select with description..."
-					data-kt-select-config='{
-						"displayTemplate": "<div class=\"flex items-start gap-3\">{{icon}}<div class=\"flex flex-col\"><span class=\"font-semibold text-gray-900 leading-tight\">{{text}}</span><span class=\"text-xs text-gray-500 leading-tight\">{{desc}}</span></div></div>",
-						"displayClass": "kt-select-display",
-						"displayToggle": true,
-						"optionTemplate": "<div class=\"flex items-start gap-3\">{{icon}}<div class=\"flex flex-col\"><span class=\"text-gray-800 leading-tight\">{{text}}</span><span class=\"text-xs text-gray-500 leading-tight\">{{desc}}</span></div></div>",
-						"optionClass": "kt-select-option"
-					}'>
-					<option value="mysql"
-						data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/mysql/4479A1\" class=\"w-6 h-6\" />", "desc": "MySQL is a relational database management system"}'>
-						MySQL
-					</option>
-					<option value="postgres"
-						data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/postgresql/4169E1\" class=\"w-6 h-6\" />", "desc": "PostgreSQL is a powerful object-relational database system"}'>
-						PostgreSQL
-					</option>
-					<option value="mongodb"
-						data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/mongodb/47A248\" class=\"w-6 h-6\" />", "desc": "MongoDB is a NoSQL database that uses JSON-like documents with optional schemas"}'>
-						MongoDB
-					</option>
-					<option value="redis"
-						data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/redis/DC382D\" class=\"w-6 h-6\" />", "desc": "Redis is an in-memory data structure store"}'>
-						Redis
-					</option>
-					<option value="sqlite"
-						data-kt-select-option='{"icon": "<img src=\"https://cdn.simpleicons.org/sqlite/003B57\" class=\"w-6 h-6\" />", "desc": "SQLite is a lightweight, disk-based database"}'>
-						SQLite
-					</option>
-				</select>
-
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-
-</html>