windmill-components 1.642.0 → 1.655.0

package/package/components/common/clearableInput/ClearableInput.svelte.d.ts

@@ -1,39 +1,13 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ClearableInput: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+interface Props {
     value?: any;
-    placeholder?: string | undefined;
-    type?: "text" | "textarea" | "number" | undefined;
-    inputClass?: string | undefined;
-    wrapperClass?: string | undefined;
-    buttonClass?: string | undefined;
-}, {
-    default: {};
-}>, {
-    keydown: KeyboardEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ClearableInput = InstanceType<typeof ClearableInput>;
+    placeholder?: string;
+    type?: 'text' | 'textarea' | 'number';
+    inputClass?: string;
+    wrapperClass?: string;
+    buttonClass?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const ClearableInput: import("svelte").Component<Props, {}, "value">;
+type ClearableInput = ReturnType<typeof ClearableInput>;
 export default ClearableInput;

package/package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -47,7 +47,7 @@ const theme = {
 const Icon = $derived(theme[type].Icon ?? AlertTriangle);
 </script>
 
-<svelte:window on:keydown|capture={onKeyDown} />
+<svelte:window onkeydowncapture={onKeyDown} />
 
 {#if open}
 	<div

package/package/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import ConfirmationModal from './ConfirmationModal.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import DataTable from '../../table/DataTable.svelte';
 import { twMerge } from 'tailwind-merge';
 import TriggerLabel from '../../triggers/TriggerLabel.svelte';
@@ -10,7 +10,7 @@ import ToggleButton from '../toggleButton-v2/ToggleButton.svelte';
 import { userStore } from '../../../stores';
 import Badge from '../badge/Badge.svelte';
 let { open = $bindable(false), draftTriggers = [], isFlow = false } = $props();
-let selectedTriggers = $state(draftTriggers);
+let selectedTriggers = $state(untrack(() => draftTriggers));
 const dispatch = createEventDispatcher();
 function toggleTrigger(trigger, selected) {
     if (selected === 'discard') {

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -3,7 +3,7 @@ import { beforeNavigate } from '$app/navigation';
 import { goto as gotoUrl } from '$app/navigation';
 import Button from '../button/Button.svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
 let { getInitialAndModifiedValues = undefined, diffDrawer = undefined, additionalExitAction = () => { }, triggerOnSearchParamsChange = false, onDiscardChanges = undefined, tabMode = false } = $props();
 let savedValue = $state(undefined);
@@ -15,9 +15,9 @@ beforeNavigate(async (newNavigationState) => {
     if (!bypassBeforeNavigate &&
         getInitialAndModifiedValues &&
         newNavigationState.to &&
-        ((newNavigationState.to.url != $page.url &&
+        ((newNavigationState.to.url != page.url &&
             newNavigationState.to.url.pathname !== newNavigationState.from?.url.pathname) ||
-            (triggerOnSearchParamsChange && newNavigationState.to.url.search != $page.url.search))) {
+            (triggerOnSearchParamsChange && newNavigationState.to.url.search != page.url.search))) {
         goingTo = newNavigationState.to.url;
         const state = getInitialAndModifiedValues?.();
         savedValue = state?.savedValue;

package/package/components/common/contextmenu/ContextMenu.svelte

@@ -2,7 +2,7 @@
 import { fly } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 import { pointerDownOutside } from '../../../utils';
-import { getContextMenuContainerClass, CONTEXT_MENU_ITEM_BASE_CLASS, CONTEXT_MENU_ITEM_HOVER_MELT_CLASS, CONTEXT_MENU_ITEM_DISABLED_CLASS, CONTEXT_MENU_DIVIDER_CLASS, CONTEXT_MENU_ANIMATION_CLASSES } from './contextMenuStyles';
+import { getContextMenuContainerClass, CONTEXT_MENU_ITEM_BASE_CLASS, CONTEXT_MENU_ITEM_HOVER_MELT_CLASS, CONTEXT_MENU_ITEM_DELETE_CLASS, CONTEXT_MENU_ITEM_DISABLED_CLASS, CONTEXT_MENU_DIVIDER_CLASS, CONTEXT_MENU_ANIMATION_CLASSES } from './contextMenuStyles';
 let { items = [], children, menu, class: className = '', onItemClick, closeOnOutsideClick = true } = $props();
 const { elements: { menu: menuElement, item, trigger }, states: { open } } = createContextMenu({
     positioning: {
@@ -42,6 +42,11 @@ function handlePointerDownOutside() {
 		exclude: getMenuElements,
 		onClickOutside: handlePointerDownOutside
 	}}
+	onpointerdown={(e) => {
+		if (e.button === 0 && open.get()) {
+			close()
+		}
+	}}
 	data-context-menu-trigger
 >
 	{@render children?.()}
@@ -63,18 +68,23 @@ function handlePointerDownOutside() {
 						CONTEXT_MENU_ITEM_BASE_CLASS,
 						menuItem.disabled
 							? CONTEXT_MENU_ITEM_DISABLED_CLASS
-							: CONTEXT_MENU_ITEM_HOVER_MELT_CLASS
+							: menuItem.type === 'delete'
+								? CONTEXT_MENU_ITEM_DELETE_CLASS
+								: CONTEXT_MENU_ITEM_HOVER_MELT_CLASS
 					)}
 					{...$item} use:$item.action
 					onclick={() => handleItemClick(menuItem)}
 				>
 					{#if menuItem.icon}
-						<menuItem.icon size={14} class="mr-2" />
+						<menuItem.icon size={14} class="mr-2 shrink-0" />
 					{/if}
 					{#if menu}
 						{@render menu({ item: menuItem })}
 					{:else}
-						<span>{menuItem.label}</span>
+						<span class="grow">{menuItem.label}</span>
+					{/if}
+					{#if menuItem.shortcut}
+						<span class="ml-auto pl-4 text-2xs text-secondary shrink-0">{menuItem.shortcut}</span>
 					{/if}
 				</div>
 			{/if}

package/package/components/common/contextmenu/ContextMenu.svelte.d.ts

@@ -6,6 +6,8 @@ export interface ContextMenuItem {
     disabled?: boolean;
     onClick?: () => void;
     divider?: boolean;
+    type?: 'action' | 'delete';
+    shortcut?: string;
 }
 interface Props {
     items?: ContextMenuItem[];

package/package/components/common/contextmenu/contextMenuStyles.d.ts

@@ -19,6 +19,10 @@ export declare const CONTEXT_MENU_ITEM_HOVER_CLASS = "hover:bg-surface-hover";
  * Hover state styles for context menu items (Melt UI data attribute)
  */
 export declare const CONTEXT_MENU_ITEM_HOVER_MELT_CLASS = "data-[highlighted]:bg-surface-hover";
+/**
+ * Delete action styles for context menu items
+ */
+export declare const CONTEXT_MENU_ITEM_DELETE_CLASS = "text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300";
 /**
  * Disabled state styles for context menu items
  */

package/package/components/common/contextmenu/contextMenuStyles.js

@@ -21,6 +21,10 @@ export const CONTEXT_MENU_ITEM_HOVER_CLASS = 'hover:bg-surface-hover';
  * Hover state styles for context menu items (Melt UI data attribute)
  */
 export const CONTEXT_MENU_ITEM_HOVER_MELT_CLASS = 'data-[highlighted]:bg-surface-hover';
+/**
+ * Delete action styles for context menu items
+ */
+export const CONTEXT_MENU_ITEM_DELETE_CLASS = 'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300';
 /**
  * Disabled state styles for context menu items
  */

package/package/components/common/drawer/Disposable.svelte

@@ -4,7 +4,7 @@
 <script lang="ts">import { zIndexes } from '../../../zIndexes';
 import { untrack } from 'svelte';
 let { open = $bindable(false), id = (Math.random() + 1).toString(36).substring(10), preventEscape = false, initialOffset = 0, children, onOpen, onClose } = $props();
-let offset = $state(initialOffset);
+let offset = $state(untrack(() => initialOffset));
 let zIndex = $derived(zIndexes.disposables + offset);
 export function toggleDrawer() {
     if (!open) {
@@ -57,8 +57,8 @@ function onKeyDown(event) {
     }
 }
 if (open) {
-    openedDrawers.val.push(id);
-    offset = initialOffset + openedDrawers.val.length;
+    openedDrawers.val.push(untrack(() => id));
+    offset = untrack(() => initialOffset) + openedDrawers.val.length;
 }
 let wasEverOpen = false;
 let lastOpen = open;

package/package/components/common/fileInput/FileInput.svelte

@@ -3,24 +3,11 @@ import { FileUp, Trash } from 'lucide-svelte';
 import Button from '../../common/button/Button.svelte';
 import { twMerge } from 'tailwind-merge';
 import { sendUserToast } from '../../../toast';
-let c = '';
-export { c as class };
-export let style = '';
-export let accept = '*';
-export let multiple = false;
-export let convertTo = undefined;
-export let hideIcon = false;
-export let iconSize = 24;
-export let returnFileNames = false;
-export let submittedText = undefined;
-export let defaultFile = undefined;
-export let disabled = undefined;
-export let folderOnly = false;
 const dispatch = createEventDispatcher();
-let input;
-export let files = undefined;
-let pointerStartX = 0;
-let pointerStartY = 0;
+let input = $state();
+let { class: c = '', style = '', accept = '*', multiple = false, convertTo = undefined, hideIcon = false, iconSize = 24, returnFileNames = false, submittedText = undefined, defaultFile = undefined, disabled = undefined, folderOnly = false, files = $bindable(undefined), selectedTitle, children, ...rest } = $props();
+let pointerStartX = $state(0);
+let pointerStartY = $state(0);
 function handlePointerDown(e) {
     pointerStartX = e.clientX;
     pointerStartY = e.clientY;
@@ -39,7 +26,8 @@ async function onChange(fileList) {
     }
     // Needs to be reset so the same file can be selected
     // multiple times in a row
-    input.value = '';
+    if (input)
+        input.value = '';
     dispatchChange();
 }
 async function convertFile(file) {
@@ -171,10 +159,10 @@ export function clearFiles() {
 		duration-200 px-1 py-8`,
 		c
 	)}
-	on:dragover={handleDragOver}
-	on:drop={handleDrop}
-	on:pointerdown={handlePointerDown}
-	on:click={(e) => {
+	ondragover={handleDragOver}
+	ondrop={handleDrop}
+	onpointerdown={handlePointerDown}
+	onclick={(e) => {
 		const deltaX = Math.abs(e.clientX - pointerStartX)
 		const deltaY = Math.abs(e.clientY - pointerStartY)
 		if (deltaX > 5 || deltaY > 5) {
@@ -191,11 +179,11 @@ export function clearFiles() {
 	{/if}
 	{#if files}
 		<div class="w-full max-h-full overflow-auto px-6">
-			<slot name="selected-title">
+			{#if selectedTitle}{@render selectedTitle()}{:else}
 				<div class="text-center mb-2 px-2">
 					{submittedText ? submittedText : `Selected file${files.length > 1 ? 's' : ''}`}:
 				</div>
-			</slot>
+			{/if}
 			<ul class="relative z-20 max-w-[500px] bg-surface rounded-lg overflow-hidden mx-auto">
 				{#each files as { name }, i}
 					<li
@@ -216,10 +204,8 @@ export function clearFiles() {
 				{/each}
 			</ul>
 		</div>
-	{:else}
-		<slot>
-			<span>Drag and drop {folderOnly ? 'a folder' : multiple ? 'files' : 'a file'}</span>
-		</slot>
+	{:else if children}{@render children()}{:else}
+		<span>Drag and drop {folderOnly ? 'a folder' : multiple ? 'files' : 'a file'}</span>
 	{/if}
 	<input
 		class="!absolute !inset-0 !z-10 !opacity-0 !cursor-pointer"
@@ -227,12 +213,12 @@ export function clearFiles() {
 		{...{ webkitdirectory: folderOnly }}
 		title={files ? `${files.length} file${files.length > 1 ? 's' : ''} chosen` : 'No file chosen'}
 		bind:this={input}
-		on:change={({ currentTarget }) => {
+		onchange={({ currentTarget }) => {
 			onChange(currentTarget.files ? Array.from(currentTarget.files) : null)
 		}}
 		{accept}
 		{multiple}
-		{...$$restProps}
+		{...rest}
 	/>
 	{#if defaultFile && (!Array.isArray(defaultFile) || defaultFile.length > 0)}
 		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-primary mt-2">

package/package/components/common/fileInput/FileInput.svelte.d.ts

@@ -1,4 +1,25 @@
 import type { ReadFileAs } from './model';
+type FileWithPath = File & {
+    path?: string;
+};
+interface Props {
+    class?: string;
+    style?: string;
+    accept?: string;
+    multiple?: boolean;
+    convertTo?: ReadFileAs | undefined;
+    hideIcon?: boolean;
+    iconSize?: number;
+    returnFileNames?: boolean;
+    submittedText?: string | undefined;
+    defaultFile?: string | string[] | undefined;
+    disabled?: boolean | undefined;
+    folderOnly?: boolean;
+    files?: FileWithPath[] | undefined;
+    selectedTitle?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
 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;
@@ -12,41 +33,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FileInput: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    style?: string | undefined;
-    accept?: string | undefined;
-    multiple?: boolean | undefined;
-    convertTo?: ReadFileAs | undefined;
-    hideIcon?: boolean | undefined;
-    iconSize?: number | undefined;
-    returnFileNames?: boolean | undefined;
-    submittedText?: string | undefined | undefined;
-    defaultFile?: string | string[] | undefined | undefined;
-    disabled?: boolean | undefined | undefined;
-    folderOnly?: boolean | undefined;
-    files?: (File & {
-        path?: string;
-    })[] | undefined | undefined;
-    clearFiles?: (() => void) | undefined;
-}, {
-    'selected-title': {};
-    default: {};
-}>, {
+declare const FileInput: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    'selected-title': {};
-    default: {};
-}, {
+}, {}, {
     clearFiles: () => void;
-}, string>;
+}, "files">;
 type FileInput = InstanceType<typeof FileInput>;
 export default FileInput;

package/package/components/common/fileUpload/FileUploadModal.svelte

@@ -4,10 +4,8 @@ import { fade } from 'svelte/transition';
 import Button from '../button/Button.svelte';
 import { X } from 'lucide-svelte';
 import FileUpload from './FileUpload.svelte';
-export let title;
-export let open = false;
-export let fileKey = undefined;
-let s3Folder = '';
+let { title, open = false, fileKey = $bindable(undefined) } = $props();
+let s3Folder = $state('');
 const dispatch = createEventDispatcher();
 function fadeFast(node) {
     return fade(node, { duration: 100 });

package/package/components/common/fileUpload/FileUploadModal.svelte.d.ts

@@ -1,3 +1,8 @@
+interface Props {
+    title: string;
+    open?: boolean;
+    fileKey?: string | undefined;
+}
 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;
@@ -11,14 +16,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FileUploadModal: $$__sveltets_2_IsomorphicComponent<{
-    title: string;
-    open?: boolean;
-    fileKey?: string | undefined;
-}, {
+declare const FileUploadModal: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "fileKey">;
 type FileUploadModal = InstanceType<typeof FileUploadModal>;
 export default FileUploadModal;

package/package/components/common/kbd/Kbd.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">import { isMac } from '../../../utils';
+<script lang="ts">import { untrack } from 'svelte';
+import { isMac } from '../../../utils';
 import { twMerge } from 'tailwind-merge';
 let { kbdClass = $bindable(''), small = false, isModifier = false, class: classNames = '', children } = $props();
-if (small) {
-    kbdClass = twMerge(kbdClass, '!text-[10px]  px-1', isModifier && isMac() ? '!text-lg ' : 'text-xs', 'leading-none');
+if (untrack(() => small)) {
+    kbdClass = twMerge(kbdClass, '!text-[10px]  px-1', untrack(() => isModifier) && isMac() ? '!text-lg ' : 'text-xs', 'leading-none');
 }
 else {
     kbdClass += ' !text-xs px-1.5';

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import MySQLIcon from '../../icons/Mysql.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import MySQLIcon from '../../icons/Mysql.svelte';
 import PostgresIcon from '../../icons/PostgresIcon.svelte';
 import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
 import JavaScript from './JavaScript.svelte';
@@ -21,6 +22,7 @@ import NuIcon from '../../icons/NuIcon.svelte';
 import JavaIcon from '../../icons/JavaIcon.svelte';
 import DuckDbIcon from '../../icons/DuckDbIcon.svelte';
 import RubyIcon from '../../icons/RubyIcon.svelte';
+import ClaudeIcon from '../../icons/ClaudeIcon.svelte';
 let { lang, width = 30, height = 30, scale = 1, size = undefined, ...rest } = $props();
 const languageLabel = {
     python3: 'Python',
@@ -45,7 +47,8 @@ const languageLabel = {
     csharp: 'C#',
     nu: 'Nu',
     java: 'Java',
-    ruby: 'Ruby'
+    ruby: 'Ruby',
+    claudesandbox: 'Claude Sandbox'
     // for related places search: ADD_NEW_LANG
 };
 const langToComponent = {
@@ -76,10 +79,11 @@ const langToComponent = {
     nu: NuIcon,
     java: JavaIcon,
     ruby: RubyIcon,
-    duckdb: DuckDbIcon
+    duckdb: DuckDbIcon,
+    claudesandbox: TypeScriptIcon
     // for related places search: ADD_NEW_LANG
 };
-let subIconScale = width === 30 ? 0.6 : 0.8;
+let subIconScale = untrack(() => width) === 30 ? 0.6 : 0.8;
 const SvelteComponent = $derived(langToComponent[lang]);
 </script>
 
@@ -113,4 +117,17 @@ const SvelteComponent = $derived(langToComponent[lang]);
 			/>
 		</div>
 	{/if}
+	{#if lang === 'claudesandbox'}
+		<div
+			class="absolute -top-1.5 -right-1.5 bg-surface rounded-full flex items-center justify-center"
+			style={`width: ${width * scale * subIconScale}px; height: ${
+				height * scale * subIconScale
+			}px;`}
+		>
+			<ClaudeIcon
+				width={width * scale * (subIconScale - 0.1)}
+				height={height * scale * (subIconScale - 0.1)}
+			/>
+		</div>
+	{/if}
 </div>

package/package/components/common/languageIcons/LanguageIcon.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { SupportedLanguage } from '../../../common';
 interface Props {
-    lang: SupportedLanguage | 'mysql' | 'bun' | 'pgsql' | 'javascript' | 'fetch' | 'docker' | 'powershell' | 'bunnative';
+    lang: SupportedLanguage | 'mysql' | 'bun' | 'pgsql' | 'javascript' | 'fetch' | 'docker' | 'powershell' | 'bunnative' | 'claudesandbox';
     width?: number;
     height?: number;
     scale?: number;

package/package/components/common/layout/ListElement.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">"use strict";
+let { children } = $props();
+</script>
+
 <div class="w-full flex-grow bg-blue-300">
-	<slot />
+	{@render children?.()}
 </div>

package/package/components/common/layout/ListElement.svelte.d.ts

@@ -1,26 +1,6 @@
-export default ListElement;
-type ListElement = SvelteComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const ListElement: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    children?: import('svelte').Snippet;
 }
+declare const ListElement: import("svelte").Component<Props, {}, "">;
+type ListElement = ReturnType<typeof ListElement>;
+export default ListElement;

package/package/components/common/menu/MenuItem.svelte

@@ -1,11 +1,16 @@
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:click class="py-1">
+<script lang="ts">import { createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+let { children } = $props();
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onclick={bubble('click')} class="py-1">
 	<span
 		class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 		role="menuitem"
 		tabindex="-1"
 	>
-		<slot />
+		{@render children?.()}
 	</span>
 </div>

package/package/components/common/menu/MenuItem.svelte.d.ts

@@ -1,30 +1,6 @@
-export default MenuItem;
-type MenuItem = SvelteComponent<any, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const MenuItem: $$__sveltets_2_IsomorphicComponent<any, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    children?: import('svelte').Snippet;
 }
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/package/components/common/menu/ResolveOpen.svelte

@@ -1,7 +1,10 @@
-<script lang="ts">import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
-export let open = false;
-$: dispatchIfMounted(open ? 'open' : 'close');
+let { open = false } = $props();
+run(() => {
+    dispatchIfMounted(open ? 'open' : 'close');
+});
 </script>

package/package/components/common/menu/ResolveOpen.svelte.d.ts

@@ -1,3 +1,6 @@
+interface Props {
+    open?: boolean;
+}
 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;
@@ -11,10 +14,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ResolveOpen: $$__sveltets_2_IsomorphicComponent<{
-    open?: boolean;
-}, {
+declare const ResolveOpen: $$__sveltets_2_IsomorphicComponent<Props, {
+    open: CustomEvent<void>;
+    close: CustomEvent<void>;
+} & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ResolveOpen = InstanceType<typeof ResolveOpen>;
 export default ResolveOpen;