@makolabs/ripple 0.0.1-dev.43 → 0.0.1-dev.44

package/dist/elements/dropdown/Select.svelte

@@ -123,10 +123,21 @@
 	}
 
 	function handleClickOutside(event: MouseEvent) {
-		if (labelRef && !labelRef.contains(event.target as Node) && open) {
-			open = false;
-			onclose();
+		// Check if the click is inside the portal content
+		const portalContent = document.querySelector('.ripple-portal .portal-content');
+
+		// If the click is inside either the label (trigger) or the portal content, don't close
+		if (
+			(labelRef && labelRef.contains(event.target as Node)) ||
+			(portalContent && portalContent.contains(event.target as Node)) ||
+			!open
+		) {
+			return;
 		}
+
+		// Otherwise close the dropdown
+		open = false;
+		onclose();
 	}
 
 	function handleKeydown(event: KeyboardEvent) {

package/dist/utils/Portal.svelte

@@ -17,15 +17,17 @@
 		if (!ref || !target) return;
 
 		const { top, left, width, height } = target.getBoundingClientRect();
+		const scrollY = window.scrollY || document.documentElement.scrollTop;
+		const scrollX = window.scrollX || document.documentElement.scrollLeft;
 
 		// Set instant positioning without transitions for first render
 		if (!isPositioned) {
-			ref.style.position = 'fixed';
+			ref.style.position = 'absolute';
 			ref.style.width = `${width}px`;
-			ref.style.height = `${height}px`;
-			ref.style.top = '0';
-			ref.style.left = '0';
-			ref.style.transform = `translate(${left}px, ${top}px)`;
+			ref.style.zIndex = '10000'; // Ensure the highest z-index
+			ref.style.top = `${height}px`; // Position below the target
+			ref.style.left = '0px';
+			ref.style.transform = `translate(${left + scrollX}px, ${top + scrollY}px)`;
 			ref.style.visibility = 'hidden'; // Keep hidden until fully positioned
 
 			// Wait for next frame to ensure positioning is applied before showing
@@ -39,7 +41,7 @@
 			});
 		} else {
 			// For subsequent updates, smoothly transition
-			ref.style.transform = `translate(${left}px, ${top}px)`;
+			ref.style.transform = `translate(${left + scrollX}px, ${top + scrollY}px)`;
 		}
 	}
 
@@ -56,14 +58,23 @@
 		// Create portal container
 		portal = document.createElement('div');
 		portal.className = 'ripple-portal';
+		portal.style.position = 'fixed';
+		portal.style.zIndex = '10000'; // Ensure highest z-index
+		portal.style.top = '0';
+		portal.style.left = '0';
+		portal.style.width = '100%';
+		portal.style.pointerEvents = 'none'; // Allow clicking through the container but not its children
 
 		// Default to document.body if no target is provided
-		const targetElement = target || document.body;
+		const targetElement = document.body; // Always append to body for best visibility
 		targetElement.appendChild(portal);
 
 		// Move the content to the portal
 		portal.appendChild(ref);
 
+		// Allow pointer events on the content
+		ref.style.pointerEvents = 'auto';
+		
 		// Initially hide the content
 		ref.style.opacity = '0';
 
@@ -95,4 +106,3 @@
 <div class="portal-content" bind:this={ref}>
 	{@render children()}
 </div>
-

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.43",
+	"version": "0.0.1-dev.44",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",