@flowgram.ai/form-materials 0.1.0-alpha.18 → 0.1.0-alpha.20

package/dist/types/components/json-schema-editor/index.d.ts

@@ -5,6 +5,7 @@
 import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { ConfigType } from './types';
+import './styles.css';
 export declare function JsonSchemaEditor(props: {
     value?: IJsonSchema;
     onChange?: (value: IJsonSchema) => void;

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

@@ -6,6 +6,7 @@ import React from 'react';
 import { InferValues } from '@flowgram.ai/coze-editor/react';
 import preset from '@flowgram.ai/coze-editor/preset-prompt';
 import { PropsType } from './types';
+import './styles.css';
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
 export interface PromptEditorPropsType extends PropsType {

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

@@ -2,5 +2,10 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-export declare const PromptEditorWithInputs: import("react").LazyExoticComponent<typeof import("./editor").PromptEditorWithInputs>;
-export type { PromptEditorWithInputsProps } from './editor';
+import React from 'react';
+import type { IInputsValues } from '../../shared/flow-value';
+import { PromptEditorPropsType } from '../prompt-editor';
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+    inputsValues: IInputsValues;
+}
+export declare function PromptEditorWithInputs({ inputsValues, ...restProps }: PromptEditorWithInputsProps): React.JSX.Element;

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

@@ -2,5 +2,8 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-export declare const PromptEditorWithVariables: import("react").LazyExoticComponent<typeof import("./editor").PromptEditorWithVariables>;
-export type { PromptEditorWithVariablesProps } from './editor';
+import React from 'react';
+import { PromptEditorPropsType } from '../prompt-editor';
+export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {
+}
+export declare function PromptEditorWithVariables(props: PromptEditorWithVariablesProps): React.JSX.Element;

package/dist/types/components/variable-selector/context.d.ts

@@ -3,14 +3,27 @@
  * SPDX-License-Identifier: MIT
  */
 import React from 'react';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { BaseVariableField } from '@flowgram.ai/editor';
+type VariableField = BaseVariableField<{
+    icon?: string | JSX.Element;
+    title?: string;
+    disabled?: boolean;
+}>;
 export declare const VariableSelectorContext: React.Context<{
-    skipVariable?: (variable?: BaseVariableField) => boolean;
+    includeSchema?: IJsonSchema | IJsonSchema[];
+    excludeSchema?: IJsonSchema | IJsonSchema[];
+    skipVariable?: (variable: VariableField) => boolean;
 }>;
 export declare const useVariableSelectorContext: () => {
-    skipVariable?: (variable?: BaseVariableField) => boolean;
+    includeSchema?: IJsonSchema | IJsonSchema[];
+    excludeSchema?: IJsonSchema | IJsonSchema[];
+    skipVariable?: (variable: VariableField) => boolean;
 };
-export declare const VariableSelectorProvider: ({ children, skipVariable, }: {
+export declare const VariableSelectorProvider: ({ children, skipVariable, includeSchema, excludeSchema, }: {
     skipVariable?: (variable?: BaseVariableField) => boolean;
+    includeSchema?: IJsonSchema | IJsonSchema[];
+    excludeSchema?: IJsonSchema | IJsonSchema[];
     children: React.ReactNode;
 }) => React.JSX.Element;
+export {};

package/dist/types/components/variable-selector/index.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { type TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { useVariableTree } from './use-variable-tree';
+import './styles.css';
 export interface VariableSelectorProps {
     value?: string[];
     config?: {

package/dist/types/index.d.ts

@@ -2,10 +2,10 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, type AssignValueType, type CodeEditorPropsType, type ConditionOpConfig, type ConditionOpConfigs, type ConditionRowValueType, type ConstantInputStrategy, type DBConditionOptionType, type DBConditionRowValueType, type IConditionRule, type IConditionRuleFactory, type JsonEditorWithVariablesProps, type PromptEditorPropsType, type PromptEditorWithInputsProps, type PromptEditorWithVariablesProps, type SQLEditorWithVariablesProps, type TypeSelectorProps, type VariableSelectorProps, useCondition, useConditionContext, useVariableTree, } from './components';
+export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaCreator, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, type AssignValueType, type CodeEditorPropsType, type ConditionOpConfig, type ConditionOpConfigs, type ConditionRowValueType, type ConstantInputStrategy, type DBConditionOptionType, type DBConditionRowValueType, type IConditionRule, type IConditionRuleFactory, type JsonEditorWithVariablesProps, type JsonSchemaCreatorProps, type PromptEditorPropsType, type PromptEditorWithInputsProps, type PromptEditorWithVariablesProps, type SQLEditorWithVariablesProps, type TypeSelectorProps, type VariableSelectorProps, useCondition, useConditionContext, 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 { 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/plugins/json-schema-preset/create-type-preset-plugin.d.ts

@@ -2,8 +2,12 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
+import { type PluginCreator } from '@flowgram.ai/editor';
 import { JsonSchemaTypeRegistry } from './types';
-export declare const createTypePresetPlugin: import("@flowgram.ai/core").PluginCreator<{
-    types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, "type">[];
+type TypePresetRegistry = Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>;
+interface TypePresetPluginOptions {
+    types?: TypePresetRegistry[];
     unregisterTypes?: string[];
-}>;
+}
+export declare const createTypePresetPlugin: PluginCreator<TypePresetPluginOptions>;
+export {};

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.1.0-alpha.18",
+  "version": "0.1.0-alpha.20",
   "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/json-schema": "0.1.0-alpha.18",
-    "@flowgram.ai/coze-editor": "0.1.0-alpha.18",
-    "@flowgram.ai/editor": "0.1.0-alpha.18"
+    "@flowgram.ai/coze-editor": "0.1.0-alpha.20",
+    "@flowgram.ai/editor": "0.1.0-alpha.20",
+    "@flowgram.ai/json-schema": "0.1.0-alpha.20"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -77,24 +77,21 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/inquirer": "^9.0.9",
-    "@types/styled-components": "^5",
     "eslint": "^8.54.0",
     "react": "^18",
     "react-dom": "^18",
-    "styled-components": "^5",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
     "@rslib/core": "~0.12.4",
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.18",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.18"
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.20",
+    "@flowgram.ai/ts-config": "0.1.0-alpha.20"
   },
   "peerDependencies": {
     "react": ">=16.8",
-    "react-dom": ">=16.8",
-    "styled-components": ">=5"
+    "react-dom": ">=16.8"
   },
   "publishConfig": {
     "access": "public",

package/src/components/assign-rows/index.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { FieldArray, FieldArrayRenderProps } from '@flowgram.ai/editor';
+import { FieldArray } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
@@ -14,15 +14,16 @@ import { AssignRow, AssignValueType } from '@/components/assign-row';
 interface AssignRowsProps {
   name: string;
   readonly?: boolean;
+  defaultValue?: AssignValueType[];
 }
 
 export function AssignRows(props: AssignRowsProps) {
-  const { name, readonly } = props;
+  const { name, readonly, defaultValue } = props;
 
   return (
-    <FieldArray name={name}>
-      {({ field }: FieldArrayRenderProps<AssignValueType | undefined>) => (
-        <>
+    <FieldArray<AssignValueType | undefined> name={name} defaultValue={defaultValue}>
+      {({ field }) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
           {field.map((childField, index) => (
             <AssignRow
               key={childField.key}
@@ -52,7 +53,7 @@ export function AssignRows(props: AssignRowsProps) {
               Declaration
             </Button>
           </div>
-        </>
+        </div>
       )}
     </FieldArray>
   );

package/src/components/batch-outputs/index.tsx

@@ -13,7 +13,7 @@ import { useObjectList } from '@/hooks';
 import { InjectVariableSelector } from '@/components/variable-selector';
 
 import { PropsType } from './types';
-import { UIRow, UIRows } from './styles';
+import './styles.css';
 
 export function BatchOutputs(props: PropsType) {
   const { readonly, style } = props;
@@ -22,9 +22,9 @@ export function BatchOutputs(props: PropsType) {
 
   return (
     <div>
-      <UIRows style={style}>
+      <div className="gedit-m-batch-outputs-rows" style={style}>
         {list.map((item) => (
-          <UIRow key={item.id}>
+          <div className="gedit-m-batch-outputs-row" key={item.id}>
             <Input
               style={{ width: 100 }}
               disabled={readonly}
@@ -44,9 +44,9 @@ export function BatchOutputs(props: PropsType) {
               size="small"
               onClick={() => remove(item.id)}
             />
-          </UIRow>
+          </div>
         ))}
-      </UIRows>
+      </div>
       <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
         {I18n.t('Add')}
       </Button>

package/src/components/batch-outputs/{styles.tsx → styles.css}

@@ -3,17 +3,15 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIRows = styled.div`
+.gedit-m-batch-outputs-rows {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 10px;
-`;
+}
 
-export const UIRow = styled.div`
+.gedit-m-batch-outputs-row {
   display: flex;
   align-items: center;
   gap: 5px;
-`;
+}

package/src/components/blur-input/index.tsx

@@ -13,7 +13,7 @@ import React, { useEffect, useState } from 'react';
 
 import { Input } from '@douyinfe/semi-ui';
 
-type InputProps = React.ComponentPropsWithoutRef<typeof Input>;
+type InputProps = React.ComponentPropsWithRef<typeof Input>;
 
 export function BlurInput(props: InputProps) {
   const [value, setValue] = useState('');
@@ -24,12 +24,16 @@ export function BlurInput(props: InputProps) {
 
   return (
     <Input
+      ref={props.ref}
       {...props}
       value={value}
       onChange={(value) => {
         setValue(value);
       }}
-      onBlur={(e) => props.onChange?.(value, e)}
+      onBlur={(e) => {
+        props.onChange?.(value, e);
+        props.onBlur?.(e);
+      }}
     />
   );
 }

package/src/components/code-editor/editor.tsx

@@ -5,7 +5,6 @@
 
 import React, { useEffect, useRef } from 'react';
 
-import styled, { css } from 'styled-components';
 import {
   ActiveLinePlaceholder,
   createRenderer,
@@ -17,6 +16,8 @@ import { EditorView } from '@codemirror/view';
 
 import { getSuffixByLanguageId } from './utils';
 
+import './styles.css';
+
 const OriginCodeEditor = createRenderer(preset, [
   EditorView.theme({
     '&.cm-focused': {
@@ -25,13 +26,7 @@ const OriginCodeEditor = createRenderer(preset, [
   }),
 ]);
 
-const UIContainer = styled.div<{ $mini?: boolean }>`
-  ${({ $mini }) =>
-    $mini &&
-    css`
-      height: 24px;
-    `}
-`;
+// CSS styles are in styles.css
 
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
@@ -62,18 +57,28 @@ export function BaseCodeEditor({
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
+  const editorValue = String(value || '');
+
   useEffect(() => {
     // listen to value change
-    if (editorRef.current?.getValue() !== value) {
-      editorRef.current?.setValue(String(value || ''));
+    if (editorRef.current?.getValue() !== editorValue) {
+      // apply updates on readonly mode
+      const editorView = editorRef.current?.$view;
+      editorView?.dispatch({
+        changes: {
+          from: 0,
+          to: editorView?.state.doc.length,
+          insert: editorValue,
+        },
+      });
     }
-  }, [value]);
+  }, [editorValue]);
 
   return (
-    <UIContainer $mini={mini}>
+    <div className={`gedit-m-code-editor-container ${mini ? 'mini' : ''}`}>
       <EditorProvider>
         <OriginCodeEditor
-          defaultValue={String(value || '')}
+          defaultValue={editorValue}
           options={{
             uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
             languageId,
@@ -101,6 +106,6 @@ export function BaseCodeEditor({
           {children}
         </OriginCodeEditor>
       </EditorProvider>
-    </UIContainer>
+    </div>
   );
 }

package/src/components/code-editor/styles.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-code-editor-container {
+}
+
+.gedit-m-code-editor-container.mini {
+  height: 24px;
+}

package/src/components/code-editor/theme/dark.ts

@@ -47,7 +47,7 @@ export const darkTheme: Extension = createTheme({
     gutterForeground: colors.foreground,
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#21262D',
+    lineHighlight: 'transparent',
     bracketColors: ['#FBBF24', '#A78BFA', '#7DD3FC'],
     tooltip: {
       backgroundColor: '#21262D',

package/src/components/code-editor/theme/light.ts

@@ -42,7 +42,7 @@ export const lightTheme: Extension = createTheme({
     gutterForeground: colors.foreground,
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: colors.background,
+    lineHighlight: 'transparent',
     bracketColors: ['#F59E0B', '#8B5CF6', '#06B6D4'],
     tooltip: {
       backgroundColor: colors.dropdownBackground,

package/src/components/code-editor-mini/index.tsx

@@ -5,21 +5,14 @@
 
 import React from 'react';
 
-import styled from 'styled-components';
-
 import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
-const UIMini = styled.div`
-  .ͼ1 .cm-content {
-  }
-`;
-
 /**
  * @deprecated use mini in CodeEditorPropsType instead
  */
 export function CodeEditorMini(props: CodeEditorPropsType) {
   return (
-    <UIMini>
+    <div className="gedit-m-code-editor-mini">
       <CodeEditor
         {...props}
         options={{
@@ -29,6 +22,6 @@ export function CodeEditorMini(props: CodeEditorPropsType) {
           ...(props.options || {}),
         }}
       />
-    </UIMini>
+    </div>
   );
 }

package/src/components/condition-context/hooks/use-condition.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
@@ -14,10 +14,28 @@ import { IConditionRule, ConditionOpConfigs } from '../types';
 import { useConditionContext } from '../context';
 
 interface HooksParams {
+  /**
+   * Left schema of condition
+   */
   leftSchema?: IJsonSchema;
+
+  /**
+   * Operator of condition
+   */
   operator?: string;
 
   /**
+   * If op is not in opOptionList, clear it
+   */
+  onClearOp?: () => void;
+
+  /**
+   * If targetSchema updated, clear it
+   */
+  onClearRight?: () => void;
+
+  /**
+   * @deprecated use ConditionProvider instead
    * custom rule config
    */
   ruleConfig?: {
@@ -26,26 +44,32 @@ interface HooksParams {
   };
 }
 
-export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams) {
+export function useCondition({
+  leftSchema,
+  operator,
+  onClearOp,
+  onClearRight,
+  ruleConfig,
+}: HooksParams) {
   const typeManager = useTypeManager();
   const { rules: contextRules, ops: contextOps } = useConditionContext();
 
-  // 合并用户规则和上下文规则
+  // Merge user rules and context rules
   const userRules = useMemo(
     () => ruleConfig?.rules || contextRules || {},
     [contextRules, ruleConfig?.rules]
   );
 
-  // 合并用户操作符和上下文操作符
+  // Merge user operators and context operators
   const allOps = useMemo(() => ruleConfig?.ops || contextOps || {}, [contextOps, ruleConfig?.ops]);
 
-  // 获取类型配置
+  // Get type configuration
   const config = useMemo(
     () => (leftSchema ? typeManager.getTypeBySchema(leftSchema) : undefined),
     [leftSchema, typeManager]
   );
 
-  // 计算规则
+  // Calculate rule
   const rule = useMemo(() => {
     if (!config) {
       return undefined;
@@ -59,7 +83,7 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     return config.conditionRule;
   }, [userRules, leftSchema, config]);
 
-  // 计算操作符选项列表
+  // Calculate operator option list
   const opOptionList = useMemo(
     () =>
       Object.keys(rule || {})
@@ -72,6 +96,16 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     [rule, allOps]
   );
 
+  // When op not in list, clear it
+  useEffect(() => {
+    if (!operator || !rule) {
+      return;
+    }
+    if (!opOptionList.find((item) => item.value === operator)) {
+      onClearOp?.();
+    }
+  }, [operator, opOptionList, onClearOp]);
+
   // get target schema
   const targetSchema = useMemo(() => {
     const targetType: string | IJsonSchema | null = rule?.[operator || ''] || null;
@@ -87,6 +121,20 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     return targetType;
   }, [rule, operator]);
 
+  const prevTargetSchemaRef = useRef<IJsonSchema | undefined>(undefined);
+
+  // When type of target schema updated, clear it
+  useEffect(() => {
+    if (!prevTargetSchemaRef.current) {
+      prevTargetSchemaRef.current = targetSchema;
+      return;
+    }
+    if (prevTargetSchemaRef.current?.type !== targetSchema?.type) {
+      onClearRight?.();
+    }
+    prevTargetSchemaRef.current = targetSchema;
+  }, [targetSchema, onClearRight]);
+
   // get current operator config
   const opConfig = useMemo(() => allOps[operator || ''], [operator, allOps]);