@keenthemes/ktui 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenthemes/ktui",
-	"version": "1.2.3",
+	"version": "1.2.5",
 	"description": "Free & Open-Source Tailwind UI Components by Keenthemes",
 	"homepage": "https://ktui.io",
 	"repository": {
@@ -52,9 +52,36 @@
 		"tailwind clipboard"
 	],
 	"author": "@keenthemes",
-	"types": "lib/esm/index.d.ts",
-	"main": "lib/cjs/index.js",
-	"module": "lib/esm/index.js",
+	"types": "lib/esm/legacy.d.ts",
+	"main": "lib/cjs/legacy.js",
+	"module": "lib/esm/legacy.js",
+	"exports": {
+		".": {
+			"types": "./lib/esm/legacy.d.ts",
+			"import": "./lib/esm/legacy.js",
+			"require": "./lib/cjs/legacy.js"
+		},
+		"./core": {
+			"types": "./lib/esm/index.d.ts",
+			"import": "./lib/esm/index.js",
+			"require": "./lib/cjs/index.js"
+		},
+		"./init-all": {
+			"types": "./lib/esm/init-all.d.ts",
+			"import": "./lib/esm/init-all.js",
+			"require": "./lib/cjs/init-all.js"
+		},
+		"./components/*": {
+			"types": "./lib/esm/components/*/index.d.ts",
+			"import": "./lib/esm/components/*/index.js",
+			"require": "./lib/cjs/components/*/index.js"
+		},
+		"./src/*": "./src/*",
+		"./lib/*": "./lib/*",
+		"./styles.css": "./styles.css",
+		"./dist/*": "./dist/*",
+		"./package.json": "./package.json"
+	},
 	"license": "MIT",
 	"files": [
 		"dist",
@@ -94,19 +121,14 @@
 		"publish:github": "npm publish"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.27.3",
-		"@babel/preset-env": "^7.27.2",
 		"@eslint/js": "^9.27.0",
 		"@types/jsdom": "^21.1.7",
 		"@types/node": "^22.15.23",
 		"@vitest/ui": "^4.0.16",
-		"autoprefixer": "^10.4.21",
-		"babel-loader": "^10.0.0",
 		"concurrently": "^9.1.2",
 		"eslint": "^10.0.0",
 		"eslint-plugin-prettier": "^5.4.0",
 		"jsdom": "^25.0.1",
-		"mini-svg-data-uri": "^1.4.4",
 		"prettier": "^3.5.3",
 		"source-map-loader": "^5.0.0",
 		"tailwindcss": "^4.1.11",
@@ -116,14 +138,16 @@
 		"typescript-eslint": "^8.18.0",
 		"vitest": "^4.0.16",
 		"webpack": "^5.99.9",
-		"webpack-cli": "^6.0.1",
-		"webpack-merge-and-include-globally": "^1.0.7"
+		"webpack-cli": "^6.0.1"
 	},
 	"dependencies": {
 		"@popperjs/core": "^2.11.8"
 	},
 	"overrides": {
+		"brace-expansion": "^5.0.6",
+		"fast-uri": "^3.1.2",
 		"minimatch": "^10.2.3",
+		"postcss": "^8.5.14",
 		"rollup": "^4.59.0",
 		"serialize-javascript": "^7.0.3",
 		"terser-webpack-plugin": "^5.3.17"

package/src/__tests__/entrypoints.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+describe('KTUI entrypoints', () => {
+	beforeEach(() => {
+		vi.restoreAllMocks();
+		vi.resetModules();
+	});
+
+	it('component-level import does not initialize unrelated components', async () => {
+		const { KTModal } = await import('../components/modal');
+		const modalInitSpy = vi.spyOn(KTModal, 'init');
+		const coreModule = await import('../index');
+		const componentsInitSpy = vi.spyOn(coreModule.KTComponents, 'init');
+
+		await import('../components/toggle-password');
+
+		expect(modalInitSpy).not.toHaveBeenCalled();
+		expect(componentsInitSpy).not.toHaveBeenCalled();
+	});
+
+	it('core entrypoint import is side-effect-free', async () => {
+		const domModule = await import('../helpers/dom');
+		const readySpy = vi.spyOn(domModule.default, 'ready');
+
+		const coreModule = await import('../index');
+		const initSpy = vi.spyOn(coreModule.KTComponents, 'init');
+
+		expect(readySpy).not.toHaveBeenCalled();
+		expect(initSpy).not.toHaveBeenCalled();
+	});
+
+	it('init-all entrypoint initializes components explicitly', async () => {
+		const domModule = await import('../helpers/dom');
+		const readySpy = vi
+			.spyOn(domModule.default, 'ready')
+			.mockImplementation((callback) => {
+				callback();
+			});
+
+		const coreModule = await import('../index');
+		const initSpy = vi.spyOn(coreModule.KTComponents, 'init');
+
+		const initAllModule = await import('../init-all');
+
+		expect(readySpy).toHaveBeenCalledTimes(1);
+		expect(initSpy).toHaveBeenCalledTimes(1);
+
+		initAllModule.initAllComponents();
+		expect(readySpy).toHaveBeenCalledTimes(2);
+		expect(initSpy).toHaveBeenCalledTimes(2);
+	});
+
+	it('legacy root entrypoint preserves auto-init behavior', async () => {
+		const domModule = await import('../helpers/dom');
+		const readySpy = vi
+			.spyOn(domModule.default, 'ready')
+			.mockImplementation((callback) => {
+				callback();
+			});
+
+		const coreModule = await import('../index');
+		const initSpy = vi.spyOn(coreModule.KTComponents, 'init');
+
+		const legacyModule = await import('../legacy');
+
+		expect(initSpy).toHaveBeenCalled();
+		expect(readySpy).toHaveBeenCalled();
+		expect(legacyModule.default).toBe(coreModule.default);
+		expect(legacyModule.KTComponents).toBe(coreModule.KTComponents);
+	});
+});

package/src/components/context-menu/__tests__/context-menu.test.ts

@@ -0,0 +1,117 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { KTContextMenu } from '../context-menu';
+
+const mockDestroy = vi.fn();
+const mockForceUpdate = vi.fn();
+
+vi.mock('@popperjs/core', () => ({
+	createPopper: vi.fn(() => ({
+		destroy: mockDestroy,
+		forceUpdate: mockForceUpdate,
+	})),
+}));
+
+function waitForTransitions() {
+	return new Promise<void>((resolve) => {
+		setTimeout(() => resolve(), 5);
+	});
+}
+
+function createFixture() {
+	document.body.innerHTML = `
+		<div id="root" data-kt-context-menu="true">
+			<div id="trigger" data-kt-context-menu-trigger="true">target</div>
+			<div id="menu" data-kt-context-menu-menu="true" class="kt-context-menu hidden">
+				<button id="dismiss" data-kt-context-menu-dismiss="true">dismiss</button>
+			</div>
+		</div>
+	`;
+
+	return {
+		root: document.getElementById('root') as HTMLElement,
+		trigger: document.getElementById('trigger') as HTMLElement,
+		menu: document.getElementById('menu') as HTMLElement,
+		dismiss: document.getElementById('dismiss') as HTMLElement,
+	};
+}
+
+describe('KTContextMenu', () => {
+	beforeEach(() => {
+		document.body.innerHTML = '';
+		mockDestroy.mockClear();
+		mockForceUpdate.mockClear();
+	});
+
+	afterEach(() => {
+		document.body.innerHTML = '';
+	});
+
+	it('creates and retrieves an instance', () => {
+		const { root } = createFixture();
+		const instance = new KTContextMenu(root);
+		expect(instance.getElement()).toBe(root);
+		expect(KTContextMenu.getInstance(root)).toBe(instance);
+	});
+
+	it('opens from showAtEvent and prevents native menu by default', () => {
+		const { root } = createFixture();
+		const instance = new KTContextMenu(root);
+		const event = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			clientX: 100,
+			clientY: 120,
+		});
+		const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+		instance.showAtEvent(event);
+
+		expect(instance.isOpen()).toBe(true);
+		expect(preventDefaultSpy).toHaveBeenCalled();
+	});
+
+	it('hide closes an open menu', async () => {
+		const { root } = createFixture();
+		const instance = new KTContextMenu(root);
+
+		instance.showAt(60, 60);
+		expect(instance.isOpen()).toBe(true);
+		(instance as unknown as { _shownAt: number })._shownAt = Date.now() - 300;
+		(instance as unknown as { _isOpen: boolean })._isOpen = true;
+
+		instance.hide();
+		await waitForTransitions();
+		expect(instance.isOpen()).toBe(false);
+	});
+
+	it('toggleAtEvent toggles menu state', async () => {
+		const { root } = createFixture();
+		const instance = new KTContextMenu(root);
+
+		const openEvent = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			clientX: 30,
+			clientY: 30,
+		});
+		instance.toggleAtEvent(openEvent);
+		expect(instance.isOpen()).toBe(true);
+		(instance as unknown as { _shownAt: number })._shownAt = Date.now() - 300;
+		(instance as unknown as { _isOpen: boolean })._isOpen = true;
+
+		instance.toggleAtEvent(openEvent);
+		await waitForTransitions();
+		expect(instance.isOpen()).toBe(false);
+	});
+
+	it('reinit rebuilds instances for existing roots', () => {
+		const { root } = createFixture();
+		new KTContextMenu(root);
+		const first = KTContextMenu.getInstance(root);
+		expect(first).not.toBeNull();
+
+		KTContextMenu.reinit();
+		const second = KTContextMenu.getInstance(root);
+		expect(second).not.toBeNull();
+		expect(second).not.toBe(first);
+	});
+});

package/src/components/context-menu/context-menu.css

@@ -0,0 +1,32 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+@layer components {
+	.kt-context-menu {
+		@apply p-1.5 space-y-0.5 rounded-md shadow-md shadow-[rgba(0,0,0,0.05)] border border-border bg-popover text-popover-foreground;
+
+		&:not(.open) {
+			@apply hidden;
+		}
+	}
+
+	.kt-context-menu-sub {
+		@apply space-y-1 w-full;
+	}
+
+	.kt-context-menu-toggle {
+		@apply w-full flex items-center gap-x-2 py-1.5 px-2 rounded-md font-medium text-sm text-start cursor-pointer disabled:opacity-50 disabled:pointer-events-none;
+		@apply text-foreground hover:bg-accent hover:text-accent-foreground;
+	}
+
+	.kt-context-menu-link {
+		@apply w-full flex items-center gap-x-2 py-1.5 px-2 rounded-md font-medium text-sm text-start cursor-pointer disabled:opacity-50 disabled:pointer-events-none;
+		@apply text-foreground hover:bg-accent hover:text-accent-foreground;
+	}
+
+	.kt-context-menu-separator {
+		@apply h-px bg-border my-2.5 -mx-2 rtl:transform rtl:rotate-180;
+	}
+}