fix(materials): variable-selector dropdown className (#940)

* docs: material story

* fix(materials): max height of dropdown

apps/docs/components/form-materials/components/display-schema-tag.tsx

@@ -21,6 +21,7 @@ export const BasicStory = () => (
         <>
           <FormHeader />
           <DisplaySchemaTag
+            title="Transaction"
             value={{
               type: 'object',
               properties: {

apps/docs/src/en/materials/components/_meta.json

@@ -4,27 +4,26 @@
   "variable-selector",
   "dynamic-value-input",
   "condition-row",
+  "db-condition-row",
+  "condition-context",
   "inputs-values",
-  "code-editor",
-  "json-editor-with-variables",
+  "inputs-values-tree",
+  "prompt-editor",
   "prompt-editor-with-variables",
   "prompt-editor-with-inputs",
-  "assign-row",
-  "assign-rows",
-  "batch-outputs",
-  "batch-variable-selector",
-  "blur-input",
-  "code-editor-mini",
-  "condition-context",
-  "constant-input",
+  "code-editor",
+  "json-editor-with-variables",
+  "sql-editor-with-variables",
   "coze-editor-extensions",
-  "db-condition-row",
+  "constant-input",
+  "display-schema-tag",
+  "display-schema-tree",
   "display-flow-value",
   "display-inputs-values",
   "display-outputs",
-  "display-schema-tag",
-  "display-schema-tree",
-  "inputs-values-tree",
-  "prompt-editor",
-  "sql-editor-with-variables"
+  "assign-row",
+  "assign-rows",
+  "batch-outputs",
+  "batch-variable-selector",
+  "blur-input"
 ]

apps/docs/src/en/materials/components/code-editor-mini.mdx

@@ -1,7 +0,0 @@
-import { SourceCode } from '@theme';
-
-# CodeEditorMini (WIP)
-
-<SourceCode
-  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/code-editor-mini"
-/>

apps/docs/src/en/materials/components/db-condition-row.mdx

@@ -1,4 +1,5 @@
 import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/db-condition-row';
 
 :::warning
 The material has been developed and the documentation is still being improved. Contributions are welcome.
@@ -6,6 +7,67 @@ The material has been developed and the documentation is still being improved. C
 
 # DbConditionRow (WIP)
 
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```typescript pure title="form-meta.tsx"
+import { DBConditionRow } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any | undefined> name="db_condition_row">
+        {({ field }) => (
+          <DBConditionRow
+            options={[
+              {
+                label: 'TransactionID',
+                value: 'transaction_id',
+                schema: { type: 'integer' },
+              },
+              {
+                label: 'Amount',
+                value: 'amount',
+                schema: { type: 'number' },
+              },
+              {
+                label: 'Description',
+                value: 'description',
+                schema: { type: 'string' },
+              },
+              {
+                label: 'Archived',
+                value: 'archived',
+                schema: { type: 'boolean' },
+              },
+              {
+                label: 'CreateTime',
+                value: 'create_time',
+                schema: { type: 'date-time' },
+              },
+            ]}
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## Source Code Guide
+
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/db-condition-row"
-/>
+/>
+
+Use the CLI command to copy the source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/db-condition-row
+```

apps/docs/src/en/materials/components/display-schema-tag.mdx

@@ -1,4 +1,5 @@
 import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/display-schema-tag';
 
 :::warning
 The material has been developed and the documentation is still being improved. Contributions are welcome.
@@ -6,6 +7,61 @@ The material has been developed and the documentation is still being improved. C
 
 # DisplaySchemaTag (WIP)
 
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```typescript pure title="form-meta.tsx"
+import { DisplaySchemaTag } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <DisplaySchemaTag
+        title="Transaction"
+        value={{
+          type: 'object',
+          properties: {
+            transaction_id: { type: 'integer' },
+            amount: { type: 'number' },
+            description: { type: 'string' },
+            archived: { type: 'boolean' },
+            owner: {
+              type: 'object',
+              properties: {
+                id: { type: 'integer' },
+                username: { type: 'string' },
+                friends: {
+                  type: 'array',
+                  items: {
+                    type: 'object',
+                    properties: {
+                      id: { type: 'integer' },
+                      username: { type: 'string' },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        }}
+      />
+    </>
+  ),
+}
+```
+
+## Source Code Guide
+
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tag"
-/>
+/>
+
+Use the CLI command to copy the source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/display-schema-tag
+```

apps/docs/src/en/materials/components/display-schema-tree.mdx

@@ -1,4 +1,5 @@
 import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/display-schema-tree';
 
 :::warning
 The material has been developed and the documentation is still being improved. Contributions are welcome.
@@ -6,6 +7,60 @@ The material has been developed and the documentation is still being improved. C
 
 # DisplaySchemaTree (WIP)
 
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```typescript pure title="form-meta.tsx"
+import { DisplaySchemaTree } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <DisplaySchemaTree
+        value={{
+          type: 'object',
+          properties: {
+            transaction_id: { type: 'integer' },
+            amount: { type: 'number' },
+            description: { type: 'string' },
+            archived: { type: 'boolean' },
+            owner: {
+              type: 'object',
+              properties: {
+                id: { type: 'integer' },
+                username: { type: 'string' },
+                friends: {
+                  type: 'array',
+                  items: {
+                    type: 'object',
+                    properties: {
+                      id: { type: 'integer' },
+                      username: { type: 'string' },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        }}
+      />
+    </>
+  ),
+}
+```
+
+## Source Code Guide
+
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tree"
-/>
+/>
+
+Use the CLI command to copy the source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/display-schema-tree
+```

apps/docs/src/zh/materials/components/_meta.json

@@ -15,15 +15,15 @@
   "json-editor-with-variables",
   "sql-editor-with-variables",
   "coze-editor-extensions",
-  "assign-row",
-  "assign-rows",
-  "batch-outputs",
-  "batch-variable-selector",
-  "blur-input",
   "constant-input",
+  "display-schema-tag",
+  "display-schema-tree",
   "display-flow-value",
   "display-inputs-values",
   "display-outputs",
-  "display-schema-tag",
-  "display-schema-tree"
+  "assign-row",
+  "assign-rows",
+  "batch-outputs",
+  "batch-variable-selector",
+  "blur-input"
 ]

apps/docs/src/zh/materials/components/db-condition-row.mdx

@@ -1,4 +1,5 @@
 import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/db-condition-row';
 
 :::warning
 物料已完成开发，文档还在完善中，欢迎参与贡献
@@ -6,6 +7,67 @@ import { SourceCode } from '@theme';
 
 # DbConditionRow (WIP)
 
+## 示例
+
+### 基础用法
+
+<BasicStory />
+
+```typescript pure title="form-meta.tsx"
+import { DBConditionRow } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any | undefined> name="db_condition_row">
+        {({ field }) => (
+          <DBConditionRow
+            options={[
+              {
+                label: 'TransactionID',
+                value: 'transaction_id',
+                schema: { type: 'integer' },
+              },
+              {
+                label: 'Amount',
+                value: 'amount',
+                schema: { type: 'number' },
+              },
+              {
+                label: 'Description',
+                value: 'description',
+                schema: { type: 'string' },
+              },
+              {
+                label: 'Archived',
+                value: 'archived',
+                schema: { type: 'boolean' },
+              },
+              {
+                label: 'CreateTime',
+                value: 'create_time',
+                schema: { type: 'date-time' },
+              },
+            ]}
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## 源码指南
+
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/db-condition-row"
 />
+
+使用 CLI 命令将源码复制到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/db-condition-row
+```

apps/docs/src/zh/materials/components/display-schema-tag.mdx

@@ -1,4 +1,5 @@
 import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/display-schema-tag';
 
 :::warning
 物料已完成开发，文档还在完善中，欢迎参与贡献
@@ -6,6 +7,61 @@ import { SourceCode } from '@theme';
 
 # DisplaySchemaTag (WIP)
 
+## 示例
+
+### 基础用法
+
+<BasicStory />
+
+```typescript pure title="form-meta.tsx"
+import { DisplaySchemaTag } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <DisplaySchemaTag
+        title="Transaction"
+        value={{
+          type: 'object',
+          properties: {
+            transaction_id: { type: 'integer' },
+            amount: { type: 'number' },
+            description: { type: 'string' },
+            archived: { type: 'boolean' },
+            owner: {
+              type: 'object',
+              properties: {
+                id: { type: 'integer' },
+                username: { type: 'string' },
+                friends: {
+                  type: 'array',
+                  items: {
+                    type: 'object',
+                    properties: {
+                      id: { type: 'integer' },
+                      username: { type: 'string' },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        }}
+      />
+    </>
+  ),
+}
+```
+
+## 源码指南
+
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tag"
 />
+
+使用 CLI 命令将源码复制到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/display-schema-tag
+```

apps/docs/src/zh/materials/components/display-schema-tree.mdx

@@ -1,4 +1,5 @@
 import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/display-schema-tree';
 
 :::warning
 物料已完成开发，文档还在完善中，欢迎参与贡献
@@ -6,6 +7,60 @@ import { SourceCode } from '@theme';
 
 # DisplaySchemaTree (WIP)
 
+## 示例
+
+### 基础用法
+
+<BasicStory />
+
+```typescript pure title="form-meta.tsx"
+import { DisplaySchemaTree } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <DisplaySchemaTree
+        value={{
+          type: 'object',
+          properties: {
+            transaction_id: { type: 'integer' },
+            amount: { type: 'number' },
+            description: { type: 'string' },
+            archived: { type: 'boolean' },
+            owner: {
+              type: 'object',
+              properties: {
+                id: { type: 'integer' },
+                username: { type: 'string' },
+                friends: {
+                  type: 'array',
+                  items: {
+                    type: 'object',
+                    properties: {
+                      id: { type: 'integer' },
+                      username: { type: 'string' },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        }}
+      />
+    </>
+  ),
+}
+```
+
+## 源码指南
+
 <SourceCode
   href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/display-schema-tree"
 />
+
+使用 CLI 命令将源码复制到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/display-schema-tree
+```

packages/materials/form-materials/rslib.config.ts

@@ -13,7 +13,7 @@ type RsbuildConfig = Parameters<typeof defineConfig>[0];
 const commonConfig: Partial<RsbuildConfig> = {
   source: {
     entry: {
-      index: ['./src/**/*.{ts,tsx}'],
+      index: ['./src/**/*.{ts,tsx,css}'],
     },
     exclude: [],
     decorators: {

packages/materials/form-materials/src/components/condition-row/index.tsx

@@ -22,24 +22,16 @@ interface PropTypes {
   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>;
   };
 }
 
-const defaultRuleConfig = {
-  ops: {},
-  rules: {},
-};
-
-export function ConditionRow({
-  style,
-  value,
-  onChange,
-  readonly,
-  ruleConfig = defaultRuleConfig,
-}: PropTypes) {
+export function ConditionRow({ style, value, onChange, readonly, ruleConfig }: PropTypes) {
   const { left, operator, right } = value || {};
 
   const available = useScopeAvailable();
@@ -57,6 +49,7 @@ export function ConditionRow({
   const { rule, opConfig, opOptionList, targetSchema } = useCondition({
     leftSchema,
     operator,
+    ruleConfig,
   });
 
   const renderOpSelect = () => (

packages/materials/form-materials/src/components/db-condition-row/index.tsx

@@ -34,24 +34,22 @@ interface PropTypes {
   style?: React.CSSProperties;
   options?: DBConditionOptionType[];
   readonly?: boolean;
+  /**
+   * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+   */
   ruleConfig?: {
     ops?: ConditionOpConfigs;
     rules?: Record<string, IConditionRule>;
   };
 }
 
-const defaultRuleConfig = {
-  ops: {},
-  rules: {},
-};
-
 export function DBConditionRow({
   style,
   value,
   onChange,
   readonly,
   options,
-  ruleConfig = defaultRuleConfig,
+  ruleConfig,
 }: PropTypes) {
   const { left, operator, right } = value || {};
 

packages/materials/form-materials/src/components/variable-selector/index.tsx

@@ -9,15 +9,16 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
 import { type TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
-import { Popover } from '@douyinfe/semi-ui';
+import { Popover, Tag, TreeSelect } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
 import { createInjectMaterial } from '@/shared';
 
 import { useVariableTree } from './use-variable-tree';
-import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 import { useVariableSelectorContext } from './context';
 
+import './styles.css';
+
 export interface VariableSelectorProps {
   value?: string[];
   config?: {
@@ -75,62 +76,71 @@ export const VariableSelector = ({
 
   return (
     <>
-      <UITreeSelect
+      <TreeSelect
+        className={`flowgram-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' : undefined}
+        dropdownClassName="flowgram-variable-selector-dropdown"
         onChange={(_, _config) => {
           onChange((_config as TreeNodeData).keyPath as string[]);
         }}
         renderSelectedItem={(_option: TreeNodeData) => {
           if (!_option?.keyPath) {
             return (
-              <UITag
+              <Tag
+                className="flowgram-variable-selector-tag"
                 prefixIcon={<IconIssueStroked />}
                 color="amber"
                 closable={!readonly}
                 onClose={() => onChange(undefined)}
               >
                 {config?.notFoundContent ?? 'Undefined'}
-              </UITag>
+              </Tag>
             );
           }
 
           const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
 
           const rootTitle = (
-            <UIRootTitle>
+            <div className="flowgram-variable-selector-root-title">
               {_option.rootMeta?.title
                 ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} `
                 : null}
-            </UIRootTitle>
+            </div>
           );
 
           return (
             <div>
               <Popover
                 content={
-                  <UIPopoverContent>
+                  <div className="flowgram-variable-selector-tag-pop">
                     {rootIcon}
                     {rootTitle}
-                    <UIVarName>{_option.keyPath.slice(1).join('.')}</UIVarName>
-                  </UIPopoverContent>
+                    <div className="flowgram-variable-selector-var-name">
+                      {_option.keyPath.slice(1).join('.')}
+                    </div>
+                  </div>
                 }
               >
-                <UITag
+                <Tag
+                  className="flowgram-variable-selector-tag"
                   prefixIcon={rootIcon}
                   closable={!readonly}
                   onClose={() => onChange(undefined)}
                 >
                   {rootTitle}
-                  {!_option.isRoot && <UIVarName $inSelector>{_option.label}</UIVarName>}
-                </UITag>
+                  {!_option.isRoot && (
+                    <div className="flowgram-variable-selector-var-name in-selector">
+                      {_option.label}
+                    </div>
+                  )}
+                </Tag>
               </Popover>
             </div>
           );

packages/materials/form-materials/src/components/variable-selector/styles.css

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.flowgram-variable-selector-root-title {
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+}
+
+.flowgram-variable-selector-var-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.in-selector {
+    min-width: 50%;
+  }
+}
+
+.flowgram-variable-selector-tag {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  height: 22px;
+
+  .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+}
+
+.flowgram-variable-selector-tree-select {
+  outline: none;
+
+  &.error {
+    outline: 1px solid red;
+  }
+
+  .semi-tree-select-selection {
+    padding: 0px;
+    height: 22px;
+  }
+
+  .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+}
+
+.flowgram-variable-selector-tag-pop {
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+}
+
+.flowgram-variable-selector-dropdown {
+  max-height: 300px;
+  overflow: auto;
+}

packages/materials/form-materials/src/components/variable-selector/styles.tsx

@@ -1,69 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import styled, { css } from 'styled-components';
-import { Tag, TreeSelect } from '@douyinfe/semi-ui';
-
-export const UIRootTitle = styled.div`
-  margin-right: 4px;
-  min-width: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--semi-color-text-2);
-`;
-
-export const UIVarName = styled.div<{ $inSelector?: boolean }>`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  ${({ $inSelector }) =>
-    $inSelector &&
-    css`
-      min-width: 50%;
-    `}
-`;
-
-export const UITag = styled(Tag)`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  & .semi-tag-content-center {
-    justify-content: flex-start;
-  }
-
-  &.semi-tag {
-    margin: 0;
-    height: 22px;
-  }
-`;
-
-export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
-  outline: ${({ $error }) => ($error ? '1px solid red' : 'none')};
-
-  & .semi-tree-select-selection {
-    padding: 0px;
-    height: 22px;
-  }
-
-  & .semi-tree-select-selection-content {
-    width: 100%;
-  }
-
-  & .semi-tree-select-selection-placeholder {
-    padding-left: 10px;
-  }
-`;
-
-export const UIPopoverContent = styled.div`
-  padding: 10px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  white-space: nowrap;
-`;