@flowgram.ai/form-materials 0.4.2 → 0.4.3

package/dist/index.d.mts

@@ -183,7 +183,7 @@ interface IFlowValueExtra {
 type FlowValueType = 'constant' | 'ref' | 'expression' | 'template';
 interface IFlowConstantValue {
     type: 'constant';
-    content?: string | number | boolean;
+    content?: any;
     schema?: IJsonSchema;
     extra?: IFlowValueExtra;
 }
@@ -327,7 +327,7 @@ declare function PromptEditorWithVariables(props: PromptEditorPropsType): React$
  */
 
 interface PropsType$7 extends PromptEditorPropsType {
-    inputsValues: Record<string, IFlowValue>;
+    inputsValues: any;
 }
 declare function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsType$7): React$1.JSX.Element;
 
@@ -866,4 +866,26 @@ declare function validateFlowValue(value: IFlowValue | undefined, ctx: Context):
     message: string;
 } | undefined;
 
-export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type FlowValueType, FlowValueUtils, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, type TypeSelectorProps, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+interface ListItem<ValueType> {
+    id: string;
+    key?: string;
+    value?: ValueType;
+}
+type ObjectType<ValueType> = Record<string, ValueType | undefined>;
+declare function useObjectList<ValueType>({ value, onChange, sortIndexKey, }: {
+    value?: ObjectType<ValueType>;
+    onChange: (value?: ObjectType<ValueType>) => void;
+    sortIndexKey?: string | ((item: ValueType | undefined) => string);
+}): {
+    list: ListItem<ValueType>[];
+    add: (defaultValue?: ValueType) => void;
+    updateKey: (itemId: string, key: string) => void;
+    updateValue: (itemId: string, value: ValueType) => void;
+    remove: (itemId: string) => void;
+};
+
+export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type FlowValueType, FlowValueUtils, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, type TypeSelectorProps, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };

package/dist/index.d.ts

@@ -183,7 +183,7 @@ interface IFlowValueExtra {
 type FlowValueType = 'constant' | 'ref' | 'expression' | 'template';
 interface IFlowConstantValue {
     type: 'constant';
-    content?: string | number | boolean;
+    content?: any;
     schema?: IJsonSchema;
     extra?: IFlowValueExtra;
 }
@@ -327,7 +327,7 @@ declare function PromptEditorWithVariables(props: PromptEditorPropsType): React$
  */
 
 interface PropsType$7 extends PromptEditorPropsType {
-    inputsValues: Record<string, IFlowValue>;
+    inputsValues: any;
 }
 declare function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsType$7): React$1.JSX.Element;
 
@@ -866,4 +866,26 @@ declare function validateFlowValue(value: IFlowValue | undefined, ctx: Context):
     message: string;
 } | undefined;
 
-export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type FlowValueType, FlowValueUtils, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, type TypeSelectorProps, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+interface ListItem<ValueType> {
+    id: string;
+    key?: string;
+    value?: ValueType;
+}
+type ObjectType<ValueType> = Record<string, ValueType | undefined>;
+declare function useObjectList<ValueType>({ value, onChange, sortIndexKey, }: {
+    value?: ObjectType<ValueType>;
+    onChange: (value?: ObjectType<ValueType>) => void;
+    sortIndexKey?: string | ((item: ValueType | undefined) => string);
+}): {
+    list: ListItem<ValueType>[];
+    add: (defaultValue?: ValueType) => void;
+    updateKey: (itemId: string, key: string) => void;
+    updateValue: (itemId: string, value: ValueType) => void;
+    remove: (itemId: string) => void;
+};
+
+export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type FlowValueType, FlowValueUtils, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, type TypeSelectorProps, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };

package/dist/index.js

