windmill-components 1.542.5 → 1.550.0

package/package/components/meltComponents/Popover.svelte

@@ -6,7 +6,7 @@ const activePopover = writable({
 </script>
 
 <script lang="ts">import { createPopover, createSync, melt } from '@melt-ui/svelte';
-import { fade } from 'svelte/transition';
+import { fly } from 'svelte/transition';
 import { X, Minimize2, Maximize2 } from 'lucide-svelte';
 import { debounce, pointerDownOutside } from '../../utils';
 import { twMerge } from 'tailwind-merge';
@@ -32,6 +32,7 @@ export let disabled = false;
 export let documentationLink = undefined;
 export let disableFocusTrap = false;
 export let escapeBehavior = 'close';
+export let enableFlyTransition = false;
 let fullScreen = false;
 const dispatch = createEventDispatcher();
 function clearTimers() {
@@ -142,7 +143,7 @@ let { debounced: debounceClose, clearDebounce: clearDebounceClose } = debounce((
 		}}
 		on:mouseleave={debounceClose}
 		{...$content} use:$content.action
-		transition:fade={{ duration: 0 }}
+		transition:fly={{ duration: enableFlyTransition ? 100 : 0, y: -16 }}
 		class={twMerge(
 			'relative border rounded-md bg-surface shadow-lg',
 			fullScreen

package/package/components/meltComponents/Popover.svelte.d.ts

@@ -35,6 +35,7 @@ declare const Popover: $$__sveltets_2_IsomorphicComponent<{
     documentationLink?: string | undefined | undefined;
     disableFocusTrap?: boolean | undefined;
     escapeBehavior?: EscapeBehaviorType | undefined;
+    enableFlyTransition?: boolean | undefined;
     isOpen?: boolean | undefined;
     close?: (() => void) | undefined;
     open?: (() => void) | undefined;

package/package/components/meltComponents/Tooltip.svelte

@@ -23,7 +23,7 @@ const { elements: { trigger, content }, states: { open } } = createTooltip({
 });
 </script>
 
-<span class={$$props.class} {...$trigger} use:$trigger.action>
+<span class={$$props.class} style={$$props.style} {...$trigger} use:$trigger.action>
 	<slot />
 </span>
 {#if !$$slots.default}

package/package/components/progressBar/ProgressBar.svelte

@@ -1,65 +1,49 @@
-<script lang="ts">import { tweened } from 'svelte/motion';
+<script lang="ts">import { Tween } from 'svelte/motion';
 import { linear } from 'svelte/easing';
 import { twMerge } from 'tailwind-merge';
-function getTween(initialValue = 0, duration = 200) {
-    return tweened(initialValue, {
-        duration,
-        easing: linear
-    });
-}
-export let error = undefined;
-export let index;
-export let subIndex;
-export let subLength;
-export let nextInProgress = false;
-// Used for displaying progress of subjob of flow
-export let subIndexIsPercent = false;
-// Remove padding/margin, border radius and titles
-// Used in individual job test runs
-export let compact = false;
-// Removes `Step 1` and replaces it with `Running` 
-export let hideStepTitle = false;
-export let length;
+let { error = undefined, index, subIndex, subLength, nextInProgress = false, subIndexIsPercent = false, compact = false, hideStepTitle = false, length, class: className = '' } = $props();
 let duration = 200;
-let percent = getTween(0, duration);
+let percent = new Tween(0, { duration, easing: linear });
 export function resetP() {
-    percent = getTween(0, duration);
+    percent.set(0, { duration: 0 });
 }
-$: percent.set((length
-    ? index / length + (subIndex && subLength ? subIndex / (subLength ?? 1) / length : 0)
-    : 0) * 100);
+$effect(() => {
+    percent.set((length
+        ? index / length + (subIndex && subLength ? subIndex / (subLength ?? 1) / length : 0)
+        : 0) * 100);
+});
 function getPercent(partIndex, _pct) {
     if (!length) {
         return 0;
     }
-    const res = Math.min(($percent - (partIndex / length) * 100) * length, 100);
+    const res = Math.min((percent.current - (partIndex / length) * 100) * length, 100);
     return res;
 }
-$: finished = index == length;
+let finished = $derived(index == length);
 </script>
 
-<div class={$$props.class}>
+<div class={className}>
 	{#if !compact}
-	<div
-		class="flex justify-between items-end font-medium mb-1 {error != undefined
-			? 'text-red-700 dark:text-red-200'
-			: 'text-blue-700 dark:text-blue-200'}"
-	>
-		<span class="text-base">
-			{error != undefined
-				? 'Error occured'
-				: finished
-				? 'Done'
-				: hideStepTitle 
-				? `Running`
-				: subIndexIsPercent
-				? `Step ${index + 1} (${subIndex !== undefined ? `${subIndex}%)` : ''}`
-				: `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
-		</span>
-		<span class="text-sm">
-			{$percent.toFixed(0)}%
-		</span>
-	</div>
+		<div
+			class="flex justify-between items-end font-medium mb-1 {error != undefined
+				? 'text-red-700 dark:text-red-200'
+				: 'text-blue-700 dark:text-blue-200'}"
+		>
+			<span class="text-base">
+				{error != undefined
+					? 'Error occured'
+					: finished
+						? 'Done'
+						: hideStepTitle
+							? `Running`
+							: subIndexIsPercent
+								? `Step ${index + 1} (${subIndex !== undefined ? `${subIndex}%)` : ''}`
+								: `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
+			</span>
+			<span class="text-sm">
+				{percent.current.toFixed(0)}%
+			</span>
+		</div>
 	{/if}
 	<!-- {#each state as step, index}
 		{index} {JSON.stringify(step)}
@@ -70,10 +54,12 @@ $: finished = index == length;
 		{getPercent(index)}
 		|
 	{/each} -->
-	<div class={twMerge(
-		"flex w-full bg-gray-200 overflow-hidden",
-		(compact) ? "rounded-none h-3" : "rounded-full h-4",
-	)}>
+	<div
+		class={twMerge(
+			'flex w-full bg-gray-200 overflow-hidden',
+			compact ? 'rounded-none h-3' : 'rounded-full h-4'
+		)}
+	>
 		{#each new Array(length) as _, partIndex (partIndex)}
 			<div class="h-full relative border-white {partIndex === 0 ? '' : 'border-l'} w-full">
 				{#if partIndex == index && nextInProgress}
@@ -89,7 +75,7 @@ $: finished = index == length;
 						class="absolute left-0 bottom-0 h-full {error == partIndex
 							? 'bg-red-400'
 							: 'bg-blue-400'}"
-						style="width: {getPercent(partIndex, $percent)}%"
+						style="width: {getPercent(partIndex, percent.current)}%"
 					></div>
 				{/if}
 			</div>

package/package/components/progressBar/ProgressBar.svelte.d.ts

@@ -1,32 +1,17 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ProgressBar: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    error?: number | undefined | undefined;
+interface Props {
+    error?: number | undefined;
     index: number;
     subIndex: number | undefined;
     subLength: number | undefined;
-    nextInProgress?: boolean | undefined;
-    subIndexIsPercent?: boolean | undefined;
-    compact?: boolean | undefined;
-    hideStepTitle?: boolean | undefined;
+    nextInProgress?: boolean;
+    subIndexIsPercent?: boolean;
+    compact?: boolean;
+    hideStepTitle?: boolean;
     length: number;
-    resetP?: (() => void) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+    class?: string;
+}
+declare const ProgressBar: import("svelte").Component<Props, {
     resetP: () => void;
-}, string>;
-type ProgressBar = InstanceType<typeof ProgressBar>;
+}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
 export default ProgressBar;

package/package/components/runs/JobsLoader.svelte

@@ -4,7 +4,7 @@ import { sendUserToast } from '../../toast';
 import { workspaceStore } from '../../stores';
 import { tweened } from 'svelte/motion';
 import { subtractDaysFromDateString } from '../../utils';
-let { jobs = $bindable(), user, label = null, worker = null, folder, path, success = undefined, isSkipped = false, showSchedules = true, showFutureJobs = true, argFilter, resultFilter = undefined, schedulePath = undefined, jobKindsCat = undefined, minTs = $bindable(undefined), maxTs = $bindable(undefined), jobKinds = $bindable(''), queue_count = $bindable(undefined), suspended_count = $bindable(undefined), autoRefresh = true, completedJobs = $bindable(undefined), externalJobs = $bindable(undefined), concurrencyKey, tag, extendedJobs = $bindable(undefined), argError = '', resultError = '', loading = $bindable(false), refreshRate = 5000, syncQueuedRunsCount = true, allWorkspaces = false, computeMinAndMax, lookback = 0, perPage = undefined, allowWildcards = false } = $props();
+let { jobs = $bindable(), user, label = null, worker = null, folder, path, success = undefined, isSkipped = false, showSchedules = true, showFutureJobs = true, argFilter, resultFilter = undefined, schedulePath = undefined, jobKindsCat = undefined, minTs = $bindable(undefined), maxTs = $bindable(undefined), jobKinds = $bindable(undefined), queue_count = $bindable(undefined), suspended_count = $bindable(undefined), autoRefresh = true, completedJobs = $bindable(undefined), externalJobs = $bindable(undefined), concurrencyKey, tag, extendedJobs = $bindable(undefined), argError = '', resultError = '', loading = $bindable(false), refreshRate = 5000, syncQueuedRunsCount = true, allWorkspaces = false, computeMinAndMax, lookback = 0, perPage = undefined, allowWildcards = false } = $props();
 let intervalId = $state();
 let sync = true;
 function onParamChanges() {

package/package/components/runs/NoWorkerWithTagWarning.svelte

@@ -7,9 +7,9 @@ let noWorkerWithTag = $state(false);
 let timeout = undefined;
 let visible = true;
 let customTag = $derived.by(() => {
-    if (tag.includes('$workspace') || tag.includes('$args'))
+    if (tag?.includes('$workspace') || tag?.includes('$args'))
         return;
-    if (tag.includes('(')) {
+    if (tag?.includes('(')) {
         return tag.split('(')[0];
     }
     return tag;
@@ -34,7 +34,7 @@ async function lookForTag() {
 }
 $effect(() => {
     customTag;
-    untrack(() => lookForTag());
+    untrack(() => timeout && setTimeout(() => lookForTag(), 2500));
 });
 onDestroy(() => {
     visible = false;

package/package/components/runs/NoWorkerWithTagWarning.svelte.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    tag: string;
+    tag: string | undefined;
     tagLabel?: string;
 }
 declare const NoWorkerWithTagWarning: import("svelte").Component<Props, {}, "">;

package/package/components/schema/AddPropertyV2.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">import { modalToSchema } from '../../common';
 import { emptySchema, sendUserToast } from '../../utils';
+import { untrack } from 'svelte';
 import AddPropertyFormV2 from './AddPropertyFormV2.svelte';
-let { schema = $bindable(emptySchema()), trigger, noPopover, onAddNew } = $props();
+let { schema = $bindable(undefined), trigger, noPopover, onAddNew } = $props();
 export const DEFAULT_PROPERTY = {
     selectedType: 'string',
     description: '',
     name: '',
     required: false
 };
-if (!schema) {
-    schema = emptySchema();
-}
+$effect.pre(() => {
+    if (!schema) {
+        untrack(() => (schema = emptySchema()));
+    }
+});
 // Internal state: bound to args builder modal
 let argError = '';
 let editing = false;

package/package/components/schema/PropertyEditor.svelte.d.ts

@@ -46,6 +46,6 @@ declare const PropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "description" | "title" | "properties" | "placeholder" | "pattern" | "extra" | "oneOf" | "format" | "order" | "enum_" | "contentEncoding" | "customErrorMessage" | "itemsType">;
+}, "description" | "title" | "pattern" | "properties" | "placeholder" | "extra" | "oneOf" | "format" | "order" | "enum_" | "contentEncoding" | "customErrorMessage" | "itemsType">;
 type PropertyEditor = InstanceType<typeof PropertyEditor>;
 export default PropertyEditor;

package/package/components/select/MultiSelect.svelte

@@ -6,7 +6,7 @@ import CloseButton from '../common/CloseButton.svelte';
 import DraggableTags from './DraggableTags.svelte';
 import { Search } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-let { items, placeholder = 'Select items', value = $bindable(), class: className = '', style, listAutoWidth = true, disabled = false, disablePortal = false, createText, reorderable = true, noItemsMsg, selectedUlClass = '', placeholderClass = '', allowClear = true, onOpen, groupBy, sortBy, onCreateItem } = $props();
+let { items, placeholder = 'Select items', value = $bindable(), class: className = '', style, listAutoWidth = true, disabled = false, disablePortal = false, createText, reorderable = true, noItemsMsg, selectedUlClass = '', placeholderClass = '', allowClear = true, hideMainClearBtn = false, onOpen, groupBy, sortBy, onCreateItem } = $props();
 let filterText = $state('');
 let open = $state(false);
 let wrapperEl = $state();
@@ -79,7 +79,7 @@ function clearValue() {
 			/>
 		</ul>
 	{/if}
-	{#if allowClear}
+	{#if allowClear && !hideMainClearBtn}
 		<CloseButton
 			noBg
 			class="mr-1 remove-all"

package/package/components/select/MultiSelect.svelte.d.ts

@@ -20,6 +20,7 @@ declare function $$render<Item extends {
         selectedUlClass?: string;
         placeholderClass?: string;
         allowClear?: boolean;
+        hideMainClearBtn?: boolean;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onOpen?: () => void;

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -54,6 +54,22 @@ let sortedUsers = $derived(() => {
     });
 });
 let hasNonManualUsers = $derived((filteredUsers || users || []).some((user) => user.added_via?.source === 'instance_group' || user.added_via?.source === 'domain'));
+// Function to check if a manual user can be converted to a group user
+function canConvertToGroup(user) {
+    // User must be manually added (not via instance group or domain)
+    if (user.added_via?.source === 'instance_group' || user.added_via?.source === 'domain') {
+        return false;
+    }
+    // Check if user's email is in any configured instance group
+    const userEmail = user.email;
+    for (const groupName of autoAddInstanceGroups) {
+        const group = instanceGroups.find(g => g.name === groupName);
+        if (group && group.emails && group.emails.includes(userEmail)) {
+            return true;
+        }
+    }
+    return false;
+}
 async function loadSettings() {
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     auto_invite_domain = settings.auto_invite_domain;
@@ -165,6 +181,20 @@ async function updateGroupRole(groupName, role) {
         sendUserToast('Failed to update role', true);
     }
 }
+async function convertUserToGroup(username) {
+    try {
+        await UserService.convertUserToGroup({
+            workspace: $workspaceStore ?? '',
+            username
+        });
+        sendUserToast('User converted to group user');
+        listUsers();
+    }
+    catch (e) {
+        console.error('Failed to convert user:', e);
+        sendUserToast('Failed to convert user', true);
+    }
+}
 let domain = $derived($userStore?.email.split('@')[1]);
 $effect(() => {
     if ($workspaceStore) {
@@ -188,6 +218,7 @@ onDestroy(() => {
 });
 let deleteConfirmedCallback = $state(undefined);
 let removeInstanceGroupConfirmedCallback = $state(undefined);
+let convertConfirmedCallback = $state(undefined);
 async function removeAllInvitesFromDomain() {
     await Promise.all(invites
         .filter((x) => isCloudHosted() ? x.email.endsWith('@' + (auto_invite_domain ?? '')) : true)
@@ -593,7 +624,8 @@ $effect(() => {
 		</Head>
 		<tbody class="divide-y bg-surface">
 			{#if filteredUsers}
-				{#each sortedUsers().slice(0, nbDisplayed) as { email, username, is_admin, operator, disabled, added_via }, index (email)}
+				{#each sortedUsers().slice(0, nbDisplayed) as user, index (user.email)}
+					{@const { email, username, is_admin, operator, disabled, added_via } = user}
 					<!-- Add separator between manual users and instance group users -->
 					{#if hasNonManualUsers && index > 0 && sortedUsers()[index - 1]?.added_via?.source !== 'instance_group' && added_via?.source === 'instance_group'}
 						<tr class="bg-surface-secondary">
@@ -733,6 +765,40 @@ $effect(() => {
 										</Button>
 										<Tooltip>Cannot remove users synced from instance groups. Either disable the user or remove them from the SCIM group.</Tooltip>
 									</div>
+								{:else if canConvertToGroup(user)}
+									<Button
+										color="light"
+										variant="contained"
+										btnClasses="text-blue-500"
+										size="xs"
+										spacingSize="xs2"
+										on:click={() => {
+											convertConfirmedCallback = async () => {
+												await convertUserToGroup(username)
+											}
+										}}
+									>
+										Convert
+									</Button>
+									<Button
+										color="light"
+										variant="contained"
+										btnClasses="text-red-500"
+										size="xs"
+										spacingSize="xs2"
+										on:click={() => {
+											deleteConfirmedCallback = async () => {
+												await UserService.deleteUser({
+													workspace: $workspaceStore ?? '',
+													username
+												})
+												sendUserToast('User removed')
+												listUsers()
+											}
+										}}
+									>
+										Remove
+									</Button>
 								{:else}
 									<Button
 										color="light"
@@ -922,3 +988,28 @@ $effect(() => {
 		</div>
 	</ConfirmationModal>
 </div>
+
+<ConfirmationModal
+	open={Boolean(convertConfirmedCallback)}
+	title="Convert to Group User"
+	confirmationText="Convert"
+	on:canceled={() => {
+		convertConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (convertConfirmedCallback) {
+			convertConfirmedCallback()
+		}
+		convertConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to convert this user to a group user?</span>
+		<span class="text-sm text-secondary">This will:</span>
+		<ul class="text-sm text-secondary list-disc ml-4 space-y-1">
+			<li>Change the user's role based on their instance group configuration</li>
+			<li>Make their role managed through the instance group settings</li>
+			<li>Prevent manual role changes for this user</li>
+		</ul>
+	</div>
+</ConfirmationModal>

package/package/components/sidebar/MenuLink.svelte

@@ -5,7 +5,7 @@ import { base } from '$app/paths';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import { goto } from '$app/navigation';
 import { twMerge } from 'tailwind-merge';
-let { aiId = undefined, aiDescription = undefined, label, href, icon = undefined, isCollapsed, disabled = false, lightMode = false, item = undefined, class: classNames = '' } = $props();
+let { aiId = undefined, aiDescription = undefined, label, href, icon = undefined, isCollapsed, disabled = false, lightMode = false, item = undefined, class: classNames = '', onclick = undefined } = $props();
 let isSelected = $state(false);
 navigating.subscribe(() => {
     if (href === `${base}/`) {
@@ -28,6 +28,7 @@ navigating.subscribe(() => {
 					goto(href)
 				}
 			}}
+			{onclick}
 			class={twMerge(
 				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
 				isSelected

package/package/components/sidebar/MenuLink.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     lightMode?: boolean;
     item?: MenubarMenuElements['item'] | undefined;
     class?: string;
+    onclick?: (ev: MouseEvent) => any;
 }
 declare const MenuLink: import("svelte").Component<Props, {}, "">;
 type MenuLink = ReturnType<typeof MenuLink>;

package/package/components/sidebar/SidebarContent.svelte

@@ -113,7 +113,12 @@ let mainMenuLinks = $derived([
         href: `${base}/runs`,
         icon: Play,
         aiId: 'sidebar-menu-link-runs',
-        aiDescription: 'Button to navigate to runs'
+        aiDescription: 'Button to navigate to runs',
+        onclick: () => {
+            setTimeout(() => {
+                window.dispatchEvent(new Event('popstate'));
+            }, 100);
+        }
     },
     {
         label: 'Variables',
@@ -295,7 +300,7 @@ let secondaryMenuLinks = $derived([
                     }
                 ]
                 : []),
-            ...($workspaceStore?.startsWith("wm-fork")
+            ...($workspaceStore?.startsWith('wm-fork')
                 ? [
                     {
                         label: 'Delete Forked Workspace',
@@ -306,7 +311,7 @@ let secondaryMenuLinks = $derived([
                         faIcon: undefined
                     }
                 ]
-                : []),
+                : [])
         ],
         disabled: $userStore?.operator
     },
@@ -508,14 +513,9 @@ let secondaryMenuLinks = $derived([
 							{/snippet}
 						</Menu>
 					{:else}
-						<MenuSingleItem {createMenu}>
-							{#snippet triggr({ trigger })}
-								<div class="w-full">
-									<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
-								</div>
-							{/snippet}
-							{#snippet children({ item })}
-								<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} {item} />
+						<MenuSingleItem>
+							{#snippet children({})}
+								<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} />
 							{/snippet}
 						</MenuSingleItem>
 					{/if}
@@ -601,20 +601,20 @@ let secondaryMenuLinks = $derived([
 	</div>
 </ConfirmationModal>
 
-{#if $workspaceStore?.startsWith("wm-fork-")}
-<ConfirmationModal
-	open={deleteWorkspaceForkModal}
-	title="Delete forked workspace"
-	confirmationText="Remove"
-	on:canceled={() => {
-		deleteWorkspaceForkModal = false
-	}}
-	on:confirmed={() => {
-		deleteFork()
-	}}
->
-	<div class="flex flex-col w-full space-y-4">
-		<span>Are you sure you want to delete this workspace fork? (deleting {$workspaceStore})</span>
-	</div>
-</ConfirmationModal>
+{#if $workspaceStore?.startsWith('wm-fork-')}
+	<ConfirmationModal
+		open={deleteWorkspaceForkModal}
+		title="Delete forked workspace"
+		confirmationText="Remove"
+		on:canceled={() => {
+			deleteWorkspaceForkModal = false
+		}}
+		on:confirmed={() => {
+			deleteFork()
+		}}
+	>
+		<div class="flex flex-col w-full space-y-4">
+			<span>Are you sure you want to delete this workspace fork? (deleting {$workspaceStore})</span>
+		</div>
+	</ConfirmationModal>
 {/if}

package/package/components/table/Cell.svelte

@@ -1,22 +1,15 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-export let first = false;
-export let last = false;
-export let numeric = false;
-export let head = false;
-export let shouldStopPropagation = false;
-export let selected = false;
-export let sticky = false;
-export let wrap = false;
+let { first = false, last = false, numeric = false, head = false, shouldStopPropagation = false, selected = false, sticky = false, wrap = false, children, ...rest } = $props();
 let Tag = head ? 'th' : 'td';
 const { size } = getContext('datatable');
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
 	this={Tag}
-	{...$$restProps}
-	on:click={(e) => {
+	{...rest}
+	onclick={(e) => {
 		if (shouldStopPropagation) e.stopPropagation()
 	}}
 	class={twMerge(
@@ -36,14 +29,14 @@ const { size } = getContext('datatable');
 		size === 'xs' ? 'px-1 py-1.5' : '',
 		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 		'transition-all',
-		$$restProps.class
+		rest.class
 	)}
 >
 	{#if sticky}
 		<div class={twMerge(first ? 'border-r' : ' border-l ')}>
-			<slot />
+			{@render children?.()}
 		</div>
 	{:else}
-		<slot />
+		{@render children?.()}
 	{/if}
 </svelte:element>

package/package/components/table/Cell.svelte.d.ts

@@ -1,37 +1,15 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    first?: boolean;
+    last?: boolean;
+    numeric?: boolean;
+    head?: boolean;
+    shouldStopPropagation?: boolean;
+    selected?: boolean;
+    sticky?: boolean;
+    wrap?: boolean;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Cell: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    first?: boolean | undefined;
-    last?: boolean | undefined;
-    numeric?: boolean | undefined;
-    head?: boolean | undefined;
-    shouldStopPropagation?: boolean | undefined;
-    selected?: boolean | undefined;
-    sticky?: boolean | undefined;
-    wrap?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Cell = InstanceType<typeof Cell>;
+declare const Cell: import("svelte").Component<Props, {}, "">;
+type Cell = ReturnType<typeof Cell>;
 export default Cell;