windmill-components 1.122.0 → 1.138.2

package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte

@@ -1,13 +1,10 @@
 <script>import { Loader2 } from 'lucide-svelte';
 import { ClearableInput, Popup } from '../../../../common';
-import { fade } from 'svelte/transition';
 export let componentInput;
-let anchor;
 let loading = false;
 let items;
 let filteredItems;
 let search = '';
-let openPopup;
 $: if (search) {
     filteredItems = items.filter((item) => {
         return item.label.toLowerCase().includes(search.toLowerCase());
@@ -18,7 +15,6 @@ else {
 }
 async function getData() {
     if (items) {
-        return openPopup();
     }
     loading = true;
     const data = await import('lucide-svelte/dist/svelte/icons');
@@ -26,7 +22,6 @@ async function getData() {
         .filter(([key]) => !(key.endsWith('Icon') || key.startsWith('Lucide')))
         .map(([key, icon]) => ({ label: key, icon }));
     loading = false;
-    openPopup();
 }
 function select(label) {
     componentInput.value = label;
@@ -37,76 +32,70 @@ function select(label) {
 }
 </script>
 
-<div bind:this={anchor} class="relative">
-	<ClearableInput
-		readonly
-		value={componentInput.value}
-		on:change={({ detail }) => (componentInput.value = detail)}
-		on:focus={getData}
-		class="!pr-6"
-	/>
-	{#if loading}
-		<div class="center-center absolute right-2 top-1/2 transform -translate-y-1/2 p-0.5">
-			<Loader2 class="animate-spin" size={16} />
+<Popup
+	let:close
+	floatingConfig={{
+		strategy: 'absolute',
+		placement: 'bottom-end'
+	}}
+>
+	<svelte:fragment slot="button">
+		<div class="relative">
+			<ClearableInput
+				readonly
+				value={componentInput.value}
+				on:change={({ detail }) => (componentInput.value = detail)}
+				on:focus={getData}
+				class="!pr-6"
+			/>
+			{#if loading}
+				<div class="center-center absolute right-2 top-1/2 transform -translate-y-1/2 p-0.5">
+					<Loader2 class="animate-spin" size={16} />
+				</div>
+			{/if}
 		</div>
-	{/if}
-</div>
-{#if anchor}
-	<Popup
-		ref={anchor}
-		closeOn={[]}
-		options={{
-			placement: 'bottom-start',
-			strategy: 'fixed',
-			modifiers: [{ name: 'offset', options: { offset: [0, 6] } }]
-		}}
-		bind:open={openPopup}
-		let:close
-		transition={fade}
-		wrapperClasses=" z-[1002]"
-	>
-		{#if !loading}
-			<div class="w-72 shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
-				{#if filteredItems}
-					<input
-						on:keydown={(event) => {
-							if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
-								event.stopPropagation()
-							}
-						}}
-						bind:value={search}
-						type="text"
-						placeholder="Search"
-						class="col-span-4 mb-2"
-					/>
-					<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
-						{#each filteredItems as { label, icon }}
-							<button
-								type="button"
-								title={label}
-								on:click={() => {
-									select(label)
-									close()
-								}}
-								class="w-full center-center flex-col font-normal p-1
-									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200
+	</svelte:fragment>
+	{#if !loading}
+		{#if filteredItems}
+			<div class="w-72">
+				<input
+					on:keydown={(event) => {
+						if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
+							event.stopPropagation()
+						}
+					}}
+					bind:value={search}
+					type="text"
+					placeholder="Search"
+					class="col-span-4 mb-2"
+				/>
+				<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
+					{#each filteredItems as { label, icon }}
+						<button
+							type="button"
+							title={label}
+							on:click={() => {
+								select(label)
+								close(null)
+							}}
+							class="w-full center-center flex-col font-normal p-1
+									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 dark:hover:bg-frost-900 dark:focus:bg-frost-900
 									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
-							>
-								<svelte:component this={icon} size={22} />
-								<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
-									{label}
-								</span>
-							</button>
-						{:else}
-							<div class="col-span-4 text-center text-gray-700 text-sm p-2">
-								No icons match your search
-							</div>
-						{/each}
-					</div>
-				{:else}
-					<div class="text-center text-sm text-gray-600 p-2"> Couldn't load options </div>
-				{/if}
+						>
+							<svelte:component this={icon} size={22} />
+							<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
+								{label}
+							</span>
+						</button>
+					{:else}
+						<div class="col-span-4 text-center text-secondary text-sm p-2">
+							No icons match your search
+						</div>
+					{/each}
+				</div>
 			</div>
+		{:else}
+			<div class="text-center text-sm text-secondary p-2"> Couldn't load options </div>
 		{/if}
-	</Popup>
-{/if}
+	{/if}
+</Popup>

package/package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte

@@ -23,10 +23,10 @@ $: code != undefined && parseJson();
 </script>
 
 {#if tooBig}
-	<span class="text-gray-600">JSON to edit is too big</span>
+	<span class="text-tertiary">JSON to edit is too big</span>
 {:else}
 	<div class="flex flex-col w-full">
-		<div class="border border-gray-300 w-full">
+		<div class="border w-full">
 			<SimpleEditor
 				{small}
 				on:focus

package/package/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte

@@ -11,11 +11,7 @@ const tabComponents = allItems($app.grid, $app.subgrids).filter((component) => c
 			<div class="flex flex-col">
 				<label for="tabId" class="text-xs font-semibold">Tab ID</label>
 
-				<select
-					id="tabId"
-					bind:value={componentInput.value.id}
-					class="border border-gray-300 rounded-md p-1 !w-16"
-				>
+				<select id="tabId" bind:value={componentInput.value.id} class="border rounded-md p-1 !w-16">
 					{#each tabComponents as tabComponent}
 						<option value={tabComponent.data.id}>
 							{tabComponent.data.id}
@@ -28,7 +24,7 @@ const tabComponents = allItems($app.grid, $app.subgrids).filter((component) => c
 				<select
 					id="tabIndex"
 					bind:value={componentInput.value.index}
-					class="border border-gray-300 rounded-md p-1 !w-16"
+					class="border rounded-md p-1 !w-16"
 				>
 					{#each tabComponents as tabComponent}
 						{#if tabComponent.data.id === componentInput.value.id}
@@ -42,5 +38,5 @@ const tabComponents = allItems($app.grid, $app.subgrids).filter((component) => c
 		</div>
 	</div>
 {:else}
-	<div class="text-xs text-gray-500"> No tab component found in the app </div>
+	<div class="text-xs text-tertiary"> No tab component found in the app </div>
 {/if}

package/package/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte

@@ -23,24 +23,24 @@ const dispatch = createEventDispatcher();
 </div>
 
 {#if inlineScripts.length === 0}
-	<div class="flex flex-col  w-full h-full">
+	<div class="flex flex-col w-full h-full">
 		<div class="text-md">No detached inline scripts</div>
 	</div>
 {:else if filteredItems.length === 0}
 	<NoItemFound />
 {:else}
-	<ul class="divide-y divide-gray-200 border rounded-md">
+	<ul class="divide-y border rounded-md">
 		{#each filteredItems as item (item)}
 			<li class="flex flex-row w-full">
 				<button
-					class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+					class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 					on:click={() => dispatch('pick', item.title)}
 				>
 					<div class="flex items-center gap-4">
 						<RowIcon kind="script" />
 
-						<div class="w-full text-left font-normal ">
-							<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+						<div class="w-full text-left font-normal">
+							<div class="text-primary flex-wrap text-md font-semibold mb-1">
 								{#if item.marked}
 									{@html item.marked ?? ''}
 								{:else}

package/package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -6,8 +6,9 @@ import InlineScriptList from './InlineScriptList.svelte';
 import WorkspaceScriptList from './WorkspaceScriptList.svelte';
 import WorkspaceFlowList from './WorkspaceFlowList.svelte';
 import { createEventDispatcher, getContext } from 'svelte';
-import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '../../../utils';
+import { getAllScriptNames, schemaToInputsSpec } from '../../../utils';
 import { defaultIfEmptyString, emptySchema } from '../../../../../utils';
+import { loadSchema } from '../../../../../infer';
 export let defaultUserInput = false;
 export let hideCreateScript = false;
 export let onlyFlow = false;

package/package/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte

@@ -47,21 +47,21 @@ onMount(() => {
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 						on:click={() => dispatch('pick', item.path)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs">
+								<div class="text-tertiary text-xs">
 									{item.path}
 								</div>
 							</div>

package/package/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte

@@ -43,25 +43,25 @@ onMount(() => {
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y divide-gray-200 border rounded-md">
+		<ul class="divide-y border rounded-md">
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 						on:click={() => dispatch('pick', item.path)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="script" />
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs">
+								<div class="text-tertiary text-xs">
 									{item.path}
 								</div>
 							</div>

package/package/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte

@@ -3,6 +3,7 @@ import ScriptRunConfiguration from './shared/ScriptRunConfiguration.svelte';
 import BackgroundScriptTriggerBy from './shared/BackgroundScriptTriggerBy.svelte';
 import { getContext } from 'svelte';
 import ScriptSettingsSection from './shared/ScriptSettingsSection.svelte';
+import ScriptTransformer from './shared/ScriptTransformer.svelte';
 export let runnable;
 export let id;
 const { runnableComponents, app } = getContext('AppViewerContext');
@@ -20,6 +21,7 @@ $: runnable && ($app = $app);
 
 <div class={'border-y border-gray-200 divide-y'}>
 	<ScriptSettingHeader name={runnable.name} />
+	<ScriptTransformer bind:appInput={runnable} {id} />
 	{#if runnable.type == 'runnableByPath' || runnable.inlineScript}
 		<ScriptRunConfiguration
 			bind:autoRefresh={runnable.autoRefresh}

package/package/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte

@@ -29,7 +29,7 @@ function updateAutoRefresh() {
 }
 </script>
 
-<div class={'border border-gray-200 divide-y'}>
+<div class={'border divide-y'}>
 	<ScriptSettingHeader
 		name={runnable?.type === 'runnableByName'
 			? runnable.name
@@ -46,7 +46,7 @@ function updateAutoRefresh() {
 		</div>
 	{/if}
 	{#if hasScript}
-		<ScriptTransformer bind:appInput bind:appComponent />
+		<ScriptTransformer bind:appInput id={appComponent.id} />
 		<ScriptRunConfiguration
 			canConfigureRecomputeOnInputChanged={!isTriggerable(appComponent.type) &&
 				!isFrontend(appInput.runnable)}

package/package/components/apps/editor/settingsPanel/script/shared/ScriptSettingHeader.svelte

@@ -4,7 +4,7 @@ export let name;
 export let actions = [];
 </script>
 
-<div class="flex flex-row p-2 border-gray-200 justify-between bg-blue-50/60">
+<div class="flex flex-row p-2 border-gray-200 justify-between bg-blue-50/60 dark:bg-frost-900/60">
 	<div class="flex flex-row gap-2 items-center">
 		<FunctionSquare size={16} color="#3b82f6" />
 		<span class="text-xs font-semibold truncate">

package/package/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte

@@ -4,7 +4,7 @@ import Tooltip from '../../../../../Tooltip.svelte';
 import { Plus, X } from 'lucide-svelte';
 const { selectedComponentInEditor } = getContext('AppEditorContext');
 export let appInput;
-export let appComponent;
+export let id;
 $: checked = Boolean(appInput.transformer);
 </script>
 
@@ -29,7 +29,7 @@ $: checked = Boolean(appInput.transformer);
 						language: 'frontend',
 						content: 'return result'
 					}
-					$selectedComponentInEditor = appComponent.id + '_transformer'
+					$selectedComponentInEditor = id + '_transformer'
 				}
 			}}
 		>

package/package/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte.d.ts

@@ -1,10 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ResultAppInput } from '../../../../inputType';
-import type { AppComponent } from '../../../component';
+import type { InlineScript } from '../../../../types';
 declare const __propDef: {
     props: {
-        appInput: ResultAppInput;
-        appComponent: AppComponent;
+        appInput: {
+            transformer?: InlineScript & {
+                language: 'frontend';
+            };
+        };
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte

@@ -73,7 +73,7 @@ function applyConnection(connection) {
 	</Alert>
 {:else}
 	{#if triggerEvents.length > 0}
-		<div class="text-xs font-semibold text-slate-800 mb-1">Events</div>
+		<div class="text-xs font-semibold text-secondary mb-1">Events</div>
 		<div class="flex flex-row gap-2 flex-wrap">
 			{#each triggerEvents as triggerEvent}
 				<span class={classNames(badgeClass, colors['green'])}>{triggerEvent}</span>
@@ -81,7 +81,7 @@ function applyConnection(connection) {
 		</div>
 	{/if}
 	{#if changeEvents.length > 0 && shoudlDisplayChangeEvents}
-		<div class="text-xs font-semibold text-slate-800 mb-1 mt-2">Change on value</div>
+		<div class="text-xs font-semibold text-secondary mb-1 mt-2">Change on value</div>
 		<div class="flex flex-row gap-2 flex-wrap">
 			{#each changeEvents as changeEvent}
 				<span class={classNames(badgeClass, colors['blue'])}>

package/package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -22,9 +22,9 @@ $: if (lastSelected !== $selectedComponent) {
 		<div
 			transition:fly|local={{ duration: 300, x: width, y: 0, opacity: 1 }}
 			id={SECONDARY_MENU_ID}
-			class="flex flex-col w-full h-full bg-white"
+			class="flex flex-col w-full h-full bg-surface"
 		>
-			<div class="flex justify-between items-center bg-white gap-1 px-3 py-2">
+			<div class="flex justify-between items-center gap-1 px-3 py-2">
 				<Button
 					color="light"
 					size="xs2"

package/package/components/apps/rx.d.ts

@@ -5,7 +5,7 @@ export interface Subscriber<T> {
     next(v: T): void;
 }
 export interface Observable<T> {
-    subscribe(x: Subscriber<T>): void;
+    subscribe(x: Subscriber<T>, previousValue: T): void;
 }
 export interface Output<T> extends Observable<T> {
     set(x: T, force?: boolean): void;
@@ -16,13 +16,13 @@ export interface Input<T> extends Subscriber<T> {
 }
 export type World = {
     outputsById: Record<string, Record<string, Output<any>>>;
-    connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>;
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void, id: string, previousValue: any) => Input<T>;
     stateId: Writable<number>;
     newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>;
 };
 export declare function buildWorld(context: Record<string, any>): Writable<World>;
 export declare function buildObservableWorld(): {
-    connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>;
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void, id: string, previousValue: T) => Input<T>;
     newOutput: <T_1>(id: string, name: string, state: Writable<number>, previousValue: T_1) => Output<T_1>;
 };
 export declare function cachedInput<T>(nextParan: (x: T) => void, id?: string): Input<T>;

package/package/components/apps/rx.js

@@ -33,7 +33,7 @@ export function buildWorld(context) {
 }
 export function buildObservableWorld() {
     const observables = {};
-    function connect(inputSpec, next, id) {
+    function connect(inputSpec, next, id, previousValue) {
         if (inputSpec.type === 'static') {
             return {
                 id,
@@ -61,8 +61,7 @@ export function buildObservableWorld() {
                     next: () => { }
                 };
             }
-            obs.subscribe(input);
-            input.next(obs.peak());
+            obs.subscribe(input, previousValue);
             return input;
         }
         else if (inputSpec.type === 'user') {
@@ -104,7 +103,7 @@ export function cachedInput(nextParan, id) {
 export function settableOutput(state, previousValue) {
     let value = previousValue;
     const subscribers = [];
-    function subscribe(x) {
+    function subscribe(x, npreviousValue) {
         let currentSubscriber = subscribers.findIndex((y) => y === x || (y.id && y.id === x.id));
         if (currentSubscriber == -1) {
             subscribers.push(x);
@@ -113,7 +112,7 @@ export function settableOutput(state, previousValue) {
             subscribers[currentSubscriber] = x;
         }
         // Send the current value to the new subscriber if it already exists
-        if (value !== undefined) {
+        if (value !== undefined && !deepEqual(value, npreviousValue)) {
             x.next(value);
         }
     }

package/package/components/apps/svelte-select/lib/ChevronIcon.svelte

@@ -0,0 +1,17 @@
+<svg width="100%" height="100%" viewBox="0 0 20 20" focusable="false" aria-hidden="true">
+	<path
+		fill="currentColor"
+		d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747
+          3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0
+          1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502
+          0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0
+          0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+	/>
+</svg>
+
+<style>
+	svg {
+		width: var(--chevron-icon-width, 20px);
+		height: var(--chevron-icon-width, 20px);
+		color: var(--chevron-icon-colour, currentColor);
+	}</style>

package/package/components/apps/svelte-select/lib/ChevronIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ChevronIconProps */
+/** @typedef {typeof __propDef.events}  ChevronIconEvents */
+/** @typedef {typeof __propDef.slots}  ChevronIconSlots */
+export default class ChevronIcon extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ChevronIconProps = typeof __propDef.props;
+export type ChevronIconEvents = typeof __propDef.events;
+export type ChevronIconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/apps/svelte-select/lib/ClearIcon.svelte

@@ -0,0 +1,21 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="-2 -2 50 50"
+	focusable="false"
+	aria-hidden="true"
+	role="presentation"
+>
+	<path
+		fill="currentColor"
+		d="M34.923,37.251L24,26.328L13.077,37.251L9.436,33.61l10.923-10.923L9.436,11.765l3.641-3.641L24,19.047L34.923,8.124
+    l3.641,3.641L27.641,22.688L38.564,33.61L34.923,37.251z"
+	/>
+</svg>
+
+<style>
+	svg {
+		width: var(--clear-icon-width, 20px);
+		height: var(--clear-icon-width, 20px);
+		color: var(--clear-icon-color, currentColor);
+	}</style>

package/package/components/apps/svelte-select/lib/ClearIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ClearIconProps */
+/** @typedef {typeof __propDef.events}  ClearIconEvents */
+/** @typedef {typeof __propDef.slots}  ClearIconSlots */
+export default class ClearIcon extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ClearIconProps = typeof __propDef.props;
+export type ClearIconEvents = typeof __propDef.events;
+export type ClearIconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/apps/svelte-select/lib/ConditionalPortal.svelte

@@ -0,0 +1,12 @@
+<script>import { getContext } from 'svelte';
+import Portal from 'svelte-portal';
+export let condition = false;
+const { mode } = getContext('AppViewerContext');
+$: target = $mode === 'preview' ? '#app-editor-select' : 'body';
+</script>
+
+{#if condition}
+	<Portal {target}><slot /></Portal>
+{:else}
+	<slot />
+{/if}

package/package/components/apps/svelte-select/lib/ConditionalPortal.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        condition?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ConditionalPortalProps = typeof __propDef.props;
+export type ConditionalPortalEvents = typeof __propDef.events;
+export type ConditionalPortalSlots = typeof __propDef.slots;
+export default class ConditionalPortal extends SvelteComponentTyped<ConditionalPortalProps, ConditionalPortalEvents, ConditionalPortalSlots> {
+}
+export {};

package/package/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte

@@ -0,0 +1,9 @@
+<script>import Portal from 'svelte-portal';
+export let condition = false;
+</script>
+
+{#if condition}
+	<Portal><slot /></Portal>
+{:else}
+	<slot />
+{/if}

package/package/components/apps/svelte-select/lib/ConditionalPortalGlobal.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        condition?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ConditionalPortalGlobalProps = typeof __propDef.props;
+export type ConditionalPortalGlobalEvents = typeof __propDef.events;
+export type ConditionalPortalGlobalSlots = typeof __propDef.slots;
+export default class ConditionalPortalGlobal extends SvelteComponentTyped<ConditionalPortalGlobalProps, ConditionalPortalGlobalEvents, ConditionalPortalGlobalSlots> {
+}
+export {};