@@ -82,6 +82,7 @@ __export(src_exports, {
   provideBatchOutputsEffect: () => provideBatchOutputsEffect,
   provideJsonSchemaOutputs: () => provideJsonSchemaOutputs,
   syncVariableTitle: () => syncVariableTitle,
+  useObjectList: () => useObjectList,
   useTypeManager: () => useTypeManager,
   useVariableTree: () => useVariableTree,
   validateFlowValue: () => validateFlowValue,
@@ -274,13 +275,13 @@ var FlowValueUtils;
     return;
   }
   FlowValueUtils2.traverse = traverse;
-  function getTemplateKeyPaths2(value) {
-    const keyPathReg = /{{(.*?)}}/g;
+  function getTemplateKeyPaths(value) {
+    const keyPathReg = /\{\{([^\}\{]+)\}\}/g;
     return (0, import_lodash2.uniq)(value.content?.match(keyPathReg) || []).map(
       (_keyPath) => _keyPath.slice(2, -2).split(".")
     );
   }
-  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths2;
+  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths;
   function inferConstantJsonSchema(value) {
     if (value?.schema) {
       return value.schema;
@@ -1128,12 +1129,24 @@ function TypeSelector(props) {
     }),
     []
   );
+  const isDisabled = readonly || disabled;
   return /* @__PURE__ */ import_react14.default.createElement(
     import_semi_ui8.Cascader,
     {
-      disabled: readonly || disabled,
+      disabled: isDisabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ import_react14.default.createElement(import_semi_ui8.IconButton, { size: "small", style, disabled: readonly || disabled, icon }),
+      triggerRender: () => /* @__PURE__ */ import_react14.default.createElement(
+        import_semi_ui8.IconButton,
+        {
+          size: "small",
+          style: {
+            ...isDisabled ? { pointerEvents: "none" } : {},
+            ...style || {}
+          },
+          disabled: isDisabled,
+          icon
+        }
+      ),
       treeData: options,
       value: selectValue,
       leafOnly: true,
@@ -1720,6 +1733,11 @@ function useIncludeSchema(schemaFromProps) {
 }
 
 // src/components/dynamic-value-input/index.tsx
+var DEFAULT_VALUE = {
+  type: "constant",
+  content: "",
+  schema: { type: "string" }
+};
 function DynamicValueInput({
   value,
   onChange,
@@ -1731,6 +1749,7 @@ function DynamicValueInput({
   const refVariable = useRefVariable(value);
   const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
   const includeSchema = useIncludeSchema(schemaFromProps);
+  const typeManager = (0, import_json_schema7.useTypeManager)();
   const renderTypeSelector = () => {
     if (schemaFromProps) {
       return /* @__PURE__ */ import_react23.default.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
@@ -1745,20 +1764,18 @@ function DynamicValueInput({
         value: selectSchema,
         onChange: (_v) => {
           setSelectSchema(_v || { type: "string" });
-          let content;
+          const schema = _v || { type: "string" };
+          let content = typeManager.getDefaultValue(schema);
           if (_v?.type === "object") {
             content = "{}";
           }
           if (_v?.type === "array") {
             content = "[]";
           }
-          if (_v?.type === "boolean") {
-            content = false;
-          }
           onChange({
             type: "constant",
             content,
-            schema: _v || { type: "string" }
+            schema
           });
         },
         readonly
@@ -1772,7 +1789,7 @@ function DynamicValueInput({
         {
           style: { width: "100%" },
           value: value?.content,
-          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : DEFAULT_VALUE),
           includeSchema,
           readonly
         }
@@ -1790,7 +1807,7 @@ function DynamicValueInput({
           InjectVariableSelector,
           {
             style: { width: "100%" },
-            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : DEFAULT_VALUE),
             includeSchema,
             readonly
           }
@@ -2431,8 +2448,16 @@ function VariableTree() {
     if (!range) {
       return;
     }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
     editor.replaceText({
-      ...range,
+      from,
+      to,
       text: "{{" + variablePath + "}}"
     });
     setVisible(false);
@@ -2594,7 +2619,7 @@ function VariableTagInject() {
   const scope = (0, import_editor23.useCurrentScope)();
   (0, import_react39.useLayoutEffect)(() => {
     const atMatcher = new import_view4.MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) => import_view4.Decoration.replace({
         widget: new VariableTagWidget({
           keyPath: match[1]?.split(".") ?? [],
@@ -2682,20 +2707,32 @@ function InputsPicker({
       children
     };
   };
-  const treeData = (0, import_react42.useMemo)(
-    () => Object.entries(inputsValues).map(([key, value]) => {
-      if (value?.type === "ref") {
+  const getTreeData = (value, keyPath) => {
+    const currKey = keyPath.join(".");
+    if (FlowValueUtils.isFlowValue(value)) {
+      if (FlowValueUtils.isRef(value)) {
         const variable = available.getByKeyPath(value.content || []);
         if (variable) {
-          return renderVariable(variable, [key]);
+          return renderVariable(variable, keyPath);
         }
       }
       return {
-        key,
-        value: key,
-        label: key
+        key: currKey,
+        value: currKey,
+        label: (0, import_lodash6.last)(keyPath)
       };
-    }),
+    }
+    if ((0, import_lodash6.isPlainObject)(value)) {
+      return {
+        key: currKey,
+        value: currKey,
+        label: (0, import_lodash6.last)(keyPath),
+        children: Object.entries(value).map(([key, value2]) => getTreeData(value2, [...keyPath, key])).filter(Boolean)
+      };
+    }
+  };
+  const treeData = (0, import_react42.useMemo)(
+    () => Object.entries(inputsValues).map(([key, value]) => getTreeData(value, [key])).filter(Boolean),
     []
   );
   return /* @__PURE__ */ import_react42.default.createElement(import_semi_ui18.Tree, { treeData, onSelect: (v) => onSelect(v) });
@@ -2712,6 +2749,13 @@ function InputsTree({ inputsValues }) {
     if (!range) {
       return;
     }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
     editor.replaceText({
       ...range,
       text: "{{" + variablePath + "}}"
@@ -2936,7 +2980,7 @@ function VariableTagInject2() {
   const scope = (0, import_editor25.useCurrentScope)();
   (0, import_react48.useLayoutEffect)(() => {
     const atMatcher = new import_view5.MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) => import_view5.Decoration.replace({
         widget: new VariableTagWidget2({
           keyPath: match[1]?.split(".") ?? [],
@@ -3083,7 +3127,20 @@ function InputsValues({
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ import_react51.default.createElement(import_semi_ui23.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react51.default.createElement(import_semi_icons9.IconPlus, null), size: "small", onClick: () => add() }, import_editor26.I18n.t("Add")));
+  )))), /* @__PURE__ */ import_react51.default.createElement(
+    import_semi_ui23.Button,
+    {
+      disabled: readonly,
+      icon: /* @__PURE__ */ import_react51.default.createElement(import_semi_icons9.IconPlus, null),
+      size: "small",
+      onClick: () => add({
+        type: "constant",
+        content: "",
+        schema: { type: "string" }
+      })
+    },
+    import_editor26.I18n.t("Add")
+  ));
 }
 
 // src/components/display-schema-tree/index.tsx
@@ -3712,7 +3769,11 @@ function InputValueRow(props) {
       theme: "borderless",
       icon: /* @__PURE__ */ import_react62.default.createElement(IconAddChildren2, null),
       onClick: () => {
-        add();
+        add({
+          type: "constant",
+          content: "",
+          schema: { type: "string" }
+        });
         setCollapse(true);
       }
     }
@@ -3777,7 +3838,13 @@ function InputsValuesTree(props) {
       disabled: readonly,
       icon: /* @__PURE__ */ import_react63.default.createElement(import_semi_icons14.IconPlus, null),
       size: "small",
-      onClick: add
+      onClick: () => {
+        add({
+          type: "constant",
+          content: "",
+          schema: { type: "string" }
+        });
+      }
     },
     import_editor32.I18n.t("Add")
   ));
@@ -4145,7 +4212,7 @@ function validateFlowValue(value, ctx) {
     }
   }
   if (value?.type === "template") {
-    const allRefs = getTemplateKeyPaths(value);
+    const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
     for (const ref of allRefs) {
       const variable = (0, import_editor43.getNodeScope)(node).available.getByKeyPath(ref);
       if (!variable) {
@@ -4158,12 +4225,6 @@ function validateFlowValue(value, ctx) {
   }
   return void 0;
 }
-function getTemplateKeyPaths(value) {
-  const keyPathReg = /{{(.*?)}}/g;
-  return (0, import_lodash13.uniq)(value.content?.match(keyPathReg) || []).map(
-    (_keyPath) => _keyPath.slice(2, -2).split(".")
-  );
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AssignRow,
@@ -4218,6 +4279,7 @@ function getTemplateKeyPaths(value) {
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
+  useObjectList,
   useTypeManager,
   useVariableTree,
   validateFlowValue,