@flowgram.ai/form-materials 0.5.5 → 0.5.7

package/dist/cjs/components/json-schema-editor/index.js

@@ -33,19 +33,21 @@ const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../type-selector/index.js");
 const external_blur_input_index_js_namespaceObject = require("../blur-input/index.js");
-const external_styles_js_namespaceObject = require("./styles.js");
+const external_icon_js_namespaceObject = require("./icon.js");
 const external_hooks_js_namespaceObject = require("./hooks.js");
 const external_default_value_js_namespaceObject = require("./default-value.js");
+require("./styles.css");
 const DEFAULT = {
     type: 'object'
 };
 function JsonSchemaEditor(props) {
     const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
     const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = (0, external_hooks_js_namespaceObject.usePropertiesEdit)(value, onChangeProps);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIContainer, {
-        className: props.className,
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "gedit-m-json-schema-editor-container",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItems, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "gedit-m-json-schema-editor-tree-items",
                 children: propertyList.map((_property)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PropertyEdit, {
                         readonly: readonly,
                         value: _property,
@@ -94,11 +96,10 @@ function PropertyEdit(props) {
     const showCollapse = canAddField && propertyList.length > 0;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItemLeft, {
-                $isLast: $isLast,
-                $showLine: $level > 0,
-                $showCollapse: showCollapse,
-                children: showCollapse && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UICollapseTrigger, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: `gedit-m-json-schema-editor-tree-item-left ${$level > 0 ? 'show-line' : ''} ${$isLast ? 'is-last' : ''} ${showCollapse ? 'show-collapse' : ''}`,
+                children: showCollapse && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "gedit-m-json-schema-editor-collapse-trigger",
                     onClick: ()=>setCollapse((_collapse)=>!_collapse),
                     children: collapse ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconChevronDown, {
                         size: "small"
@@ -107,13 +108,17 @@ function PropertyEdit(props) {
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITreeItemRight, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "gedit-m-json-schema-editor-tree-item-right",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITreeItemMain, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "gedit-m-json-schema-editor-tree-item-main",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIRow, {
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "gedit-m-json-schema-editor-row",
                                 children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIName, {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "gedit-m-json-schema-editor-name",
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blur_input_index_js_namespaceObject.BlurInput, {
                                             disabled: readonly,
                                             placeholder: config?.placeholder ?? editor_namespaceObject.I18n.t('Input Variable Name'),
@@ -122,7 +127,8 @@ function PropertyEdit(props) {
                                             onChange: (value)=>onChange('name', value)
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIType, {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "gedit-m-json-schema-editor-type",
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.InjectTypeSelector, {
                                             value: typeSelectorValue,
                                             readonly: readonly,
@@ -134,14 +140,16 @@ function PropertyEdit(props) {
                                             }
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRequired, {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "gedit-m-json-schema-editor-required",
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Checkbox, {
                                             disabled: readonly,
                                             checked: isPropertyRequired,
                                             onChange: (e)=>onChange('isPropertyRequired', e.target.checked)
                                         })
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIActions, {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                        className: "gedit-m-json-schema-editor-actions",
                                         children: [
                                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.IconButton, {
                                                 disabled: readonly,
@@ -160,7 +168,7 @@ function PropertyEdit(props) {
                                                 disabled: readonly,
                                                 size: "small",
                                                 theme: "borderless",
-                                                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.IconAddChildren, {}),
+                                                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icon_js_namespaceObject.IconAddChildren, {}),
                                                 onClick: ()=>{
                                                     onAddProperty();
                                                     setCollapse(true);
@@ -179,9 +187,11 @@ function PropertyEdit(props) {
                                     })
                                 ]
                             }),
-                            expand && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIExpandDetail, {
+                            expand && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "gedit-m-json-schema-editor-expand-detail",
                                 children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UILabel, {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "gedit-m-json-schema-editor-label",
                                         children: config?.descTitle ?? editor_namespaceObject.I18n.t("Description")
                                     }),
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blur_input_index_js_namespaceObject.BlurInput, {
@@ -193,13 +203,15 @@ function PropertyEdit(props) {
                                     }),
                                     0 === $level && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UILabel, {
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                className: "gedit-m-json-schema-editor-label",
                                                 style: {
                                                     marginTop: 10
                                                 },
                                                 children: config?.defaultValueTitle ?? editor_namespaceObject.I18n.t('Default Value')
                                             }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.DefaultValueWrapper, {
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                className: "gedit-m-json-schema-editor-default-value-wrapper",
                                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_default_value_js_namespaceObject.DefaultValue, {
                                                     value: defaultValue,
                                                     schema: value,
@@ -213,10 +225,10 @@ function PropertyEdit(props) {
                             })
                         ]
                     }),
-                    showCollapse && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UICollapsible, {
-                        $collapse: collapse,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeItems, {
-                            $shrink: true,
+                    showCollapse && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: `gedit-m-json-schema-editor-collapsible ${collapse ? 'collapse' : ''}`,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "gedit-m-json-schema-editor-tree-items shrink",
                             children: propertyList.map((_property, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PropertyEdit, {
                                     readonly: readonly,
                                     value: _property,

package/dist/cjs/components/json-schema-editor/styles.css

@@ -0,0 +1,113 @@
+.gedit-m-json-schema-editor-row {
+  align-items: center;
+  gap: 6px;
+  display: flex;
+}
+
+.gedit-m-json-schema-editor-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-json-schema-editor-expand-detail {
+  flex-direction: column;
+  display: flex;
+}
+
+.gedit-m-json-schema-editor-label {
+  color: #999;
+  margin-bottom: 2px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.gedit-m-json-schema-editor-tree-items {
+  grid-template-columns: auto 1fr;
+  display: grid;
+}
+
+.gedit-m-json-schema-editor-tree-items.shrink {
+  margin-top: 10px;
+  padding-left: 3px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left {
+  grid-column: 1;
+  width: 16px;
+  position: relative;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line:before {
+  content: "";
+  height: var(--line-height, 100%);
+  background: #d9d9d9;
+  width: 1px;
+  display: block;
+  position: absolute;
+  top: -16px;
+  left: -14px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line:after {
+  content: "";
+  width: var(--line-width, 30px);
+  background: #d9d9d9;
+  height: 1px;
+  display: block;
+  position: absolute;
+  top: 8px;
+  left: -14px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.is-last:before {
+  height: 24px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.show-collapse:after {
+  width: 12px;
+}
+
+.gedit-m-json-schema-editor-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.gedit-m-json-schema-editor-tree-item-main {
+  flex-direction: column;
+  gap: 10px;
+  display: flex;
+  position: relative;
+}
+
+.gedit-m-json-schema-editor-collapsible {
+  display: none;
+}
+
+.gedit-m-json-schema-editor-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-json-schema-editor-name {
+  flex-grow: 1;
+}
+
+.gedit-m-json-schema-editor-actions {
+  white-space: nowrap;
+}
+
+.gedit-m-json-schema-editor-default-value-wrapper {
+  margin: 0;
+}
+
+.gedit-m-json-schema-editor-constant-input-wrapper {
+  flex-grow: 1;
+
+  & .semi-tree-select, & .semi-input-number, & .semi-select {
+    width: 100%;
+  }
+}
+

package/dist/cjs/components/prompt-editor/editor.js

@@ -40,23 +40,33 @@ const external_react_namespaceObject = require("react");
 const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
 const preset_prompt_namespaceObject = require("@flowgram.ai/coze-editor/preset-prompt");
 var preset_prompt_default = /*#__PURE__*/ __webpack_require__.n(preset_prompt_namespaceObject);
-const external_styles_js_namespaceObject = require("./styles.js");
 const markdown_js_namespaceObject = require("./extensions/markdown.js");
 var markdown_js_default = /*#__PURE__*/ __webpack_require__.n(markdown_js_namespaceObject);
 const language_support_js_namespaceObject = require("./extensions/language-support.js");
 var language_support_js_default = /*#__PURE__*/ __webpack_require__.n(language_support_js_namespaceObject);
 const jinja_js_namespaceObject = require("./extensions/jinja.js");
 var jinja_js_default = /*#__PURE__*/ __webpack_require__.n(jinja_js_namespaceObject);
+require("./styles.css");
 function PromptEditor(props) {
     const { value, onChange, readonly, placeholder, activeLinePlaceholder, style, hasError, children, disableMarkdownHighlight, options } = props || {};
     const editorRef = (0, external_react_namespaceObject.useRef)(null);
+    const editorValue = String(value?.content || '');
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (editorRef.current?.getValue() !== value?.content) editorRef.current?.setValue(String(value?.content || ''));
+        if (editorRef.current?.getValue() !== editorValue) {
+            const editorView = editorRef.current?.$view;
+            editorView?.dispatch({
+                changes: {
+                    from: 0,
+                    to: editorView?.state.doc.length,
+                    insert: editorValue
+                }
+            });
+        }
     }, [
-        value
+        editorValue
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIContainer, {
-        $hasError: hasError,
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: `gedit-m-prompt-editor-container ${hasError ? 'has-error' : ''}`,
         style: style,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.EditorProvider, {
             children: [
@@ -65,7 +75,7 @@ function PromptEditor(props) {
                         editorRef.current = editor;
                     },
                     plugins: preset_prompt_default(),
-                    defaultValue: String(value?.content),
+                    defaultValue: editorValue,
                     options: {
                         readOnly: readonly,
                         editable: !readonly,

package/dist/cjs/components/prompt-editor/styles.css

@@ -0,0 +1,10 @@
+.gedit-m-prompt-editor-container {
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+}
+
+.gedit-m-prompt-editor-container.has-error {
+  border: 1px solid var(--semi-color-danger-6);
+}
+

package/dist/cjs/components/prompt-editor-with-inputs/index.js

@@ -1,21 +1,5 @@
 "use strict";
-var __webpack_modules__ = {
-    "./editor": function(module) {
-        module.exports = import("./editor.js").then(function(module) {
-            return module;
-        });
-    }
-};
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    return module.exports;
-}
+var __webpack_require__ = {};
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -38,16 +22,22 @@ function __webpack_require__(moduleId) {
     };
 })();
 var __webpack_exports__ = {};
-(()=>{
-    __webpack_require__.r(__webpack_exports__);
-    __webpack_require__.d(__webpack_exports__, {
-        PromptEditorWithInputs: ()=>PromptEditorWithInputs
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PromptEditorWithInputs: ()=>PromptEditorWithInputs
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const index_js_namespaceObject = require("../prompt-editor/index.js");
+const external_coze_editor_extensions_index_js_namespaceObject = require("../coze-editor-extensions/index.js");
+function PromptEditorWithInputs({ inputsValues, ...restProps }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.PromptEditor, {
+        ...restProps,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_coze_editor_extensions_index_js_namespaceObject.EditorInputsTree, {
+            inputsValues: inputsValues
+        })
     });
-    const index_js_namespaceObject = require("../../shared/index.js");
-    const PromptEditorWithInputs = (0, index_js_namespaceObject.lazySuspense)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./editor")).then((module)=>({
-                default: module.PromptEditorWithInputs
-            })));
-})();
+}
 exports.PromptEditorWithInputs = __webpack_exports__.PromptEditorWithInputs;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "PromptEditorWithInputs"

package/dist/cjs/components/prompt-editor-with-variables/index.js

@@ -1,21 +1,5 @@
 "use strict";
-var __webpack_modules__ = {
-    "./editor": function(module) {
-        module.exports = import("./editor.js").then(function(module) {
-            return module;
-        });
-    }
-};
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    return module.exports;
-}
+var __webpack_require__ = {};
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -38,16 +22,23 @@ function __webpack_require__(moduleId) {
     };
 })();
 var __webpack_exports__ = {};
-(()=>{
-    __webpack_require__.r(__webpack_exports__);
-    __webpack_require__.d(__webpack_exports__, {
-        PromptEditorWithVariables: ()=>PromptEditorWithVariables
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PromptEditorWithVariables: ()=>PromptEditorWithVariables
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const index_js_namespaceObject = require("../prompt-editor/index.js");
+const external_coze_editor_extensions_index_js_namespaceObject = require("../coze-editor-extensions/index.js");
+function PromptEditorWithVariables(props) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_js_namespaceObject.PromptEditor, {
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_coze_editor_extensions_index_js_namespaceObject.EditorVariableTree, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_coze_editor_extensions_index_js_namespaceObject.EditorVariableTagInject, {})
+        ]
     });
-    const index_js_namespaceObject = require("../../shared/index.js");
-    const PromptEditorWithVariables = (0, index_js_namespaceObject.lazySuspense)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./editor")).then((module)=>({
-                default: module.PromptEditorWithVariables
-            })));
-})();
+}
 exports.PromptEditorWithVariables = __webpack_exports__.PromptEditorWithVariables;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "PromptEditorWithVariables"

package/dist/cjs/components/variable-selector/context.js

@@ -32,11 +32,15 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const VariableSelectorContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({});
 const useVariableSelectorContext = ()=>(0, external_react_namespaceObject.useContext)(VariableSelectorContext);
-const VariableSelectorProvider = ({ children, skipVariable })=>{
+const VariableSelectorProvider = ({ children, skipVariable, includeSchema, excludeSchema })=>{
     const context = (0, external_react_namespaceObject.useMemo)(()=>({
-            skipVariable
+            skipVariable,
+            includeSchema,
+            excludeSchema
         }), [
-        skipVariable
+        skipVariable,
+        includeSchema,
+        excludeSchema
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VariableSelectorContext.Provider, {
         value: context,

package/dist/cjs/components/variable-selector/index.js

@@ -36,8 +36,8 @@ const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../../shared/index.js");
 const external_use_variable_tree_js_namespaceObject = require("./use-variable-tree.js");
-const external_styles_js_namespaceObject = require("./styles.js");
 const external_context_js_namespaceObject = require("./context.js");
+require("./styles.css");
 const VariableSelector = ({ value, config = {}, onChange, style, readonly = false, includeSchema, excludeSchema, hasError, triggerRender })=>{
     const { skipVariable } = (0, external_context_js_namespaceObject.useVariableSelectorContext)();
     const treeData = (0, external_use_variable_tree_js_namespaceObject.useVariableTree)({
@@ -66,21 +66,23 @@ const VariableSelector = ({ value, config = {}, onChange, style, readonly = fals
         return icon;
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeSelect, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.TreeSelect, {
+            className: `gedit-m-variable-selector-tree-select ${hasError ? 'error' : ''}`,
             dropdownMatchSelectWidth: false,
             disabled: readonly,
             treeData: treeData,
             size: "small",
             value: treeValue,
             clearIcon: null,
-            $error: hasError,
             style: style,
             validateStatus: hasError ? 'error' : void 0,
+            dropdownClassName: "gedit-m-variable-selector-dropdown",
             onChange: (_, _config)=>{
                 onChange(_config.keyPath);
             },
             renderSelectedItem: (_option)=>{
-                if (!_option?.keyPath) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITag, {
+                if (!_option?.keyPath) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tag, {
+                    className: "gedit-m-variable-selector-tag",
                     prefixIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconIssueStroked, {}),
                     color: "amber",
                     closable: !readonly,
@@ -88,28 +90,32 @@ const VariableSelector = ({ value, config = {}, onChange, style, readonly = fals
                     children: config?.notFoundContent ?? 'Undefined'
                 });
                 const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
-                const rootTitle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRootTitle, {
+                const rootTitle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "gedit-m-variable-selector-root-title",
                     children: _option.rootMeta?.title ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} ` : null
                 });
                 return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
-                        content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIPopoverContent, {
+                        content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "gedit-m-variable-selector-tag-pop",
                             children: [
                                 rootIcon,
                                 rootTitle,
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "gedit-m-variable-selector-var-name",
                                     children: _option.keyPath.slice(1).join('.')
                                 })
                             ]
                         }),
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITag, {
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(semi_ui_namespaceObject.Tag, {
+                            className: "gedit-m-variable-selector-tag",
                             prefixIcon: rootIcon,
                             closable: !readonly,
                             onClose: ()=>onChange(void 0),
                             children: [
                                 rootTitle,
-                                !_option.isRoot && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
-                                    $inSelector: true,
+                                !_option.isRoot && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "gedit-m-variable-selector-var-name in-selector",
                                     children: _option.label
                                 })
                             ]

package/dist/{esm/components/variable-selector/styles.mjs → cjs/components/variable-selector/styles.css}

@@ -1,43 +1,45 @@
-import styled_components, { css } from "styled-components";
-import { Tag, TreeSelect } from "@douyinfe/semi-ui";
-const UIRootTitle = styled_components.div`
-  margin-right: 4px;
-  min-width: 20px;
-  overflow: hidden;
+.gedit-m-variable-selector-root-title {
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 20px;
   color: var(--semi-color-text-2);
-`;
-const UIVarName = styled_components.div`
+  margin-right: 4px;
   overflow: hidden;
+}
+
+.gedit-m-variable-selector-var-name {
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
+
+  &.in-selector {
+    min-width: 50%;
+  }
+}
 
-  ${({ $inSelector })=>$inSelector && css`
-      min-width: 50%;
-    `}
-`;
-const UITag = styled_components(Tag)`
+.gedit-m-variable-selector-tag {
+  justify-content: flex-start;
+  align-items: center;
   width: 100%;
+  height: 22px;
+  margin: 0;
   display: flex;
-  align-items: center;
-  justify-content: flex-start;
 
   & .semi-tag-content-center {
     justify-content: flex-start;
   }
+}
 
-  &.semi-tag {
-    margin: 0;
-    height: 22px;
+.gedit-m-variable-selector-tree-select {
+  outline: none;
+
+  &.error {
+    outline: 1px solid red;
   }
-`;
-const UITreeSelect = styled_components(TreeSelect)`
-  outline: ${({ $error })=>$error ? '1px solid red' : 'none'};
 
   & .semi-tree-select-selection {
-    padding: 0px;
     height: 22px;
+    padding: 0;
   }
 
   & .semi-tree-select-selection-content {
@@ -47,12 +49,18 @@ const UITreeSelect = styled_components(TreeSelect)`
   & .semi-tree-select-selection-placeholder {
     padding-left: 10px;
   }
-`;
-const UIPopoverContent = styled_components.div`
+}
+
+.gedit-m-variable-selector-tag-pop {
+  white-space: nowrap;
+  justify-content: flex-start;
+  align-items: center;
   padding: 10px;
   display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  white-space: nowrap;
-`;
-export { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName };
+}
+
+.gedit-m-variable-selector-dropdown {
+  max-height: 300px;
+  overflow: auto;
+}
+

package/dist/cjs/components/variable-selector/use-variable-tree.js

@@ -31,8 +31,10 @@ const external_react_namespaceObject = require("react");
 const json_schema_namespaceObject = require("@flowgram.ai/json-schema");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const external_context_js_namespaceObject = require("./context.js");
 function useVariableTree(params) {
-    const { includeSchema, excludeSchema, skipVariable } = params;
+    const context = (0, external_context_js_namespaceObject.useVariableSelectorContext)();
+    const { includeSchema = context.includeSchema, excludeSchema = context.excludeSchema, skipVariable = context.skipVariable } = params;
     const typeManager = (0, json_schema_namespaceObject.useTypeManager)();
     const variables = (0, editor_namespaceObject.useAvailableVariables)();
     const getVariableTypeIcon = (0, external_react_namespaceObject.useCallback)((variable)=>{