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

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/index.d.ts

@@ -198,11 +198,8 @@ export type SortState = {
 export type TableProps<T extends DataRow = any> = {
     data: T[];
     columns: TableColumn<T>[];
-    color?: VariantColors;
-    size?: VariantSizes;
     bordered?: boolean;
     striped?: boolean;
-    emptyStateText?: string;
     pageSize?: number;
     selectable?: boolean;
     selected?: T[];
@@ -220,6 +217,7 @@ export type TableProps<T extends DataRow = any> = {
     onselect?: (selected: T[]) => void;
     rowclass?: (row: T, index: number) => ClassValue;
     loading?: boolean;
+    expandedContent?: Snippet<[T]>;
 };
 export type BreadcrumbItem = {
     label: string;

package/dist/layout/table/Table.svelte

@@ -2,11 +2,10 @@
 	import { cn } from '../../helper/cls.js';
 	import { table } from './table.js';
 	import type { TableProps, SortDirection, SortState } from '../../index.js';
+
 	let {
 		data = [],
 		columns = [],
-		color = 'default',
-		size = 'base',
 		bordered = true,
 		striped = false,
 		pageSize = 10,
@@ -25,7 +24,8 @@
 		tdclass: tdClass = '',
 		footerclass: footerClass = '',
 		rowclass = () => '',
-		loading = false
+		loading = false,
+		expandedContent
 	}: TableProps<any> = $props();
 
 	let sortColumn = $state('');
@@ -36,38 +36,36 @@
 	const pagination = $derived(pageSize > 0 && data.length > pageSize);
 
 	const {
-		base,
-		wrapper,
+		base: baseClass,
+		wrapper: wrapperBaseClass,
 		table: tableBaseClass,
-		thead,
-		tbody,
-		tr,
-		th,
-		td,
-		footer,
-		pagination: paginationClass,
-		emptyState,
-		sortButton,
-		sortIcon
+		thead: theadBaseClass,
+		tbody: tbodyBaseClass,
+		tr: trBaseClass,
+		th: thBaseClass,
+		td: tdBaseClass,
+		footer: footerBaseClass,
+		pagination: paginationBaseClass,
+		emptyState: emptyStateBaseClass,
+		sortButton: sortButtonBaseClass,
+		sortIcon: sortIconBaseClass
 	} = $derived(
 		table({
-			size,
-			color,
 			bordered,
 			striped
 		})
 	);
 
-	const baseClasses = $derived(cn(base(), classname));
-	const wrapperClasses = $derived(cn(wrapper(), wrapperClass));
+	const baseClasses = $derived(cn(baseClass(), classname));
+	const wrapperClasses = $derived(cn(wrapperBaseClass(), wrapperClass));
 	const tableClasses = $derived(cn(tableBaseClass(), tableClass));
-	const theadClasses = $derived(cn(thead(), theadClass));
-	const tbodyClasses = $derived(cn(tbody(), tbodyClass));
-	const trClasses = $derived(cn(tr(), trClass));
-	const thClasses = $derived(cn(th(), thClass));
-	const tdClasses = $derived(cn(td(), tdClass));
-	const footerClasses = $derived(cn(footer(), footerClass));
-	const emptyStateClasses = $derived(emptyState());
+	const theadClasses = $derived(cn(theadBaseClass(), theadClass));
+	const tbodyClasses = $derived(cn(tbodyBaseClass(), tbodyClass));
+	const trClasses = $derived(cn(trBaseClass(), trClass));
+	const thClasses = $derived(cn(thBaseClass(), thClass));
+	const tdClasses = $derived(cn(tdBaseClass(), tdClass));
+	const footerClasses = $derived(cn(footerBaseClass(), footerClass));
+	const emptyStateClasses = $derived(emptyStateBaseClass());
 
 	// Handle pagination
 	const totalPages = $derived(Math.ceil(data.length / pageSize));
@@ -175,12 +173,12 @@
 							{#if column.sortable}
 								<button
 									type="button"
-									class={sortButton()}
+									class={sortButtonBaseClass()}
 									onclick={() => toggleSort(column.sortKey || column.key)}
 									aria-label={`Sort by ${column.header}`}
 								>
 									{column.header}
-									<span class={sortIcon()}>
+									<span class={sortIconBaseClass()}>
 										{#if sortColumn === (column.sortKey || column.key)}
 											{#if sortDirection === 'asc'}
 												<svg
@@ -315,6 +313,13 @@
 								</td>
 							{/each}
 						</tr>
+						{#if expandedContent}
+							<tr class="expandedContent-row">
+								<td colspan={selectable ? columns.length + 1 : columns.length} class="border-0 p-0">
+									{@render expandedContent(row)}
+								</td>
+							</tr>
+						{/if}
 					{/each}
 				{/if}
 			</tbody>
@@ -323,7 +328,7 @@
 
 	{#if pagination && totalPages > 1}
 		<div class={footerClasses}>
-			<div class={paginationClass}>
+			<div class={paginationBaseClass()}>
 				<div class="flex items-center gap-2">
 					<span class="text-default-500 text-sm">
 						Showing {Math.min((currentPage - 1) * pageSize + 1, data.length)}

package/dist/layout/table/table.d.ts

@@ -1,5 +1,3 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { VariantColors, VariantSizes } from '../../index.js';
 export declare const table: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -256,29 +254,3 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     sortButton: string;
     sortIcon: string;
 }, undefined, unknown, unknown, undefined>>;
-export type TableProps<T extends DataRow = any> = {
-    data: T[];
-    columns: TableColumn<T>[];
-    color?: VariantColors;
-    size?: VariantSizes;
-    bordered?: boolean;
-    striped?: boolean;
-    emptyStateText?: string;
-    pageSize?: number;
-    selectable?: boolean;
-    selected?: T[];
-    class?: ClassValue;
-    wrapperclass?: ClassValue;
-    tableclass?: ClassValue;
-    theadclass?: ClassValue;
-    tbodyclass?: ClassValue;
-    trclass?: ClassValue;
-    thclass?: ClassValue;
-    tdclass?: ClassValue;
-    footerclass?: ClassValue;
-    onrowclick?: (row: T, index: number) => void;
-    onsort?: (sortState: SortState) => void;
-    onselect?: (selected: T[]) => void;
-    rowclass?: (row: T, index: number) => ClassValue;
-    loading?: boolean;
-};

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.47",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",