@keenthemes/ktui 1.2.6 → 1.2.7

package/src/components/datatable/__tests__/pagination-reset.test.ts

@@ -98,6 +98,10 @@ describe('KTDataTable - Pagination Reset', () => {
 	};
 
 	beforeEach(() => {
+		// Dispose previous test's datatable to cancel in-flight async operations
+		if (datatable) {
+			try { datatable.dispose(); } catch { /* already disposed */ }
+		}
 		// Clear any existing elements
 		document.body.innerHTML = '';
 		vi.clearAllMocks();
@@ -313,7 +317,7 @@ describe('KTDataTable - Pagination Reset', () => {
 			expect(datatable.getState().page).toBe(1);
 
 			// Apply third filter (page should stay at 1)
-			datatable.setFilter({ column: 'id', type: 'numeric', value: '10' });
+			datatable.setFilter({ column: 'id', type: 'numeric', value: 10 });
 			expect(datatable.getState().page).toBe(1);
 		});
 
@@ -438,7 +442,17 @@ describe('KTDataTable - Pagination Reset', () => {
 	});
 
 	describe('Scenario: State persistence respects pagination reset', () => {
+		const isLocalStorageAvailable = (): boolean => {
+			try {
+				localStorage.getItem('test');
+				return true;
+			} catch {
+				return false;
+			}
+		};
+
 		it('should save page 1 to state when search resets pagination', async () => {
+			if (!isLocalStorageAvailable()) return;
 			const { container } = createMockDataTable(25);
 
 			// Enable state saving with unique namespace
@@ -476,6 +490,7 @@ describe('KTDataTable - Pagination Reset', () => {
 		});
 
 		it('should save page 1 to state when filter resets pagination', () => {
+			if (!isLocalStorageAvailable()) return;
 			const { container } = createMockDataTable(25);
 
 			datatable = new KTDataTable(container, {
@@ -503,6 +518,7 @@ describe('KTDataTable - Pagination Reset', () => {
 		});
 
 		it('should restore to page 1 with active search on reload', async () => {
+			if (!isLocalStorageAvailable()) return;
 			const { container } = createMockDataTable(25);
 			const namespace = 'test-datatable-restore';
 
@@ -570,6 +586,113 @@ describe('KTDataTable - Pagination Reset', () => {
 			expect(datatable.getState().totalPages).toBe(2);
 		});
 
+		it('does not shrink originalData when tbody checksum mismatches after pagination', async () => {
+			const { container } = createMockDataTable(18);
+			datatable = new KTDataTable(container, {
+				pageSize: 5,
+				stateSave: false,
+			});
+
+			await new Promise((resolve) => setTimeout(resolve, 50));
+			expect(datatable.getState().totalPages).toBe(4);
+
+			// Simulate a fetch before _contentChecksum was aligned with the paginated tbody.
+			datatable.getState()._contentChecksum = 'stale-checksum';
+			datatable.reload();
+
+			await new Promise((resolve) => setTimeout(resolve, 50));
+			expect(datatable.getState().totalPages).toBe(4);
+		});
+
+		it('keeps 4 pages when thead has checkbox and actions columns (bulk-actions demo)', async () => {
+			const container = document.createElement('div');
+			container.id = 'test-bulk-actions-datatable';
+
+			const table = document.createElement('table');
+			table.setAttribute('data-kt-datatable-table', 'true');
+
+			const thead = document.createElement('thead');
+			thead.innerHTML = `
+				<tr>
+					<th><input type="checkbox" data-kt-datatable-check="true" /></th>
+					<th data-kt-datatable-column="label">Label</th>
+					<th data-kt-datatable-column="method">Method</th>
+					<th data-kt-datatable-column="status">Status</th>
+					<th data-kt-datatable-column="lastSession">Last Session</th>
+					<th data-kt-datatable-column="actions"></th>
+				</tr>
+			`;
+
+			const tbody = document.createElement('tbody');
+			for (let i = 1; i <= 18; i++) {
+				const row = document.createElement('tr');
+				row.innerHTML = `
+					<td><input type="checkbox" data-kt-datatable-row-check="true" value="${i - 1}" /></td>
+					<td>User ${i}</td>
+					<td>Web</td>
+					<td>active</td>
+					<td>22 Jul 2024</td>
+					<td><button type="button">Edit</button></td>
+				`;
+				tbody.appendChild(row);
+			}
+
+			table.appendChild(thead);
+			table.appendChild(tbody);
+
+			const infoElement = document.createElement('div');
+			infoElement.setAttribute('data-kt-datatable-info', 'true');
+			const sizeElement = document.createElement('select');
+			sizeElement.setAttribute('data-kt-datatable-size', 'true');
+			const paginationElement = document.createElement('div');
+			paginationElement.setAttribute('data-kt-datatable-pagination', 'true');
+
+			container.appendChild(table);
+			container.appendChild(infoElement);
+			container.appendChild(sizeElement);
+			container.appendChild(paginationElement);
+			document.body.appendChild(container);
+
+			datatable = new KTDataTable(container, {
+				pageSize: 5,
+				stateSave: false,
+			});
+
+			await new Promise((resolve) => setTimeout(resolve, 50));
+
+			expect(datatable.getState().totalPages).toBe(4);
+			datatable.goPage(2);
+			await new Promise((resolve) => setTimeout(resolve, 50));
+			expect(datatable.getState().page).toBe(2);
+			expect(datatable.getState().totalPages).toBe(4);
+		});
+
+		it('shows page 2 rows with tableLayout fixed and columns config (docs column-widths demo)', async () => {
+			const { container } = createMockDataTable(18);
+			datatable = new KTDataTable(container, {
+				pageSize: 5,
+				stateSave: false,
+				tableLayout: 'fixed',
+				columns: {
+					id: { width: '60px' },
+					name: { width: '140px' },
+					status: { width: '100px' },
+				},
+			});
+
+			await new Promise((resolve) => setTimeout(resolve, 50));
+
+			datatable.goPage(2);
+			await new Promise((resolve) => setTimeout(resolve, 50));
+
+			expect(datatable.getState().page).toBe(2);
+
+			const rows = container.querySelectorAll('tbody tr');
+			expect(rows.length).toBe(5);
+			expect(rows[0].cells[0].textContent).toBe('6');
+			expect(datatable.getState().totalPages).toBe(4);
+		});
+
 		it('should handle search reset on page 1 (no-op)', () => {
 			const { container } = createMockDataTable(25);
 			datatable = new KTDataTable(container, {
@@ -669,9 +792,9 @@ describe('KTDataTable - Pagination Reset', () => {
 				stateSave: false,
 			});
 
-			const reloadSpy = vi.fn();
-			// Listen for 'reload' event directly (CustomEvent)
-			container.addEventListener('reload', reloadSpy);
+			const updateSpy = vi.fn();
+			// Listen for 'kt.datatable.update' event directly (CustomEvent)
+			container.addEventListener('kt.datatable.update', updateSpy);
 
 			datatable.goPage(2);
 			datatable.search('test');
@@ -679,8 +802,8 @@ describe('KTDataTable - Pagination Reset', () => {
 			// Wait for async reload to complete
 			await new Promise((resolve) => setTimeout(resolve, 50));
 
-			// reload event should still fire
-			expect(reloadSpy).toHaveBeenCalled();
+			// update event should still fire
+			expect(updateSpy).toHaveBeenCalled();
 		});
 	});
 });

package/src/components/datatable/__tests__/race-conditions.test.ts

@@ -407,13 +407,13 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 	describe('Event Handling During Race Conditions', () => {
 		it('should fire fetch event for successful requests', async () => {
-			const fetchEvents: Event[] = [];
+			const updateEvents: Event[] = [];
 
 			const element = container.querySelector(
 				'[data-kt-datatable="true"]',
 			) as HTMLElement;
-			element.addEventListener('fetch', (e) => {
-				fetchEvents.push(e);
+			element.addEventListener('kt.datatable.update', (e) => {
+				updateEvents.push(e);
 			});
 
 			const datatable = new KTDataTable(element, {
@@ -425,18 +425,18 @@ describe('KTDataTable Race Condition Fixes', () => {
 			datatable.search('test');
 			await waitFor(150); // Complete search
 
-			// Should fire fetch for initial and search
-			expect(fetchEvents.length).toBeGreaterThanOrEqual(2);
+			// Should fire update for initial and search
+			expect(updateEvents.length).toBeGreaterThanOrEqual(2);
 		});
 
 		it('should fire fetched event after successful data load', async () => {
-			const fetchedEvents: Event[] = [];
+			const updateEvents: Event[] = [];
 
 			const element = container.querySelector(
 				'[data-kt-datatable="true"]',
 			) as HTMLElement;
-			element.addEventListener('fetched', (e) => {
-				fetchedEvents.push(e);
+			element.addEventListener('kt.datatable.update', (e) => {
+				updateEvents.push(e);
 			});
 
 			new KTDataTable(element, {
@@ -445,8 +445,8 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 			await waitFor(150);
 
-			// Should fire fetched for initial request
-			expect(fetchedEvents.length).toBeGreaterThanOrEqual(1);
+			// Should fire update for initial request
+			expect(updateEvents.length).toBeGreaterThanOrEqual(1);
 		});
 
 		it('should not fire error events for AbortError', async () => {
@@ -455,7 +455,7 @@ describe('KTDataTable Race Condition Fixes', () => {
 			const element = container.querySelector(
 				'[data-kt-datatable="true"]',
 			) as HTMLElement;
-			element.addEventListener('error.kt.datatable', (e) => {
+			element.addEventListener('kt.datatable.error', (e) => {
 				errorEvents.push(e);
 			});
 

package/src/components/datatable/__tests__/setup.ts

@@ -17,8 +17,12 @@ vi.mock('../../../index', () => ({
 
 // Setup DOM environment before each test
 beforeEach(() => {
-	// Clear localStorage
-	localStorage.clear();
+	// Clear localStorage (may be unavailable in Node.js without --localstorage-file)
+	try {
+		localStorage.clear();
+	} catch {
+		// localStorage not available
+	}
 
 	// Reset document body
 	document.body.innerHTML = '';
@@ -29,8 +33,12 @@ beforeEach(() => {
 
 // Cleanup after each test
 afterEach(() => {
-	// Clear localStorage
-	localStorage.clear();
+	// Clear localStorage (may be unavailable in Node.js without --localstorage-file)
+	try {
+		localStorage.clear();
+	} catch {
+		// localStorage not available
+	}
 
 	// Reset document body
 	document.body.innerHTML = '';

package/src/components/datatable/datatable-checkbox.ts

@@ -8,11 +8,15 @@
 import {
 	KTDataTableConfigInterface,
 	KTDataTableCheckChangePayloadInterface,
-	KTDataTableStateInterface,
 } from './types';
 import KTEventHandler from '../../helpers/event-handler';
 import { KTCallableType } from '../../types';
 
+export interface KTDataTableCheckboxDeps {
+	getState: () => { selectedRows?: string[] };
+	setSelectedRows: (rows: string[]) => void;
+}
+
 export interface KTDataTableCheckboxAPI {
 	init(): void;
 	check(): void;
@@ -21,241 +25,236 @@ export interface KTDataTableCheckboxAPI {
 	isChecked(): boolean;
 	getChecked(): string[];
 	updateState(): void;
+	dispose(): void;
 }
 
-// Main function to create checkbox logic for a datatable instance
-export function createCheckboxHandler(
-	element: HTMLElement,
-	config: KTDataTableConfigInterface,
-	fireEvent: (eventName: string, eventData?: object) => void,
-): KTDataTableCheckboxAPI {
-	let headerChecked = false;
-	let headerCheckElement: HTMLInputElement | null = null;
-	let targetElements: NodeListOf<HTMLInputElement> | null = null;
+export class KTDataTableCheckboxHandler implements KTDataTableCheckboxAPI {
+	private _element: HTMLElement;
+	private _config: KTDataTableConfigInterface;
+	private _fireEvent: (eventName: string, eventData?: object) => void;
+	private _deps: KTDataTableCheckboxDeps;
+	private _headerChecked = false;
+	private _headerCheckElement: HTMLInputElement | null = null;
+	private _targetElements: NodeListOf<HTMLInputElement> | null = null;
+	private _delegatedEventId: string | null = null;
+	private readonly _preserveSelection: boolean;
 
-	// Default: preserve selection across all pages
-	const preserveSelection = config.checkbox?.preserveSelection !== false;
-
-	function ensureState(): KTDataTableStateInterface {
-		let state = config._state;
-		if (!state) {
-			state = {} as KTDataTableStateInterface;
-			config._state = state;
-		}
-		return state;
+	constructor(
+		element: HTMLElement,
+		config: KTDataTableConfigInterface,
+		fireEvent: (eventName: string, eventData?: object) => void,
+		deps: KTDataTableCheckboxDeps,
+	) {
+		this._element = element;
+		this._config = config;
+		this._fireEvent = fireEvent;
+		this._deps = deps;
+		this._preserveSelection = config.checkbox?.preserveSelection !== false;
 	}
 
-	// Helper: get selectedRows from state, always as string[]
-	function getSelectedRows(): string[] {
-		const state = ensureState();
-		if (!Array.isArray(state.selectedRows)) state.selectedRows = [];
-		return state.selectedRows.map(String);
+	private _checkboxListener = (event: MouseEvent) => {
+		this._checkboxToggle(event);
+	};
+
+	private _getSelectedRows(): string[] {
+		const rows = this._deps.getState().selectedRows;
+		return Array.isArray(rows) ? rows.map(String) : [];
 	}
 
-	// Helper: set selectedRows in state
-	function setSelectedRows(rows: string[]) {
-		const state = ensureState();
-		state.selectedRows = Array.from(new Set(rows.map(String)));
+	private _setSelectedRows(rows: string[]) {
+		this._deps.setSelectedRows(Array.from(new Set(rows.map(String))));
 	}
 
-	// Helper: get all visible row IDs (values)
-	function getVisibleRowIds(): string[] {
-		if (!targetElements) return [];
-		return Array.from(targetElements)
+	private _getVisibleRowIds(): string[] {
+		if (!this._targetElements) return [];
+		return Array.from(this._targetElements)
 			.map((el) => el.value)
 			.filter((v) => v != null && v !== '');
 	}
 
-	// Listener for header checkbox
-	const checkboxListener = (event: MouseEvent) => {
-		checkboxToggle(event);
-	};
-
-	function init() {
-		const attrs = config.attributes;
+	public init() {
+		const attrs = this._config.attributes;
 		if (!attrs?.check || !attrs.checkbox) {
 			return;
 		}
-		headerCheckElement = element.querySelector<HTMLInputElement>(attrs.check);
-		if (!headerCheckElement) return;
-		headerChecked = headerCheckElement.checked;
-		targetElements = element.querySelectorAll<HTMLInputElement>(attrs.checkbox);
-		checkboxHandler();
-		reapplyCheckedStates();
-		updateHeaderCheckboxState();
+		this._headerCheckElement =
+			this._element.querySelector<HTMLInputElement>(attrs.check);
+		if (!this._headerCheckElement) return;
+		this._headerChecked = this._headerCheckElement.checked;
+		this._targetElements =
+			this._element.querySelectorAll<HTMLInputElement>(attrs.checkbox);
+		this._checkboxHandler();
+		this._reapplyCheckedStates();
+		this._updateHeaderCheckboxState();
 	}
 
-	function checkboxHandler() {
-		if (!headerCheckElement) return;
-		const rowCheckboxSelector = config.attributes?.checkbox;
+	private _checkboxHandler() {
+		if (!this._headerCheckElement) return;
+		const rowCheckboxSelector = this._config.attributes?.checkbox;
 		if (!rowCheckboxSelector) return;
-		headerCheckElement.addEventListener('click', checkboxListener);
-		KTEventHandler.on(document.body, rowCheckboxSelector, 'input', ((
-			event?: Event,
-		) => {
-			if (event) handleRowCheckboxChange(event);
-		}) as KTCallableType);
+		this._headerCheckElement.addEventListener('click', this._checkboxListener);
+		this._delegatedEventId = KTEventHandler.on(
+			this._element,
+			rowCheckboxSelector,
+			'input',
+			((event?: Event) => {
+				if (event) this._handleRowCheckboxChange(event);
+			}) as KTCallableType,
+		);
 	}
 
-	// When a row checkbox is changed
-	function handleRowCheckboxChange(event: Event) {
+	private _handleRowCheckboxChange(event: Event) {
 		const input = event.target as HTMLInputElement;
 		if (!input) return;
 		const value = input.value;
-		let selectedRows = getSelectedRows();
+		let selectedRows = this._getSelectedRows();
 		const wasChecked = selectedRows.includes(value);
 		const isNowChecked = input.checked;
 
-		// Update state first
 		if (isNowChecked) {
 			if (!wasChecked) selectedRows.push(value);
 		} else {
 			selectedRows = selectedRows.filter((v) => v !== value);
 		}
-		setSelectedRows(selectedRows);
-		updateHeaderCheckboxState();
+		this._setSelectedRows(selectedRows);
+		this._updateHeaderCheckboxState();
 
-		// Fire specific checked/unchecked events after state is updated
 		if (isNowChecked && !wasChecked) {
-			fireEvent('checked');
+			this._fireEvent('checked', { value });
 		} else if (!isNowChecked && wasChecked) {
-			fireEvent('unchecked');
+			this._fireEvent('unchecked', { value });
 		}
 
-		// Always fire changed event for backward compatibility
-		fireEvent('changed');
+		this._fireEvent('changed');
 	}
 
-	// When the header checkbox is toggled
-	function checkboxToggle(_event?: Event) {
-		const checked = !isChecked();
-		// Update state first, then fire events
-		change(checked);
-		// Fire checked/unchecked events after state is updated
+	private _checkboxToggle(_event?: Event) {
+		const checked = !this.isChecked();
+		this._change(checked);
 		const eventType = checked ? 'checked' : 'unchecked';
-		fireEvent(eventType);
+		this._fireEvent(eventType);
 	}
 
-	// Change all visible checkboxes and update selectedRows
-	function change(checked: boolean) {
+	private _change(checked: boolean) {
 		const payload: KTDataTableCheckChangePayloadInterface = { cancel: false };
-		fireEvent('change', payload);
+		this._fireEvent('change', payload);
 		if (payload.cancel === true) return;
-		headerChecked = checked;
-		if (headerCheckElement) headerCheckElement.checked = checked;
-		if (targetElements) {
-			const visibleIds = getVisibleRowIds();
-			let selectedRows = getSelectedRows();
+		this._headerChecked = checked;
+		if (this._headerCheckElement) this._headerCheckElement.checked = checked;
+		if (this._targetElements) {
+			const visibleIds = this._getVisibleRowIds();
+			let selectedRows = this._getSelectedRows();
 			if (checked) {
-				// Add all visible IDs to selectedRows
-				selectedRows = preserveSelection
+				selectedRows = this._preserveSelection
 					? Array.from(new Set([...selectedRows, ...visibleIds]))
 					: visibleIds;
 			} else {
-				// Remove all visible IDs from selectedRows
-				selectedRows = preserveSelection
+				selectedRows = this._preserveSelection
 					? selectedRows.filter((v) => !visibleIds.includes(v))
 					: [];
 			}
-			setSelectedRows(selectedRows);
-			// Update visible checkboxes
-			targetElements.forEach((element: HTMLInputElement) => {
+			this._setSelectedRows(selectedRows);
+			this._targetElements.forEach((element: HTMLInputElement) => {
 				if (element) {
 					element.checked = checked;
 				}
 			});
 		}
-		updateHeaderCheckboxState();
-		fireEvent('changed');
+		this._updateHeaderCheckboxState();
+		this._fireEvent('changed');
 	}
 
-	// Reapply checked state to visible checkboxes based on selectedRows
-	function reapplyCheckedStates() {
-		const selectedRows = getSelectedRows();
-		if (!targetElements) return;
-		targetElements.forEach((element: HTMLInputElement) => {
+	private _reapplyCheckedStates() {
+		const selectedRows = this._getSelectedRows();
+		if (!this._targetElements) return;
+		this._targetElements.forEach((element: HTMLInputElement) => {
 			if (!element) return;
 			const value = element.value;
 			element.checked = selectedRows.includes(value);
-			// Update row class
 			const row = element.closest('tr');
-			if (row && config.checkbox?.checkedClass) {
+			if (row && this._config.checkbox?.checkedClass) {
 				if (element.checked) {
-					row.classList.add(config.checkbox.checkedClass);
+					row.classList.add(this._config.checkbox.checkedClass);
 				} else {
-					row.classList.remove(config.checkbox.checkedClass);
+					row.classList.remove(this._config.checkbox.checkedClass);
 				}
 			}
 		});
 	}
 
-	// Update header checkbox state (checked/indeterminate/unchecked)
-	function updateHeaderCheckboxState() {
-		if (!headerCheckElement || !targetElements) return;
-		const total = targetElements.length;
+	private _updateHeaderCheckboxState() {
+		if (!this._headerCheckElement || !this._targetElements) return;
+		const total = this._targetElements.length;
 		let checked = 0;
 		for (let i = 0; i < total; i++) {
-			if (targetElements[i].checked) checked++;
+			if (this._targetElements[i].checked) checked++;
 		}
 		if (checked === 0) {
-			headerCheckElement.indeterminate = false;
-			headerCheckElement.checked = false;
-			headerChecked = false;
+			this._headerCheckElement.indeterminate = false;
+			this._headerCheckElement.checked = false;
+			this._headerChecked = false;
 		} else if (checked > 0 && checked < total) {
-			headerCheckElement.indeterminate = true;
-			headerCheckElement.checked = false;
-			headerChecked = false;
+			this._headerCheckElement.indeterminate = true;
+			this._headerCheckElement.checked = false;
+			this._headerChecked = false;
 		} else if (checked === total) {
-			headerCheckElement.indeterminate = false;
-			headerCheckElement.checked = true;
-			headerChecked = true;
+			this._headerCheckElement.indeterminate = false;
+			this._headerCheckElement.checked = true;
+			this._headerChecked = true;
 		}
 	}
 
-	// Fix: isChecked() implementation
-	function isChecked(): boolean {
-		return headerChecked;
+	public isChecked(): boolean {
+		return this._headerChecked;
 	}
 
-	function getChecked(): string[] {
-		return getSelectedRows();
+	public getChecked(): string[] {
+		return this._getSelectedRows();
 	}
 
-	function check() {
-		change(true);
-		reapplyCheckedStates();
-		updateHeaderCheckboxState();
+	public check() {
+		this._change(true);
+		this._reapplyCheckedStates();
+		this._updateHeaderCheckboxState();
 	}
 
-	function uncheck() {
-		change(false);
-		reapplyCheckedStates();
-		updateHeaderCheckboxState();
+	public uncheck() {
+		this._change(false);
+		this._reapplyCheckedStates();
+		this._updateHeaderCheckboxState();
 	}
 
-	function toggle() {
-		checkboxToggle();
-		reapplyCheckedStates();
-		updateHeaderCheckboxState();
+	public toggle() {
+		this._checkboxToggle();
+		this._reapplyCheckedStates();
+		this._updateHeaderCheckboxState();
 	}
 
-	function updateState() {
-		const rowCheckSel = config.attributes?.checkbox;
+	public updateState() {
+		const rowCheckSel = this._config.attributes?.checkbox;
 		if (!rowCheckSel) {
 			return;
 		}
-		targetElements = element.querySelectorAll<HTMLInputElement>(rowCheckSel);
-		reapplyCheckedStates();
-		updateHeaderCheckboxState();
+		this._targetElements =
+			this._element.querySelectorAll<HTMLInputElement>(rowCheckSel);
+		this._reapplyCheckedStates();
+		this._updateHeaderCheckboxState();
 	}
 
-	return {
-		init,
-		check,
-		uncheck,
-		toggle,
-		isChecked,
-		getChecked,
-		updateState,
-	};
+	public dispose() {
+		if (this._headerCheckElement) {
+			this._headerCheckElement.removeEventListener(
+				'click',
+				this._checkboxListener,
+			);
+		}
+		const rowCheckboxSelector = this._config.attributes?.checkbox;
+		if (this._delegatedEventId && rowCheckboxSelector) {
+			KTEventHandler.off(this._element, 'input', this._delegatedEventId);
+			this._delegatedEventId = null;
+		}
+		this._headerCheckElement = null;
+		this._targetElements = null;
+	}
 }
+