@keenthemes/ktui 1.0.26 → 1.0.28

package/CONTRIBUTING.md

@@ -31,6 +31,19 @@ If you need any help, feel free to reach out us via [@keenthemes](https://x.com/
    ```sh
    npm run lint
    ```
+4. Build the project:
+   ```sh
+   npm run build
+   ```
+5. Start development mode (watch for changes):
+   ```sh
+   npm run dev
+   ```
+
+### Build Commands
+
+- **`npm run build`**: Performs a one-off build and exits. Use this for production builds and CI/CD pipelines.
+- **`npm run dev`**: Starts development mode with file watching. Use this during development for live reloading when files change.
 
 ## Format and lint your code
 

package/dist/ktui.js

@@ -8343,7 +8343,19 @@ var KTDataTable = /** @class */ (function (_super) {
                         return [3 /*break*/, 5];
                     case 4:
                         error_1 = _a.sent();
-                        this._noticeOnTable('Error parsing API response as JSON: ' + String(error_1));
+                        // Fire event with complete error context for application handling
+                        this._fireEvent('parseError', {
+                            response: response,
+                            error: String(error_1),
+                            status: response.status,
+                            statusText: response.statusText
+                        });
+                        this._dispatchEvent('parseError', {
+                            response: response,
+                            error: String(error_1),
+                            status: response.status,
+                            statusText: response.statusText
+                        });
                         return [2 /*return*/];
                     case 5:
                         this._fireEvent('fetched', { response: responseData });
@@ -9252,8 +9264,20 @@ var KTModal = /** @class */ (function (_super) {
     KTModal.prototype._handlers = function () {
         var _this = this;
         this._element.addEventListener('click', function (event) {
-            if (_this._element !== event.target)
+            var target = event.target;
+            var currentTarget = event.currentTarget;
+            // Only proceed if clicking directly on the backdrop (modal element itself)
+            // This prevents closing when clicking inside modal content or any child elements
+            // (including dropdowns rendered via dropdownContainer pointing to modal)
+            if (target !== currentTarget) {
+                // Stop propagation for clicks inside dropdowns to prevent dropdown from closing
+                // Check if click is inside a dropdown element (KT Select dropdown)
+                var dropdownElement = target.closest('[data-kt-select-dropdown]');
+                if (dropdownElement) {
+                    event.stopPropagation();
+                }
                 return;
+            }
             // Only hide if both backdropStatic is false AND persistent is false
             if (_this._getOption('backdropStatic') === false &&
                 utils_1.default.stringToBoolean(_this._getOption('persistent')) === false) {
@@ -9576,8 +9600,14 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         _this._dropdownElement = dropdownElement;
         _this._config = config;
         _this._ktSelectInstance = ktSelectInstance; // Assign instance
+        // For centered modals, don't move dropdown to container to preserve positioning context
+        // For other cases, move to container if specified
+        var modalParent = _this._getModalContainer();
+        var isCenteredModal = modalParent && modalParent.classList.contains('kt-modal-center');
+        // Only move dropdown if not in centered modal (regardless of strategy override)
+        // This prevents the positioning bug even if user sets dropdownStrategy: 'fixed'
         var container = _this._resolveDropdownContainer();
-        if (container) {
+        if (container && !isCenteredModal) {
             if (container !== _this._dropdownElement.parentElement) {
                 container.appendChild(_this._dropdownElement);
             }
@@ -9652,17 +9682,40 @@ var KTSelectDropdown = /** @class */ (function (_super) {
     KTSelectDropdown.prototype._getModalContainer = function () {
         return this._element.closest('[data-kt-modal], .kt-modal, .kt-modal-center');
     };
+    /**
+     * Get the appropriate boundary element for Popper positioning
+     * For centered modals, use .kt-modal-content to avoid transform calculation issues
+     * @returns The boundary element, or null if no modal found
+     */
+    KTSelectDropdown.prototype._getModalBoundary = function () {
+        var modalParent = this._getModalContainer();
+        if (!modalParent) {
+            return null;
+        }
+        // For centered modals, use .kt-modal-content as boundary to avoid transform issues
+        if (modalParent.classList.contains('kt-modal-center')) {
+            var modalContent = modalParent.querySelector('.kt-modal-content');
+            return modalContent || modalParent;
+        }
+        // For non-centered modals, use the modal element itself
+        return modalParent;
+    };
     /**
      * Get the appropriate positioning strategy based on context
-     * @returns 'fixed' if inside modal, 'absolute' otherwise
+     * @returns 'fixed' if inside non-centered modal, 'absolute' for centered modals or no modal
      */
     KTSelectDropdown.prototype._getPositioningStrategy = function () {
         // Check if config explicitly sets strategy
         if (this._config.dropdownStrategy) {
             return this._config.dropdownStrategy;
         }
-        // Use fixed positioning if inside a modal (to handle transform-based centering)
+        // For centered modals, use absolute positioning to avoid transform calculation issues
+        // For non-centered modals, use fixed positioning
         var modalParent = this._getModalContainer();
+        if (modalParent && modalParent.classList.contains('kt-modal-center')) {
+            return 'absolute';
+        }
+        // Use fixed positioning for non-centered modals
         return modalParent ? 'fixed' : 'absolute';
     };
     /**
@@ -9678,9 +9731,8 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         var strategy = this._getPositioningStrategy();
         var preventOverflow = this._config.dropdownPreventOverflow !== false;
         var flip = this._config.dropdownFlip !== false;
-        // Detect modal container for boundary
-        var modalParent = this._getModalContainer();
-        var boundary = modalParent || 'clippingParents';
+        // Get appropriate boundary element for modal context
+        var boundary = this._getModalBoundary() || 'clippingParents';
         // Create new popper instance
         this._popperInstance = (0, core_1.createPopper)(this._toggleElement, this._dropdownElement, {
             placement: placement,
@@ -11894,6 +11946,12 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._completeRemoteSetup = function () {
         // Initialize options
         this._preSelectOptions(this._element);
+        // Prevent browser auto-selection when placeholder is configured
+        if (this._config.placeholder &&
+            this._state.getSelectedOptions().length === 0 &&
+            this._preSelectedValues.length === 0) {
+            this._element.value = '';
+        }
         // Apply pre-selected values captured before remote data was loaded
         if (this._preSelectedValues.length > 0) {
             if (this._config.debug) {
@@ -12136,6 +12194,11 @@ var KTSelect = /** @class */ (function (_super) {
         this._setupElementReferences();
         // Initialize options
         this._preSelectOptions(this._element);
+        // Prevent browser auto-selection when placeholder is configured
+        if (this._config.placeholder &&
+            this._state.getSelectedOptions().length === 0) {
+            this._element.value = '';
+        }
         // Apply disabled state if needed
         this._applyInitialDisabledState();
         // Initialize search if enabled
@@ -13065,10 +13128,18 @@ var KTSelect = /** @class */ (function (_super) {
     };
     /**
      * Update the dropdown to sync with native select element changes
-     * For remote selects, refetches data from the server
+     * For remote selects, refetches data from the server and preserves selections
      * Optionally accepts new options to replace existing ones (static selects only)
-     * @param newOptions Optional array of new options [{value, text}, ...]
+     *
+     * @param newOptions Optional array of new options [{value, text}, ...] (static selects only)
      * @public
+     * @remarks
+     * - For static selects: rebuilds dropdown from native select or new options
+     * - For remote selects: fetches fresh data, preserves matching selections
+     * - Selections are preserved if their values exist in new remote data
+     * - Selections are cleared if their values don't exist in new data
+     * @fires updated - After update completes successfully
+     * @fires updateError - If remote data fetch fails
      */
     KTSelect.prototype.update = function (newOptions) {
         var _this = this;
@@ -13077,19 +13148,36 @@ var KTSelect = /** @class */ (function (_super) {
             this._remoteModule
                 .fetchData()
                 .then(function (items) {
-                // Clear existing options
+                // Capture currently selected values before clearing
+                var currentlySelected = _this._state.getSelectedOptions();
+                // Clear existing options (also captures to _preSelectedValues)
                 _this._clearExistingOptions();
-                // Add new options from remote data
+                // Get all available values from new remote data
+                var availableValues = items.map(function (item) { return item.id; });
+                // Filter to only values that exist in new data
+                var validSelections = currentlySelected.filter(function (value) {
+                    return availableValues.includes(value);
+                });
+                if (_this._config.debug && currentlySelected.length > 0) {
+                    console.log('update(): Preserving selections that exist in new data:', validSelections);
+                }
+                // Add new options from remote data and restore selection state
                 items.forEach(function (item) {
                     var option = document.createElement('option');
                     option.value = item.id;
                     option.textContent = item.title;
                     if (item.disabled)
                         option.disabled = true;
+                    // Restore selected attribute for preserved selections
+                    if (validSelections.includes(item.id)) {
+                        option.selected = true;
+                    }
                     _this._element.appendChild(option);
                 });
                 // Rebuild dropdown
                 _this._rebuildOptionsFromNative();
+                // Sync selection state from native select (now has selected attributes)
+                _this._syncSelectionFromNative();
                 // Dispatch updated event
                 _this._dispatchEvent('updated');
                 _this._fireEvent('updated');
@@ -13136,19 +13224,38 @@ var KTSelect = /** @class */ (function (_super) {
         // Dispatch reload start event
         this._dispatchEvent('reloadStart');
         this._fireEvent('reloadStart');
+        // Capture currently selected values before clearing
+        var currentlySelected = this._state.getSelectedOptions();
         // Fetch fresh remote data
         return this._remoteModule
             .fetchData()
             .then(function (items) {
-            // Clear existing options
+            // Clear existing options (captures to _preSelectedValues)
             _this._clearExistingOptions();
             // Update state with new items
             return _this._state.setItems(items).then(function () {
                 // Generate new options HTML
                 _this._generateOptionsHtml(_this._element);
+                // Preserve selections by marking matching options as selected
+                var availableValues = items.map(function (item) {
+                    return item.id !== undefined ? String(item.id) : '';
+                });
+                var validSelections = currentlySelected.filter(function (value) {
+                    return availableValues.includes(value);
+                });
+                if (_this._config.debug && currentlySelected.length > 0) {
+                    console.log('reload(): Preserving selections that exist in new data:', validSelections);
+                }
+                // Mark preserved selections on new options
+                validSelections.forEach(function (value) {
+                    var option = Array.from(_this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+                    if (option) {
+                        option.selected = true;
+                    }
+                });
                 // Update the dropdown
                 _this._updateDropdownWithNewOptions();
-                // Sync selection state from native select
+                // Sync selection state from native select (now has selected attributes)
                 _this._syncSelectionFromNative();
                 // Update visual display
                 _this.updateSelectedOptionDisplay();
@@ -13173,8 +13280,17 @@ var KTSelect = /** @class */ (function (_super) {
     };
     /**
      * Refresh the visual display and state without rebuilding options
-     * For remote selects, refetches data from the server
+     * For remote selects, refetches data from the server and preserves selections
+     * that exist in the newly fetched data
+     *
      * @public
+     * @remarks
+     * - For static selects: syncs visual state with native select
+     * - For remote selects: fetches fresh data, preserves matching selections
+     * - Selections are preserved if their values exist in new remote data
+     * - Selections are cleared if their values don't exist in new data
+     * @fires refreshed - After refresh completes successfully
+     * @fires refreshError - If remote data fetch fails
      */
     KTSelect.prototype.refresh = function () {
         var _this = this;
@@ -13183,20 +13299,35 @@ var KTSelect = /** @class */ (function (_super) {
             this._remoteModule
                 .fetchData()
                 .then(function (items) {
-                // Clear existing options
+                // Capture currently selected values before clearing
+                var currentlySelected = _this._state.getSelectedOptions();
+                // Clear existing options (also captures to _preSelectedValues)
                 _this._clearExistingOptions();
-                // Add new options
+                // Get all available values from new remote data
+                var availableValues = items.map(function (item) { return item.id; });
+                // Filter to only values that exist in new data
+                var validSelections = currentlySelected.filter(function (value) {
+                    return availableValues.includes(value);
+                });
+                if (_this._config.debug && currentlySelected.length > 0) {
+                    console.log('refresh(): Preserving selections that exist in new data:', validSelections);
+                }
+                // Add new options and restore selection state
                 items.forEach(function (item) {
                     var option = document.createElement('option');
                     option.value = item.id;
                     option.textContent = item.title;
                     if (item.disabled)
                         option.disabled = true;
+                    // Restore selected attribute for preserved selections
+                    if (validSelections.includes(item.id)) {
+                        option.selected = true;
+                    }
                     _this._element.appendChild(option);
                 });
                 // Rebuild dropdown
                 _this._rebuildOptionsFromNative();
-                // Sync selection state
+                // Sync selection state from native select (now has selected attributes)
                 _this._syncSelectionFromNative();
                 // Reapply ARIA attributes
                 _this._setAriaAttributes();