@flowgram.ai/form-materials 0.5.5 → 0.5.7

package/dist/types/components/condition-context/hooks/use-condition.d.ts

@@ -5,9 +5,24 @@
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IConditionRule, ConditionOpConfigs } from '../types';
 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?: {
@@ -15,7 +30,7 @@ interface HooksParams {
         rules?: Record<string, IConditionRule>;
     };
 }
-export declare function useCondition({ leftSchema, operator, ruleConfig }: HooksParams): {
+export declare function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfig, }: HooksParams): {
     rule: IConditionRule | undefined;
     opConfig: import("..").ConditionOpConfig;
     opOptionList: {

package/dist/types/components/condition-row/index.d.ts

@@ -5,15 +5,19 @@
 import React from 'react';
 import { IConditionRule, ConditionOpConfigs } from '../condition-context';
 import { ConditionRowValueType } from './types';
+import './styles.css';
 interface PropTypes {
     value?: ConditionRowValueType;
     onChange: (value?: ConditionRowValueType) => void;
     style?: React.CSSProperties;
     readonly?: boolean;
+    /**
+     * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+     */
     ruleConfig?: {
         ops?: ConditionOpConfigs;
         rules?: Record<string, IConditionRule>;
     };
 }
-export declare function ConditionRow({ style, value, onChange, readonly, ruleConfig, }: PropTypes): React.JSX.Element;
+export declare function ConditionRow({ style, value, onChange, readonly, ruleConfig }: PropTypes): React.JSX.Element;
 export { type ConditionRowValueType };

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

@@ -2,4 +2,5 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
+import '../styles.css';
 export declare function VariableTagInject(): null;

package/dist/types/components/db-condition-row/index.d.ts

@@ -5,12 +5,16 @@
 import React from 'react';
 import { type ConditionOpConfigs, type IConditionRule } from '../condition-context';
 import { DBConditionOptionType, DBConditionRowValueType } from './types';
+import './styles.css';
 interface PropTypes {
     value?: DBConditionRowValueType;
     onChange: (value?: DBConditionRowValueType) => void;
     style?: React.CSSProperties;
     options?: DBConditionOptionType[];
     readonly?: boolean;
+    /**
+     * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+     */
     ruleConfig?: {
         ops?: ConditionOpConfigs;
         rules?: Record<string, IConditionRule>;

package/dist/types/components/db-condition-row/types.d.ts

@@ -6,7 +6,6 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IFlowConstantRefValue } from '../../shared';
 export interface DBConditionRowValueType {
     left?: string;
-    schema?: IJsonSchema;
     operator?: string;
     right?: IFlowConstantRefValue;
 }

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

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { IInputsValues } from '../../shared/flow-value';
+import './styles.css';
 interface PropsType {
     value?: IInputsValues;
     showIconInTree?: boolean;

package/dist/types/components/display-outputs/index.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
+import './styles.css';
 interface PropsType {
     value?: IJsonSchema;
     showIconInTree?: boolean;

package/dist/types/components/display-schema-tag/index.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
+import './styles.css';
 interface PropsType {
     title?: JSX.Element | string;
     value?: IJsonSchema;

package/dist/types/components/display-schema-tree/index.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { type IJsonSchema, type JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
+import './styles.css';
 interface PropsType {
     value?: IJsonSchema;
     parentKey?: string;

package/dist/types/components/dynamic-value-input/index.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IFlowConstantRefValue } from '../../shared';
 import { ConstantInputStrategy } from '../constant-input';
+import './styles.css';
 interface PropsType {
     value?: IFlowConstantRefValue;
     onChange: (value?: IFlowConstantRefValue) => void;

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

@@ -4,4 +4,5 @@
  */
 import React from 'react';
 import { PropsType } from './types';
+import './styles.css';
 export declare function InputsValues({ value, onChange, style, readonly, constantProps, schema, hasError, }: PropsType): React.JSX.Element;

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

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+export declare const IconAddChildren: () => React.JSX.Element;

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

@@ -4,4 +4,5 @@
  */
 import React from 'react';
 import { PropsType } from './types';
+import './styles.css';
 export declare function InputsValuesTree(props: PropsType): React.JSX.Element;

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

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { PropsType } from './types';
+import './styles.css';
 export declare function InputValueRow(props: {
     keyName?: string;
     value?: any;

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

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+export declare const IconAddChildren: () => React.JSX.Element;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "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.5",
-    "@flowgram.ai/coze-editor": "0.5.5",
-    "@flowgram.ai/json-schema": "0.5.5"
+    "@flowgram.ai/json-schema": "0.5.7",
+    "@flowgram.ai/editor": "0.5.7",
+    "@flowgram.ai/coze-editor": "0.5.7"
   },
   "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/ts-config": "0.5.5",
-    "@flowgram.ai/eslint-config": "0.5.5"
+    "@flowgram.ai/eslint-config": "0.5.7",
+    "@flowgram.ai/ts-config": "0.5.7"
   },
   "peerDependencies": {
     "react": ">=16.8",
-    "react-dom": ">=16.8",
-    "styled-components": ">=5"
+    "react-dom": ">=16.8"
   },
   "publishConfig": {
     "access": "public",

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

@@ -30,7 +30,10 @@ export function BlurInput(props: InputProps) {
       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-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,16 @@ 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?.type !== targetSchema?.type) {
+      onClearRight?.();
+    }
+    prevTargetSchemaRef.current = targetSchema;
+  }, [targetSchema, onClearRight]);
+
   // get current operator config
   const opConfig = useMemo(() => allOps[operator || ''], [operator, allOps]);