@flowgram.ai/form-materials 0.5.5 → 0.5.7

package/dist/cjs/effects/validate-when-variable-sync/index.js

@@ -26,15 +26,15 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     validateWhenVariableSync: ()=>validateWhenVariableSync
 });
-const external_lodash_es_namespaceObject = require("lodash-es");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const validateWhenVariableSync = ({ scope } = {})=>[
         {
             event: editor_namespaceObject.DataEvent.onValueInit,
-            effect: ({ context, form })=>{
+            effect: ({ context, form, name })=>{
                 const nodeScope = 'private' === scope ? (0, editor_namespaceObject.getNodePrivateScope)(context.node) : (0, editor_namespaceObject.getNodeScope)(context.node);
                 const disposable = nodeScope.available.onListOrAnyVarChange(()=>{
-                    if (!(0, external_lodash_es_namespaceObject.isEmpty)(form.state.errors)) form.validate();
+                    const errorKeys = Object.entries(form.state.errors || {}).filter(([_, errors])=>errors?.length > 0).filter(([key])=>key.startsWith(name) || name.startsWith(key)).map(([key])=>key);
+                    if (errorKeys.length > 0) form.validate();
                 });
                 return ()=>disposable.dispose();
             }

package/dist/cjs/shared/inject-material/index.js

@@ -42,7 +42,7 @@ function createInjectMaterial(Component, params) {
     const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
     const InjectComponent = (props)=>{
         const container = (0, editor_namespaceObject.usePlaygroundContainer)();
-        if (!container?.isBound(editor_namespaceObject.FlowRendererRegistry)) return /*#__PURE__*/ external_react_default().createElement(Component, {
+        if (!container?.isBound?.(editor_namespaceObject.FlowRendererRegistry)) return /*#__PURE__*/ external_react_default().createElement(Component, {
             ...props
         });
         const rendererRegistry = container.get(editor_namespaceObject.FlowRendererRegistry);

package/dist/esm/components/batch-outputs/index.mjs

@@ -5,15 +5,17 @@ import { Button, Input } from "@douyinfe/semi-ui";
 import { IconDelete, IconPlus } from "@douyinfe/semi-icons";
 import { useObjectList } from "../../hooks/index.mjs";
 import { InjectVariableSelector } from "../variable-selector/index.mjs";
-import { UIRow, UIRows } from "./styles.mjs";
+import "./styles.css";
 function BatchOutputs(props) {
     const { readonly, style } = props;
     const { list, add, updateKey, updateValue, remove } = useObjectList(props);
     return /*#__PURE__*/ jsxs("div", {
         children: [
-            /*#__PURE__*/ jsx(UIRows, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-batch-outputs-rows",
                 style: style,
-                children: list.map((item)=>/*#__PURE__*/ jsxs(UIRow, {
+                children: list.map((item)=>/*#__PURE__*/ jsxs("div", {
+                        className: "gedit-m-batch-outputs-row",
                         children: [
                             /*#__PURE__*/ jsx(Input, {
                                 style: {

package/dist/esm/components/batch-outputs/styles.css

@@ -0,0 +1,13 @@
+.gedit-m-batch-outputs-rows {
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+  display: flex;
+}
+
+.gedit-m-batch-outputs-row {
+  align-items: center;
+  gap: 5px;
+  display: flex;
+}
+

package/dist/esm/components/blur-input/index.mjs

@@ -15,7 +15,10 @@ function BlurInput(props) {
         onChange: (value)=>{
             setValue(value);
         },
-        onBlur: (e)=>props.onChange?.(value, e)
+        onBlur: (e)=>{
+            props.onChange?.(value, e);
+            props.onBlur?.(e);
+        }
     });
 }
 export { BlurInput };

package/dist/esm/components/code-editor/editor.mjs

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import styled_components, { css } from "styled-components";
 import { ActiveLinePlaceholder, EditorProvider, createRenderer } from "@flowgram.ai/coze-editor/react";
 import preset_code from "@flowgram.ai/coze-editor/preset-code";
 import { EditorView } from "@codemirror/view";
 import { getSuffixByLanguageId } from "./utils.mjs";
+import "./styles.css";
 const OriginCodeEditor = createRenderer(preset_code, [
     EditorView.theme({
         '&.cm-focused': {
@@ -12,23 +12,28 @@ const OriginCodeEditor = createRenderer(preset_code, [
         }
     })
 ]);
-const UIContainer = styled_components.div`
-  ${({ $mini })=>$mini && css`
-      height: 24px;
-    `}
-`;
 function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly, mini }) {
     const editorRef = useRef(null);
+    const editorValue = String(value || '');
     useEffect(()=>{
-        if (editorRef.current?.getValue() !== value) editorRef.current?.setValue(String(value || ''));
+        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__*/ jsx(UIContainer, {
-        $mini: mini,
+    return /*#__PURE__*/ jsx("div", {
+        className: `gedit-m-code-editor-container ${mini ? 'mini' : ''}`,
         children: /*#__PURE__*/ jsx(EditorProvider, {
             children: /*#__PURE__*/ jsxs(OriginCodeEditor, {
-                defaultValue: String(value || ''),
+                defaultValue: editorValue,
                 options: {
                     uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
                     languageId,

package/dist/esm/components/code-editor/styles.css

@@ -0,0 +1,4 @@
+.gedit-m-code-editor-container.mini {
+  height: 24px;
+}
+

package/dist/esm/components/code-editor-mini/index.mjs

@@ -1,13 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import styled_components from "styled-components";
 import { CodeEditor } from "../code-editor/index.mjs";
-const UIMini = styled_components.div`
-  .ͼ1 .cm-content {
-  }
-`;
 function CodeEditorMini(props) {
-    return /*#__PURE__*/ jsx(UIMini, {
+    return /*#__PURE__*/ jsx("div", {
+        className: "gedit-m-code-editor-mini",
         children: /*#__PURE__*/ jsx(CodeEditor, {
             ...props,
             options: {

package/dist/esm/components/condition-context/hooks/use-condition.mjs

@@ -1,8 +1,8 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { I18n } from "@flowgram.ai/editor";
 import { useTypeManager } from "../../../plugins/index.mjs";
 import { useConditionContext } from "../context.mjs";
-function useCondition({ leftSchema, operator, ruleConfig }) {
+function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfig }) {
     const typeManager = useTypeManager();
     const { rules: contextRules, ops: contextOps } = useConditionContext();
     const userRules = useMemo(()=>ruleConfig?.rules || contextRules || {}, [
@@ -35,6 +35,14 @@ function useCondition({ leftSchema, operator, ruleConfig }) {
         rule,
         allOps
     ]);
+    useEffect(()=>{
+        if (!operator || !rule) return;
+        if (!opOptionList.find((item)=>item.value === operator)) onClearOp?.();
+    }, [
+        operator,
+        opOptionList,
+        onClearOp
+    ]);
     const targetSchema = useMemo(()=>{
         const targetType = rule?.[operator || ''] || null;
         if (!targetType) return;
@@ -49,6 +57,14 @@ function useCondition({ leftSchema, operator, ruleConfig }) {
         rule,
         operator
     ]);
+    const prevTargetSchemaRef = useRef(void 0);
+    useEffect(()=>{
+        if (prevTargetSchemaRef.current?.type !== targetSchema?.type) onClearRight?.();
+        prevTargetSchemaRef.current = targetSchema;
+    }, [
+        targetSchema,
+        onClearRight
+    ]);
     const opConfig = useMemo(()=>allOps[operator || ''], [
         operator,
         allOps

package/dist/esm/components/condition-row/index.mjs

@@ -7,12 +7,8 @@ import { IconChevronDownStroked } from "@douyinfe/semi-icons";
 import { InjectVariableSelector } from "../variable-selector/index.mjs";
 import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
 import { useCondition } from "../condition-context/index.mjs";
-import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from "./styles.mjs";
-const defaultRuleConfig = {
-    ops: {},
-    rules: {}
-};
-function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRuleConfig }) {
+import "./styles.css";
+function ConditionRow({ style, value, onChange, readonly, ruleConfig }) {
     const { left, operator, right } = value || {};
     const available = useScopeAvailable();
     const variable = useMemo(()=>{
@@ -32,7 +28,20 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRu
     ]);
     const { rule, opConfig, opOptionList, targetSchema } = useCondition({
         leftSchema,
-        operator
+        operator,
+        ruleConfig,
+        onClearOp () {
+            onChange({
+                ...value,
+                operator: void 0
+            });
+        },
+        onClearRight () {
+            onChange({
+                ...value,
+                right: void 0
+            });
+        }
     });
     const renderOpSelect = ()=>/*#__PURE__*/ jsx(Select, {
             style: {
@@ -56,15 +65,19 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRu
                     })
                 })
         });
-    return /*#__PURE__*/ jsxs(UIContainer, {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "gedit-m-condition-row-container",
         style: style,
         children: [
-            /*#__PURE__*/ jsx(UIOperator, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-condition-row-operator",
                 children: renderOpSelect()
             }),
-            /*#__PURE__*/ jsxs(UIValues, {
+            /*#__PURE__*/ jsxs("div", {
+                className: "gedit-m-condition-row-values",
                 children: [
-                    /*#__PURE__*/ jsx(UILeft, {
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gedit-m-condition-row-left",
                         children: /*#__PURE__*/ jsx(InjectVariableSelector, {
                             readonly: readonly,
                             style: {
@@ -80,7 +93,8 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRu
                                 })
                         })
                     }),
-                    /*#__PURE__*/ jsx(UIRight, {
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gedit-m-condition-row-right",
                         children: targetSchema ? /*#__PURE__*/ jsx(InjectDynamicValueInput, {
                             readonly: readonly || !rule,
                             value: right,

package/dist/esm/components/condition-row/styles.css

@@ -0,0 +1,19 @@
+.gedit-m-condition-row-container {
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.gedit-m-condition-row-left, .gedit-m-condition-row-right {
+  width: 100%;
+}
+
+.gedit-m-condition-row-values {
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+  overflow: hidden;
+}
+

package/dist/esm/components/coze-editor-extensions/extensions/inputs-tree.mjs

@@ -1,12 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { isPlainObject, last } from "lodash-es";
-import { ASTMatch, useScopeAvailable } from "@flowgram.ai/editor";
+import { ASTMatch, useCurrentScope } from "@flowgram.ai/editor";
 import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
 import { Popover, Tree } from "@douyinfe/semi-ui";
 import { FlowValueUtils } from "../../../shared/index.mjs";
 function InputsPicker({ inputsValues, onSelect }) {
-    const available = useScopeAvailable();
+    const scope = useCurrentScope();
     const getArrayDrilldown = (type, depth = 1)=>{
         if (ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
         return {
@@ -41,7 +41,7 @@ function InputsPicker({ inputsValues, onSelect }) {
         const currKey = keyPath.join('.');
         if (FlowValueUtils.isFlowValue(value)) {
             if (FlowValueUtils.isRef(value)) {
-                const variable = available.getByKeyPath(value.content || []);
+                const variable = scope?.available?.getByKeyPath(value.content || []);
                 if (variable) return renderVariable(variable, keyPath);
             }
             return {

package/dist/esm/components/coze-editor-extensions/extensions/variable-tag.mjs

@@ -3,11 +3,11 @@ import { useLayoutEffect } from "react";
 import { isEqual, last } from "lodash-es";
 import { Disposable, DisposableCollection, useCurrentScope } from "@flowgram.ai/editor";
 import { useInjector } from "@flowgram.ai/coze-editor/react";
-import { Popover } from "@douyinfe/semi-ui";
+import { Popover, Tag } from "@douyinfe/semi-ui";
 import { IconIssueStroked } from "@douyinfe/semi-icons";
 import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
 import { polyfillCreateRoot } from "../../../shared/index.mjs";
-import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from "../styles.mjs";
+import "../styles.css";
 class VariableTagWidget extends WidgetType {
     constructor({ keyPath, scope }){
         super(), this.toDispose = new DisposableCollection(), this.renderIcon = (icon)=>{
@@ -25,32 +25,50 @@ class VariableTagWidget extends WidgetType {
         this.scope = scope;
     }
     renderVariable(v) {
-        if (!v) return void this.root.render(/*#__PURE__*/ jsx(UITag, {
-            prefixIcon: /*#__PURE__*/ jsx(IconIssueStroked, {}),
+        if (!v) return void this.root.render(/*#__PURE__*/ jsxs(Tag, {
+            className: "gedit-m-coze-editor-tag",
             color: "amber",
-            children: "Unknown"
+            children: [
+                /*#__PURE__*/ jsx(IconIssueStroked, {
+                    style: {
+                        marginRight: '4px'
+                    }
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    children: "Unknown"
+                })
+            ]
         }));
         const rootField = last(v.parentFields) || v;
         const isRoot = v === rootField;
-        const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
+        const rootTitle = /*#__PURE__*/ jsx("span", {
+            className: "gedit-m-coze-editor-root-title",
             children: rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''
         });
         const rootIcon = this.renderIcon(rootField?.meta.icon);
         this.root.render(/*#__PURE__*/ jsx(Popover, {
-            content: /*#__PURE__*/ jsxs(UIPopoverContent, {
+            content: /*#__PURE__*/ jsxs("div", {
+                className: "gedit-m-coze-editor-popover-content",
                 children: [
                     rootIcon,
                     rootTitle,
-                    /*#__PURE__*/ jsx(UIVarName, {
+                    /*#__PURE__*/ jsx("span", {
+                        className: "gedit-m-coze-editor-var-name",
                         children: v?.keyPath.slice(1).join('.')
                     })
                 ]
             }),
-            children: /*#__PURE__*/ jsxs(UITag, {
-                prefixIcon: rootIcon,
+            children: /*#__PURE__*/ jsxs(Tag, {
+                className: "gedit-m-coze-editor-tag",
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center'
+                },
                 children: [
+                    rootIcon,
                     rootTitle,
-                    !isRoot && /*#__PURE__*/ jsx(UIVarName, {
+                    !isRoot && /*#__PURE__*/ jsx("span", {
+                        className: "gedit-m-coze-editor-var-name",
                         children: v?.key
                     })
                 ]
@@ -63,12 +81,21 @@ class VariableTagWidget extends WidgetType {
         this.toDispose.push(Disposable.create(()=>{
             this.root.unmount();
         }));
-        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
-            this.renderVariable(v);
-        }, {
+        const refresh = ()=>{
+            this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        };
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, refresh, {
+            triggerOnInit: false
+        }));
+        if (this.keyPath?.[0]) this.toDispose.push(this.scope.available.trackByKeyPath([
+            this.keyPath[0]
+        ], refresh, {
+            selector: (curr)=>({
+                    ...curr?.meta
+                }),
             triggerOnInit: false
         }));
-        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        refresh();
         return dom;
     }
     eq(other) {
@@ -83,7 +110,9 @@ class VariableTagWidget extends WidgetType {
 }
 function VariableTagInject() {
     const injector = useInjector();
-    const scope = useCurrentScope();
+    const scope = useCurrentScope({
+        strict: true
+    });
     useLayoutEffect(()=>{
         const atMatcher = new MatchDecorator({
             regexp: /\{\{([^\}\{]+)\}\}/g,

package/dist/esm/components/coze-editor-extensions/styles.css

@@ -0,0 +1,37 @@
+.gedit-m-coze-editor-root-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 20px;
+  color: var(--semi-color-text-2);
+  margin-right: 4px;
+  overflow: hidden;
+}
+
+.gedit-m-coze-editor-var-name {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.gedit-m-coze-editor-tag {
+  justify-content: flex-start;
+  align-items: center;
+  max-width: 300px;
+  display: inline-flex;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+}
+
+.gedit-m-coze-editor-popover-content {
+  justify-content: flex-start;
+  align-items: center;
+  padding: 10px;
+  display: inline-flex;
+}
+

package/dist/esm/components/db-condition-row/index.mjs

@@ -6,12 +6,8 @@ import { IconChevronDownStroked } from "@douyinfe/semi-icons";
 import { useTypeManager } from "../../plugins/index.mjs";
 import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
 import { useCondition } from "../condition-context/index.mjs";
-import { UIContainer, UILeft, UIOperator, UIOptionLabel, UIRight, UISelect, UIValues } from "./styles.mjs";
-const defaultRuleConfig = {
-    ops: {},
-    rules: {}
-};
-function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig = defaultRuleConfig }) {
+import "./styles.css";
+function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig }) {
     const { left, operator, right } = value || {};
     const typeManager = useTypeManager();
     const leftSchema = useMemo(()=>options?.find((item)=>item.value === left)?.schema, [
@@ -21,9 +17,22 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
     const { opConfig, rule, opOptionList, targetSchema } = useCondition({
         leftSchema,
         operator,
-        ruleConfig
+        ruleConfig,
+        onClearOp () {
+            onChange({
+                ...value,
+                operator: void 0
+            });
+        },
+        onClearRight () {
+            onChange({
+                ...value,
+                right: void 0
+            });
+        }
     });
-    const renderDBOptionSelect = ()=>/*#__PURE__*/ jsx(UISelect, {
+    const renderDBOptionSelect = ()=>/*#__PURE__*/ jsx(Select, {
+            className: "gedit-m-db-condition-row-select",
             disabled: readonly,
             size: "small",
             style: {
@@ -35,7 +44,8 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
                     left: v
                 }),
             optionList: options?.map((item)=>({
-                    label: /*#__PURE__*/ jsxs(UIOptionLabel, {
+                    label: /*#__PURE__*/ jsxs("div", {
+                        className: "gedit-m-db-condition-row-option-label",
                         children: [
                             /*#__PURE__*/ jsx(Icon, {
                                 size: "small",
@@ -69,18 +79,23 @@ function DBConditionRow({ style, value, onChange, readonly, options, ruleConfig
                     })
                 })
         });
-    return /*#__PURE__*/ jsxs(UIContainer, {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "gedit-m-db-condition-row-container",
         style: style,
         children: [
-            /*#__PURE__*/ jsx(UIOperator, {
+            /*#__PURE__*/ jsx("div", {
+                className: "gedit-m-db-condition-row-operator",
                 children: renderOpSelect()
             }),
-            /*#__PURE__*/ jsxs(UIValues, {
+            /*#__PURE__*/ jsxs("div", {
+                className: "gedit-m-db-condition-row-values",
                 children: [
-                    /*#__PURE__*/ jsx(UILeft, {
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gedit-m-db-condition-row-left",
                         children: renderDBOptionSelect()
                     }),
-                    /*#__PURE__*/ jsx(UIRight, {
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gedit-m-db-condition-row-right",
                         children: targetSchema ? /*#__PURE__*/ jsx(InjectDynamicValueInput, {
                             readonly: readonly || !rule,
                             value: right,

package/dist/esm/components/db-condition-row/styles.css

@@ -0,0 +1,30 @@
+.gedit-m-db-condition-row-container {
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.gedit-m-db-condition-row-left, .gedit-m-db-condition-row-right {
+  width: 100%;
+}
+
+.gedit-m-db-condition-row-values {
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.gedit-m-db-condition-row-option-label {
+  align-items: center;
+  gap: 10px;
+  display: flex;
+}
+
+.gedit-m-db-condition-row-select {
+  & .semi-select-selection {
+    margin-left: 5px;
+  }
+}
+

package/dist/esm/components/display-inputs-values/index.mjs

@@ -4,11 +4,12 @@ import { isPlainObject } from "lodash-es";
 import { useScopeAvailable } from "@flowgram.ai/editor";
 import { FlowValueUtils } from "../../shared/index.mjs";
 import { DisplayFlowValue } from "../display-flow-value/index.mjs";
-import { DisplayInputsWrapper } from "./styles.mjs";
+import "./styles.css";
 import { DisplaySchemaTag } from "../display-schema-tag/index.mjs";
 function DisplayInputsValues({ value, showIconInTree }) {
     const childEntries = Object.entries(value || {});
-    return /*#__PURE__*/ jsx(DisplayInputsWrapper, {
+    return /*#__PURE__*/ jsx("div", {
+        className: "gedit-m-display-inputs-wrapper",
         children: childEntries.map(([key, value])=>{
             if (FlowValueUtils.isFlowValue(value)) return /*#__PURE__*/ jsx(DisplayFlowValue, {
                 title: key,

package/dist/esm/components/display-inputs-values/styles.css

@@ -0,0 +1,6 @@
+.gedit-m-display-inputs-wrapper {
+  flex-wrap: wrap;
+  gap: 5px;
+  display: flex;
+}
+

package/dist/esm/components/display-outputs/index.mjs

@@ -3,12 +3,12 @@ import { useEffect } from "react";
 import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
 import { useCurrentScope, useRefresh } from "@flowgram.ai/editor";
 import { DisplaySchemaTag } from "../display-schema-tag/index.mjs";
-import { DisplayOutputsWrapper } from "./styles.mjs";
+import "./styles.css";
 function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     const scope = useCurrentScope();
     const refresh = useRefresh();
     useEffect(()=>{
-        if (!displayFromScope) return ()=>null;
+        if (!displayFromScope || !scope) return ()=>null;
         const disposable = scope.output.onListOrAnyVarChange(()=>{
             refresh();
         });
@@ -18,7 +18,7 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     }, [
         displayFromScope
     ]);
-    const properties = displayFromScope ? scope.output.variables?.reduce((acm, curr)=>{
+    const properties = displayFromScope ? (scope?.output.variables || []).reduce((acm, curr)=>{
         acm = {
             ...acm,
             ...JsonSchemaUtils.astToSchema(curr.type)?.properties || {}
@@ -26,7 +26,8 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
         return acm;
     }, {}) : value?.properties || {};
     const childEntries = Object.entries(properties || {});
-    return /*#__PURE__*/ jsx(DisplayOutputsWrapper, {
+    return /*#__PURE__*/ jsx("div", {
+        className: "gedit-m-display-outputs-wrapper",
         children: childEntries.map(([key, schema])=>/*#__PURE__*/ jsx(DisplaySchemaTag, {
                 title: key,
                 value: schema,

package/dist/esm/components/display-outputs/styles.css

@@ -0,0 +1,6 @@
+.gedit-m-display-outputs-wrapper {
+  flex-wrap: wrap;
+  gap: 5px;
+  display: flex;
+}
+