@keenthemes/ktui 1.0.10 → 1.0.12

package/lib/cjs/components/select/utils.js

@@ -4,12 +4,14 @@
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EventManager = exports.FocusManager = void 0;
+exports.TypeToSearchBuffer = exports.EventManager = exports.FocusManager = exports.highlightTextInElementDebounced = void 0;
 exports.formatCurrency = formatCurrency;
 exports.filterOptions = filterOptions;
 exports.highlightTextInElement = highlightTextInElement;
-exports.handleDropdownKeyNavigation = handleDropdownKeyNavigation;
 exports.debounce = debounce;
+exports.renderTemplateString = renderTemplateString;
+exports.stringToElement = stringToElement;
+// utils.ts
 var templates_1 = require("./templates");
 /**
  * Format a number as a currency string
@@ -50,6 +52,17 @@ function filterOptions(options, query, config, dropdownElement, onVisibleCount)
                     option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
                 }
             }
+            // 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;
+            }
             visibleOptionsCount++;
         }
         // Call the callback with the visible count if provided
@@ -63,6 +76,8 @@ function filterOptions(options, query, config, dropdownElement, onVisibleCount)
         var option = options_2[_b];
         var optionText = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
         var isMatch = optionText.includes(query.toLowerCase());
+        // Check if option is disabled
+        var isDisabled = option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true';
         if (isMatch || query.trim() === '') {
             // Show option by removing the hidden class and any display inline styles
             option.classList.remove('hidden');
@@ -79,22 +94,11 @@ function filterOptions(options, query, config, dropdownElement, onVisibleCount)
                 }
             }
             visibleOptionsCount++;
-            // Apply highlighting if needed - but preserve the option structure
-            if (isMatch && config.searchHighlight && query.trim() !== '') {
-                // Clone option elements that contain icons or descriptions
-                var hasIcon = option.querySelector('[data-kt-select-option-icon]') !== null;
-                var hasDescription = option.querySelector('[data-kt-select-option-description]') !== null;
-                if (hasIcon || hasDescription) {
-                    // Only highlight the text part without changing structure
-                    var titleElement = option.querySelector('[data-kt-option-title]');
-                    if (titleElement) {
-                        highlightTextInElement(titleElement, query, config);
-                    }
-                }
-                else {
-                    // Simple option with just text - standard highlighting
-                    highlightTextInElement(option, query, config);
+            if (config.searchHighlight && query.trim() !== '') {
+                if (option.dataset && !option.dataset.originalText) {
+                    option.dataset.originalText = option.innerHTML;
                 }
+                (0, exports.highlightTextInElementDebounced)(option, query, config);
             }
         }
         else {
@@ -131,37 +135,39 @@ function highlightTextInElement(element, query, config) {
     if (!element || !query || query.trim() === '')
         return;
     var queryLower = query.toLowerCase();
-    function walk(node) {
-        var _a;
-        if (node.nodeType === Node.TEXT_NODE) {
-            var text = node.nodeValue || '';
-            var textLower = text.toLowerCase();
-            var matchIndex = textLower.indexOf(queryLower);
-            if (matchIndex !== -1) {
-                var before = text.slice(0, matchIndex);
-                var match = text.slice(matchIndex, matchIndex + query.length);
-                var after = text.slice(matchIndex + query.length);
-                var frag = document.createDocumentFragment();
-                if (before)
-                    frag.appendChild(document.createTextNode(before));
-                // Use the highlight template, which returns an HTMLElement
-                var highlightSpan = templates_1.defaultTemplates.highlight(config, match);
-                frag.appendChild(highlightSpan);
-                if (after)
-                    frag.appendChild(document.createTextNode(after));
-                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(frag, node);
-                // Only highlight the first occurrence in this node
-            }
-        }
-        else if (node.nodeType === Node.ELEMENT_NODE) {
-            // Don't re-highlight already highlighted nodes
-            if (node.classList.contains('highlight'))
-                return;
-            Array.from(node.childNodes).forEach(walk);
-        }
+    var text = element.textContent || '';
+    if (!text)
+        return;
+    // Escape regex special characters in query
+    var escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    var regex = new RegExp(escapedQuery, 'gi');
+    // Replace all matches with the highlight template
+    var lastIndex = 0;
+    var result = '';
+    var match;
+    var matches = [];
+    while ((match = regex.exec(text)) !== null) {
+        matches.push({ start: match.index, end: regex.lastIndex });
+    }
+    if (matches.length === 0) {
+        element.innerHTML = text;
+        return;
+    }
+    for (var i = 0; i < matches.length; i++) {
+        var _a = matches[i], start = _a.start, end = _a.end;
+        // Add text before match
+        result += text.slice(lastIndex, start);
+        // Add highlighted match using template
+        var highlighted = templates_1.defaultTemplates.highlight(config, text.slice(start, end)).outerHTML;
+        result += highlighted;
+        lastIndex = end;
     }
-    walk(element);
+    // Add remaining text
+    result += text.slice(lastIndex);
+    element.innerHTML = result;
 }
+// Debounced version for performance
+exports.highlightTextInElementDebounced = debounce(highlightTextInElement, 100);
 /**
  * Focus manager for keyboard navigation
  * Consolidates redundant focus management logic into shared functions
@@ -170,16 +176,14 @@ var FocusManager = /** @class */ (function () {
     function FocusManager(element, optionsSelector, config) {
         if (optionsSelector === void 0) { optionsSelector = '[data-kt-select-option]'; }
         this._focusedOptionIndex = null;
+        this._onFocusChange = null;
         this._element = element;
         this._optionsSelector = optionsSelector;
         this._eventManager = new EventManager();
-        // Use config values if provided, otherwise fallback to defaults
-        this._focusClass = (config === null || config === void 0 ? void 0 : config.focusClass) || 'option-focused';
-        this._hoverClass = (config === null || config === void 0 ? void 0 : config.hoverClass) || 'hovered';
-        this._bgClass = (config === null || config === void 0 ? void 0 : config.bgClass) || 'bg-blue-50';
-        this._fontClass = (config === null || config === void 0 ? void 0 : config.fontClass) || 'font-medium';
         // Add click handler to update focus state when options are clicked
         this._setupOptionClickHandlers();
+        this._focusClass = 'focus'; // or whatever your intended class is
+        this._hoverClass = 'hover'; // or your intended class
     }
     /**
      * Set up click handlers for all options to update focus state
@@ -191,15 +195,6 @@ var FocusManager = /** @class */ (function () {
             var target = e.target;
             var optionElement = target.closest(_this._optionsSelector);
             if (optionElement) {
-                // First clear all focus
-                _this.resetFocus();
-                // Then update the focused index based on the clicked option
-                var options = _this.getVisibleOptions();
-                var clickedIndex = options.indexOf(optionElement);
-                if (clickedIndex >= 0) {
-                    _this._focusedOptionIndex = clickedIndex;
-                    _this.applyFocus(options[clickedIndex]);
-                }
             }
         });
     };
@@ -221,24 +216,88 @@ var FocusManager = /** @class */ (function () {
         });
     };
     /**
-     * Focus the next visible option
+     * Focus the first visible option
      */
