@flowgram.ai/form-materials 0.3.4 → 0.3.5

package/dist/index.d.mts

@@ -30,7 +30,7 @@ declare function useVariableTree(params: {
  * SPDX-License-Identifier: MIT
  */
 
-interface PropTypes$2 {
+interface VariableSelectorProps {
     value?: string[];
     config?: {
         placeholder?: string;
@@ -44,16 +44,19 @@ interface PropTypes$2 {
     style?: React$1.CSSProperties;
     triggerRender?: (props: TriggerRenderProps) => React$1.ReactNode;
 }
-type VariableSelectorProps = PropTypes$2;
 
-declare const VariableSelector: ({ value, config, onChange, style, readonly, includeSchema, excludeSchema, hasError, triggerRender, }: PropTypes$2) => React$1.JSX.Element;
+declare const VariableSelector: {
+    ({ value, config, onChange, style, readonly, includeSchema, excludeSchema, hasError, triggerRender, }: VariableSelectorProps): React$1.JSX.Element;
+    renderKey: string;
+};
+declare const InjectVariableSelector: React$1.FC<VariableSelectorProps>;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
 
-interface PropTypes$1 {
+interface TypeSelectorProps {
     value?: Partial<IJsonSchema>;
     onChange?: (value?: Partial<IJsonSchema>) => void;
     readonly?: boolean;
@@ -65,7 +68,11 @@ interface PropTypes$1 {
 }
 declare const getTypeSelectValue: (value?: Partial<IJsonSchema>) => string[] | undefined;
 declare const parseTypeSelectValue: (value?: string[]) => Partial<IJsonSchema> | undefined;
-declare function TypeSelector(props: PropTypes$1): React$1.JSX.Element;
+declare function TypeSelector(props: TypeSelectorProps): React$1.JSX.Element;
+declare namespace TypeSelector {
+    var renderKey: string;
+}
+declare const InjectTypeSelector: React$1.FC<TypeSelectorProps>;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -214,6 +221,10 @@ interface PropsType$9 {
     };
 }
 declare function DynamicValueInput({ value, onChange, readonly, style, schema: schemaFromProps, constantProps, }: PropsType$9): React$1.JSX.Element;
+declare namespace DynamicValueInput {
+    var renderKey: string;
+}
+declare const InjectDynamicValueInput: React$1.FC<PropsType$9>;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -650,6 +661,53 @@ declare function formatNewRefToLegacyRef(value: NewFlowRefValueSchema): {
     content: string;
 };
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Creates a material component wrapper with dependency injection support
+ *
+ * This Higher-Order Component (HOC) implements a dynamic component replacement mechanism
+ * for material components. It automatically checks if a custom renderer is registered
+ * in the editor context, using the injected component if available, otherwise
+ * falling back to the default component.
+ *
+ * @example
+ * ```tsx
+ * // 1.Create an injectable material component
+ * const InjectVariableSelector = createInjectMaterial(VariableSelector)
+ *
+ * // 2. Register custom components in editor
+ * // Configure in use-editor-props.tsx:
+ * const editorProps = {
+ *   materials: {
+ *     components: {
+ *       [VariableSelector.renderKey]: YourCustomVariableSelector
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @description
+ * Data flow explanation:
+ * - Register components to FlowRendererRegistry in use-editor-props
+ * - InjectMaterial reads renderers from FlowRendererRegistry
+ * - If registered renderer exists and type is REACT, use injected component
+ * - If not exists or type mismatch, fallback to default component
+ *
+ * @param Component - Default React component
+ * @param params - Optional parameters
+ * @param params.renderKey - Custom render key name, highest priority
+ * @returns Wrapper component with dependency injection support
+ */
+declare function createInjectMaterial<Props>(Component: React$1.FC<Props> & {
+    renderKey?: string;
+}, params?: {
+    renderKey?: string;
+}): React$1.FC<Props>;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
@@ -702,4 +760,4 @@ declare function validateFlowValue(value: IFlowValue | undefined, ctx: Context):
     message: string;
 } | undefined;
 
-export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InputsValues, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };
+export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, 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 };

package/dist/index.d.ts

@@ -30,7 +30,7 @@ declare function useVariableTree(params: {
  * SPDX-License-Identifier: MIT
  */
 
-interface PropTypes$2 {
+interface VariableSelectorProps {
     value?: string[];
     config?: {
         placeholder?: string;
@@ -44,16 +44,19 @@ interface PropTypes$2 {
     style?: React$1.CSSProperties;
     triggerRender?: (props: TriggerRenderProps) => React$1.ReactNode;
 }
-type VariableSelectorProps = PropTypes$2;
 
-declare const VariableSelector: ({ value, config, onChange, style, readonly, includeSchema, excludeSchema, hasError, triggerRender, }: PropTypes$2) => React$1.JSX.Element;
+declare const VariableSelector: {
+    ({ value, config, onChange, style, readonly, includeSchema, excludeSchema, hasError, triggerRender, }: VariableSelectorProps): React$1.JSX.Element;
+    renderKey: string;
+};
+declare const InjectVariableSelector: React$1.FC<VariableSelectorProps>;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
 
-interface PropTypes$1 {
+interface TypeSelectorProps {
     value?: Partial<IJsonSchema>;
     onChange?: (value?: Partial<IJsonSchema>) => void;
     readonly?: boolean;
@@ -65,7 +68,11 @@ interface PropTypes$1 {
 }
 declare const getTypeSelectValue: (value?: Partial<IJsonSchema>) => string[] | undefined;
 declare const parseTypeSelectValue: (value?: string[]) => Partial<IJsonSchema> | undefined;
-declare function TypeSelector(props: PropTypes$1): React$1.JSX.Element;
+declare function TypeSelector(props: TypeSelectorProps): React$1.JSX.Element;
+declare namespace TypeSelector {
+    var renderKey: string;
+}
+declare const InjectTypeSelector: React$1.FC<TypeSelectorProps>;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -214,6 +221,10 @@ interface PropsType$9 {
     };
 }
 declare function DynamicValueInput({ value, onChange, readonly, style, schema: schemaFromProps, constantProps, }: PropsType$9): React$1.JSX.Element;
+declare namespace DynamicValueInput {
+    var renderKey: string;
+}
+declare const InjectDynamicValueInput: React$1.FC<PropsType$9>;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -650,6 +661,53 @@ declare function formatNewRefToLegacyRef(value: NewFlowRefValueSchema): {
     content: string;
 };
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Creates a material component wrapper with dependency injection support
+ *
+ * This Higher-Order Component (HOC) implements a dynamic component replacement mechanism
+ * for material components. It automatically checks if a custom renderer is registered
+ * in the editor context, using the injected component if available, otherwise
+ * falling back to the default component.
+ *
+ * @example
+ * ```tsx
+ * // 1.Create an injectable material component
+ * const InjectVariableSelector = createInjectMaterial(VariableSelector)
+ *
+ * // 2. Register custom components in editor
+ * // Configure in use-editor-props.tsx:
+ * const editorProps = {
+ *   materials: {
+ *     components: {
+ *       [VariableSelector.renderKey]: YourCustomVariableSelector
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @description
+ * Data flow explanation:
+ * - Register components to FlowRendererRegistry in use-editor-props
+ * - InjectMaterial reads renderers from FlowRendererRegistry
+ * - If registered renderer exists and type is REACT, use injected component
+ * - If not exists or type mismatch, fallback to default component
+ *
+ * @param Component - Default React component
+ * @param params - Optional parameters
+ * @param params.renderKey - Custom render key name, highest priority
+ * @returns Wrapper component with dependency injection support
+ */
+declare function createInjectMaterial<Props>(Component: React$1.FC<Props> & {
+    renderKey?: string;
+}, params?: {
+    renderKey?: string;
+}): React$1.FC<Props>;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
@@ -702,4 +760,4 @@ declare function validateFlowValue(value: IFlowValue | undefined, ctx: Context):
     message: string;
 } | undefined;
 
-export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InputsValues, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };
+export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, 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 };