@flowgram.ai/form-materials 0.5.1 → 0.5.3

package/dist/cjs/components/inputs-values-tree/index.js

@@ -39,7 +39,7 @@ function InputsValuesTree(props) {
     const { value, onChange, readonly, hasError, constantProps } = props;
     const { list, updateKey, updateValue, remove, add } = (0, external_hooks_index_js_namespaceObject.useObjectList)({
         value,
-        onChange,
+        onChange: (v)=>onChange?.(v),
         sortIndexKey: (value)=>index_js_namespaceObject.FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {

package/dist/cjs/components/json-schema-editor/hooks.js

@@ -39,68 +39,72 @@ function usePropertiesEdit(value, onChange) {
     const drilldownSchema = typeManager.getPropertiesParent(value || {});
     const canAddField = typeManager.canAddField(value || {});
     const [propertyList, setPropertyList] = (0, external_react_namespaceObject.useState)([]);
+    const latestPropertyListRef = (0, external_react_namespaceObject.useRef)(propertyList);
     const effectVersion = (0, external_react_namespaceObject.useRef)(0);
     const changeVersion = (0, external_react_namespaceObject.useRef)(0);
     (0, external_react_namespaceObject.useEffect)(()=>{
         effectVersion.current = effectVersion.current + 1;
         if (effectVersion.current === changeVersion.current) return;
         effectVersion.current = changeVersion.current;
-        setPropertyList((_list)=>{
-            const newNames = Object.entries(drilldownSchema?.properties || {}).sort(([, a], [, b])=>(a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([key])=>key);
-            const oldNames = _list.map((item)=>item.name).filter(Boolean);
-            const addNames = (0, external_lodash_es_namespaceObject.difference)(newNames, oldNames);
-            return _list.filter((item)=>!item.name || newNames.includes(item.name)).map((item)=>({
-                    key: item.key,
-                    name: item.name,
-                    isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
-                    ...drilldownSchema?.properties?.[item.name || ''] || item || {}
-                })).concat(addNames.map((_name)=>({
-                    key: genId(),
-                    name: _name,
-                    isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
-                    ...drilldownSchema?.properties?.[_name] || {}
-                })));
-        });
+        const _list = latestPropertyListRef.current;
+        const newNames = Object.entries(drilldownSchema?.properties || {}).sort(([, a], [, b])=>(a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([key])=>key);
+        const oldNames = _list.map((item)=>item.name).filter(Boolean);
+        const addNames = (0, external_lodash_es_namespaceObject.difference)(newNames, oldNames);
+        const next = _list.filter((item)=>!item.name || newNames.includes(item.name)).map((item)=>({
+                key: item.key,
+                name: item.name,
+                isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+                ...drilldownSchema?.properties?.[item.name || ''] || item || {}
+            })).concat(addNames.map((_name)=>({
+                key: genId(),
+                name: _name,
+                isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+                ...drilldownSchema?.properties?.[_name] || {}
+            })));
+        latestPropertyListRef.current = next;
+        setPropertyList(next);
     }, [
         drilldownSchema
     ]);
     const updatePropertyList = (updater)=>{
         changeVersion.current = changeVersion.current + 1;
-        setPropertyList((_list)=>{
-            const next = updater(_list);
-            const nextProperties = {};
-            const nextRequired = [];
-            for (const _property of next)if (_property.name) {
-                nextProperties[_property.name] = (0, external_lodash_es_namespaceObject.omit)(_property, [
-                    'key',
-                    'name',
-                    'isPropertyRequired'
-                ]);
-                if (_property.isPropertyRequired) nextRequired.push(_property.name);
+        const next = updater(latestPropertyListRef.current);
+        latestPropertyListRef.current = next;
+        setPropertyList(next);
+        const nextProperties = {};
+        const nextRequired = [];
+        for (const _property of next)if (_property.name) {
+            nextProperties[_property.name] = (0, external_lodash_es_namespaceObject.omit)(_property, [
+                'key',
+                'name',
+                'isPropertyRequired'
+            ]);
+            if (_property.isPropertyRequired) nextRequired.push(_property.name);
+        }
+        onChange?.((0, external_immer_namespaceObject.produce)(value || {}, (draft)=>{
+            const propertiesParent = typeManager.getPropertiesParent(draft);
+            if (propertiesParent) {
+                propertiesParent.properties = nextProperties;
+                propertiesParent.required = nextRequired;
+                return;
             }
-            onChange?.((0, external_immer_namespaceObject.produce)(value || {}, (draft)=>{
-                const propertiesParent = typeManager.getPropertiesParent(draft);
-                if (propertiesParent) {
-                    propertiesParent.properties = nextProperties;
-                    propertiesParent.required = nextRequired;
-                    return;
-                }
-            }));
-            return next;
-        });
+        }));
     };
     const onAddProperty = ()=>{
-        setPropertyList((_list)=>[
-                ..._list,
-                {
-                    key: genId(),
-                    name: '',
-                    type: 'string',
-                    extra: {
-                        index: _list.length + 1
-                    }
+        const _list = latestPropertyListRef.current;
+        const next = [
+            ..._list,
+            {
+                key: genId(),
+                name: '',
+                type: 'string',
+                extra: {
+                    index: _list.length + 1
                 }
-            ]);
+            }
+        ];
+        latestPropertyListRef.current = next;
+        setPropertyList(next);
     };
     const onRemoveProperty = (key)=>{
         updatePropertyList((_list)=>_list.filter((_property)=>_property.key !== key));
@@ -109,7 +113,10 @@ function usePropertiesEdit(value, onChange) {
         updatePropertyList((_list)=>_list.map((_property)=>_property.key === key ? nextValue : _property));
     };
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!canAddField) setPropertyList([]);
+        if (!canAddField) {
+            latestPropertyListRef.current = [];
+            setPropertyList([]);
+        }
     }, [
         canAddField
     ]);

package/dist/esm/components/inputs-values-tree/index.mjs

@@ -11,7 +11,7 @@ function InputsValuesTree(props) {
     const { value, onChange, readonly, hasError, constantProps } = props;
     const { list, updateKey, updateValue, remove, add } = useObjectList({
         value,
-        onChange,
+        onChange: (v)=>onChange?.(v),
         sortIndexKey: (value)=>FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''
     });
     return /*#__PURE__*/ jsxs("div", {

package/dist/esm/components/json-schema-editor/hooks.mjs

@@ -11,68 +11,72 @@ function usePropertiesEdit(value, onChange) {
     const drilldownSchema = typeManager.getPropertiesParent(value || {});
     const canAddField = typeManager.canAddField(value || {});
     const [propertyList, setPropertyList] = useState([]);
+    const latestPropertyListRef = useRef(propertyList);
     const effectVersion = useRef(0);
     const changeVersion = useRef(0);
     useEffect(()=>{
         effectVersion.current = effectVersion.current + 1;
         if (effectVersion.current === changeVersion.current) return;
         effectVersion.current = changeVersion.current;
-        setPropertyList((_list)=>{
-            const newNames = Object.entries(drilldownSchema?.properties || {}).sort(([, a], [, b])=>(a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([key])=>key);
-            const oldNames = _list.map((item)=>item.name).filter(Boolean);
-            const addNames = difference(newNames, oldNames);
-            return _list.filter((item)=>!item.name || newNames.includes(item.name)).map((item)=>({
-                    key: item.key,
-                    name: item.name,
-                    isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
-                    ...drilldownSchema?.properties?.[item.name || ''] || item || {}
-                })).concat(addNames.map((_name)=>({
-                    key: genId(),
-                    name: _name,
-                    isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
-                    ...drilldownSchema?.properties?.[_name] || {}
-                })));
-        });
+        const _list = latestPropertyListRef.current;
+        const newNames = Object.entries(drilldownSchema?.properties || {}).sort(([, a], [, b])=>(a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([key])=>key);
+        const oldNames = _list.map((item)=>item.name).filter(Boolean);
+        const addNames = difference(newNames, oldNames);
+        const next = _list.filter((item)=>!item.name || newNames.includes(item.name)).map((item)=>({
+                key: item.key,
+                name: item.name,
+                isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+                ...drilldownSchema?.properties?.[item.name || ''] || item || {}
+            })).concat(addNames.map((_name)=>({
+                key: genId(),
+                name: _name,
+                isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+                ...drilldownSchema?.properties?.[_name] || {}
+            })));
+        latestPropertyListRef.current = next;
+        setPropertyList(next);
     }, [
         drilldownSchema
     ]);
     const updatePropertyList = (updater)=>{
         changeVersion.current = changeVersion.current + 1;
-        setPropertyList((_list)=>{
-            const next = updater(_list);
-            const nextProperties = {};
-            const nextRequired = [];
-            for (const _property of next)if (_property.name) {
-                nextProperties[_property.name] = omit(_property, [
-                    'key',
-                    'name',
-                    'isPropertyRequired'
-                ]);
-                if (_property.isPropertyRequired) nextRequired.push(_property.name);
+        const next = updater(latestPropertyListRef.current);
+        latestPropertyListRef.current = next;
+        setPropertyList(next);
+        const nextProperties = {};
+        const nextRequired = [];
+        for (const _property of next)if (_property.name) {
+            nextProperties[_property.name] = omit(_property, [
+                'key',
+                'name',
+                'isPropertyRequired'
+            ]);
+            if (_property.isPropertyRequired) nextRequired.push(_property.name);
+        }
+        onChange?.(produce(value || {}, (draft)=>{
+            const propertiesParent = typeManager.getPropertiesParent(draft);
+            if (propertiesParent) {
+                propertiesParent.properties = nextProperties;
+                propertiesParent.required = nextRequired;
+                return;
             }
-            onChange?.(produce(value || {}, (draft)=>{
-                const propertiesParent = typeManager.getPropertiesParent(draft);
-                if (propertiesParent) {
-                    propertiesParent.properties = nextProperties;
-                    propertiesParent.required = nextRequired;
-                    return;
-                }
-            }));
-            return next;
-        });
+        }));
     };
     const onAddProperty = ()=>{
-        setPropertyList((_list)=>[
-                ..._list,
-                {
-                    key: genId(),
-                    name: '',
-                    type: 'string',
-                    extra: {
-                        index: _list.length + 1
-                    }
+        const _list = latestPropertyListRef.current;
+        const next = [
+            ..._list,
+            {
+                key: genId(),
+                name: '',
+                type: 'string',
+                extra: {
+                    index: _list.length + 1
                 }
-            ]);
+            }
+        ];
+        latestPropertyListRef.current = next;
+        setPropertyList(next);
     };
     const onRemoveProperty = (key)=>{
         updatePropertyList((_list)=>_list.filter((_property)=>_property.key !== key));
@@ -81,7 +85,10 @@ function usePropertiesEdit(value, onChange) {
         updatePropertyList((_list)=>_list.map((_property)=>_property.key === key ? nextValue : _property));
     };
     useEffect(()=>{
-        if (!canAddField) setPropertyList([]);
+        if (!canAddField) {
+            latestPropertyListRef.current = [];
+            setPropertyList([]);
+        }
     }, [
         canAddField
     ]);

package/dist/types/components/coze-editor-extensions/extensions/inputs-tree.d.ts

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 import React from 'react';
-import { IFlowValue } from '../../../shared';
+import { IInputsValues } from '../../../shared/flow-value/types';
 export declare function InputsPicker({ inputsValues, onSelect, }: {
-    inputsValues: any;
+    inputsValues: IInputsValues;
     onSelect: (v: string) => void;
 }): React.JSX.Element;
 export declare function InputsTree({ inputsValues, triggerCharacters, }: {
-    inputsValues: Record<string, IFlowValue>;
+    inputsValues: IInputsValues;
     triggerCharacters?: string[];
 }): React.JSX.Element;

package/dist/types/components/coze-editor-extensions/index.d.ts

@@ -11,7 +11,7 @@ export declare const EditorVariableTagInject: import("react").FC<unknown> & {
     renderKey?: string;
 };
 export declare const EditorInputsTree: import("react").FC<{
-    inputsValues: Record<string, import("../../shared").IFlowValue>;
+    inputsValues: import("../../shared").IInputsValues;
     triggerCharacters?: string[];
 }> & {
     renderKey?: string;

package/dist/types/components/display-inputs-values/index.d.ts

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 import React from 'react';
+import { IInputsValues } from '../../shared/flow-value';
 interface PropsType {
-    value?: any;
+    value?: IInputsValues;
     showIconInTree?: boolean;
 }
 export declare function DisplayInputsValues({ value, showIconInTree }: PropsType): React.JSX.Element;

package/dist/types/components/inputs-values-tree/types.d.ts

@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { IInputsValues } from '../../shared';
 import { ConstantInputStrategy } from '../constant-input';
 export interface PropsType {
-    value?: any;
-    onChange: (value?: any) => void;
+    value?: IInputsValues;
+    onChange: (value?: IInputsValues) => void;
     readonly?: boolean;
     hasError?: boolean;
     schema?: IJsonSchema;

package/dist/types/components/prompt-editor-with-inputs/editor.d.ts

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 import React from 'react';
+import type { IInputsValues } from '../../shared/flow-value';
 import { PromptEditorPropsType } from '../prompt-editor';
 export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
-    inputsValues: any;
+    inputsValues: IInputsValues;
 }
 export declare function PromptEditorWithInputs({ inputsValues, ...restProps }: PromptEditorWithInputsProps): React.JSX.Element;

package/dist/types/index.d.ts

@@ -7,5 +7,5 @@ export { autoRenameRefEffect, listenRefSchemaChange, listenRefValueChange, provi
 export { createBatchOutputsFormPlugin, createInferAssignPlugin, createInferInputsPlugin, provideBatchOutputsEffect, } from './form-plugins';
 export { useObjectList } from './hooks';
 export { JsonSchemaTypePresetProvider, JsonSchemaUtils, createDisableDeclarationPlugin, createTypePresetPlugin, type ConstantRendererProps, type IJsonSchema, type JsonSchemaBasicType, type JsonSchemaTypeRegistry, useTypeManager, } from './plugins';
-export { FlowValueUtils, createInjectMaterial, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, polyfillCreateRoot, type FlowValueType, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, type IPolyfillRoot, unstableSetCreateRoot, withSuspense, } from './shared';
+export { FlowValueUtils, createInjectMaterial, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, polyfillCreateRoot, type FlowValueType, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, type IInputsValues, type IPolyfillRoot, unstableSetCreateRoot, withSuspense, } from './shared';
 export { validateFlowValue } from './validate';

package/dist/types/shared/flow-value/index.d.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MIT
  */
 export { FlowValueUtils } from './utils';
-export { type IFlowValueExtra, type FlowValueType, type IFlowValue, type IFlowConstantValue, type IFlowRefValue, type IFlowExpressionValue, type IFlowTemplateValue, type IFlowConstantRefValue, } from './types';
+export { type IFlowValueExtra, type FlowValueType, type IFlowValue, type IFlowConstantValue, type IFlowRefValue, type IFlowExpressionValue, type IFlowTemplateValue, type IFlowConstantRefValue, type IInputsValues, } from './types';

package/dist/types/shared/flow-value/types.d.ts

@@ -30,3 +30,6 @@ export interface IFlowTemplateValue {
 }
 export type IFlowValue = IFlowConstantValue | IFlowRefValue | IFlowExpressionValue | IFlowTemplateValue;
 export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;
+export interface IInputsValues {
+    [key: string]: IInputsValues | IFlowValue | undefined;
+}

package/dist/types/shared/index.d.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-export { FlowValueUtils, type FlowValueType, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, } from './flow-value';
+export { FlowValueUtils, type FlowValueType, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, type IInputsValues, } from './flow-value';
 export { formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, } from './format-legacy-refs';
 export { createInjectMaterial } from './inject-material';
 export { lazySuspense, withSuspense } from './lazy-suspense';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -67,9 +67,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.5.1",
-    "@flowgram.ai/json-schema": "0.5.1",
-    "@flowgram.ai/coze-editor": "0.5.1"
+    "@flowgram.ai/editor": "0.5.3",
+    "@flowgram.ai/json-schema": "0.5.3",
+    "@flowgram.ai/coze-editor": "0.5.3"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -88,8 +88,8 @@
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/ts-config": "0.5.1",
-    "@flowgram.ai/eslint-config": "0.5.1"
+    "@flowgram.ai/eslint-config": "0.5.3",
+    "@flowgram.ai/ts-config": "0.5.3"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/coze-editor-extensions/extensions/inputs-tree.tsx

@@ -24,7 +24,8 @@ import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
 import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Tree, Popover } from '@douyinfe/semi-ui';
 
-import { IFlowValue, FlowValueUtils } from '@/shared';
+import { IInputsValues } from '@/shared/flow-value/types';
+import { FlowValueUtils } from '@/shared';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
@@ -32,7 +33,7 @@ export function InputsPicker({
   inputsValues,
   onSelect,
 }: {
-  inputsValues: any;
+  inputsValues: IInputsValues;
   onSelect: (v: string) => void;
 }) {
   const available = useScopeAvailable();
@@ -130,7 +131,7 @@ export function InputsTree({
   inputsValues,
   triggerCharacters = DEFAULT_TRIGGER_CHARACTERS,
 }: {
-  inputsValues: Record<string, IFlowValue>;
+  inputsValues: IInputsValues;
   triggerCharacters?: string[];
 }) {
   const [posKey, setPosKey] = useState('');

package/src/components/display-inputs-values/index.tsx

@@ -8,6 +8,7 @@ import React, { useMemo } from 'react';
 import { isPlainObject } from 'lodash-es';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
+import { IInputsValues } from '@/shared/flow-value';
 import { FlowValueUtils } from '@/shared';
 import { DisplayFlowValue } from '@/components/display-flow-value';
 
@@ -15,7 +16,7 @@ import { DisplayInputsWrapper } from './styles';
 import { DisplaySchemaTag } from '../display-schema-tag';
 
 interface PropsType {
-  value?: any;
+  value?: IInputsValues;
   showIconInTree?: boolean;
 }
 

package/src/components/inputs-values-tree/index.tsx

@@ -9,7 +9,7 @@ import { I18n } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
-import { FlowValueUtils } from '@/shared';
+import { FlowValueUtils, IFlowValue, IInputsValues } from '@/shared';
 import { useObjectList } from '@/hooks';
 
 import { PropsType } from './types';
@@ -19,9 +19,11 @@ import { InputValueRow } from './row';
 export function InputsValuesTree(props: PropsType) {
   const { value, onChange, readonly, hasError, constantProps } = props;
 
-  const { list, updateKey, updateValue, remove, add } = useObjectList({
+  const { list, updateKey, updateValue, remove, add } = useObjectList<
+    IInputsValues | IFlowValue | undefined
+  >({
     value,
-    onChange,
+    onChange: (v) => onChange?.(v as IInputsValues),
     sortIndexKey: (value) => (FlowValueUtils.isFlowValue(value) ? 'extra.index' : ''),
   });
 

package/src/components/inputs-values-tree/types.ts

@@ -5,11 +5,12 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
+import { IInputsValues } from '@/shared';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {
-  value?: any;
-  onChange: (value?: any) => void;
+  value?: IInputsValues;
+  onChange: (value?: IInputsValues) => void;
   readonly?: boolean;
   hasError?: boolean;
   schema?: IJsonSchema;

package/src/components/json-schema-editor/hooks.tsx

@@ -27,6 +27,7 @@ export function usePropertiesEdit(
   const canAddField = typeManager.canAddField(value || {});
 
   const [propertyList, setPropertyList] = useState<PropertyValueType[]>([]);
+  const latestPropertyListRef = useRef(propertyList);
 
   const effectVersion = useRef(0);
   const changeVersion = useRef(0);
@@ -39,77 +40,82 @@ export function usePropertiesEdit(
     effectVersion.current = changeVersion.current;
 
     // If the value is changed, update the property list
-    setPropertyList((_list) => {
-      const newNames = Object.entries(drilldownSchema?.properties || {})
-        .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
-        .map(([key]) => key);
-
-      const oldNames = _list.map((item) => item.name).filter(Boolean) as string[];
-      const addNames = difference(newNames, oldNames);
-
-      return _list
-        .filter((item) => !item.name || newNames.includes(item.name))
-        .map((item) => ({
-          key: item.key,
-          name: item.name,
-          isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
-          ...(drilldownSchema?.properties?.[item.name || ''] || item || {}),
+    const _list = latestPropertyListRef.current;
+
+    const newNames = Object.entries(drilldownSchema?.properties || {})
+      .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+      .map(([key]) => key);
+
+    const oldNames = _list.map((item) => item.name).filter(Boolean) as string[];
+    const addNames = difference(newNames, oldNames);
+
+    const next = _list
+      .filter((item) => !item.name || newNames.includes(item.name))
+      .map((item) => ({
+        key: item.key,
+        name: item.name,
+        isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+        ...(drilldownSchema?.properties?.[item.name || ''] || item || {}),
+      }))
+      .concat(
+        addNames.map((_name) => ({
+          key: genId(),
+          name: _name,
+          isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+          ...(drilldownSchema?.properties?.[_name] || {}),
         }))
-        .concat(
-          addNames.map((_name) => ({
-            key: genId(),
-            name: _name,
-            isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
-            ...(drilldownSchema?.properties?.[_name] || {}),
-          }))
-        );
-    });
+      );
+
+    latestPropertyListRef.current = next;
+
+    setPropertyList(next);
   }, [drilldownSchema]);
 
   const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
     changeVersion.current = changeVersion.current + 1;
 
-    setPropertyList((_list) => {
-      const next = updater(_list);
+    const next = updater(latestPropertyListRef.current);
+    latestPropertyListRef.current = next;
+    setPropertyList(next);
 
-      // onChange to parent
-      const nextProperties: Record<string, IJsonSchema> = {};
-      const nextRequired: string[] = [];
+    // onChange to parent
+    const nextProperties: Record<string, IJsonSchema> = {};
+    const nextRequired: string[] = [];
 
-      for (const _property of next) {
-        if (!_property.name) {
-          continue;
-        }
+    for (const _property of next) {
+      if (!_property.name) {
+        continue;
+      }
 
-        nextProperties[_property.name] = omit(_property, ['key', 'name', 'isPropertyRequired']);
+      nextProperties[_property.name] = omit(_property, ['key', 'name', 'isPropertyRequired']);
 
-        if (_property.isPropertyRequired) {
-          nextRequired.push(_property.name);
-        }
+      if (_property.isPropertyRequired) {
+        nextRequired.push(_property.name);
       }
+    }
 
-      onChange?.(
-        produce(value || {}, (draft) => {
-          const propertiesParent = typeManager.getPropertiesParent(draft);
-
-          if (propertiesParent) {
-            propertiesParent.properties = nextProperties;
-            propertiesParent.required = nextRequired;
-            return;
-          }
-        })
-      );
+    onChange?.(
+      produce(value || {}, (draft) => {
+        const propertiesParent = typeManager.getPropertiesParent(draft);
 
-      return next;
-    });
+        if (propertiesParent) {
+          propertiesParent.properties = nextProperties;
+          propertiesParent.required = nextRequired;
+          return;
+        }
+      })
+    );
   };
 
   const onAddProperty = () => {
-    // set property list only, not trigger updatePropertyList
-    setPropertyList((_list) => [
+    const _list = latestPropertyListRef.current;
+    const next = [
       ..._list,
       { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
-    ]);
+    ];
+
+    latestPropertyListRef.current = next;
+    setPropertyList(next);
   };
 
   const onRemoveProperty = (key: number) => {
@@ -124,6 +130,7 @@ export function usePropertiesEdit(
 
   useEffect(() => {
     if (!canAddField) {
+      latestPropertyListRef.current = [];
       setPropertyList([]);
     }
   }, [canAddField]);

package/src/components/prompt-editor-with-inputs/editor.tsx

@@ -5,11 +5,12 @@
 
 import React from 'react';
 
+import type { IInputsValues } from '@/shared/flow-value';
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
 import { EditorInputsTree } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
-  inputsValues: any;
+  inputsValues: IInputsValues;
 }
 
 export function PromptEditorWithInputs({

package/src/index.ts

@@ -115,6 +115,7 @@ export {
   type IFlowTemplateValue,
   type IFlowValue,
   type IFlowValueExtra,
+  type IInputsValues,
   type IPolyfillRoot,
   unstableSetCreateRoot,
   withSuspense,

package/src/shared/flow-value/index.ts

@@ -13,4 +13,5 @@ export {
   type IFlowExpressionValue,
   type IFlowTemplateValue,
   type IFlowConstantRefValue,
+  type IInputsValues,
 } from './types';

package/src/shared/flow-value/types.ts

@@ -43,3 +43,7 @@ export type IFlowValue =
   | IFlowTemplateValue;
 
 export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;
+
+export interface IInputsValues {
+  [key: string]: IInputsValues | IFlowValue | undefined;
+}

package/src/shared/index.ts

@@ -13,6 +13,7 @@ export {
   type IFlowTemplateValue,
   type IFlowValue,
   type IFlowValueExtra,
+  type IInputsValues,
 } from './flow-value';
 export {
   formatLegacyRefOnInit,