-    FocusManager.prototype.focusNext = function () {
+    FocusManager.prototype.focusFirst = function () {
         var options = this.getVisibleOptions();
         if (options.length === 0)
             return null;
-        this.resetFocus();
-        if (this._focusedOptionIndex === null) {
-            this._focusedOptionIndex = 0;
+        for (var i = 0; i < options.length; i++) {
+            var option = options[i];
+            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = i;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
         }
-        else {
-            this._focusedOptionIndex =
-                (this._focusedOptionIndex + 1) % options.length;
+        return null;
+    };
+    /**
+     * Focus the last visible option
+     */
+    FocusManager.prototype.focusLast = function () {
+        var options = this.getVisibleOptions();
+        if (options.length === 0)
+            return null;
+        for (var i = options.length - 1; i >= 0; i--) {
+            var option = options[i];
+            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = i;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
+        }
+        return null;
+    };
+    /**
+     * Focus the next visible option that matches the search string
+     */
+    FocusManager.prototype.focusByString = function (str) {
+        var _a, _b, _c;
+        var options = this.getVisibleOptions();
+        if (options.length === 0)
+            return null;
+        var lowerStr = str.toLowerCase();
+        var startIdx = ((_a = this._focusedOptionIndex) !== null && _a !== void 0 ? _a : -1) + 1;
+        for (var i = 0; i < options.length; i++) {
+            var idx = (startIdx + i) % options.length;
+            var option = options[idx];
+            if (!option.classList.contains('disabled') &&
+                option.getAttribute('aria-disabled') !== 'true' &&
+                (((_b = option.textContent) === null || _b === void 0 ? void 0 : _b.toLowerCase().startsWith(lowerStr)) || ((_c = option.dataset.value) === null || _c === void 0 ? void 0 : _c.toLowerCase().startsWith(lowerStr)))) {
+                this._focusedOptionIndex = idx;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
         }
-        var option = options[this._focusedOptionIndex];
-        this.applyFocus(option);
-        this.scrollIntoView(option);
-        return option;
+        return null;
+    };
+    /**
+     * Focus the next visible option
+     */
+    FocusManager.prototype.focusNext = function () {
+        var options = this.getVisibleOptions();
+        if (options.length === 0)
+            return null;
+        var idx = this._focusedOptionIndex === null ? 0 : (this._focusedOptionIndex + 1) % options.length;
+        var startIdx = idx;
+        do {
+            var option = options[idx];
+            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = idx;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
+            idx = (idx + 1) % options.length;
+        } while (idx !== startIdx);
+        return null;
     };
     /**
      * Focus the previous visible option
@@ -247,18 +306,20 @@ var FocusManager = /** @class */ (function () {
         var options = this.getVisibleOptions();
         if (options.length === 0)
             return null;
-        this.resetFocus();
-        if (this._focusedOptionIndex === null) {
-            this._focusedOptionIndex = options.length - 1;
-        }
-        else {
-            this._focusedOptionIndex =
-                (this._focusedOptionIndex - 1 + options.length) % options.length;
-        }
-        var option = options[this._focusedOptionIndex];
-        this.applyFocus(option);
-        this.scrollIntoView(option);
-        return option;
+        var idx = this._focusedOptionIndex === null ? options.length - 1 : (this._focusedOptionIndex - 1 + options.length) % options.length;
+        var startIdx = idx;
+        do {
+            var option = options[idx];
+            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = idx;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
+            idx = (idx - 1 + options.length) % options.length;
+        } while (idx !== startIdx);
+        return null;
     };
     /**
      * Apply focus to a specific option
@@ -266,27 +327,23 @@ var FocusManager = /** @class */ (function () {
     FocusManager.prototype.applyFocus = function (option) {
         if (!option)
             return;
-        // Remove focus from all options first
+        if (option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true') {
+            return;
+        }
         this.resetFocus();
-        // Add focus to this option
         option.classList.add(this._focusClass);
         option.classList.add(this._hoverClass);
-        option.classList.add(this._bgClass);
-        option.classList.add(this._fontClass);
+        this._triggerFocusChange();
     };
     /**
      * Reset focus on all options
      */
     FocusManager.prototype.resetFocus = function () {
         var _this = this;
-        // Find all elements with the focus classes
-        var focusedElements = this._element.querySelectorAll(".".concat(this._focusClass, ", .").concat(this._hoverClass, ", .").concat(this._bgClass, ", .").concat(this._fontClass));
-        // Remove classes from all elements
+        var focusedElements = this._element.querySelectorAll(".".concat(this._focusClass, ", .").concat(this._hoverClass));
+        // Remove focus and hover classes from all options
         focusedElements.forEach(function (element) {
-            element.classList.remove(_this._focusClass);
-            element.classList.remove(_this._hoverClass);
-            element.classList.remove(_this._bgClass);
-            element.classList.remove(_this._fontClass);
+            element.classList.remove(_this._focusClass, _this._hoverClass);
         });
         // Reset index if visible options have changed
         var visibleOptions = this.getVisibleOptions();
@@ -301,7 +358,7 @@ var FocusManager = /** @class */ (function () {
     FocusManager.prototype.scrollIntoView = function (option) {
         if (!option)
             return;
-        var container = this._element.querySelector('[data-kt-select-options-container]');
+        var container = this._element.querySelector('[data-kt-select-options]');
         if (!container)
             return;
         var optionRect = option.getBoundingClientRect();
@@ -352,6 +409,17 @@ var FocusManager = /** @class */ (function () {
     FocusManager.prototype.setFocusedIndex = function (index) {
         this._focusedOptionIndex = index;
     };
+    /**
+     * Set a callback to be called when focus changes
+     */
+    FocusManager.prototype.setOnFocusChange = function (cb) {
+        this._onFocusChange = cb;
+    };
+    FocusManager.prototype._triggerFocusChange = function () {
+        if (this._onFocusChange) {
+            this._onFocusChange(this.getFocusedOption(), this._focusedOptionIndex);
+        }
+    };
     /**
      * Clean up event listeners
      */
@@ -363,166 +431,6 @@ var FocusManager = /** @class */ (function () {
     return FocusManager;
 }());
 exports.FocusManager = FocusManager;
-/**
- * Shared keyboard navigation handler for dropdown options
- * Can be used by both combobox and search modules
- */
-function handleDropdownKeyNavigation(event, select, config, callbacks) {
-    try {
-        // Get the dropdown state
-        var isDropdownOpen = select._dropdownIsOpen;
-        // Log the event to help debug
-        var origin_1 = 'handleDropdownKeyNavigation';
-        if (select.getConfig && select.getConfig().debug)
-            console.log("[".concat(origin_1, "] Key: ").concat(event.key, ", Dropdown open: ").concat(isDropdownOpen));
-        // Handle basic keyboard navigation
-        switch (event.key) {
-            case 'ArrowDown':
-                if (!isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Opening dropdown on ArrowDown"));
-                    select.openDropdown();
-                    // Focus the first option after opening
-                    setTimeout(function () {
-                        select._focusNextOption();
-                    }, 50);
-                }
-                else if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onArrowDown) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Using custom onArrowDown callback"));
-                    callbacks.onArrowDown();
-                }
-                else {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Using default _focusNextOption"));
-                    var focusedOption = select._focusNextOption();
-                    // Ensure we have a focused option
-                    if (focusedOption) {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Focused next option:"), focusedOption);
-                    }
-                }
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-                if (!isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Opening dropdown on ArrowUp"));
-                    select.openDropdown();
-                    // Focus the last option after opening
-                    setTimeout(function () {
-                        select._focusPreviousOption();
-                    }, 50);
-                }
-                else if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onArrowUp) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Using custom onArrowUp callback"));
-                    callbacks.onArrowUp();
-                }
-                else {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Using default _focusPreviousOption"));
-                    var focusedOption = select._focusPreviousOption();
-                    // Ensure we have a focused option
-                    if (focusedOption) {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Focused previous option:"), focusedOption);
-                    }
-                }
-                event.preventDefault();
-                break;
-            case 'Enter':
-                // Prevent form submission
-                event.preventDefault();
-                if (isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Enter pressed with dropdown open"));
-                    // For combobox mode, ensure we update the input value directly
-                    var isCombobox = select.getConfig().mode === 'combobox';
-                    var comboboxModule = select._comboboxModule;
-                    if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onEnter) {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Using custom onEnter callback"));
-                        callbacks.onEnter();
-                    }
-                    else {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Using default selectFocusedOption"));
-                        // Make sure there is a focused option before trying to select it
-                        if (select._focusManager &&
-                            select._focusManager.getFocusedOption()) {
-                            select.selectFocusedOption();
-                        }
-                        else {
-                            // If no option is focused, try to focus the first one
-                            var focusedOption = select._focusNextOption();
-                            // Only select if an option was successfully focused
-                            if (focusedOption) {
-                                select.selectFocusedOption();
-                            }
-                        }
-                    }
-                    // Close dropdown after selection if not multiple and closeOnSelect is true
-                    if (!config.multiple && config.closeOnSelect !== false) {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Closing dropdown after selection"));
-                        select.closeDropdown();
-                    }
-                }
-                else {
-                    // If dropdown is closed, open it on Enter
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Opening dropdown on Enter"));
-                    select.openDropdown();
-                    // Focus the first option after opening
-                    setTimeout(function () {
-                        select._focusNextOption();
-                    }, 50);
-                }
-                break;
-            case 'Tab':
-                // Only handle tab if dropdown is open
-                if (isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Closing dropdown on Tab"));
-                    select.closeDropdown();
-                    if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onClose) {
-                        callbacks.onClose();
-                    }
-                    // Don't prevent default tab behavior - let it move focus naturally
-                }
-                break;
-            case 'Escape':
-                // Only handle escape if dropdown is open
-                if (isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Closing dropdown on Escape"));
-                    select.closeDropdown();
-                    if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onClose) {
-                        callbacks.onClose();
-                    }
-                    event.preventDefault(); // Prevent other escape handlers
-                }
-                break;
-            case ' ': // Space key
-                // If dropdown is closed, space should open it (but not if in combobox mode)
-                if (!isDropdownOpen && !(select.getConfig().mode === 'combobox')) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Opening dropdown on Space"));
-                    select.openDropdown();
-                    // Focus the first option after opening
-                    setTimeout(function () {
-                        select._focusNextOption();
-                    }, 50);
-                    event.preventDefault();
-                }
-                break;
-        }
-    }
-    catch (error) {
-        console.error('Error in keyboard navigation handler:', error);
-    }
-}
 /**
  * Centralized event listener management
  */
@@ -579,7 +487,7 @@ var EventManager = /** @class */ (function () {
         // Go through each event type
         this._boundHandlers.forEach(function (eventMap, event) {
             // For each event type, go through each handler
-            eventMap.forEach(function (boundHandler, originalHandler) {
+            eventMap.forEach(function (boundHandler) {
                 element.removeEventListener(event, boundHandler);
             });
         });
@@ -603,4 +511,43 @@ function debounce(func, delay) {
         timeout = setTimeout(function () { return func.apply(void 0, args); }, delay);
     };
 }
+/**
+ * Replaces all {{key}} in the template with the corresponding value from the data object.
+ * If a key is missing in data, replaces with an empty string.
+ */
+function renderTemplateString(template, data) {
+    return template.replace(/{{(\w+)}}/g, function (_, key) {
+        return data[key] !== undefined && data[key] !== null ? String(data[key]) : '';
+    });
+}
+// Type-to-search buffer utility for keyboard navigation
+var TypeToSearchBuffer = /** @class */ (function () {
+    function TypeToSearchBuffer(timeout) {
+        if (timeout === void 0) { timeout = 500; }
+        this.buffer = '';
+        this.lastTime = 0;
+        this.timeout = timeout;
+    }
+    TypeToSearchBuffer.prototype.push = function (char) {
+        var now = Date.now();
+        if (now - this.lastTime > this.timeout) {
+            this.buffer = '';
+        }
+        this.buffer += char;
+        this.lastTime = now;
+    };
+    TypeToSearchBuffer.prototype.getBuffer = function () {
+        return this.buffer;
+    };
+    TypeToSearchBuffer.prototype.clear = function () {
+        this.buffer = '';
+    };
+    return TypeToSearchBuffer;
+}());
+exports.TypeToSearchBuffer = TypeToSearchBuffer;
+function stringToElement(html) {
+    var template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstElementChild;
+}
 //# sourceMappingURL=utils.js.map