windmill-components 1.532.0 → 1.537.1

package/package/components/ArgInput.svelte

@@ -766,11 +766,21 @@ onDestroy(() => {
 							selected={oneOfSelected}
 							on:selected={({ detail }) => {
 								oneOfSelected = detail
-								const prevValueKeys = Object.keys(
+								const selectedObjProperties =
 									oneOf?.find((o) => o.title == detail)?.properties ?? {}
-								)
+								const newValueKeys = Object.keys(selectedObjProperties)
 								const toKeep = {}
-								for (const key of prevValueKeys) {
+								for (const key of newValueKeys) {
+									// Check if there is a select (enum) in the newly selected oneOf and if the current value is not in the enum, skip it
+									if (
+										!['kind', 'label'].includes(key) &&
+										selectedObjProperties[key]?.enum &&
+										value &&
+										value[key] !== undefined &&
+										!selectedObjProperties[key].enum.includes(value[key])
+									) {
+										continue
+									}
 									toKeep[key] = value[key]
 								}
 								const tagKey = oneOf.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
@@ -811,8 +821,11 @@ onDestroy(() => {
 													}
 												}
 												bind:args={value}
-												dndType={`nested-${title}`}
-												hiddenArgs={['label', 'kind']}
+												hiddenArgs={[
+													oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
+														? 'kind'
+														: 'label'
+												]}
 												on:reorder={(e) => {
 													if (oneOf && oneOf[objIdx]) {
 														const keys = e.detail
@@ -905,20 +918,14 @@ onDestroy(() => {
 							{disablePortal}
 							{disabled}
 							{prettifyHeader}
-							bind:schema={
-								() => ({
-									properties,
-									$schema: '',
-									required: nestedRequired ?? [],
-									type: 'object',
-									order
-								}),
-								(newSchema) => {
-									dispatch('nestedChange')
-								}
-							}
+							schema={{
+								properties,
+								$schema: '',
+								required: nestedRequired ?? [],
+								type: 'object',
+								order
+							}}
 							bind:args={value}
-							dndType={`nested-${title}`}
 							on:reorder={(e) => {
 								const keys = e.detail
 								order = keys

package/package/components/Auth0Setting.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import CollapseLink from './CollapseLink.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -25,8 +26,12 @@ function changeDomain(domain, custom) {
     }
 }
 let enabled = $derived(value != undefined);
-$effect(() => {
-    changeDomain(value?.['domain'], value?.['custom']);
+let lastValues = { domain: undefined, custom: undefined };
+$effect.pre(() => {
+    if (value?.['domain'] != lastValues.domain || value?.['custom'] != lastValues.custom) {
+        lastValues = { domain: value?.['domain'], custom: value?.['custom'] };
+        untrack(() => changeDomain(value?.['domain'], value?.['custom']));
+    }
 });
 </script>
 

package/package/components/Dev.svelte

@@ -27,7 +27,7 @@ import { approximateFindPythonRelativePath, isTypescriptRelativePath, parseTypes
 import Tooltip from './Tooltip.svelte';
 import { workspaceAIClients } from './copilot/lib';
 import { Triggers } from './triggers/triggers.svelte';
-import { TestSteps } from './flows/testSteps.svelte';
+import { StepsInputArgs } from './flows/stepsInputArgs.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
 let flowCopilotContext = {
     shouldUpdatePropertyType: writable({}),
@@ -374,7 +374,7 @@ const previewArgsStore = $state({ val: {} });
 const scriptEditorDrawer = writable(undefined);
 const moving = writable(undefined);
 const history = initHistory(flowStore.val);
-const testSteps = new TestSteps();
+const stepsInputArgs = new StepsInputArgs();
 const selectedIdStore = writable('settings-metadata');
 const triggersCount = writable(undefined);
 const modulesTestStates = new ModulesTestStates((moduleId) => {
@@ -397,7 +397,7 @@ setContext('FlowEditorContext', {
     pathStore: writable(''),
     flowStateStore,
     flowStore,
-    testSteps,
+    stepsInputArgs,
     saveDraft: () => { },
     initialPathStore: writable(''),
     fakeInitialPath: '',
@@ -708,7 +708,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								noEditor
 								on:applyArgs={(ev) => {
 									if (ev.detail.kind === 'preprocessor') {
-										testSteps.setStepArgs('preprocessor', ev.detail.args ?? {})
+										stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
 										$selectedIdStore = 'preprocessor'
 									} else {
 										previewArgsStore.val = ev.detail.args ?? {}
@@ -720,6 +720,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								isOwner={flowPreviewContent?.getIsOwner()}
 								{suspendStatus}
 								onOpenDetails={flowPreviewButtons?.openPreview}
+								previewOpen={flowPreviewButtons?.getPreviewOpen()}
 							/>
 						{/key}
 					</Pane>

package/package/components/DiffDrawer.svelte

@@ -155,7 +155,7 @@ export function setDiff(diff) {
 										<Module.default
 											open={true}
 											automaticLayout
-											class="h-full"
+											className="h-full"
 											defaultLang={lang}
 											defaultModifiedLang={data.current.lang}
 											defaultOriginal={content}
@@ -170,7 +170,7 @@ export function setDiff(diff) {
 										<Module.default
 											open={true}
 											automaticLayout
-											class="h-full"
+											className="h-full"
 											defaultLang="yaml"
 											defaultOriginal={metadata}
 											defaultModified={data.current.metadata}

package/package/components/DiffEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
-import { createEventDispatcher, onMount } from 'svelte';
+import { onMount } from 'svelte';
 import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
@@ -7,20 +7,12 @@ import { editor as meditor } from 'monaco-editor';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import Button from './common/button/Button.svelte';
+import { twMerge } from 'tailwind-merge';
 const SIDE_BY_SIDE_MIN_WIDTH = 700;
-export let automaticLayout = true;
-export let fixedOverflowWidgets = true;
-export let defaultLang = undefined;
-export let defaultModifiedLang = undefined;
-export let defaultOriginal = undefined;
-export let defaultModified = undefined;
-export let readOnly = false;
-export let showButtons = false;
-export let showHistoryButton = true;
-let diffEditor;
-let diffDivEl = null;
-let editorWidth = SIDE_BY_SIDE_MIN_WIDTH;
-export let open = false;
+let { open = false, className = '', automaticLayout = true, fixedOverflowWidgets = true, defaultLang, defaultModifiedLang, defaultOriginal = undefined, defaultModified = undefined, readOnly = false, buttons = [], modifiedModel } = $props();
+let diffEditor = $state(undefined);
+let diffDivEl = $state(null);
+let editorWidth = $state(SIDE_BY_SIDE_MIN_WIDTH);
 async function loadDiffEditor() {
     await initializeVscode();
     if (!diffDivEl) {
@@ -40,23 +32,17 @@ async function loadDiffEditor() {
         lineNumbersMinChars: 2,
         scrollbar: { alwaysConsumeMouseWheel: false }
     });
-    if (defaultOriginal !== undefined &&
-        defaultModified !== undefined &&
-        defaultLang !== undefined) {
+    if (defaultLang !== undefined) {
         setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang);
     }
 }
 export function setupModel(lang, original, modified, modifiedLang) {
+    const o = meditor.createModel(original ?? '', lang);
+    const m = modifiedModel ?? meditor.createModel(modified ?? '', modifiedLang ?? lang);
     diffEditor?.setModel({
-        original: meditor.createModel('', lang),
-        modified: meditor.createModel('', modifiedLang ?? lang)
+        original: o,
+        modified: m
     });
-    if (original) {
-        setOriginal(original);
-    }
-    if (modified) {
-        setModified(modified);
-    }
 }
 export function setOriginal(code) {
     diffEditor?.getModel()?.original?.setValue(code);
@@ -69,6 +55,15 @@ export function setModified(code) {
     diffEditor?.getModel()?.modified?.setValue(code);
     defaultModified = code;
 }
+export function setModifiedModel(model) {
+    const curr = diffEditor?.getModel();
+    if (!curr)
+        return;
+    diffEditor?.setModel({
+        original: curr.original,
+        modified: model
+    });
+}
 export function getModified() {
     return diffEditor?.getModel()?.modified.getValue() ?? '';
 }
@@ -81,8 +76,14 @@ export function hide() {
 function onWidthChange(editorWidth) {
     diffEditor?.updateOptions({ renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH });
 }
-$: onWidthChange(editorWidth);
-$: open && diffDivEl && loadDiffEditor();
+$effect(() => {
+    if (open && diffDivEl) {
+        loadDiffEditor();
+    }
+});
+$effect(() => {
+    onWidthChange(editorWidth);
+});
 onMount(() => {
     if (BROWSER) {
         return () => {
@@ -90,28 +91,24 @@ onMount(() => {
         };
     }
 });
-const dispatch = createEventDispatcher();
 </script>
 
 {#if open}
 	<EditorTheme />
 	<div
 		bind:this={diffDivEl}
-		class="{$$props.class} editor nonmain-editor"
+		class={twMerge('editor nonmain-editor', className)}
 		bind:clientWidth={editorWidth}
 	></div>
-	{#if showButtons}
+	{#if buttons.length > 0}
 		<div
 			class="absolute flex flex-row gap-2 bottom-10 left-1/2 z-10 -translate-x-1/2 rounded-md p-1 w-full justify-center"
 		>
-			{#if showHistoryButton}
-				<Button on:click={() => dispatch('seeHistory')} variant="contained" size="sm"
-					>See changes history</Button
+			{#each buttons as button}
+				<Button on:click={button.onClick} variant="contained" size="sm" color={button.color}
+					>{button.text}</Button
 				>
-			{/if}
-			<Button on:click={() => dispatch('hideDiffMode')} variant="contained" size="sm" color="red"
-				>Quit diff mode</Button
-			>
+			{/each}
 		</div>
 	{/if}
 {/if}

package/package/components/DiffEditor.svelte.d.ts

@@ -1,51 +1,35 @@
 import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
-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;
+import { editor as meditor } from 'monaco-editor';
+import type { ButtonType } from './common';
+export interface ButtonProp {
+    text: string;
+    color?: ButtonType.Color;
+    onClick: () => void;
 }
-declare const DiffEditor: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    automaticLayout?: boolean | undefined;
-    fixedOverflowWidgets?: boolean | undefined;
-    defaultLang?: string | undefined | undefined;
-    defaultModifiedLang?: string | undefined | undefined;
-    defaultOriginal?: string | undefined | undefined;
-    defaultModified?: string | undefined | undefined;
-    readOnly?: boolean | undefined;
-    showButtons?: boolean | undefined;
-    showHistoryButton?: boolean | undefined;
-    open?: boolean | undefined;
-    setupModel?: ((lang: string, original?: string, modified?: string, modifiedLang?: string) => void) | undefined;
-    setOriginal?: ((code: string) => void) | undefined;
-    getOriginal?: (() => string) | undefined;
-    setModified?: ((code: string) => void) | undefined;
-    getModified?: (() => string) | undefined;
-    show?: (() => void) | undefined;
-    hide?: (() => void) | undefined;
-}, {
-    hideDiffMode: CustomEvent<void>;
-    seeHistory: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+interface Props {
+    open?: boolean;
+    className?: string;
+    automaticLayout?: boolean;
+    fixedOverflowWidgets?: boolean;
+    defaultLang?: string;
+    defaultModifiedLang?: string;
+    defaultOriginal?: string;
+    defaultModified?: string;
+    readOnly?: boolean;
+    buttons?: ButtonProp[];
+    modifiedModel?: meditor.ITextModel;
+}
+declare const DiffEditor: import("svelte").Component<Props, {
     setupModel: (lang: string, original?: string, modified?: string, modifiedLang?: string) => void;
     setOriginal: (code: string) => void;
     getOriginal: () => string;
     setModified: (code: string) => void;
+    setModifiedModel: (model: meditor.ITextModel) => void;
     getModified: () => string;
     show: () => void;
     hide: () => void;
-}, string>;
-type DiffEditor = InstanceType<typeof DiffEditor>;
+}, "">;
+type DiffEditor = ReturnType<typeof DiffEditor>;
 export default DiffEditor;

package/package/components/EditableSchemaForm.svelte

@@ -11,13 +11,13 @@ import { twMerge } from 'tailwind-merge';
 import FlowPropertyEditor from './schema/FlowPropertyEditor.svelte';
 import PropertyEditor from './schema/PropertyEditor.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
-import { createEventDispatcher, tick, untrack } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
 import Toggle from './Toggle.svelte';
-import { DynamicSelect, emptyString } from '../utils';
+import { DynamicSelect, emptyString, generateRandomString, readFieldsRecursively } from '../utils';
 import Popover from './meltComponents/Popover.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import { deepEqual } from 'fast-equals';
@@ -27,7 +27,7 @@ import Editor from './Editor.svelte';
 import AddPropertyV2 from './schema/AddPropertyV2.svelte';
 // export let openEditTab: () => void = () => {}
 const dispatch = createEventDispatcher();
-let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab } = $props();
+let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab, schemaFormClassName = undefined, onChange = undefined } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -39,6 +39,12 @@ $effect.pre(() => {
         dynSelectCode = schema?.['x-windmill-dyn-select-code'] || '';
     }
 });
+$effect(() => {
+    if (onChange) {
+        readFieldsRecursively(args);
+        onChange(args ?? {});
+    }
+});
 $effect(() => {
     if (schema && dynSelectCode !== undefined && dynSelectLang !== undefined) {
         if (dynSelectCode && dynSelectCode.trim()) {
@@ -64,9 +70,9 @@ export function setDefaults() {
 let pickForField;
 let itemPicker = $state(undefined);
 let variableEditor = $state(undefined);
-let keys = $state(Array.isArray(schema?.order)
+let keys = $state((Array.isArray(schema?.order)
     ? [...schema.order]
-    : (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {})));
+    : (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {}))).filter((x) => !hiddenArgs?.includes(x)));
 function alignOrderWithProperties(schema) {
     if (schema.order == undefined && !Array.isArray(schema.order)) {
         schema.order = [];
@@ -92,22 +98,16 @@ function alignOrderWithProperties(schema) {
     return hasChanged;
 }
 function onSchemaChange() {
-    let editSchema = false;
     if (alignOrderWithProperties(schema)) {
-        console.log('alignOrderWithProperties', JSON.stringify(schema, null, 2));
-        editSchema = true;
+        // console.log('alignOrderWithProperties', JSON.stringify(schema, null, 2))
     }
-    let lkeys = schema?.order ?? Object.keys(schema?.properties ?? {});
+    let lkeys = (schema?.order ?? Object.keys(schema?.properties ?? {})).filter((x) => !hiddenArgs?.includes(x));
     if (schema?.properties && !deepEqual(lkeys, keys)) {
         keys = [...lkeys];
-        editSchema = true;
         if (opened == undefined) {
             opened = keys[0];
         }
     }
-    if (editSchema) {
-        schema = schema;
-    }
 }
 let opened = $state(untrack(() => keys[0]));
 function computeSelected(property) {
@@ -148,25 +148,25 @@ function renameProperty(oldName, key) {
         el.value = oldName;
     }
     else {
+        let newSchema = $state.snapshot(schema);
         if (args) {
             args[newName] = args[oldName];
             delete args[oldName];
         }
-        schema.properties[newName] = schema.properties[oldName];
-        delete schema.properties[oldName];
-        if (schema.required?.includes(oldName)) {
-            schema.required = schema.required?.map((x) => (x === oldName ? newName : x));
+        newSchema.properties[newName] = newSchema.properties[oldName];
+        delete newSchema.properties[oldName];
+        if (newSchema.required?.includes(oldName)) {
+            newSchema.required = newSchema.required?.map((x) => (x === oldName ? newName : x));
         }
         // Replace the old name with the new name in the order array
-        if (schema.order) {
-            const index = schema.order.indexOf(oldName);
+        if (newSchema.order) {
+            const index = newSchema.order.indexOf(oldName);
             if (index !== -1) {
-                schema.order[index] = newName;
+                newSchema.order[index] = newName;
             }
         }
         opened = newName;
-        schema = $state.snapshot(schema);
-        dispatch('change', schema);
+        schema = newSchema;
         sendUserToast('Argument renamed');
     }
 }
@@ -247,6 +247,7 @@ function updateDynSelectCode(functionName, lang = 'bun') {
     const code = generateFn(functionName);
     dynSelectCode = dynSelectCode ? dynSelectCode.concat(code) : code;
 }
+let dndType = $state(generateRandomString());
 </script>
 
 <div class="w-full h-full">
@@ -283,15 +284,15 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 						class="min-h-0 overflow-y-auto grow rounded-md {runButton ? 'flex flex-col gap-2' : ''}"
 					>
 						<SchemaFormDnd
-							nestedClasses={'flex flex-col gap-1'}
+							{dndType}
+							nestedClasses={'flex flex-col gap-1 ' + (schemaFormClassName ?? '')}
 							bind:schema={
 								() => (previewSchema ? previewSchema : schema),
 								(newSchema) => {
 									schema = newSchema
-									tick().then(() => dispatch('change', schema))
 								}
 							}
-							{dndType}
+							{hiddenArgs}
 							{disableDnd}
 							{onlyMaskPassword}
 							bind:args
@@ -299,11 +300,16 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 								opened = e.detail
 							}}
 							on:reorder={(e) => {
+								let order = e.detail
+								let newProperties = {}
+								for (let key of order) {
+									newProperties[key] = schema.properties[key]
+								}
 								schema = {
 									...schema,
+									properties: newProperties,
 									order: e.detail
 								}
-								tick().then(() => dispatch('change', schema))
 							}}
 							helperScript={{
 								type: 'inline',
@@ -315,9 +321,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 							{diff}
 							on:acceptChange
 							on:rejectChange
-							on:nestedChange={() => {
-								dispatch('change', schema)
-							}}
 							{shouldDispatchChanges}
 							bind:isValid
 							noVariablePicker={noVariablePicker || customUi?.disableVariablePicker === true}
@@ -325,8 +328,8 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 
 						{@render runButton?.()}
 
-						<div class="h-full">
-							{#if dynSelectFunctions.length > 0}
+						{#if dynSelectFunctions.length > 0}
+							<div class="grow">
 								<Section
 									label="Dynamic select functions"
 									collapsable={true}
@@ -373,8 +376,8 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 										{/key}
 									</div>
 								</Section>
-							{/if}
-						</div>
+							</div>
+						{/if}
 					</div>
 				</div>
 			</Pane>
@@ -393,7 +396,7 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 					{#if jsonEnabled && customUi?.jsonOnly != true}
 						<div class="w-full p-3 flex gap-4 justify-end items-center">
 							{#if addPropertyInEditorTab}
-								<AddPropertyV2 bind:schema on:change>
+								<AddPropertyV2 bind:schema>
 									{#snippet trigger()}
 										<Button color="light" size="xs" iconOnly startIcon={{ icon: Plus }} />
 									{/snippet}
@@ -508,7 +511,7 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 										</div>
 										{#if opened === argName}
 											<div class="p-4 border-t">
-												{#if !hiddenArgs.includes(argName) && Object.keys(schema?.properties ?? {}).includes(argName)}
+												{#if Object.keys(schema?.properties ?? {}).includes(argName)}
 													{#if typeof args == 'object' && schema?.properties[argName]}
 														<PropertyEditor
 															bind:description={schema.properties[argName].description}
@@ -529,10 +532,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 															bind:order={schema.properties[argName].order}
 															{isFlowInput}
 															{isAppInput}
-															on:change={() => {
-																schema = $state.snapshot(schema)
-																dispatch('change', schema)
-															}}
 														>
 															{#snippet typeeditor()}
 																{#if isFlowInput || isAppInput}
@@ -621,13 +620,9 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																							type: v
 																						}
 																					}
+																					schema.properties = schema.properties
 																				}
 																			}
-																			on:selected={(e) => {
-																				schema = schema
-																				dispatch('change', schema)
-																				dispatch('schemaChange')
-																			}}
 																		>
 																			{#snippet children({ item })}
 																				{#each typeOptions as x}
@@ -641,6 +636,9 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 
 															{#if isFlowInput || isAppInput}
 																<FlowPropertyEditor
+																	onDrawerClose={() => {
+																		dndType = generateRandomString()
+																	}}
 																	bind:defaultValue={schema.properties[argName].default}
 																	{variableEditor}
 																	{itemPicker}
@@ -671,12 +669,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																				(x) => x !== argName
 																			)
 																		}
-																		dispatch('change', schema)
-																	}}
-																	on:schemaChange={(e) => {
-																		schema = $state.snapshot(schema)
-																		dispatch('change', schema)
-																		dispatch('schemaChange')
 																	}}
 																/>
 															{/if}
@@ -701,7 +693,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 									on:change={() => {
 										try {
 											schema = JSON.parse(schemaString)
-											dispatch('change', schema)
 											error = ''
 										} catch (err) {
 											error = err.message

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -16,7 +16,6 @@ interface Props {
     isAppInput?: boolean;
     displayWebhookWarning?: boolean;
     onlyMaskPassword?: boolean;
-    dndType?: string | undefined;
     editTab: 'inputEditor' | 'history' | 'savedInputs' | 'json' | 'captures' | 'firstStepInputs' | undefined;
     previewSchema?: Record<string, any> | undefined;
     editPanelInitialSize?: number | undefined;
@@ -36,6 +35,8 @@ interface Props {
     addProperty?: import('svelte').Snippet;
     runButton?: import('svelte').Snippet;
     extraTab?: import('svelte').Snippet;
+    schemaFormClassName?: string;
+    onChange?: (args: Record<string, any>) => void;
 }
 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> & {
@@ -53,9 +54,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const EditableSchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     acceptChange: CustomEvent<any>;
     rejectChange: CustomEvent<any>;
-    change: CustomEvent<any>;
     delete: CustomEvent<any>;
-    schemaChange: CustomEvent<any>;
     editPanelSizeChanged: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;