@flowgram.ai/form-materials 0.1.0-alpha.13 → 0.1.0-alpha.15

package/src/components/prompt-editor-with-variables/index.tsx

@@ -3,18 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import { lazySuspense } from '@/shared';
 
-import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+export const PromptEditorWithVariables = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditorWithVariables }))
+);
 
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
-
-export function PromptEditorWithVariables(props: PromptEditorPropsType) {
-  return (
-    <PromptEditor {...props}>
-      <VariableTree />
-      <VariableTagInject />
-    </PromptEditor>
-  );
-}
+export type { PromptEditorWithVariablesProps } from './editor';

package/src/components/type-selector/index.tsx

@@ -86,12 +86,22 @@ export function TypeSelector(props: TypeSelectorProps) {
     []
   );
 
+  const isDisabled = readonly || disabled;
+
   return (
     <Cascader
-      disabled={readonly || disabled}
+      disabled={isDisabled}
       size="small"
       triggerRender={() => (
-        <IconButton size="small" style={style} disabled={readonly || disabled} icon={icon} />
+        <IconButton
+          size="small"
+          style={{
+            ...(isDisabled ? { pointerEvents: 'none' } : {}),
+            ...(style || {}),
+          }}
+          disabled={isDisabled}
+          icon={icon}
+        />
       )}
       treeData={options}
       value={selectValue}

package/src/components/variable-selector/context.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { createContext, useContext, useMemo } from 'react';
+
+import { BaseVariableField } from '@flowgram.ai/editor';
+
+export const VariableSelectorContext = createContext<{
+  skipVariable?: (variable?: BaseVariableField) => boolean;
+}>({});
+
+export const useVariableSelectorContext = () => useContext(VariableSelectorContext);
+
+export const VariableSelectorProvider = ({
+  children,
+  skipVariable,
+}: {
+  skipVariable?: (variable?: BaseVariableField) => boolean;
+  children: React.ReactNode;
+}) => {
+  const context = useMemo(() => ({ skipVariable }), [skipVariable]);
+
+  return (
+    <VariableSelectorContext.Provider value={context}>{children}</VariableSelectorContext.Provider>
+  );
+};

package/src/components/variable-selector/index.tsx

@@ -16,6 +16,7 @@ import { createInjectMaterial } from '@/shared';
 
 import { useVariableTree } from './use-variable-tree';
 import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
+import { useVariableSelectorContext } from './context';
 
 export interface VariableSelectorProps {
   value?: string[];
@@ -45,7 +46,13 @@ export const VariableSelector = ({
   hasError,
   triggerRender,
 }: VariableSelectorProps) => {
-  const treeData = useVariableTree({ includeSchema, excludeSchema });
+  const { skipVariable } = useVariableSelectorContext();
+
+  const treeData = useVariableTree({
+    includeSchema,
+    excludeSchema,
+    skipVariable,
+  });
 
   const treeValue = useMemo(() => {
     if (typeof value === 'string') {
@@ -139,3 +146,5 @@ export const VariableSelector = ({
 
 VariableSelector.renderKey = 'variable-selector-render-key';
 export const InjectVariableSelector = createInjectMaterial(VariableSelector);
+
+export { VariableSelectorProvider } from './context';

package/src/components/variable-selector/use-variable-tree.tsx

@@ -21,9 +21,9 @@ type VariableField = BaseVariableField<{
 export function useVariableTree(params: {
   includeSchema?: IJsonSchema | IJsonSchema[];
   excludeSchema?: IJsonSchema | IJsonSchema[];
-  customSkip?: (variable: VariableField) => boolean;
+  skipVariable?: (variable: VariableField) => boolean;
 }): TreeNodeData[] {
-  const { includeSchema, excludeSchema, customSkip } = params;
+  const { includeSchema, excludeSchema, skipVariable } = params;
 
   const typeManager = useTypeManager();
   const variables = useAvailableVariables();
@@ -69,7 +69,7 @@ export function useVariableTree(params: {
     const isSchemaExclude = excludeSchema
       ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema)
       : false;
-    const isCustomSkip = customSkip ? customSkip(variable) : false;
+    const isCustomSkip = skipVariable ? skipVariable(variable) : false;
 
     // disabled in meta when created
     const isMetaDisabled = variable.meta?.disabled;

package/src/effects/auto-rename-ref/index.ts

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isArray, isObject, uniq } from 'lodash';
 import {
   DataEvent,
   Effect,
@@ -11,7 +10,8 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
+import { IFlowRefValue, IFlowTemplateValue } from '@/shared';
+import { FlowValueUtils } from '@/shared';
 
 /**
  * Auto rename ref when form item's key is renamed
@@ -52,7 +52,7 @@ export const autoRenameRefEffect: EffectOptions[] = [
             }
           } else if (_v.type === 'template') {
             // template auto rename
-            const templateKeyPaths = getTemplateKeyPaths(_v);
+            const templateKeyPaths = FlowValueUtils.getTemplateKeyPaths(_v);
             let hasMatch = false;
 
             templateKeyPaths.forEach((_keyPath) => {
@@ -93,34 +93,6 @@ function isKeyPathMatch(keyPath: string[] = [], targetKeyPath: string[]) {
   return targetKeyPath.every((_key, index) => _key === keyPath[index]);
 }
 
-/**
- * get template key paths
- * @param value
- * @returns
- */
-function getTemplateKeyPaths(value: IFlowTemplateValue) {
-  // find all keyPath wrapped in {{}}
-  const keyPathReg = /{{(.*?)}}/g;
-  return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
-    _keyPath.slice(2, -2).split('.')
-  );
-}
-
-/**
- * If value is ref
- * @param value
- * @returns
- */
-function isRef(value: any): value is IFlowRefValue {
-  return (
-    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
-  );
-}
-
-function isTemplate(value: any): value is IFlowTemplateValue {
-  return value?.type === 'template' && typeof value?.content === 'string';
-}
-
 /**
  * Traverse value to find ref
  * @param value
@@ -132,29 +104,10 @@ function traverseRef(
   value: any,
   cb: (name: string, _v: IFlowRefValue | IFlowTemplateValue) => void
 ) {
-  if (isObject(value)) {
-    if (isRef(value)) {
-      cb(name, value);
-      return;
-    }
-
-    if (isTemplate(value)) {
-      cb(name, value);
-      return;
-    }
-
-    Object.entries(value).forEach(([_key, _value]) => {
-      traverseRef(`${name}.${_key}`, _value, cb);
-    });
-    return;
-  }
-
-  if (isArray(value)) {
-    value.forEach((_value, idx) => {
-      traverseRef(`${name}[${idx}]`, _value, cb);
-    });
-    return;
+  for (const { value: _v, path } of FlowValueUtils.traverse(value, {
+    includeTypes: ['ref', 'template'],
+    path: name,
+  })) {
+    cb(path, _v as IFlowRefValue | IFlowTemplateValue);
   }
-
-  return;
 }

package/src/effects/index.ts

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './provide-batch-input';
-export * from './auto-rename-ref';
-export * from './provide-json-schema-outputs';
-export * from './sync-variable-title';
-export * from './validate-when-variable-sync';
-export * from './listen-ref-value-change';
-export * from './listen-ref-schema-change';
+export { autoRenameRefEffect } from './auto-rename-ref';
+export { listenRefSchemaChange } from './listen-ref-schema-change';
+export { listenRefValueChange } from './listen-ref-value-change';
+export { provideBatchInputEffect } from './provide-batch-input';
+export { provideJsonSchemaOutputs } from './provide-json-schema-outputs';
+export { syncVariableTitle } from './sync-variable-title';
+export { validateWhenVariableSync } from './validate-when-variable-sync';

package/src/effects/listen-ref-schema-change/index.ts

@@ -13,7 +13,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 /**
  * Example:

package/src/effects/listen-ref-value-change/index.ts

@@ -12,7 +12,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 /**
  * Example:

package/src/effects/provide-batch-input/index.ts

@@ -11,7 +11,7 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
   private: true,

package/src/effects/validate-when-variable-sync/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isEmpty } from 'lodash';
+import { isEmpty } from 'lodash-es';
 import {
   DataEvent,
   Effect,

package/src/form-plugins/batch-outputs-plugin/index.ts

@@ -17,7 +17,7 @@ import {
   FlowNodeScopeType,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: Record<string, IFlowRefValue>, ctx) => [

package/src/form-plugins/index.ts

@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './batch-outputs-plugin';
-export * from './infer-inputs-plugin';
-export * from './infer-assign-plugin';
+export { createBatchOutputsFormPlugin, provideBatchOutputsEffect } from './batch-outputs-plugin';
+export { createInferAssignPlugin } from './infer-assign-plugin';
+export { createInferInputsPlugin } from './infer-inputs-plugin';

package/src/form-plugins/infer-assign-plugin/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { set, uniqBy } from 'lodash';
+import { set, uniqBy } from 'lodash-es';
 import { JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import {
   ASTFactory,
@@ -14,7 +14,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowValue } from '@/typings';
+import { IFlowRefValue, IFlowValue } from '@/shared';
 
 type AssignValueType =
   | {

package/src/form-plugins/infer-inputs-plugin/index.ts

@@ -3,16 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { get, set } from 'lodash';
-import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
-import {
-  defineFormPluginCreator,
-  getNodePrivateScope,
-  getNodeScope,
-  Scope,
-} from '@flowgram.ai/editor';
+import { get, set } from 'lodash-es';
+import { defineFormPluginCreator, getNodePrivateScope, getNodeScope } from '@flowgram.ai/editor';
 
-import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 
 interface InputConfig {
   sourceKey: string;
@@ -30,7 +24,7 @@ export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
       set(
         formData,
         targetKey,
-        infer(
+        FlowValueUtils.inferJsonSchema(
           get(formData, sourceKey),
           scope === 'private' ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)
         )
@@ -40,69 +34,3 @@ export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
     });
   },
 });
-
-function isRef(value: any): value is IFlowRefValue {
-  return (
-    value?.type === 'ref' && Array.isArray(value?.content) && typeof value?.content[0] === 'string'
-  );
-}
-
-function isTemplate(value: any): value is IFlowTemplateValue {
-  return value?.type === 'template' && typeof value?.content === 'string';
-}
-
-function isConstant(value: any): value is IFlowConstantValue {
-  return value?.type === 'constant' && typeof value?.content !== 'undefined';
-}
-
-const infer = (values: any, scope: Scope): IJsonSchema | undefined => {
-  if (typeof values === 'object') {
-    if (isConstant(values)) {
-      if (values?.schema) {
-        return values.schema;
-      }
-
-      if (typeof values.content === 'string') {
-        return {
-          type: 'string',
-        };
-      }
-
-      if (typeof values.content === 'number') {
-        return {
-          type: 'number',
-        };
-      }
-
-      if (typeof values.content === 'boolean') {
-        return {
-          type: 'boolean',
-        };
-      }
-    }
-
-    if (isRef(values)) {
-      const variable = scope.available.getByKeyPath(values?.content);
-      const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : undefined;
-
-      return schema;
-    }
-
-    if (isTemplate(values)) {
-      return {
-        type: 'string',
-      };
-    }
-
-    return {
-      type: 'object',
-      properties: Object.keys(values).reduce((acc, key) => {
-        const schema = infer(values[key], scope);
-        if (schema) {
-          acc[key] = schema;
-        }
-        return acc;
-      }, {} as Record<string, IJsonSchema>),
-    };
-  }
-};

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { useObjectList } from './use-object-list';

package/src/hooks/use-object-list/index.tsx

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { nanoid } from 'nanoid';
-import { difference, get, isObject, set } from 'lodash';
+import { difference, get, isObject, set } from 'lodash-es';
 
 function genId() {
   return nanoid();
@@ -27,14 +27,30 @@ export function useObjectList<ValueType>({
 }: {
   value?: ObjectType<ValueType>;
   onChange: (value?: ObjectType<ValueType>) => void;
-  sortIndexKey?: string;
+  sortIndexKey?: string | ((item: ValueType | undefined) => string);
 }) {
   const [list, setList] = useState<ListItem<ValueType>[]>([]);
 
+  const effectVersion = useRef(0);
+  const changeVersion = useRef(0);
+
+  const getSortIndex = (value?: ValueType) => {
+    if (typeof sortIndexKey === 'function') {
+      return get(value, sortIndexKey(value)) || 0;
+    }
+    return get(value, sortIndexKey || '') || 0;
+  };
+
   useEffect(() => {
+    effectVersion.current = effectVersion.current + 1;
+    if (effectVersion.current === changeVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+
     setList((_prevList) => {
       const newKeys = Object.entries(value || {})
-        .sort((a, b) => get(a[1], sortIndexKey || 0) - get(b[1], sortIndexKey || 0))
+        .sort((a, b) => getSortIndex(a[1]) - getSortIndex(b[1]))
         .map(([key]) => key);
 
       const oldKeys = _prevList.map((item) => item.key).filter(Boolean) as string[];
@@ -57,16 +73,19 @@ export function useObjectList<ValueType>({
     });
   }, [value]);
 
-  const add = () => {
+  const add = (defaultValue?: ValueType) => {
     setList((prevList) => [
       ...prevList,
       {
         id: genId(),
+        value: defaultValue,
       },
     ]);
   };
 
   const updateValue = (itemId: string, value: ValueType) => {
+    changeVersion.current = changeVersion.current + 1;
+
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
         if (_item.id === itemId) {
@@ -84,8 +103,13 @@ export function useObjectList<ValueType>({
             .filter((item) => item.key)
             .map((item) => [item.key!, item.value])
             .map((_res, idx) => {
-              if (isObject(_res[1]) && sortIndexKey) {
-                set(_res[1], sortIndexKey, idx);
+              const indexKey =
+                typeof sortIndexKey === 'function'
+                  ? sortIndexKey(_res[1] as ValueType | undefined)
+                  : sortIndexKey;
+
+              if (isObject(_res[1]) && indexKey) {
+                set(_res[1], indexKey, idx);
               }
               return _res;
             })
@@ -97,6 +121,8 @@ export function useObjectList<ValueType>({
   };
 
   const updateKey = (itemId: string, key: string) => {
+    changeVersion.current = changeVersion.current + 1;
+
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
         if (_item.id === itemId) {
@@ -119,6 +145,8 @@ export function useObjectList<ValueType>({
   };
 
   const remove = (itemId: string) => {
+    changeVersion.current = changeVersion.current + 1;
+
     setList((prevList) => {
       const nextList = prevList.filter((_item) => _item.id !== itemId);
 

package/src/index.ts

@@ -3,10 +3,101 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './components';
-export * from './effects';
-export * from './shared';
-export * from './typings';
-export * from './form-plugins';
-export * from './plugins';
-export * from './validate';
+export {
+  AssignRow,
+  AssignRows,
+  BatchOutputs,
+  BatchVariableSelector,
+  BlurInput,
+  CodeEditor,
+  CodeEditorMini,
+  ConditionRow,
+  ConstantInput,
+  DBConditionRow,
+  DisplayFlowValue,
+  DisplayInputsValueAllInTag,
+  DisplayInputsValues,
+  DisplayOutputs,
+  DisplaySchemaTag,
+  DisplaySchemaTree,
+  DynamicValueInput,
+  InjectDynamicValueInput,
+  InjectTypeSelector,
+  InjectVariableSelector,
+  InputsValues,
+  InputsValuesTree,
+  JsonEditorWithVariables,
+  JsonSchemaEditor,
+  PromptEditor,
+  PromptEditorWithInputs,
+  PromptEditorWithVariables,
+  TypeSelector,
+  VariableSelector,
+  VariableSelectorProvider,
+  getTypeSelectValue,
+  parseTypeSelectValue,
+  type AssignValueType,
+  type CodeEditorPropsType,
+  type ConditionRowValueType,
+  type ConstantInputStrategy,
+  type DBConditionOptionType,
+  type DBConditionRowValueType,
+  type JsonEditorWithVariablesProps,
+  type PromptEditorPropsType,
+  type PromptEditorWithInputsProps,
+  type PromptEditorWithVariablesProps,
+  type TypeSelectorProps,
+  type VariableSelectorProps,
+  useVariableTree,
+} from './components';
+export {
+  autoRenameRefEffect,
+  listenRefSchemaChange,
+  listenRefValueChange,
+  provideBatchInputEffect,
+  provideJsonSchemaOutputs,
+  syncVariableTitle,
+  validateWhenVariableSync,
+} from './effects';
+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 { validateFlowValue } from './validate';

package/src/plugins/index.ts

@@ -3,5 +3,14 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './json-schema-preset';
-export * from './disable-declaration-plugin';
+export { createDisableDeclarationPlugin } from './disable-declaration-plugin';
+export {
+  JsonSchemaTypePresetProvider,
+  JsonSchemaUtils,
+  createTypePresetPlugin,
+  type ConstantRendererProps,
+  type IJsonSchema,
+  type JsonSchemaBasicType,
+  type JsonSchemaTypeRegistry,
+  useTypeManager,
+} from './json-schema-preset';

package/src/plugins/json-schema-preset/index.tsx

@@ -33,9 +33,9 @@ export {
   createTypePresetPlugin,
   useTypeManager,
   JsonSchemaTypePresetProvider,
-  IJsonSchema,
   JsonSchemaUtils,
-  JsonSchemaTypeRegistry,
-  ConstantRendererProps,
-  JsonSchemaBasicType,
+  type IJsonSchema,
+  type JsonSchemaTypeRegistry,
+  type ConstantRendererProps,
+  type JsonSchemaBasicType,
 };

package/src/plugins/json-schema-preset/manager.ts

@@ -9,6 +9,7 @@ export interface ConstantRendererProps<Value = any> {
   value?: Value;
   onChange?: (value: Value) => void;
   readonly?: boolean;
+  [key: string]: any;
 }
 export interface JsonSchemaTypeRegistry<Value = any> extends OriginJsonSchemaTypeRegistry {
   /**